There’s a new workflow that didn’t exist two weeks ago: design an app in Google Stitch, press export, and let Claude Code turn it into working code. No Figma. No manually writing CSS. No describing your design in words and hoping the AI gets it right.
Both tools are free. The whole process takes about 30 minutes for a simple app. And it works surprisingly well — with a few catches.
Here’s exactly how to do it, step by step.
What You Need
- Google Stitch — free at stitch.withgoogle.com. You’ll need a Google account.
- Claude Code — Anthropic’s AI coding tool. Requires a paid claude.ai account (Pro at $20/month or higher).
- A project idea — Something simple for your first try. A landing page, a dashboard, a portfolio site.
That’s it. You don’t need to know how to code. You don’t need design experience. You need an idea and about 30 minutes.
Step 1: Design in Stitch (10 minutes)
Open Stitch and describe what you want. Be specific — the more detail you give, the better the output.
A vague prompt:
“Make me a landing page”
A better prompt:
“Design a landing page for a dog walking business called PawPals. Include a hero section with a headline and call-to-action button, a section showing three service tiers with prices ($15, $25, $40), a testimonials section with 3 customer quotes, and a footer with contact info.”
Stitch generates a full design in about 15 seconds. If you don’t love it, iterate: “Make the colors warmer” or “Move the pricing section above the testimonials.”
Tips for better results:
- Mention specific sections you want (hero, pricing, features, footer)
- Include real content (company name, prices, feature names) — not placeholder text
- Ask for multiple screens if you need more than one page: “Also design an About page and a Contact page”
- Use the voice canvas if you prefer talking — say “make the header background darker” instead of typing it
Once you’re happy with the design, move to the export step.
Step 2: Export as DESIGN.md (2 minutes)
Click the export button in Stitch and choose DESIGN.md. This creates a plain-text file that describes your entire design system — colors, typography, spacing, component layout — in a format that AI coding tools can read.
DESIGN.md looks something like this:
# Design System: PawPals Landing Page
## Colors
- Primary: #2563EB (blue)
- Secondary: #F59E0B (amber)
- Background: #FFFFFF
- Text: #1F2937
## Typography
- Headings: Inter, 700 weight
- Body: Inter, 400 weight
## Components
### Hero Section
- Full-width, centered text
- H1: "Your Dog Deserves the Best Walks"
- CTA button: "Book a Walk" (primary color, rounded)
...
Save this file somewhere you can find it. You’ll give it to Claude Code in the next step.
Step 3: Connect to Claude Code via MCP (5 minutes)
There are two ways to get your Stitch design into Claude Code:
Option A: MCP Connection (Automatic)
If you have Claude Code’s MCP set up, Stitch can connect directly. Tell Claude Code:
“Connect to my Stitch project and implement the landing page design.”
Claude reads the design data through the MCP connection — layout, colors, components — and starts writing code. This is the smoothest path, but the MCP setup has some friction (Google Cloud authentication can be tedious the first time).
Option B: DESIGN.md File (Manual but Reliable)
If MCP feels too complex, just give Claude Code the DESIGN.md file directly:
“Here’s my design spec [paste DESIGN.md contents]. Build this as a React app with Tailwind CSS.”
This works just as well. You lose the live connection (changes in Stitch won’t auto-sync), but for a single project, it’s perfectly fine.
Step 4: Claude Code Builds the App (10 minutes)
Claude reads the design and starts generating code. For a landing page, expect it to create:
- HTML structure matching your layout
- CSS/Tailwind styles matching your colors, typography, and spacing
- Responsive design (mobile and desktop)
- Interactive elements (buttons, navigation, hover effects)
Watch the output as it generates. If something looks off, tell Claude:
“The pricing cards should be in a 3-column grid on desktop, stacked on mobile.”
Or: “The hero section background should be the primary blue color, not white.”
Claude adjusts in real time. This back-and-forth is where the workflow really shines — you’re refining the implementation without touching code.
Step 5: Preview and Polish (5 minutes)
Once Claude finishes generating, preview the result in your browser. Compare it to your Stitch design. Common things that need adjusting:
- Spacing — AI often gets padding and margins close but not exact
- Images — You’ll need to swap placeholder images for real ones
- Animations — Stitch designs are static; any hover effects or transitions need to be specified separately
- Font loading — Make sure the fonts Claude chose actually load in the browser
For a prototype or MVP, the output is usually good enough to share with people. For a production site, plan on spending another hour tweaking details.
What Works and What Doesn’t
Works great for:
- Landing pages and marketing sites
- Simple dashboards with cards and tables
- Portfolio sites and personal pages
- Prototypes you want to show stakeholders quickly
- React and standard web apps
Struggles with:
- Complex interactions (drag-and-drop, real-time updates, animations)
- Non-standard frameworks (Flutter, SwiftUI — the design-to-code translation breaks down)
- Pixel-perfect brand implementation (the output is close, not exact)
- Multi-page apps with shared navigation state
The Realistic Expectation
This workflow gets you from zero to a working prototype in 30 minutes. That’s remarkable. A year ago, the same thing would take a designer half a day and a developer another full day.
But it’s not “describe an app and get a finished product.” The output needs human judgment — tweaking spacing, replacing placeholder content, adding interactions that the static design can’t capture. Think of it as a really powerful first draft.
The best way to use this: generate fast, iterate with Claude, then hand off to a developer (or yourself) for the final 10-20% polish.
Try it with something simple first. A personal site. A landing page for a side project. Once you see how quick the loop is, you’ll start thinking of bigger things.
Both Google Stitch and Claude Code’s MCP integration launched in March 2026. Stitch is free (350 generations/month). Claude Code requires a Pro plan ($20/month).
Related courses: Vibe Coding | Claude Code Mastery | UX Design with AI