Designer builds something in Figma. Developer opens it, eyeballs the spacing, guesses the hex codes, rebuilds it by hand. Screen one looks right. Screen ten has a padding value that's off and nobody notices until a user does.
Google Stitch and Claude Code now talk to each other directly. Describe the app, Stitch designs it, Claude Code builds it, and one file keeps both in sync the whole way through. No copy-paste. No re-explaining the color palette for the fifteenth component.
Here's the setup, the file that holds it together, and seven ways to use it.
I. Google Stitch: What It Is and How It Works
Free Google Labs tool at stitch.withgoogle.com. Powered by Gemini. 350 generations a month, just needs a Google account.
Type a description, "dark-mode analytics dashboard with a sidebar and data cards," get a full interface back, layout, typography, spacing, components, all consistent because one model designed all of it in one pass. Upload a screenshot instead and Stitch extracts the pattern and builds from that.
Two features worth knowing. Vibe Design: describe the goal, not the layout, "make it feel premium and minimal," Stitch handles the composition. Voice Canvas: talk to the design out loud, the agent listens, asks a clarifying question, adjusts while you're still mid-sentence.
Once you're happy with what's on the canvas, you export it. That export is where the two tools actually connect.
II. design.md: The File Stitch Hands to Claude Code
Export a finished design from Stitch and you get more than code. You also get a file called design.md. Plain markdown. Color palette, typography, spacing scale, component patterns, edge cases, written as readable English, not JSON or some proprietary token format.
Save it to your project root. Point CLAUDE.md at it:
## Design System
This project uses a design system defined in `design.md` at the
project root. Always refer to this file when generating or
modifying any UI component. Use only colors, fonts, and spacing
values defined there.Every component Claude Code writes after that loads design.md first. Screen ten matches screen one because the source of truth never changes, not because anyone's checking by hand.
The convention forming around this: AGENTS.md tells an agent how to build. design.md tells it how things should look. Two plain files, two jobs.
III. How to Wire Them Together
Stitch ships its own MCP server. Claude Code calls it directly instead of you switching between a browser tab and a terminal, exporting, then dragging a file over.
npx plugins add google-labs-code/stitch-skills
--scope project --target claude-codePrompt Claude Code to build a component, it calls Stitch, gets the design and code back, implements it. Stitch exports to seven frameworks, HTML/CSS, Tailwind, Vue, Angular, Flutter, SwiftUI, React. Whatever you're building in, the export matches.
IV. Seven Real-Life Use Cases
1. Description to working app
Describe it, let Stitch design it, hand it to Claude Code.
Design a landing page for a SaaS product that helps freelancers
track invoices. Clean, minimal, dark blue and white palette,
one hero section, three feature cards, a pricing table.
Export the design.md and the code. Drop both in. Tell Claude Code to wire up the interactions. A simple landing page or dashboard, idea to working code, under 30 minutes.
2. Screenshot to design system
Found an interface you like? Stitch reads images too.
Here's a screenshot of an app I like the visual style of.
Extract the design system, colors, spacing, typography, and
generate a design.md I can apply to my own project.
Not copying the app. Extracting the pattern and applying it to different content.
3. Multi-screen flows that actually match
Stitch generates up to five connected screens in one pass, sharing a design system by construction.
Design a 4-screen onboarding flow for a fitness app: welcome
screen, goal selection, plan preview, confirmation. Keep the
visual language consistent across all four.
Export the flow, hand it to Claude Code with the shared design.md. No seams between screens that got generated separately.
4. Fix drift in something that already exists
UI quietly diverged, one component uses a slightly different blue than another. This is the actual fix, not another manual scroll-through.
Read through my components folder. Compare every color, spacing,
and font value against design.md. Flag every place where a
component doesn't match, and fix them one at a time.Every file checked against the same source. Nothing left to spot by eye.
5. Talk through a change instead of typing it
Voice Canvas. Skip the written revision request.
"Make the cards feel less boxy, more rounded, pull the spacing in a bit." Stitch adjusts in real time, asks a clarifying question if it's unsure instead of guessing.
6. One design, two platforms
Seven export frameworks from the same design means generate once, implement twice.
Export this design as both React for the web app and SwiftUI
for the iOS version. Keep design.md as the shared source of
truth for both.Two Claude Code sessions, one repo each, same design.md. Web and mobile that actually look like the same product.
7. Skip the design step entirely
You don't always need Stitch to generate something. Sometimes you just want your app to feel like Stripe, or Linear, or Airbnb.
There's a free collection of 70-plus design.md files already extracted from real production sites, Stripe, Linear, Notion, Spotify, Apple, Airbnb, and more. Color roles, type hierarchy, component states, spacing, already broken down.
git clone https://github.com/VoltAgent/awesome-design-mdGrab the one closest to the feel you want. Drop it in as design.md.
Build the dashboard using the design system in design.md.
Match the color roles, spacing, and component states exactly.
No generation step. No prompt refining. Someone already did the reverse-engineering.
V. Check Your Work Before You Ship It
Everything above stops once the code is written. Nobody's checking whether what got built actually matches what Stitch designed.
Add a browser automation skill, Playwright MCP is the standard pick, and Claude Code can screenshot the running app and compare it against the original.
Take a screenshot of the app running at localhost:3000. Compare
it against the original Stitch design for this screen. Flag any
visual differences: spacing, color, alignment, font size. Fix
what doesn't match.Design, build, screenshot, compare, correct. Run it once after the build, again any time you touch shared components.
VI. Limitations: Read This Before You Trust the Export
Stitch is still an experimental Google Labs product. No SLA. A paid tier is likely eventually since the free version has no upgrade path today.
The export is clean but a real accessibility audit will still find gaps, missing ARIA attributes, inline styles that shouldn't be there. Treat it as a strong first draft, not a finished product. Pixel-perfect isn't guaranteed either, Stitch gets you 90% of the way fast, the last 10% still takes a human pass.
Worth using anyway. Just don't ship the raw export to real users without checking it.
Seven use cases, one file holding it together, one verification loop most people skip.
If this saves you the next Figma-to-code handoff where something quietly drifts by screen ten, send it to one person still doing that by hand.
That's all I'm asking.
Want to access all premium guides?
Become a paying subscriber to get access to this post and all other premium content.