Anyone who has translated a UI design into working frontend code knows the ritual: take a screenshot, describe it to Claude, look up the colors, estimate the spacing, iterate. It works — but it's manual, lossy, and depends entirely on how well you can put an image into words.
The combination of Google Stitch and Claude Code via MCP changes this mechanic. Instead of describing a screenshot to Claude, Claude Code reads the design data directly: colors as hex values, typography as exact numbers, layout as structured HTML. This isn't a promise — it's what the current state of the integration looks like, including its real capabilities and its real limits.
What Google Stitch Is
Google Stitch is an AI design tool from Google Labs that uses Gemini to generate UI designs from text descriptions. You describe what you want — "a SaaS dashboard with a dark sidebar, three stats cards, and an activity table" — and Stitch generates a high-fidelity design including a supporting design system.
What separates Stitch from a simple mockup generator is its output format. Alongside the visual designs, Stitch produces structured outputs: HTML with embedded CSS, design tokens as structured data, and a design.md file that captures the entire design system — colors, typography, spacing, component patterns — in machine-readable Markdown. This format was deliberately built for AI coding agents to consume.
Stitch is accessible through Google Labs and offers 350 free generations per month.
What the MCP Adds
Without the MCP, the workflow is manual: create a design in Stitch, export the HTML or copy the design.md, hand it to Claude Code, iterate. This works and is perfectly adequate for many projects.
The Stitch MCP server package (@_davideast/stitch-mcp) creates a direct API connection between Claude Code and the Stitch platform. Through it, Claude Code can:
- List Stitch projects and available screens
- Fetch design HTML for individual screens
- Download screen screenshots as base64 images
- Assemble a full site from multiple screens into a route structure (
build_site)
The key point: Claude Code can pull this data and translate it directly into code without manual export, copying, or description.
The Workflow in Detail
Step 1: Create a design in Stitch
Open Stitch and describe the UI. Specific prompts work better than vague ones:
A landing page for a B2B SaaS tool:
- Hero section with headline, subline, and two CTA buttons (primary: #3B82F6, ghost)
- Feature grid with 3 columns and icons
- Pricing section with three tiers
- Visual style: clean, professional, generous whitespace
Stitch generates the design in roughly 15 seconds. You can iterate — "make the colors warmer", "move the pricing section up" — and Stitch updates accordingly.
Step 2: Configure the MCP
The MCP installs via npx and requires no global installation. There are two authentication methods:
Option A: API Key (recommended for getting started)
Generate a Stitch API key in Stitch settings and set it as an environment variable. The key does not expire and requires no Google Cloud project.
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["-y", "@_davideast/stitch-mcp", "proxy"],
"env": {
"STITCH_API_KEY": "your-api-key"
}
}
}
}
Option B: OAuth via gcloud (more secure, more setup)
For teams following Google Cloud IAM practices. Tokens expire hourly — the stitch-mcp proxy command handles automatic refresh. Requires a Google Cloud project with the Stitch API enabled.
# One-time setup
gcloud auth login
gcloud config set project YOUR-PROJECT-ID
gcloud beta services mcp enable stitch.googleapis.com --project=YOUR-PROJECT-ID
npx @_davideast/stitch-mcp init
After restarting Claude Code, verify the connection with /mcp — stitch should appear with a healthy status.
Step 3: Translate design into code
With the MCP server active, you can address Claude Code directly:
Connect to my Stitch project "LandingPage" and implement
all screens as a React app with Tailwind CSS. Use the
design system from design.md for consistent colors,
typography, and spacing.
Claude Code calls the available tools — get_screen_code, get_screen_image, build_site — and translates the design into code. For a multi-page project you can assign routes:
Build a complete Astro site from my Stitch project:
- Screen "hero-and-features" → route /
- Screen "pricing" → route /pricing
- Screen "contact" → route /contact
The build_site tool handles the mapping and returns the design HTML per page, which Claude Code then translates into the respective route components.
What It Solves — and What It Doesn't
What works well
The biggest practical gain is consistency over time. Without an explicit design reference, AI code generators tend to drift — slightly different spacing values per component, subtly different color tones, inconsistent font sizes. The design.md file and the direct fetching of design tokens via MCP give Claude Code a single source of truth it can reference throughout a session.
For prototypes and MVPs, the time savings are real. What would otherwise require half a day of design handoff work — documenting colors, measuring spacing, describing components — is reduced to an MCP connection and a prompt.
The DESIGN.md workflow also works well without the MCP: export the design.md from Stitch and hand it directly to Claude Code. This is less automated but simpler to set up, and entirely adequate for single projects.
Where the real limits are
Interactivity isn't in the design. Stitch generates static layouts, not behavioral models. Hover states, animations, validation logic, state management — all of that needs to be specified separately or added in post. The generated code is a well-grounded first draft, not a finished product.
Pixel-perfect accuracy isn't guaranteed. The MCP transfers structured design data — HTML, tokens, screenshot images — but Claude Code's code generation is not deterministic. Small deviations in spacing or font weights happen. For production code, a comparison between the Stitch preview and the generated output is worthwhile.
Google Cloud authentication is the highest barrier to entry. The API key path is straightforward. The OAuth route requires a Google Cloud project, billing activation, and the gcloud CLI — none of it is hard, but enough steps to cost momentum. The npx @_davideast/stitch-mcp init wizard helps, but it remains a setup investment.
For simple projects, direct DESIGN.md export is often faster. The MCP shines for multi-page apps where you want to map screens directly to routes. For a single landing page, the direct export is often less overhead than MCP setup.
Comparison: MCP vs. Direct Export
Both approaches have their place depending on project size and setup:
The Stitch MCP suits multi-page apps with multiple screens, teams that use Stitch regularly, workflows where design and code should stay in sync, and Claude Code power users who already run other MCPs.
Direct DESIGN.md export suits single components or simple landing pages, one-off projects without ongoing design iteration, situations where Google Cloud authentication should be avoided, and users without a Claude Code CLI background.
Framing: What the Design-to-Code Problem Actually Is
It's worth stepping back. The integration effectively solves the transfer problem between design and code — the manual, lossy work of translating design decisions into code instructions. That is real and is substantially reduced by this combination.
What it doesn't solve are the inherent limits of AI-generated frontend code: interaction design, accessibility beyond the obvious, performance optimization for specific contexts, and the final polish that distinguishes a product from a prototype. That last 20% of the work remains human — but the 80% before it gets substantially faster.
For developers who regularly translate designs into code, the MCP is the cleaner solution. For everyone else, the design.md file is a good starting point that answers the core question: can I give Claude Code a clearly structured design specification instead of a screenshot? Yes. And it makes a difference.