Supercharge your design workflow with AI

AI powered software is “streamlining design” all over the industry. The level of anxiety in the design community is palpable.

Newbies are evaluating alternate careers and experienced designers are creating exit plans. Sure, we love design but many of us can’t afford to go broke due to AI.

The only answer anyone has for us? Vague statements about how designers powered by AI will replace designers who don’t use AI.

We can do better than that. Vagueness is not actionable and anxiety doesn’t come from problems. It comes from lacking concrete solutions.

Action reduces uncertainty. Clarity prompts action. So here are three concrete, rock solid steps you can take towards becoming an AI powered designer:

Imagery
AI is probably better at generating imagery than you are. Research and experience shows that tools like Midjourney or Stable Diffusion can create a much greater variety and number of polished images within a certain time frame than you can.

What AI can't do is curate those outputs, winnow them down, decide which ones fit a coherent creative vision that achieves some specific business aim.

There are two main challenges you'll face when you're integrating these tools into your design workflow:

1. Habit
2. Coherence

The first problem is the fact that you aren't used to using AI in your design work. There's an easy fix to that: Get started with a clear and simple set of exercises. I'll give you those in this article. Once you've trod the path once, it'll be a lot easier to go down it again and again.

The second problem is coherence. How do you create a stylistically coherent set of images that match with one another and fit with your project as a whole?

Decide on a design direction, pick an illustrative style, and convert the hex codes from your UI into named colors that you can use in your prompts. Unfortunately Midjourney does not allow you to use specific color values in your prompts yet.

Once you've done that and you've dialed in an image that closely fits your vision, grab the seed from that image and use it in future prompts to spur additional consistency. To get the seed, react to your Midjourney job with the envelope emoji.

Then append --seed xyz to your prompts going forward to increase your level of prompt coherence.

Now let's get specific. What is this magical exercise that will cut through the noise and help you become an AI powered designer?

Focus on engineering your prompts so the imagery looks consistent, coherent, and evokes a specific style. Don't worry about getting it perfect. Just create something.

You can use ChatGPT to create a prompt for yourself. Ask it to describe a fake app for you that you can make a landing page and an onboarding flow for using AI imagery.

Imagery is the most obvious area for creatives like us to begin using AI. But there are some pretty nifty AI workflow hacks out there as well. And there are more on the way.

Workflow

Diagram is an AI powered UI company that was acquired by Figma last year.

They're going to be a key part of Figma’s AI strategy going forward and getting early exposure to their tool will help you get a jump on the possibilities for an AI driven design workflow.

They have a simple and useful set of tools, so they provide another really easy way for you to start playing with AI in your workflow.

Try the following three tools of theirs:

• Magic layer renaming
• Icon generation
• Text generation

None of these tools are currently perfect. But they'll provide you with a window into what the current state of AI is in UI design today and they'll get you on the road to being an AI powered designer.

Another recommendation: Join the waitlist for Genius when you sign up for Diagram's offerings. Genius is their next gen AI powered design tool that doesn't just create icons or illustrations, but entire UIs from scratch.

One important thing to remember as you beef up your AI toolkit is that workflow hacks are not the biggest barrier to being a fast, productive designer. The biggest blocker is usually the tyranny of the blank page.

If you’re reading this article in order to design faster, you may want to check out my piece on how to never miss design deadlines again where I discuss how to cure blank page syndrome.

AI can help you do what you currently do faster/better or it can help you step outside of narrow disciplinary boundaries and learn entirely new skills.

Code

The age of the unicorn designer is upon us.

If you’re a designer with a small amount of programming knowledge, you can use copilot and chatGPT to help you level up your skills substantially.

I’ve been coding for 7 or 8 years and I’ve found that using AI tools have not just been an exercise in copy/pasting but also in understanding.

I’ll often use AI the first time, investigate how things work, and then be able to use various programming concepts unaided going forward.

Tools like Copilot also paper over a lot of the grunt work involved in coding. How much value are you getting out of generating HTML boilerplate? Or adding imports to files? Or remembering the exact syntax for orchestrating a GSAP animation? Not much.

But I promised you clarity and concreteness so you can gain traction on becoming a cyborg designer, not vague statements about AI.

Keep it simple, you can just use vanilla HTML/CSS if you want but if you know some React then I would use NextJS and Vercel for a host of reasons.

If you're an intermediate or advanced programmer, you won't need much more detailed instruction from here. Using AI, set a time limit of one hour and see how much you're able to code up in that time. If you haven't tried it yet, you'll be surprised by how productive you are.

If you’re new to programming:

• Ask GPT to generate basic HTML for a simple landing page. You can even drop a screenshot of your design as a prompt.
• Ask it to explain the structure and function of all the code to you, line by line.
• Ask it how to generate a simple stylesheet and tell you where to put it/how to link it to your html.
• Ask follow up questions.

Once you’ve completed this exercise, some questions you can ask to go deeper (if you’re a beginner):

• What is the DOM?
• What is DOM manipulation?
• What is the value of frameworks like React and NextJS?
• How does the browser’s rendering engine work?
• In what order are stylesheets processed by the browser?
• How does selector specificity work in CSS?

One final note: AI can definitely get it wrong... but so can people. Most AIs now search the internet and support their answers with real sources. Still, if you're doing something that is sufficiently important (working on a life support system for endangered babies), you should double check your understanding with authoritative sources.

Design is not dead

So there you have it. Three concrete steps you can take to become an AI powered designer right now. Ride the wave and feel the wind in your hair instead of getting slammed into the rocks and lost to the endless abyss. Sounds great, right? Here’s a summary of your plan:

• Create 1 landing page and 3 product illustrations using AI generated imagery.
• Sign up for Diagram’s Genius waitlist and test out Magician’s core features.
• Sign up for copilot and chatGPT. Use them to code up the landing page you designed.

Over the next few months, I’m going to be creating dozens of AI powered designs to push the limits of what is possible.

• I’m going to use midjourney and a dark/ancient tool called photoshop to create tailored imagery that is even more powerful than either alone.
• I’m going to use AI to generate practical, usable, unique inspiration so you don’t have to dig around on Dribbble all day with nothing to show for it.
• I’m going to be playing with turning AI images into 3D models and incorporating them into interactive designs.
• I'm going to create a roadmap to help designers become design engineers using AI, step by step.
• And much, much more.

AI could replace us as designers. It could also help us become more valuable, make more money, and do better work. It's really up to us. Let's get to work.