AI For Dev

google-stitch

3 min read

Google Stitch

Google’s AI-powered UI design tool. Generates high-fidelity, multi-screen app designs from natural language descriptions or voice input. Originally launched at Google IO 2025 as a limited experiment; the March 2026 update rebuilt the product around “vibe design” — the design equivalent of vibe coding. See google for the company-level entity.

What It Does

  • Voice-to-UI: Describe an app out loud and Stitch generates complete, high-fidelity screens in real time — not wireframes, but finished UIs with real typography, color palettes, and component hierarchy.
  • Multi-screen generation: Produces up to 5 screens simultaneously on an infinite canvas. Drop in images, text, competitor screenshots, and code snippets as reference.
  • Design agent with full context: Holds the entire project across screens and decisions, reasons holistically (like a senior designer tracking a design system), and applies changes consistently across the project.
  • Branch and compare: Version-control design directions, pursue multiple approaches simultaneously, merge pieces you like.
  • Clickable prototypes: Converts any static design to a clickable flow and auto-generates logical next screens based on user interactions.
  • MCP-connected: Readable from Claude Code, ChatGPT, and other coding agents. Google shipped official Claude Code skills (installable playbooks) with the March launch.

The design.md File

The most-overlooked feature: Stitch exports a design.md file — an agent-readable markdown document capturing the full design system: colors, typography, spacing rules, component patterns. Can also be extracted from any public URL.

Your coding agent reads design.md while building, eliminating the Figma export→handoff→misinterpretation cycle. The pipeline: describe objective → Stitch generates UI → coding agent reads design.md → code ships.

Pricing & modes

Two-mode split (per O 2025 walkthrough):

ModeModelGenerations/month
StandardGemini 2.5 Flash350
ExperimentalGemini 2.5 Pro50

Both are free at launch. Paid tiers added later for higher generation caps.

Export options

Stitch can export designs in three forms:

  1. design.md — agent-readable design system file (the most-overlooked output, per Nate B Jones)
  2. Figma-ready file — for designers continuing in Figma
  3. Static HTML/CSS — for direct codebase import

Capability demos

  • Visual mockup replication — paste a screenshot, get a working clone (Airbnb demo)
  • Sketch-to-design — hand-drawn sketch → polished UI
  • Theme controls — colors, corner radius, light/dark appearance
  • Multi-page apps — Daily Stoic app with light/dark mode, multi-page navigation, quote history

Limitations (as of March 2026)

Not yet at a level most senior designers would sign off on for client work. Best used as: (1) MVP-to-market when no designer is available; (2) rapid direction exploration for designer to polish; (3) design system prototyping. Think “magic junior designer,” not “magic designer.”

Why It Matters

Figma stock dropped when Stitch launched because the product makes high-fidelity design accessible from the command line, at zero cost. The design exploration phase that previously cost thousands of dollars now costs nothing.

See Also

Graph View

Backlinks