Claude Code + Stitch — Production Ready Prompt
Unbox Digital — Free Prompt

Design to code.
Production
ready.

A single Claude Code prompt that takes your Stitch MCP designs and builds the full app — pixel perfect, fully responsive, with animations and navigation wired up. No placeholders. No TODOs.

What it produces
Pixel perfect output
Matches every screen, layout, spacing, and colour from your Stitch designs exactly
Design system tokens
Uses Stitch colours, fonts, and sizing — not generic defaults
Smooth transitions
Page transitions between every screen, built in automatically
Micro-animations
Buttons, cards, and interactive elements all have polish
Fully responsive
Works across mobile, tablet, and desktop without extra prompting
Full navigation
Every screen wired up and working — no dead ends
The prompt — copy and paste
I have connected the Stitch MCP server. You have access to all my designed screens and components. Build the full app exactly as designed. Requirements: - Match every screen, layout, spacing, and colour from the Stitch designs exactly - Use the design system tokens from Stitch (colours, fonts, sizing) - Add smooth page transitions between screens - Add micro-animations on buttons, cards, and interactive elements - Make it fully responsive - Use clean, production-ready code — no placeholders, no TODOs - Wire up navigation between all screens Start with the main screen and work through every screen in order. Do not skip any screens.
How to use it
01
Set up Stitch and design your screens
▼

Stitch is Google's AI-powered UI design tool. Design your app screens and components in Stitch — it generates design system tokens (colours, fonts, spacing) alongside your screens automatically.

You don't need to manually export anything. Stitch's MCP server makes your designs directly accessible to Claude Code.

Access Stitch at stitch.withgoogle.com — free to use.
02
Connect the Stitch MCP server
▼

In Claude Code, connect the Stitch MCP server so Claude can read your designs directly. Add it to your Claude Code MCP config:

  • Open your Claude Code settings
  • Go to MCP Servers
  • Add the Stitch MCP server URL from your Stitch account
  • Authenticate with your Google account

Once connected, Claude Code can see all your screens and components without you pasting screenshots or describing layouts.

The prompt assumes this connection is already active — the first line confirms it to Claude before the build starts.
03
Open Claude Code in your project
▼

Navigate to your project directory in terminal and open Claude Code:

  • Create a new project folder or open an existing one
  • Run claude in the terminal to start a Claude Code session
  • Make sure you're in the right directory — Claude will write files here
Works best with a fresh project. If adding to an existing codebase, Claude will read the structure first and integrate rather than overwrite.
04
Paste the prompt and run
▼

Copy the prompt above and paste it into Claude Code. Claude will:

  • Read all your Stitch screens via the MCP connection
  • Pull your design system tokens — colours, fonts, spacing
  • Start from the main screen and build outward
  • Wire up navigation as it goes
  • Add transitions and micro-animations throughout

Let it run to completion before making changes. It works through every screen in sequence — interrupting mid-build can leave navigation broken.

05
Review and refine
▼

Once the build is complete, run the app and review each screen against your Stitch designs. For any adjustments, be specific:

  • Reference the screen name from Stitch
  • Describe exactly what's different
  • Ask for one change at a time for precision
Claude Code reads your Stitch designs live — if you update a screen in Stitch, you can ask Claude to re-read it and update the code accordingly.
What is Stitch?
Google's AI design tool — built for Claude Code handoff.
Stitch is Google's AI-powered UI design tool that generates complete app screens from prompts or sketches. Unlike Figma, it's built from the ground up for AI-to-code workflows — it generates design system tokens alongside your screens and exposes everything via an MCP server so Claude Code can read your designs directly. No manual exports. No spec writing. Just design it, connect it, build it.
Try Stitch →
Unbox Digital
Interested in what else we can automate?
Get in touch and we'll show you what's possible for your business.
Get in touch →
UNBOX DIGITAL — unbox.co.nz
← Back to directory
Unbox Digital — Free Tools

Get free access to all our tools

Join our newsletter to unlock this page. No spam, just new tools, automations, and shortcuts when we drop them.

We won't spam you. Unsubscribe anytime.