Step 7 — AI design tools (Stitch · v0 · Figma AI)

Code tools (Cursor, Claude Code) get the spotlight, but design tools are automating just as fast. This step compares NL-to-mock tools so you know which slot suits which job.

Three slots

Slot	What it does	Examples
Design mock (NL → mockup)	NL / images → Figma-compatible design	Stitch, Figma AI
Components (NL → React)	NL → shadcn / Tailwind code	v0.dev
Full-stack (NL → running app)	NL → code + DB + deploy	Bolt.new · Lovable · Replit Agent

Stitch (Google Labs, 2025-05)

• Site: stitch.withgoogle.com
• Gemini 2.5 Pro multimodal — NL + image inputs
• Output: Figma-compatible (.fig) + HTML / CSS / Tailwind / React
• Strengths: multi-screen at once · 5 variants · chat-to-edit
• Weakness: no backend, Labs stage, tight free quota
• Korean input supported (some default labels still English)

Deep dive → Stitch note

v0.dev (Vercel)

• Site: v0.dev
• shadcn/ui + Tailwind CSS React components
• Strength: code is ready to drop in; auto Vercel deploy
• Weakness: weaker at multi-screen design, design-token consistency

Figma AI / FigJam AI

• Lives inside Figma
• Auto layout / variant suggestions / component conversion
• Strength: rides existing workflows
• Weakness: weaker at NL-from-scratch

Scenarios → tools

Scenario	Pick
New-service wireframes	Stitch
Design-system token draft	Stitch
One-off React component	v0.dev
Polishing an existing Figma file	Figma AI
Full-stack PoC	Lovable / Bolt.new
Designer-led polish	Stitch → Figma (human)

Example flow — Stitch → Cursor

1. NL prompt in Stitch — 4 screens
   "Order ops SaaS — sidebar / dashboard KPI / order list / order detail"
2. Chat-to-edit
   "Primary → emerald-500", "Status chips on the order list"
3. Export .fig or React + Tailwind
4. Drop the code into Cursor / Claude Code
5. Wire to backend (FastAPI / Spring Boot), models, APIs
6. Production wiring — auth, CMS, billing — done by humans

Data / training policy

• Stitch — Labs stage; free-tier inputs may be used for training. Avoid pasting internal wireframes.
• v0.dev — use Vercel Pro to opt out.
• Figma AI — follows Figma enterprise policy.

Where this fits in the course

Steps 1–6 cover code-side (Claude Code, MCP, Skills, workflow). This step is a short design-side survey. Deeper reading:

• Stitch note
• AI Web IDEs — comparison
• MCP for Figma
• v0.dev (in the AI Web IDE note)

Try it

1. Generate 4 screens in Stitch (your domain).
2. Pick the best of 5 variants.
3. .fig export → polish in Figma.
4. Tailwind + React export → drop into Cursor, wire props/state.
5. Note the gap between your NL prompt and the result — that's how you learn better prompts.

Next step

End of this course. Roll the design side from Step 7 together with Steps 1–6 (Skills / Subagents / MCP) into a workflow in your day-to-day work. The quality-and-testing course continues from here.