Let’s be real. It feels like everything we read these days is AI-related, and that can be overwhelming. It genuinely feels like it’s taking over every corner of our lives, sometimes faster than even its creators anticipated. New tools emerge daily while others fade into obscurity, and keeping up can feel exhausting.
But this post is not about complaining. It’s about showing you how to actually leverage AI within your web design workflow, not by mastering every tool out there, but by understanding the strengths and weaknesses of each one. Think of it like any skilled trade: a carpenter does not hammer a nail with a spoon. Every tool has its purpose.
I’ll walk you through how I use AI at every phase, from ideation all the way to handoff and documentation. Let’s get into it.
Phase 1: Research and Market Analysis
Every project starts with research. Depending on the scope, I kick things off with a quick market reconnaissance using Perplexity. What makes it stand out is its ability to blend social signals with web search results, giving you a real-time sense of what people are actually talking about. Use it to understand where your product idea sits in the market, run a competitive analysis, and gauge market reach. Once you’re done, save your findings as a PDF brief to reference throughout the project.
For brainstorming and getting clarity on the direction, I switch to ChatGPT. It’s excellent for thinking out loud and pressure-testing ideas. Worth noting: ChatGPT can also handle market research through its search tool, but Perplexity just feels more purpose-built for that job.
Prompt to use in Perplexity:
I am researching the market for [type of web product]. Please search both web and social sources and give me: a summary of current market trends, the top 3 to 5 competitors and what they do well, any gaps or opportunities in the space, and the general sentiment people have around this type of product. Format the output as a structured brief I can save as a PDF.
Phase 2: Brainstorming and Scope Definition
Once I have initial research in hand, I move into brainstorming with ChatGPT. This is where I define the project scope, the core pages needed, the primary goal of each page, and the overall tone and messaging direction. ChatGPT is great for thinking out loud and asking questions back at you if something is unclear.
Prompt to use in ChatGPT:
I am designing a website for [client/product description]. The target audience is [describe audience]. Based on this, help me define the project scope by suggesting: the core pages needed, the primary goal of each page, the tone and messaging direction, and any features or interactions worth considering. Think out loud and ask me questions if something is unclear.
Phase 3: Content Strategy and Copywriting
Once the scope is defined, it’s time to map out the content. I usually start by building a content outline in ChatGPT, then move over to Claude for the actual copywriting. Claude handles tone and nuance really well. Before writing a single word, I set the conversation tone in Claude. If you’re on the paid plan, you can create a Project and assign a specific brand voice to each client, which keeps your content consistent across the board.
Once the copy is drafted, submit it for approval before touching any visuals. This keeps stakeholders aligned early and saves painful revisions later.
Prompt to use in Claude:
You are writing copy for a [type of website] targeting [audience]. The brand voice is [describe tone: e.g. professional but approachable, bold and direct]. I will give you the page structure section by section. For each section write clear, concise copy that matches the tone, avoids jargon, and drives the reader toward [desired action]. Start with the [Hero / About / Services] section.
Phase 4: Wireframing
With approved content in hand, it’s time to wireframe. I use Relume for this. You can feed it a prompt describing the page you’re designing, set the number of pages and language, and it will auto-generate a layout using your content. Inside Relume you can swap between 2,000+ components to mix and match until the structure feels right.
Once you’re happy, export to Figma and refine the content before sending for client approval. At this stage, no colors, images, or typography decisions are needed. The goal is purely layout, copy, and flow sign-off from all stakeholders.
Phase 5: High-Fidelity Design
Now the real design work begins. If you’re staring at a blank canvas and feeling stuck, Figma Make is a great way to break through. Use it to generate a rough draft of the design direction you have in mind, then copy it into your working file and polish from there.
One thing that will save you serious time: set up a design system in Figma before you start, even if it’s just font styles, brand colors, and button components. It might feel like overhead at first, but it dramatically speeds up both your design and development process. Most modern web builders use global variables for colors and fonts, so having these set up front means a much smoother handoff. If you don’t want to build one from scratch, grab a pre-made web design system and customize it to your needs.
Phase 6: Handoff and Documentation
This is where a lot of designers lose momentum, but it does not have to be painful. Once your hi-fi mockup is approved, use Claude or ChatGPT to generate your developer notes and component documentation. Simply describe the components you built, the interactions, and any responsive behavior, and let AI draft the annotations for you. This keeps your handoff clean and your developer happy.
For asset preparation and spec documentation inside Figma, make sure your design system variables are all named consistently since that directly translates to cleaner code on the dev side.
If you want a deeper look at how to structure your design documentation process, [check out this article](link to article).
Prompt to use in Claude or ChatGPT:
I have finished designing a [type of website] in Figma. Help me write developer handoff notes for the following components: [list components]. For each one include: a short description of what it does, its responsive behavior across desktop, tablet and mobile, any interaction states such as hover, active or disabled, and notes on spacing or typography variables used. Keep the tone technical but easy to follow.
AI Design Workflow at a Glance
| Phase | Tool | Purpose |
|---|---|---|
| Research | Perplexity | Market analysis, competitive research |
| Brainstorming | ChatGPT | Ideation, scope definition |
| Copywriting | Claude | Brand voice, content creation |
| Wireframing | Relume + Figma | Layout structure, stakeholder alignment |
| Hi-Fi Design | Figma + Figma Make | Visual design, design system |
| Handoff | Claude or ChatGPT | Dev notes, component documentation |
Final Thoughts
AI is not here to replace your design skills. It’s here to handle the repetitive, time-consuming parts of your workflow so you can focus on the thinking and the craft. The designers who thrive are not the ones who ignore these tools or fear them. They are the ones who treat AI like any other tool in their kit: understanding what it’s good at, knowing its limits, and picking the right one for the right job.
Every tool mentioned in this post has a specific role. None of them replace your judgment. All of them free up more time for it.