Google Stitch: Free AI Tool That Builds App UI From Plain Text

Google Labs shipped a major upgrade to Stitch on March 19, 2026. If you have not tried it yet, here is the short version: it is a free AI tool that turns plain text descriptions into high-fidelity app UIs, interactive prototypes, and production-ready code — and it now connects directly to Claude Code, Gemini CLI, and Cursor via an MCP server.

It is free. It is live at stitch.withgoogle.com. And it just got significantly more useful for developers.

What Stitch Is

Stitch is Google Labs' AI-native design canvas. The premise is simple: describe what you want to build in plain English, and Stitch generates the UI. Not a wireframe, not a mood board — a high-fidelity interface with real components, typography, spacing, and interaction states.

The original Stitch was already capable of this. The March 2026 update turns it from a design generator into a full design platform with collaboration, voice control, multi-screen generation, and developer tooling.

Stitch is powered by Gemini. It sits at stitch.withgoogle.com and requires a Google account. No waitlist, no paid tier — free.

What Changed in the March 2026 Update

Voice Canvas — You can now speak to your canvas. Describe a change ("make the nav sticky and add a dark mode toggle"), and Stitch updates the design in real time while asking clarifying questions if your intent is ambiguous. This is the most significant UX shift: design iteration via voice removes the context-switching between typing prompts and reviewing output.

Vibe Design — Instead of specifying exact components, you describe a business objective or a desired user feeling: "a banking app that feels trustworthy but modern" or "an onboarding flow that feels fast and low-friction." Stitch generates multiple design directions based on that intent, letting you explore broad directions before committing to specifics. The name is a deliberate nod to vibe coding — the same prompt-first workflow applied to design.

Multi-Screen Generation — Stitch now generates up to five screens simultaneously. Give it a user flow ("sign up → onboarding → dashboard → settings"), and it produces all five screens in a single generation, maintaining visual consistency across them. Previously you had to prompt screen by screen.

Interactive Prototypes — Static designs become clickable prototypes instantly. You link screens together by clicking "Stitch," hit Play, and walk through the user journey without exporting to a separate prototyping tool.

DESIGN.md — This is the feature most useful for teams. Stitch can export your design system — colours, typography, component names, spacing rules — as a DESIGN.md file. It is a natural language specification of your visual language, readable by AI coding assistants. Drop it into your repository and your AI tools understand your design system without manual documentation.

MCP Server + SDK — This is the developer-facing headline. Stitch now ships an MCP (Model Context Protocol) server and an SDK that connects it to Claude Code, Gemini CLI, and Cursor. In practice: your AI coding assistant can query your Stitch designs directly. Tell Claude Code "implement the dashboard screen from our Stitch project," and it pulls the design context through the MCP connection without you copying specs manually.

Why This Matters for Developers

Most developer-facing design tools solve one half of the problem. Figma is excellent for design but requires a designer. v0 generates UI code but lacks the design canvas workflow. Stitch is attempting to close both gaps: give developers a design tool that speaks their language (plain text prompts, code export, MCP integration) and give designers a tool that produces working code without a handoff step.

The DESIGN.md and MCP server are the features that make Stitch genuinely interesting for developer workflows — not just for solo projects but for teams where design-to-code handoff is a friction point. When your AI coding assistant can read your design system directly, the gap between "what it should look like" and "what the code produces" shrinks substantially.

The Vibe Design workflow also maps directly to how many developers already work: they have a product intuition ("it should feel clean and fast") but not the visual vocabulary to specify it component by component. Stitch converts that intuition into a starting point.

Stitch vs Existing Tools

vs Figma: Figma requires design knowledge and produces designs, not code. Stitch requires neither and produces both. Figma is still the right choice for complex design systems with many stakeholders. Stitch is the right choice when you need something that works quickly and ships.

vs v0 (Vercel): v0 generates React/Tailwind code from prompts, excellent for production-ready components. Stitch generates designs first, then code — better for projects where the visual exploration phase matters. They are complementary rather than competing: use Stitch for design exploration, v0 for production component generation.

vs Cursor with screenshots: Cursor can implement UI from a screenshot description, but it requires you to have a design first. Stitch with the MCP server means Cursor can read live design context — not a static screenshot — which is more reliable for maintaining consistency across a project.

How to Use It Today

Go to stitch.withgoogle.com. Sign in with a Google account. The interface is a canvas — start with a prompt in the text box. Some prompts that work well:

• "A mobile banking app dashboard showing account balance, recent transactions, and a quick transfer button. Clean, trustworthy, minimal."
• "An onboarding flow for a developer tool: step 1 connect GitHub, step 2 configure project, step 3 invite team. Progress indicator at top."
• "A SaaS settings page with account, billing, integrations, and API keys tabs. Dark theme."

For the MCP connection to Claude Code: install the Stitch SDK (npm install @google/stitch-sdk), configure it in your Claude Code settings, and you can then reference Stitch projects directly in your coding sessions.

The DESIGN.md Workflow

This deserves its own section because it changes how you maintain design consistency across a project.

Once you have a design in Stitch, export it as DESIGN.md. It produces a file like this:

# Design System

## Colors

Primary: #1A73E8 (Google Blue)

Surface: #FFFFFF

On-surface: #202124

## Typography

Heading 1: Google Sans, 24px, weight 500

Body: Roboto, 14px, weight 400

## Components

Button: 36px height, 8px border-radius, 16px horizontal padding

Commit this to your repository. Your AI coding assistant — Claude Code, Copilot, Gemini CLI — can read it as context. When you prompt "add a settings button that matches our design system," it has the exact spec rather than guessing.

Key Takeaways

• Google Labs upgraded Stitch on March 19, 2026 — free AI design tool at stitch.withgoogle.com, no waitlist
• Voice Canvas lets you speak design changes to your canvas in real time
• Vibe Design generates multiple design directions from a business objective or emotional intent ("trustworthy," "fast," "minimal")
• 5 screens at once — describe a full user flow and Stitch generates all screens simultaneously with consistent styling
• MCP server connects Stitch to Claude Code, Gemini CLI, and Cursor — your coding assistant reads live design context, not static screenshots
• DESIGN.md export produces a natural-language design system spec readable by AI coding tools
• Stitch vs v0: Stitch is for design exploration + code export; v0 is for production component generation — use both
• The free tier has no announced limits — Google is prioritising adoption over monetisation at this stage