Artificial Intelligence

The AI Design Workflow Is Not a Single Tool: A Full Breakdown of Figma MCP, Claude Design, Codex, and Stitch

By Shockang · Jun 26, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

For Western developers and designers building with AI, this framework is the difference between a demo that looks good and a production system that holds up. The core lesson is that AI amplifies skill but doesn't replace judgment—understanding the cost-quality curve of each tool and the engineering discipline of separating data channels (MCP) from operation scripts (Skills) is what separates teams that ship from teams that burn tokens on pretty screenshots.

Summary

The idea that a single AI prompt can batch-produce design drafts is a myth. A producible pipeline requires 4-5 tools working in relay, each with a distinct role: Figma as the structured data source, Stitch for cheap exploration, Claude Design for high-fidelity first drafts, and Claude Code or Codex for code generation. Trying to use any one tool for everything wastes tokens and breaks style consistency.

The key insight is the cost-quality curve. Claude Design delivers the highest visual fidelity but can consume 8% of a monthly quota for a single dashboard. Codex costs 1/3 to 1/4 the tokens but outputs are rougher, needing 2-5px corrections. Stitch is free and fast (15-30 seconds per screen) but is mobile-only and can't learn your design system. Claude Code is the most stable for writing back to Figma's auto-layout structure.

The practical workflow is a 6-step cycle: set up the environment (Figma MCP, CLI tools), explore with Stitch, generate a high-fidelity first draft with Claude Design, collaborate on code with Claude Code and Codex, train the AI on your design system via Skills and Variables, and finally produce the component library. The critical engineering practice is separating 'what AI sees' (MCP) from 'how AI acts' (Skills), and never letting AI build the foundational variable library or basic components itself—those must be hand-crafted by designers.

Takeaways

— AI design requires a 4-5 tool relay, not a single tool. Trying to use one tool for everything wastes tokens and breaks style consistency.

— Figma MCP is the only channel for AI to read Figma file structure. Without it, AI is blind. Skills (like Use, Supply, Audit) teach AI how to operate within that structure.

— Cost structures vary dramatically: Codex consumes 1/3 to 1/4 the tokens of Claude for similar tasks, but with lower fidelity. Claude Design can consume 8% of a monthly quota for a single dashboard.

— Google Stitch is free and fast (15-30 seconds per screen) but is mobile-only and cannot learn your design system. It's for exploration, not delivery.

— The standard 6-step workflow is: Environment → Stitch Exploration → Claude Design First Draft → Claude Code + Codex Code → Train Design System → Final Product.

— Never let AI build the foundational variable library or basic components (Button, Input, Card). These are the 'constitution' and must be hand-crafted by designers. AI is the enforcer, not the legislator.

— Skills are reusable 'tool manuals' that persist across sessions, unlike prompts which are temporary. They are the key to making AI follow team-specific rules.

— Training AI on a design system requires a three-layer structure: Variable Table (what things are), Text Styles (how things read), and Component Grouping (how things combine).

— Hand off from Claude Design to Claude Code is a critical engineering boundary. Claude Design produces a visual draft; Claude Code translates it into structured auto-layout code.

— The 50% rule: If AI's output requires more than 50% manual modification to be usable, the task shouldn't be done by AI.

Conclusions

The most common failure mode is treating AI design tools as interchangeable alternatives rather than a layered stack. Each tool has a specific role—data layer (Figma), exploration layer (Stitch), high-fidelity layer (Claude Design), code layer (Claude Code/Codex)—and mixing them up is the fastest way to waste budget.

The real bottleneck isn't model capability but the engineering discipline of separating 'what AI sees' (MCP) from 'how AI acts' (Skills). Teams that skip this separation end up with AI that 'freestyles' and breaks the design system.

The 50% threshold is a powerful decision gate. It forces teams to distinguish between high-ROI AI use (generating new pages, where AI saves 80% of the work) and negative-ROI use (building variable libraries, where AI creates 60% more work to fix).

The most surprising finding is that specifying a design system in Claude Design's prompt actually reduces output quality. The model's attention is split between 'following rules' and 'making it beautiful', and the default style is already trained on production-grade design languages.

The Skills ecosystem is currently fragmented—Claude and Codex use different file paths and conventions. This is a standardization window; whoever converges the spec first will likely become the de facto standard for AI design tooling.

The 'relay' model (Claude Code for skeleton, Codex for styles) is more efficient than any single model because it allocates the token budget to the model best suited for each task. Mixing contexts in one session causes Skills contamination and degrades both outputs.

Stitch's mobile-first quality gap is a training data distribution problem, not a fundamental limitation. The model has seen far more beautiful mobile settings pages than beautiful BI dashboards. This is a structural bias that will take time to correct.

The handoff from Claude Design to Claude Code is a 'lossy compression' step—structure is preserved, but styles are lost. This is intentional, not a bug. The engineering insight is to treat this as a phased strategy, not a failure.

Training AI on a design system is not a one-time event. Every time a new semantic variable is added or a namespace changes, the Skills file must be updated and regression tests re-run. The Skills file is the design system's API documentation.

The ultimate competitive advantage for a team in 2026 will not be the number of designers, but the depth to which their design system can be understood by AI. A well-maintained Skills repository is the new moat.

Concepts & terms

MCP (Model Context Protocol)

A standardized protocol, led by Anthropic, that allows AI clients to read and write structured data from external sources like Figma files. It provides a 'data channel' for AI to see the current state of a design file.

Skills (in AI design context)

Reusable, persistent 'tool manuals' (usually Markdown files) that teach AI how to correctly use a tool or complete a task. Unlike temporary prompts, Skills are loaded across multiple sessions and can be version-controlled.

Figma Auto Layout

Figma's constraint-based layout system that uses properties like direction, alignment, padding, and item spacing to create responsive designs. It's the key structure that AI tools like Claude Code parse to generate clean flexbox/grid code.

Design Tokens

The smallest, reusable design decisions—colors, spacing, font sizes, corner radii—stored as named variables (e.g., `color/text/primary`). They are the 'atoms' of a design system and the primary way AI can understand and reproduce a brand's visual language.

Atomic Design

A methodology by Brad Frost that breaks UI into five layers: Atoms (single elements), Molecules (combinations), Organisms (functional blocks), Templates (page skeletons), and Pages (final content). This structure helps AI assemble complex UI from known parts.

One-Shot Model (in Claude Design)

A generation model that produces a complete output in a single, non-interruptible pass. Unlike iterative models, it doesn't expose intermediate steps. The discipline is to wait 3-5 minutes and modify the prompt, not the draft, if unsatisfied.

Hand Off (Design to Code)

The critical engineering boundary where a visual design draft (from Claude Design) is translated into structured, code-ready metadata (node tree, variable references, component properties) for a code generation agent (Claude Code).

Variations (in Stitch)

A feature in Google Stitch that generates 4-8 visual variants from a single prompt, differing in layout, density, and color. It's the key to using Stitch for exploration rather than final output.

Token Coverage Rate

A quality metric measuring the percentage of design properties (colors, spacing, fonts) in generated code that reference design tokens (e.g., `var(--color-primary)`) instead of hardcoded values (e.g., `#3B82F6`). A high rate indicates the AI is properly using the design system.

Connector Authorization (Figma MCP)

The explicit OAuth authorization step required in Figma Desktop's Preferences to allow an external AI client (like Claude Code) to read and write Figma files via MCP. It's a common point of failure, often confused with simply installing a plugin.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗