AI Design Tools Landscape

Executive Summary

Two or three years ago, a designer opened Figma and did everything inside it — wireframes, high-fidelity screens, prototyping, handoff. That world is gone. AI has splintered design into a multi-tool workflow where each tool owns a different stage of the pipeline, and the designer’s job is knowing which tool to reach for and when [UI 0:53].

The core shift: design has moved from manual pixel-pushing to prompt-and-agent-driven generation. You no longer draw every rectangle — you describe what you want, the AI generates a first draft, and you refine. But this is not “one tool does it all.” The dream tool that flawlessly ingests your design system, prompts-to-design on a canvas, gives Figma-like fine control, and one-click ships production code does not exist yet [UI 1:50]. Instead, the modern stack is:

Google Stitch — free, fast mid-fidelity wireframing for stakeholder alignment
Claude Design — polished high-fidelity first drafts (slow, credit-limited)
Claude / Claude Code — best-in-class code generation, most accurate with Figma properties
Codex (OpenAI) — faster, cheaper iteration (3–4× fewer tokens)
Figma + Figma Make — the hub; push/pull between AI tools, and now a native AI prototyping engine that has caught up dramatically post-Config 2026
Reference/image tools (Mobbin, ChatGPT image generation, Kling, Nano Banana) — feed AI visuals so it gets it right first try

The designer who wins in this landscape is not the one who finds the single best AI tool — it’s the one who orchestrates the stack, trains AI on their design system through reusable skills, and knows where AI helps (complex layouts, widgets, prototyping) and where it hurts (building simple components, defining brand variables).

How Design Tools Evolved with AI

The evolution happened in three phases, compressed into roughly two years:

Phase 1 — Figma as the monopoly (pre-2025). Designers lived inside one tool. Figma handled wireframing, design systems, prototyping, and developer handoff. AI was absent or vestigial.

Phase 2 — LLMs escape the chat box (2025–early 2026). Claude Code and Codex demonstrated that LLMs could generate functional design code — HTML/CSS/React layouts from natural language. Suddenly you could describe a dashboard and get a working prototype. Figma’s own AI features (early Figma Make) were “incredibly underwhelming” — producing generic results, misapplying design-system states, and lagging behind the coding LLMs [UI 5:52]. Designers began leaving Figma to generate designs in Claude/Codex, then pushing results back into Figma for refinement. The Figma MCP protocol was built so external LLMs could read and understand Figma files — a bridge born of necessity [NM 11:09].

Phase 3 — Multi-tool orchestration and Figma’s comeback (mid-2026). The landscape fragmented into specialized tools: Claude Design for high-fi generation, Google Stitch for free mid-fi, Codex for cheap iteration. Simultaneously, Figma fought back. Post-Config 2026, Figma Make was “drastically transformed” — accuracy went from “not at all up to par” to pixel-exact matches, speed dropped from ~10 minutes to under 3, and Figma brought Claude and Codex LLMs inside Figma so designers no longer need to leave [NM 1:25, 2:31, 11:09]. The MCP bridge that was built for external tools became less critical when the LLMs moved indoors.

The throughline: AI is not a tool, it’s a workflow [UI 0:53]. The question shifted from “which tool should I use?” to “which tool for this specific stage of this specific task?” — and the answer changes based on fidelity needs, token budget, and whether you’re generating, iterating, or prototyping.

The AI Design Stack

Tool	Primary Job	Fidelity	Cost/Speed	When to Use
Google Stitch	Mid-fi wireframing & concept exploration	Medium	Free, fast	Early alignment on metrics, data formats, widget layouts
Claude Design	High-fi first drafts, brand systems, decks, videos	High	Slow, credit-limited (separate weekly quota)	When you need a polished, branded result first try
Claude / Claude Code	Code-based design generation, Figma push	High	Token-intensive, best coder	Initial generation, developer handoff, Figma-accurate output
Codex (OpenAI)	Iteration & refinement	High	3–4× fewer tokens, faster	Batch changes on existing designs, token-efficient iteration
Figma + Figma Make	Hub, prototyping, design-system source of truth	Varies	Native (Make included in Figma plan)	Push/pull between tools, pixel-exact prototyping from existing designs
Image/Reference tools	Visual inspiration & first-try accuracy	N/A	Varies	Feed AI screenshots so it reproduces a look instead of guessing

The mental model is a pipeline, not a toolbox: Stitch (align) → Claude Design (polish) → Claude/Codex + Figma (build & iterate) → Figma Make (prototype) → Claude Code (deploy) [UI 28:35].

Tool-by-Tool Breakdown

Claude Design

What it is: Anthropic Labs’ standalone design product (launched April 2026), powered by the Opus 4.7 vision model. You build websites, slide decks, mobile prototypes, and animated videos using natural language. It has its own weekly usage quota, separate from regular Claude or Claude Code [NH 1:01].

Strengths:

Produces senior-level, branded, consistent output from a design system — “everything insanely consistent, branded, and professional” [NH 0:00]
Asks clarifying questions before building (primary user, key workflows, hero screen, aesthetic direction, information density) so the first draft is polished [UI 24:31]
The verify agent uses vision to inspect its own work and auto-fix mistakes per slide/section [NH 3:26]
The tweaks panel lets you toggle cover styles, textures, accents, layouts, and fonts live without re-prompting — a major token saver [NH 31:41]
Can fetch web pages and GitHub URLs to pull in catalog components (Hyperframes, 21st.dev) [NH 1:16:03]
Design systems built inside it become a reusable “design.md” spec exportable as ZIP/PDF/HTML, shareable across team and hand-off to Claude Code, Canva, or ChatGPT [NH 7:18]

Limits:

Slow and expensive — one dashboard took ~8% of weekly usage; two prompts hit 15% [UI 25:42, 27:55]
Doesn’t feel like a design tool — can’t rearrange layouts like Figma; you edit items individually or leave comments for manual changes. Static for larger layout changes [UI 29:50]
Design-system import is not production-ready — misses variants, ghost/danger names, H3/H5/H6, body large/medium [UI 42:22]
Historically bad with logos — tends to subtly alter uploaded PNGs; requires explicit instruction to keep them as-is [NH 14:48]
Long threads pollute context and burn quota — a banner warns “start a new chat to save 110,000 tokens” [NH 1:14:42]
Multi-change mega-prompts only execute one or two changes well; iterate one feature at a time [NH 1:19:03]

Best use: Polished high-fidelity first drafts when you have a refined concept doc and design system ready. Brainstorm in regular Claude first (cheaper), then bring the plan in. Use Opus 4.7 for planning/first build, drop to Sonnet/Haiku for tweaks to stretch the quota [NH 24:32, 8:24].

Figma / Figma Make

What it is: Figma remains the industry hub for design files, design systems, and now AI prototyping via Figma Make. Post-Config 2026, Make was transformed: accuracy improved from “not at all up to par” (on par with Lovable) to pixel-exact matches, speed dropped from ~10 minutes to under 3, and Figma brought Claude and Codex LLMs inside the platform [NM 1:25, 2:31, 11:09].

Strengths:

Pixel-exact prototyping from existing designs — “Send to Figma Make” with a simple prompt (“Create an interactive prototype for my workflow”) produces an exact match in under 3 minutes [NM 11:45, 13:05]
Lives inside the Figma ecosystem — direct access to your files, images, and elements; external tools (Claude/Codex) miss things [NM 3:04]
Skills are portable .md files — import ones you built in Claude/Codex (design critique, heuristics, brand rules, “AI slop” prevention) [NM 5:17]
Connectors — feed a Jira ticket, GitHub, Slack, or Confluence context as your entry point [NM 4:43]
Model choice by task — GPT 5.6 for accurate recreation/token efficiency, Claude Opus 4.8 for creative/unique output. “It’s not about which model is better, it depends on the task” [NM 7:44]
Make kits — build from Figma library styles or npm packages for design-system accuracy [NM 8:09]
Dictate mode — speak your design thoughts and let Make transcribe and generate [NM 8:36]
Beta: local code editing — clone a GitHub repo, edit the live app visually (move elements, change text/images), see every change as an apply-able action, and commit back to the repo. Bridges designer/developer gap [NM 3:16, 18:10]
Plan mode for output intended as development code [NM 6:40]
Share via live link (not downloaded HTML) — easy stakeholder/user sharing [NM 21:04]

Limits:

Figma’s broader AI (outside Make) is still “incredibly underwhelming” — design-system sync misapplies states (e.g., error states everywhere), generic results [UI 5:52]
Make’s accuracy advantage applies when designs already live in Figma — if you’re starting from scratch, Claude Design or Stitch may be better entry points
Codex inside Figma can misunderstand prompts — in one test it edited the Figma file directly instead of building a prototype [NM 15:48]
The local-code beta is not for everyone — best for smaller companies where designers want to touch code [NM 19:46]

Best use: When your designs already live in Figma and you need to prototype, iterate, or hand off. You no longer need to leave Figma to get AI-generated prototypes [NM 20:31]. Also the hub for push/pull between Claude and Codex — generate in one, push to Figma, pull into the other [UI 33:57].

Codex (OpenAI)

What it is: OpenAI’s coding agent, comparable to Claude Code. Both generate design code, but with key tradeoffs.

Strengths:

3–4× fewer tokens for the same work as Claude — an experiment showed Codex completing identical changes in 4 min/17K tokens vs Claude’s 12 min/38K tokens [UI 8:02]
Faster iteration on existing designs
GPT 5.6 model is excellent at accurate recreation and token efficiency [NM 7:23]

Limits:

Weaker out-of-the-box design output compared to Claude [UI 7:43]
Less accurate with Figma attributes — worse at auto-layout and responsive properties (fill, hug) when pushing to Figma [UI 8:34]
Developers prefer Claude Code over Codex; one designer’s Codex output had to be redone in Claude [UI 7:43]
Can misunderstand context — in Nehmat’s test, Codex edited the Figma file directly instead of building an HTML prototype [NM 15:48]

Best use: Batch iteration and refinement after initial generation in Claude. Start in Claude (better output, more Figma-accurate), push to Figma, pull into Codex for cheaper/faster iteration, then bring back to Claude to finalize for developers [UI 38:38]. For small tweaks (one color, two moved items), stay in Claude — the Figma→Codex round-trip isn’t worth the tokens [UI 39:52].

Google Stitch

What it is: Google’s free (beta) AI design tool for generating wireframes and screens from prompts.

Strengths:

Free — no token costs, no credit limits [UI 16:31]
Fast iteration with “generate variations” (refining/exploring/reimagining) and vary-by-screen/element controls [UI 19:59]
Mobile designs are strong — clean, polished output [UI 17:36]
Great for internal stakeholder alignment on metrics, data formats, charts, and widget layouts before investing in high-fi [UI 22:05]

Limits:

Desktop/web designs are “way worse” and clearly AI-generated [UI 17:36]
Hit-or-miss quality — it’s in beta [UI 17:36]
Cannot be trained on your design system yet [UI 16:31]
Not production-level — don’t show to clients [UI 21:26]

Best use: Early-stage mid-fi concept exploration. Run the same prompt in Stitch to align on data/formats/charts with stakeholders, then feed those specifics into your Claude Design prompt to reduce edits and get it right first try [UI 28:35].

Paper / Image & Reference Tools

What it is: A category of visual inspiration and image-generation tools that feed AI reference material so it produces accurate first-try results instead of guessing.

Tools in this category:

Mobbin — massive repository of real app screens/flows; screenshot examples you like and drag them into Claude Code with your skills [UI 1:16:03]
ChatGPT GPT-5.5 image generation — drop a screenshot into ChatGPT, ask for “alternate options of a screen like this,” download a result, then have Claude Code “tweak the design to match” so it isn’t a one-to-one copy. Included in the ChatGPT plan; most designers don’t know about it [UI 1:22:52]
Kling — image-to-video animation (e.g., logo hand-draw effect) [NH 41:11]
SeeDance 2.0 (key.ai) — animate a still frame into a background video [NH 1:26:13]
Nano Banana 2 (key.ai) — image generation for hero backgrounds [NH 1:25:55]
MotionSites.ai, godly.website, awwwards — design inspiration sites [NH 51:52, 52:25, 52:30]
21st.dev — component library for pulling individual animated elements into your site [NH 52:37]

Strength: “AI always works better from visuals” [UI 1:15:09]. Telling AI “make it clean/minimalistic” is like telling a kitchen builder “I want it dark” — they guess. Providing reference screenshots lets AI reproduce the look first try, saving tokens on back-and-forth [UI 1:15:09]. Provide multiple examples so AI finds synergies rather than copying one design [UI 1:19:38].

Best use: Before any generation step, gather 2–3 reference screenshots. Drag them into Claude/Claude Code alongside your skills and prompt: “using the reference example attached along with the variables, type styles, and component skills, build a page like this” [UI 1:16:48].

How the Tools Fit Together (Workflow)

The modern AI design workflow is a staged pipeline with Figma as the hub:

Stage 1 — Ideation (regular Claude, not Claude Design) Brainstorm the brand concept, product, audience, positioning, voice/tone, and visual identity in regular Claude. Output a markdown concept doc. This is cheap and saves your Claude Design quota [NH 8:24]. If you need stakeholder alignment on data formats and widget layouts, run parallel prompts in Google Stitch (free) to generate mid-fi wireframes [UI 22:05].

Stage 2 — Design System (Claude Design or Figma) Build ONE design system first — it encodes logo, colors, typography, buttons, cards, spacing, and components. This is the highest-leverage move; everything you later build will be on-brand [NH 5:44]. In Claude Design, feed it the concept doc + logo. In Figma, build it manually (recommended — see Caveats). The design system becomes your “design.md” spec for every future build [NH 16:01].

Stage 3 — High-Fi Generation (Claude Design or Claude Code) For polished first drafts, use Claude Design with the design system attached — answer its clarifying questions for a great first result [UI 24:31]. For code-based generation, use Claude Code with Figma MCP + skills connected — it produces the best out-of-the-box output and is most accurate with Figma attributes [UI 7:43, 8:34]. Always attach reference screenshots (Mobbin) for first-try accuracy [UI 1:16:48].

Stage 4 — Iteration (Codex via Figma, or Figma Make) Push the design to Figma, make styling/layout tweaks, then pull into Codex for cheaper/faster iteration (3–4× fewer tokens) [UI 38:38]. For batch changes across a full app, the Figma→Codex round-trip is worth it; for small tweaks, stay in Claude [UI 39:52]. Alternatively, if your designs are already in Figma, use Figma Make to prototype directly — pixel-exact in under 3 minutes with a simple prompt [NM 11:45].

Stage 5 — Prototyping & Review (Figma Make) “Send to Figma Make” from your designed screens. Use the comment/annotate feature for element-level review. Share via live link with stakeholders and users [NM 21:04]. Use the beta local-code feature to visually edit a cloned repo and commit back — bridging design and development [NM 18:10].

Stage 6 — Deployment (Claude Code → GitHub → Vercel) When Claude Design quota runs out, export the project as ZIP, open in Claude Code, push to GitHub, deploy on Vercel [NH 1:41:46]. Verify on localhost first, check mobile view via F12 (Claude doesn’t auto-optimize mobile), and rename to index.html if Vercel 404s on the root path [NH 1:46:52].

Training layer (parallel, ongoing): Build reusable Claude/Codex skills (markdown files) that teach AI your design system — variables, type styles, components. Train in staged order: variables → type styles → components, then use AI for complex layouts/widgets [UI 58:35]. Sync skills between Claude and Codex by packaging them into zips and importing on both sides [UI 1:14:24]. In Figma Make, import these same .md skills directly [NM 5:17].

Ideation          Design System       High-Fi Gen         Iteration           Prototype         Deploy
(regular Claude)  (Claude Design /    (Claude Design or   (Codex via Figma    (Figma Make)      (Claude Code →
                  Figma manual)       Claude Code + MCP)  or Figma Make)                        GitHub → Vercel)
     │                  │                    │                    │                    │                │
     │                  │                    └─── Figma (hub) ────┘                    │                │
     │                  │                         ↕  ↕                              │                │
     │                  └── Skills (.md) ───────────────────────────────────────────┘                │
     │                            (variables, type styles, components — synced across tools)          │
     └── Google Stitch (free mid-fi for stakeholder alignment)                                      │
                                                                                          ←──────┘

Actionable Checklist for Our Designer

Set up the stack

Install Claude (desktop app preferred) and Claude Design — note they have separate weekly quotas [NH 1:01]
Install Codex (OpenAI) for cheaper iteration [UI 7:15]
Get a Google account for Google Stitch (free) [UI 7:15]
Install the Figma MCP server guide (bulk zip from GitHub — contains all sub-skills) [UI 10:47]
In Claude: Customize → upload plugin (drag the zip). Then Connectors → Install → Connect → sign in to Figma in browser [UI 12:29, 13:33]
Install individual Figma skills in Codex (Skills → search “Figma”) [UI 14:22]
Install “Supply design system” and “Audit design system” skills [UI 11:25, 11:53]

Adopt the workflow

Train AI on your design system

Build variables yourself (don’t ask AI — it hallucinates usage cases) [UI 1:00:29]
Use a three-tier variable architecture: Brand (raw hex), Alias (primary/secondary/error), Map (surface/text/icon/border) with modes for dark/second brand [UI 47:14]
Train AI in order: variables → type styles → components. Don’t move to the next until mastery is confirmed [UI 58:35, 1:08:03]
Create a variables skill: table of token/value-light/value-dark/when-used → prompt AI to study it and build a Claude skill [UI 1:00:08]
Create a type-scale skill: prompt AI to study all text styles and their variables [UI 1:04:31]
Group components: form elements → navigation → data display. Build per-group .md files [UI 1:08:03]
Sync skills between Claude and Codex: package into zips, import on both [UI 1:14:24]
Import skills into Figma Make too — they’re just .md files [NM 5:17]

Don’t do these

Don’t use AI to build your design system from scratch — start from a template (free on Figma Community or $50-$ 150 paid) [UI 56:48]
Don’t use AI for simple components (buttons, fields, labels) — it took 6 min/5.4K tokens for a button that still missed variants [UI 53:56]
Don’t show Google Stitch outputs to clients — they’re not production-level [UI 21:26]
Don’t let Codex touch your Figma vector layers directly — use the Figma design agent or “add interactions” AI action [NM 16:34]
Don’t use defaults — “that’s where you get the AI slop” [NH 1:18:29]
Don’t describe — reference. Say “Linear 2023 with higher density” not “make it clean/minimalistic” [NH 1:18:05]

Contradictions / Caveats

1. Is Figma’s AI bad or good? It depends on which feature. UI Collective calls Figma’s AI “incredibly underwhelming” and says Make’s design-system sync misapplies states [UI 5:52]. Nehmat says Figma Make post-Config 2026 is “shockingly more accurate” and pixel-exact [NM 13:05]. Both are right — Figma’s general AI is still weak, but Figma Make specifically was transformed. Don’t write off Figma based on older reviews; don’t assume all Figma AI features match Make’s quality.

2. Claude vs Codex: which is better? The answer is task-dependent. Claude is the better coder, produces better out-of-the-box design, and is more accurate with Figma attributes [UI 7:43, 8:34]. Codex uses 3–4× fewer tokens and is faster [UI 8:02]. GPT 5.6 is better at accurate recreation; Claude Opus 4.8 is better for creative output [NM 7:44]. The consensus across all three videos: use both, start in Claude, iterate in Codex, and pick the model by task, not by brand loyalty.

3. Should you prototype in Figma Make or in Claude/Codex via MCP? Nehmat argues Make is now more accurate because the LLMs are inside Figma with direct file access [NM 11:09]. UI Collective’s workflow predates Make’s improvement and routes through Claude/Codex externally [UI 33:57]. The honest answer: if your designs already live in Figma, Make is now the better prototyping path. If you’re generating from scratch, Claude/Codex are still better entry points. The landscape is shifting toward Figma re-absorbing the workflow.

4. “Just because AI can do it doesn’t mean you should” vs “AI can build your entire brand.” UI Collective strongly cautions against using AI to build design systems, variables, and simple components — you’ll spend more time reverse-engineering AI output than building it yourself [UI 49:16, 53:56]. Nate Herk builds an entire brand (logo, design system, deck, landing page, app, video) in Claude Design [NH throughout]. Resolution: Nate’s approach works for greenfield projects where no design system exists yet. UI Collective’s caution applies to production design systems where precision, variants, and brand guidelines matter. Know which situation you’re in.

5. Claude Design’s design-system import is flawed, but Claude Design’s design-system creation is powerful. Importing an existing design system into Claude Design misses fundamental elements [UI 42:22]. But creating a design system from scratch inside Claude Design produces a reusable, shareable spec [NH 5:44]. Don’t import — create within it, or build manually in Figma and train AI via skills.

6. Token economics are volatile. Claude’s $20/mo plan may be raised or removed [UI 8:19]. Claude Design has a separate weekly quota that resets [NH 1:01]. Codex’s token advantage may change as models update. The specific numbers (4 min/17K vs 12 min/38K) [UI 8:02] are point-in-time snapshots. Treat the economics as directional, not fixed — re-evaluate monthly.

7. The “one tool” dream hasn’t died — it’s just not here yet. UI Collective says the dream tool (ingest design system, prompt-to-canvas, Figma-like control, one-click production code) doesn’t exist “maybe in 3 years” [UI 1:50]. Nehmat’s Figma Make demo suggests Figma is the closest to becoming that tool — but it’s not there yet for full production code. Don’t bet on a single tool; build workflow flexibility now.

Explorer

AI Design Tools Landscape

AI Design Tools Landscape

Executive Summary

How Design Tools Evolved with AI

The AI Design Stack

Tool-by-Tool Breakdown

Claude Design

Figma / Figma Make

Codex (OpenAI)

Google Stitch

Paper / Image & Reference Tools

How the Tools Fit Together (Workflow)

Actionable Checklist for Our Designer

Contradictions / Caveats

Graph View

Backlinks

Table of Contents