easyhive.ai
DESIGN-TO-CODE WORKFLOW
TEAM REFERENCE · AI-ASSISTED DESIGN

Connecting Google Stitch to
Claude Code

Claude Code writes solid code, but left on its own the front-end usually comes out looking AI-generated. The fix: design it in Google Stitch first, then hand Claude the finished design to build from.
01What's actually going on here

Claude Code is excellent at logic, structure, and correctness. It's only average at guessing what a button, a spacing scale, or a color palette should look like without a reference. Google Stitch is Google Labs' AI tool that generates full UI screens (layouts, colors, typography, components) from a plain-English description or a reference image.

The whole trick is to design in Stitch first, then give Claude Code the real design to build from, instead of a paragraph describing what you want. A design file in your project beats a paragraph every time.

02Two ways to hand it to Claude

There are two paths. Most people should start with the first one.

★ Start here

A · The DESIGN.md file

Export your Stitch design as a DESIGN.md file and drop it in your project. Claude reads it on its own. No Google Cloud, no terminal.

Best for a landing page or your first app.
Advanced

B · The live MCP server

Connect Stitch to Claude Code over MCP so it pulls your screens directly, each mapped to a route. More setup; needs a Google Cloud sign-in.

Best for a real multi-screen app.
Both start the same way: you design in Stitch. They only differ in how the design reaches Claude. If you're not sure, use Path A. It's faster and does the same job for most projects.
03Design it in Stitch first (both paths)
04Path A · The DESIGN.md file (start here)

This is the part that changes everything. Instead of Claude guessing what the UI should be, you give it the real design as a file. DESIGN.md is a plain-markdown document (an open format introduced by Google Stitch) that lists your exact colors, fonts, spacing, and components. Claude reads it on its own and builds every screen from those exact values instead of inventing its own.

A design file in your project root beats a paragraph describing what you want. Here is the whole flow:

A real DESIGN.md looks like this. Headings plus exact tokens Claude reads natively:
# Design System ## Brand & Style Clean, modern SaaS dashboard. Generous white space, one accent color, calm and legible over decorative. ## Tokens Colors: background #FFFFFF, surface #F7F8FA, text #1A1D21, accent #3B82F6. Type: Inter. Headings 600, body 400. Base 16px. Radius: 8px cards, 6px buttons. Spacing scale of 4. ## Components Buttons: primary solid accent with white text; secondary 1px border with accent text. Cards: surface background, 1px hairline border, soft shadow. Inputs: 1px border; focus ring in the accent color.
That is the whole of Path A. No Google Cloud, no terminal, no MCP. For a landing page or your first app it does the same job as the advanced route, faster. When your screens exist but nothing works yet, jump to section 08 to finish them in Claude Code.
05Path B · Set up the live MCP server

The advanced path: Claude Code calls Stitch directly and pulls each screen on demand. It talks to Google's real API as you, so it needs the Google Cloud CLI, a project with the Stitch API enabled, and application-default credentials.

No Google Cloud project yet? It's free and takes a minute, no credit card. Easiest way: go to console.cloud.google.com, sign in, click the project menu at the top → New Project → name it "Stitch" → Create, then copy the Project ID it gives you (e.g. stitch-471203). If it offers a "$300 free trial / add a card," you can ignore that. Stitch doesn't need billing.
# 1. Install the Google Cloud CLI (one-time). macOS: brew install --cask google-cloud-sdk # or: cloud.google.com/sdk/docs/install # 2. Log in with the Google account that has Stitch gcloud auth login # (No project? Create one, free, no card:) gcloud projects create YOUR_PROJECT_ID --name="Stitch" # 3. Point at your project gcloud config set project YOUR_PROJECT_ID # 4. Enable the Stitch API ← easy to miss; every call fails without it gcloud services enable stitch.googleapis.com # 5. Save application-default credentials the bridge will use gcloud auth application-default login
Tested end-to-end on macOS (gcloud 576), including on a fresh project with no billing. Step 4 is the one most guides skip.
06Add the MCP server to Claude Code
claude mcp add stitch \ --env GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID \ -- npx -y stitch-mcp
Or add it by hand to your MCP config JSON:
{ "mcpServers": { "stitch": { "command": "npx", "args": ["-y", "stitch-mcp"], "env": { "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID" } } } }
VERIFY
Ask Claude Code: "what MCP tools do you have access to?"

On a healthy connection the real tool set shows up:

list_projectsget_projectcreate_projectlist_screensget_screengenerate_screen_from_textfetch_screen_codefetch_screen_imagecreate_design_systemapply_design_systemupload_design_md

Restart Claude Code after adding the config. On startup the server should log Auth verified and Server ready. If it logs Authentication failed, re-run gcloud auth application-default login.

07Work from the design, conversationally
Say thisWhat happens
"List my Stitch projects"Confirms the connection and shows the project IDs to reference.
"Pull the design system from the Home screen in [project]"Claude fetches the real colors, fonts, and layout from that screen, not a guess.
"Build the Settings page in Next.js, matching that design"It implements the page from the extracted tokens, so it matches the rest of the app.
08Finish the job in Claude Code

Here's what nobody warns you about: Stitch gives you static screens. They look great, but nothing works yet: no animations, no mobile layout, buttons that go nowhere. That's normal. It's a first draft, not a finished app.

Finish it in Claude Code one instruction at a time, not one giant prompt:

It won't be pixel-perfect. Fonts and spacing drift a little because code generation isn't exact. Put the Stitch preview next to the result and nudge whatever's off. Stitch hands you the look; Claude makes it work.
09Gotchas worth knowing (Path B)
Enable the API, not just auth Logging in with gcloud is not enough. You also need gcloud services enable stitch.googleapis.com on the active project, or the server boots but every call errors.
Auth is Google Cloud, not just an API key The community bridge signs requests with your gcloud application-default token (Bearer + X-Goog-User-Project), so you need the CLI installed and application-default login done.
Billing is optional Stitch is free. A Google Cloud project without billing works fine (tested). No card required for either path.
Not an official Google↔Claude integration The MCP bridge is a community package (MIT). It works against a real Google endpoint but isn't supported by Google or Anthropic, so expect occasional breakage if the API changes. Google's own codelab documents the flow for Antigravity.
easyhive.ai · practical AI workflows for real teams · easyhive.pro

All trademarks belong to their owners. Easy Hive is not affiliated with or endorsed by them. This site is not part of Facebook, Instagram or Meta Platforms, Inc., and is not endorsed by Meta. Savings and results shown are examples, not guarantees; yours will vary. Educational content only, not legal, tax or financial advice. Full disclaimers.