Google Stitch — UI design from natural language

Google Stitch is a Google Labs tool that turns natural language and reference images into UI designs and front-end code. Think Figma's auto-layout brain plus v0.dev's component generation, with a Google look. Where 14-ai-web-ides covers full-stack app builders, Stitch sits at the design + front-end code layer.

1. Identity

• Site: stitch.withgoogle.com
• Launch: 2025-05 (Google I/O 2025) — Google Labs experiment
• Model: Gemini 2.5 Pro (multimodal — image + NL inputs)
• Output: Figma-compatible designs (.fig export) + HTML / CSS / Tailwind / React
• One-line: "a way to produce consistent UI mockups from a sentence."

2. Inputs

Type	Example
Natural language	"Mobile home screen for a fresh-grocery D2C shop"
Sketch / wireframe	Hand-drawn photo → cleaned digital design
Screenshots	Competitor screen → new design in similar tone
Color tokens	Brand colors → full palette auto-generated
Existing Figma URL	Variations / extensions

3. Core features

3.1 NL → multi-screen (Mode A)

"Todo app — login / list / detail / settings, 4 screens" produces 4 screens in one pass with consistent spacing, color, typography.

3.2 Variations

Auto-generates 5 variants of each screen for A/B comparison without a designer in the room.

3.3 Figma export

Exports .fig files that drop into existing Figma workflows (auto layout, variants, components). Stitch for ideation, Figma for refinement.

3.4 Code export

• HTML / CSS (vanilla)
• Tailwind CSS
• React / Vue / Angular components (post-launch additions)
• Treat output as prototype code — review before production.

3.5 Chat-to-edit

Iterate via chat — "make this card's padding bigger," "change primary to emerald," "add a search icon to the header." Same loop as Cursor/Claude on code, applied to design.

4. Stitch vs v0.dev / Bolt.new / Figma AI

Tool	Output strength	Weakness vs Stitch
v0.dev	shadcn/Tailwind React components	weak at multi-screen design
Bolt.new	Vite/Next full-stack PoC	design quality is prototype-grade
Figma AI / FigJam AI	inside existing Figma	weaker at NL-from-scratch
Lovable	Supabase full-stack	no design phase
Stitch	Figma-compatible + NL + multi-screen + variants	no backend

Stitch is design-first. Code only → v0.dev. Full-stack one-shot → Bolt.new / Lovable. Design mocks → Figma-compatible → Stitch.

5. Use cases

Scenario	Value
Greenfield PoC	Align on a mock before bringing a designer in
Design system draft	Auto-consistent color, type, spacing tokens
Multi-screen wireframes	Validate flow
Client meeting	NL input → mock in seconds → faster decisions
Learning	Compare UX patterns (Card / List / Sheet) by description

6. Caveats

• Labs stage — UI / pricing / policies change often. Keep Figma backups for production paths.
• Free quota — daily generation cap (varies). Upgrade or wait.
• Korean inputs — supported, but some default labels are English; expect cleanup.
• Data / training — free-tier inputs may be used to train. Don't paste internal wireframes you can't share.
• Figma export fidelity — most components convert; some effects don't. Polish in Figma.
• No public API — as of 2026-05, no programmatic API yet.

7. Example flow

[NL prompt]
   "B2B SaaS dashboard — sidebar, 4 KPI cards, a chart, a table"
        ↓
[Stitch multi-screen]
   Dashboard · customers · customer detail · settings
        ↓
[Chat edits]
   "Primary → brand blue", "date filter chip above the chart"
        ↓
[Figma export]
   .fig → designer refines
        ↓
[Code export]
   Tailwind + React → Cursor wires backend, refactors

8. Stitch vs designers

Not a replacement — a fast-mock assistant. People still own consistency, accessibility, brand strategy, and complex motion. Stitch shortens PoC → alignment → polish → dev.

9. Further reading

• AI Web IDEs — Replit · Bolt · v0 · Lovable · AI Studio Build
• AI coding IDEs — desktop
• MCP for Figma
• Google AI Studio
• Gemini API