Design-to-Code with AI.

Design-to-code tools split into two camps. Generators — Stitch (Google Labs preview), v0, Lovable, Magic Patterns — take a mockup, Figma frame, or prompt and emit a self-contained UI. In-repo agents — Cursor, Claude Code, Codex CLI — read your codebase, reuse your components, and write files where your app actually lives.

The mistake is treating them as interchangeable. Generators optimize for looks good in a sandbox. Repo agents optimize for fits the conventions you already ship. Stitch is a useful Google Labs preview for layout exploration; it is not a substitute for your design system.

A workflow that actually ships:

1. Explore in a generator if you need to see layout options fast.
2. Extract the decisions — spacing rhythm, hierarchy, component boundaries — not the code.
3. Reimplement in-repo with your tokens, your <Button />, your test patterns.
4. Polish with design fluency skills (next chapter) and the merge checklist.

For prompt structure once you're in-repo, see the Prompting for UI Code guide. Generators skip that discipline at your peril.

When design lives in Figma, the Figma MCP server pulls frame structure — spacing, colors, text styles, component instances — directly into your agent's context. That beats a PNG for accuracy and beats retyping specs by hand for speed.

Token cost is roughly 850 tokens per turn. Worth it if you build from Figma weekly; dead weight if designers hand you exports or your system doesn't map to Figma components.

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

A practical Figma-to-code loop:

1. Link the frame. Paste the Figma URL in your agent prompt. Ask it to fetch the node via MCP before writing code.
2. Map, don't mirror. Tell the agent which Figma components correspond to your repo primitives ("Figma Button/Primary → our <Button variant="primary" />").
3. Override with tokens. Figma hex values are reference, not gospel. Instruct the agent to translate colors and spacing to your token file.
4. Verify visually. Playwright MCP screenshot diff or manual check at two breakpoints. Figma MCP gets structure right; edge cases still need eyes.

Full MCP shopping guidance — which servers earn their overhead — is in MCP Servers for Web Devs.

Implement the pricing section from this Figma frame:
  https://www.figma.com/design/ABC123/...?node-id=42-118

Before writing code:
1. Fetch the frame via Figma MCP. List spacing, type scale, and colors you see.
2. Map each Figma component to an existing repo primitive (see AGENTS.md).
3. Translate all colors/spacing to tokens in app/styles/tokens.css — no raw hex.

Output: app/components/PricingSection.tsx
Reuse <Button />, <Card /> from app/components/. Do not create parallel button styles.

Repo agents write code that compiles. They don't automatically write code that looks designed. Two skill frameworks close that gap by giving agents vocabulary for typography, spacing, hierarchy, and modern CSS.

Install them the same way you install any skill — drop into .cursor/skills/, .claude/skills/, or reference from AGENTS.md. They don't replace your tokens file; they make the agent use it better.

Typical sequence after the agent writes a component:

1. Run Impeccable /audit on the new file for spacing and hierarchy issues.
2. Run CSS.dev skills if layout uses flex/grid in non-idiomatic ways.
3. Run your axe test. Design fluency without accessibility is still demo quality.

# Design fluency
- After implementing new UI, run Impeccable /audit on changed files.
- For layout work, apply CSS.dev container-query and subgrid patterns.
- Never introduce raw hex or arbitrary Tailwind values — tokens only.
- Reference component for visual density: app/components/SettingsCard.tsx

Demo-quality UI passes the default state in a narrow viewport. Shippable UI passes a checklist. Run this on every AI-generated component before you approve the PR — whether it came from Stitch, Figma MCP, or a plain repo-agent prompt.

Put the tokens and states blocks in AGENTS.md so every session inherits them. The Prompting for UI Code guide has copy-paste blocks for both.

AI UI checklist:
[ ] Tokens only — grep for [#] and [px] arbitrary values
[ ] States: loading / empty / error / disabled / focus
[ ] Responsive at 320px and 768px
[ ] axe-core zero violations in test file
[ ] No new Button/Input — reused from app/components/
[ ] Matches SettingsCard visual density

What are you starting from? Pick an input type and get a recommended tool sequence plus a sample prompt you can paste into Cursor or Claude Code. Runs entirely in your browser.