AI for Designers - P2

How Designers Can Apply AI Across the Design Workflow

Having great AI tools is one thing. Knowing where to use them in your actual day-to-day process is what separates designers who save hours each week from those who play with AI occasionally and call it a day.

This article maps AI tools to each stage of the design process — from research all the way to handoff.

Stage 1: Research & Discovery

Tools: NotebookLM, Perplexity, Claude

Research is one of the most time-consuming parts of design. AI can dramatically compress this phase — not by replacing thinking, but by helping you process information faster.

NotebookLM (by Google) is arguably the most underrated tool in this list. Upload your user interview transcripts, competitor analyses, and brief documents — and NotebookLM turns them into a conversational knowledge base. Ask it "What are the top pain points users mentioned?" and it surfaces patterns from your own data instantly.

Website: notebooklm.google.com · Free

Perplexity functions as an AI-powered search engine that cites every source. Use it for competitive research, industry benchmarks, and quick fact-checking. Unlike Google, it gives synthesized answers — not a list of links to click through.

Website: perplexity.ai · Free · Pro $20/month

Claude (by Anthropic) excels at processing large documents and extracting structured insights. Feed it a 50-page brand guideline and ask: "Summarize the core brand values and list any design constraints mentioned." Done in seconds.

Website: claude.ai · Free · Pro $20/month

Pro tip:
Paste raw user interview notes into Claude and ask it to generate an affinity map grouped by theme. It won't replace your synthesis, but it gives you a first draft to react to — which is always faster than starting from a blank page.

Stage 2: Ideation & Concept Development

Tools: Midjourney, GPT Image 2, Claude, Galileo AI

This is where AI truly shines. Ideation sessions that used to take a full day can now happen in a focused hour.

For visual direction (art-first):
Use Midjourney to generate 10–15 mood board images in different styles before committing to a visual direction. Show clients real imagery, not vague descriptions. This transforms early alignment conversations.

Website: midjourney.com

For conceptual visuals with intent (reasoning-first):
Use GPT Image 2 when you need visuals that communicate why a design works — not just what it looks like. GPT Image 2 is especially strong at translating product goals, UX context, and narrative intent into coherent visual concepts.

It excels at:

• Product hero illustrations tied to user psychology
• Feature explanation visuals
• Early UI concept art grounded in hierarchy and layout logic

If Midjourney helps you explore stylistic possibilities, GPT Image 2 helps you anchor visuals in purpose and meaning.

For UX concepts:
Use Claude to brainstorm user flows, sitemap structures, and feature sets. Prompt it with: "We're designing a mobile app for independent yoga instructors. List 5 different approaches to the onboarding flow, each solving the key friction of getting instructors to publish their first class."

Website: claude.ai · Free · Pro $20/month

Galileo AI specializes in converting concept descriptions directly into UI screens. Describe your app, specify the visual style, and get editable Figma-ready screens in under a minute.

Website: usegalileo.ai · Waitlist / Limited access

Pro tip:
Use AI for divergent thinking (many ideas) and your own judgment for convergent thinking (choosing the right idea). AI generates options — you decide which ones are actually worth pursuing.

Stage 3: Design & Production

Tools: Figma Make, Adobe Firefly, Canva AI, Uizard

This is where most designers first encounter AI — and where it has the clearest time savings.

Figma Make handles UI generation from prompts. Describe a screen and get a working layout that uses your actual design system components. Use it to rapidly produce the first draft of every screen, then refine manually.

Website: figma.com/make

Adobe Firefly removes the most tedious production tasks. Background removal, generative fill for mockup photography, and creating asset variations for different formats — all done in seconds. If you're preparing a presentation with multiple device mockups, Firefly can generate custom background scenes for each one.

Website: firefly.adobe.com

Uizard is excellent for quickly wireframing full user flows. You can upload a rough hand-drawn sketch and it converts it to a digital wireframe. Great for collaborative sessions where not everyone is in Figma yet.

Website: uizard.io · Free · Pro $12/month

Pro tip:
Treat AI-generated UI as a starting point, not a final output. The value is in getting 70% of the way there instantly — your expertise handles the last 30% that actually makes it great.

Stage 4: Content & Copywriting

Tools: Claude, Jasper

Empty wireframes kill presentation quality. AI-generated copy fills them with real, purposeful content from day one.

Claude is the strongest option for UX writing. Give it context: "Write microcopy for an empty state screen in a task management app for remote teams. Tone: friendly, motivating, not condescending. Keep it under 20 words." The results are immediately usable or very close.

Website: claude.ai/new

Jasper is built for marketing-focused copy — product descriptions, landing page headlines, and CTAs. For Graphic Designers creating social media or ad campaigns, Jasper can draft multiple copy directions in the time it takes to open a new document.

Website: jasper.ai · from $49/month

Pro tip:
Always brief the AI with tone of voice, target audience, and word limit. Generic prompts produce generic copy. Specific prompts produce first-draft-ready copy.

Stage 5: Testing & Validation

Tools: UX Pilot, Attention Insight

One of the most exciting applications of AI is predicting how users will interact with your designs — before you run a single usability test.

UX Pilot includes predictive heatmaps that simulate where users will focus attention on any screen. Upload your design and get a visual attention map that reveals potential UX issues early. It also has an automated Design Review Bot that catches accessibility contrast issues and layout inconsistencies.

Website: uxpilot.ai · Free · from $12/month

Attention Insight is purpose-built for predictive eye-tracking. Upload any design — web page, app screen, poster, ad — and get a heatmap showing where the eye goes first. Critical for validating visual hierarchy and CTA placement.

Website: attentioninsight.com · Free trial · from $29/month

Pro tip:
Run a predictive heatmap before every client presentation. It lets you speak confidently about design decisions backed by data, not just instinct.

Stage 6: Handoff & Documentation

Tools: Figma AI, Claude

Handoff documentation is often the most neglected part of the design process — and AI makes it significantly less painful.

Use Figma AI to auto-generate design documentation, summarize component behavior, and organize design tokens. Use Claude to convert your design notes into structured developer specs: paste your rough notes and ask it to format them as a clean technical brief.

Pro tip:
Ask Claude to write the "Design Decisions" section of your handoff doc. Describe what you built and why, and it will turn your bullet points into clear, professional documentation your developers will actually read.

The Full Workflow at a Glance

Up next in Part 3: The real skill unlock — how to write better AI prompts as a designer, so you stop getting mediocre outputs and start getting exactly what you need. → https://shiftasia.com/community/p/a43e1385-2e0a-479d-8a1b-eb2c7990c30e/