Google Stitch: Free AI UI Generator with MCP Support for Claude Code and Cursor

Google launched Stitch, a free AI UI generator that produces production-quality HTML/CSS or Tailwind from text prompts in under 60 seconds, with a March 2026 update adding MCP server support for direct integration into Claude Code, Cursor, and Gemini CLI. The tool, powered by Gemini 2.5 Flash and Pro, offers 550 monthly generations and exports to seven frameworks, positioning it as a faster, cheaper alternative to Figma for prototyping and ideation.

Figma charges $15 per seat per month and still requires plugins to export code that usually needs a cleanup pass before it’s usable. Google Stitch generates production-quality HTML/CSS or Tailwind from a text prompt in under 60 seconds — and it’s free. The part that matters most for developers: the March 2026 update shipped an MCP server that plugs Stitch directly into Claude Code, Cursor, and Gemini CLI. Your coding agent can now call it as a tool without you ever leaving your editor. What Google Stitch Is Stitch is a Google Labs experiment available at stitch.withgoogle.com https://stitch.withgoogle.com . Sign in with a Google account and you get a browser-based AI design canvas powered by Gemini 2.5 Flash Standard mode and Gemini 2.5 Pro Experimental mode . Type a prompt, upload a wireframe or screenshot, and Stitch returns a high-fidelity UI design alongside exportable code — typically in under a minute. The free tier gives you 550 generations per month: 350 Standard and 200 Experimental. The May 2026 Google I/O update pushed Stitch beyond single-screen generation. You can now produce up to five interconnected screens at once, useful for mapping complete user flows rather than isolated components. A real-time streaming design agent lets you watch the canvas populate as you type or speak, and multiplayer editing landed for teams that want to iterate together. The MCP Integration This is the piece that elevates Stitch from a browser novelty to something worth adding to a development workflow. Stitch ships an official MCP server built by the Google DevRel team. The setup for Claude Code is a single entry in your MCP config: { "mcpServers": { "stitch": { "command": "npx", "args": "-y", "@ davideast/stitch-mcp", "proxy" } } } Authentication runs through Google Cloud OAuth, not an API key: gcloud auth application-default login For Cursor, open Settings → MCP and add the same server configuration. The source is on the stitch-mcp GitHub repo https://github.com/davideast/stitch-mcp , and Google maintains official MCP setup documentation https://stitch.withgoogle.com/docs/mcp/setup/ . One common gotcha: a .env file in your project root can break the MCP proxy with invalid character errors — move or rename it during setup. With the integration active, the workflow changes in a practical way. Instead of bouncing between your editor and a browser tab, you prompt Claude Code to build a component and it calls Stitch as a tool, returns the design and code, and implements it directly. The design.md file Stitch exports — which packages your design tokens, color palette, and typography — gives your coding agent a stable reference to keep component styles consistent across a session. What It Outputs Stitch exports to seven frameworks: HTML/CSS, Tailwind CSS, Vue.js, Angular, Flutter, SwiftUI, and React/JSX added post-May 2026 . This is a meaningful edge over v0, Vercel’s AI component generator, which outputs React only. Stitch also exports a structured Figma file with proper auto-layouts and named layers for teams that want to take designs back into a traditional handoff workflow. The official Stitch announcement https://developers.googleblog.com/stitch-a-new-way-to-design-uis/ outlines the full integration pipeline. When to Use It — and When Not To Stitch is a fast start, not a finisher. It excels at ideation generating ten concept UIs in the time it takes to open Figma , prototyping user flows across multiple screens, and scaffolding initial component HTML you refine from there. Solo developers and small teams building without a dedicated designer get the most immediate value — you get a credible interface to work from without hours of manual layout work. Where it falls short: pixel-perfect adjustments, complex design systems with governance, and production-ready accessibility. The exported code is well-structured and semantic, but a real accessibility audit will find missing ARIA attributes and spots where inline styles crept in. It is not a replacement for Figma on teams managing large component libraries or needing predictable designer-developer handoff at scale. And as a Google Labs experiment, there is no SLA and no guarantee it stays free after the expected paid tier arrives in Q4 2026. Quick Start - Go to stitch.withgoogle.com https://stitch.withgoogle.com and sign in with your Google account - Type a prompt like “dark-mode analytics dashboard with sidebar nav and data cards” and hit generate - Export your design as HTML/CSS, Tailwind, or React and review the output - For Claude Code or Cursor integration, install the stitch-mcp https://github.com/davideast/stitch-mcp server and run gcloud auth application-default login The Bottom Line Stitch earns a place in a developer’s toolkit specifically because of the MCP integration. Free UI generation is not new — v0, Locofy, and others have been in this space — but Stitch is the first design tool to connect directly to your coding agent as a native tool. The closed-loop workflow reduces context switching on UI work, which is a real productivity gain. The code quality is a starting point, not a shipping point, but that’s the right expectation. At zero cost, the barrier to finding out if it works for your project is as low as it gets.