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:

Try it

Generate 4 screens in Stitch (your domain).
Pick the best of 5 variants.
.fig export → polish in Figma.
Tailwind + React export → drop into Cursor, wire props/state.
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.