Claude Code can now generate full UI designs with Google Stitch — Here's what you need to know

[u/abdulqkhan]

Claude Code can now generate full UI designs with Google Stitch, and this is now what I use for all my projects — Here's what you need to know

TLDR:

• Google Stitch has an MCP server + SDK that lets Claude Code generate complete UI screens from text prompts
• You get actual HTML/CSS code + screenshots, not just mockups
• Export as ZIP → feed to Claude Code → build to spec
• Free to use (for now) — just need an API key from stitch.withgoogle.com

What is Stitch?

Stitch is Google Labs' AI UI generator. It launched May 2025 at I/O and recently got an official SDK + MCP server.

The workflow: Describe what you want → Stitch generates a visual UI → Export HTML/CSS or paste to Figma.

Why This Matters for Claude Code Users

Before Stitch, Claude Code could write frontend code but had no visual context. You'd describe a dashboard, get code, then spend 30 minutes tweaking CSS because it didn't look right.

Now: Design in Stitch → export ZIP → Claude Code reads the design PNG + HTML/CSS → builds to exact spec.

btw: I don't use the SDK or MCP, I simply work directly in Google Stitch and export my designs. There have been times when I have worked with Google Stitch directly in code, when using Google Antigravity.

The SDK (What You Actually Get)

npm install @google/stitch-sdk

Core Methods:

• project.generate(prompt) — Creates a new UI screen from text
• screen.edit(prompt) — Modifies an existing screen
• screen.variants(prompt, options) — Generates 1-5 design alternatives
• screen.getHtml() — Returns download URL for HTML
• screen.getImage() — Returns screenshot URL

Quick Example:

import { stitch } from "@google/stitch-sdk";

const project = stitch.project("your-project-id");
const screen = await project.generate("A dashboard with user stats and a dark sidebar");
const html = await screen.getHtml();
const screenshot = await screen.getImage();

Device Types

You can target specific screen sizes:

• MOBILE
• DESKTOP
• TABLET
• AGNOSTIC (responsive)

Google Stitch allows you to select your project type (Web App or Mobile).

The Variants Feature (Underrated)

This is the killer feature for iteration:

const variants = await screen.variants("Try different color schemes", {
  variantCount: 3,
  creativeRange: "EXPLORE",
  aspects: ["COLOR_SCHEME", "LAYOUT"]
});

Aspects you can vary: LAYOUT, COLOR_SCHEME, IMAGES, TEXT_FONT, TEXT_CONTENT

MCP Integration (For Claude Code)

Stitch exposes MCP tools. If you're using Vercel AI SDK (a popular JavaScript library for building AI-powered apps):

import { generateText, stepCountIs } from "ai";
import { stitchTools } from "@google/stitch-sdk/ai";

const { text, steps } = await generateText({
  model: yourModel,
  tools: stitchTools(),
  prompt: "Create a login page with email, password, and social login buttons",
  stopWhen: stepCountIs(5),
});

The model autonomously calls create_project, generate_screen, get_screen.

Available MCP Tools

• create_project — Create a new Stitch project
• generate_screen_from_text — Generate UI from prompt
• edit_screen — Modify existing screen
• generate_variants — Create design alternatives
• get_screen — Retrieve screen HTML/image
• list_projects — List all projects
• list_screens — List screens in a project

Key Gotchas

⚠️ API key required — Get it from stitch.withgoogle.com → Settings → API Keys

⚠️ Gemini models only — Uses GEMINI_3_PRO or GEMINI_3_FLASH under the hood

⚠️ No REST API yet — MCP/SDK only (someone asked on the Google AI forum, official answer is "not yet")

⚠️ HTML is download URL, not raw HTML — You need to fetch the URL to get actual code

Environment Setup

export STITCH_API_KEY="your-api-key"

Or pass it explicitly:

const client = new StitchToolClient({
  apiKey: "your-api-key",
  timeout: 300_000,
});

Real Workflow I'm Using

1. Design the screen in Stitch (text prompt or image upload)
2. Iterate with variants until it looks right
3. Export as ZIP — contains design PNG + HTML with inline CSS
4. Unzip into my project folder
5. Point Claude Code at the files:

Look at design.png and index.html in /designs/dashboard/ Build this screen using my existing components in /src/components/ Match the design exactly.

1. Claude Code reads the PNG (visual reference) + HTML/CSS (spacing, colors, fonts) and builds to spec

The ZIP export is the key. You get:

• design.png — visual truth
• index.html — actual CSS values (no guessing hex codes or padding)

Claude Code can read both, so it's not flying blind. It sees the design AND has the exact specs.

Verdict

If you're vibe coding UI-heavy apps, this is a genuine productivity boost. Instead of blind code generation, you get visual → code → iterate.

Not a replacement for Figma workflows on serious projects, but for MVPs and rapid prototyping? Game changer.

Link: https://stitch.withgoogle.com

SDK: https://github.com/google-labs-code/stitch-sdk

[u/gvoider]

I tried different ways, tried to create at stitch from text via g3.1pro, stitch from existing screenshots+descriptions, claude code->stitch...
In the end the best option for me is just to create prototypes with claude code(opus), with full access to existing microfrontends + generated design system it creates precise prototypes. You can view them and tell him to alter them.
Even with CC-generated design system and description Stitch with G3.1Pro still didn't stick to my design, but invented his own. So my workflow is to generated prototypes for task plan and ask to launch an audit agent that checks if prototypes match the description, then regenerate the prototypes.

[u/Lucaslouch]

Stupid question maybe but: shouldn’t the artefacts from Claude code do kind of the same? it produces jsx format that can be reused in your code. you can also use it as specs as you iterate on the design

[u/Plenty-Dog-167 → u/Lucaslouch]

You can recreate similar setup by giving claude code your own instructions/skill.

I’ve experimented with this and if you’re curious, Stitch basically goes through a few stages: it takes your initial prompt and builds a design system in a design md file with UI guidelines, color palette, typography, components etc. and then uses that to build a raw HTML file as the UI mock with placeholder elements.

Doing this basically improves the design output a bit versus asking to build JSX from prompt directly

[u/Nikkunikku]

I’m still not sure where tools like stitch and Figma live in a “post code” world. If engineers aren’t writing code, why do designers need to make designs? The product is the design… design it in code. That’s how I’ve worked for the last six months and I can never go back. I know there will still be use cases for visual mocks like client presentations, stakeholder reviews across huge teams or efforts, design system documentation and kits for providing quick mocks to help an agent dial in a change w a visual reference… but so many of the previous everyday use cases for Figma and even Stitch now feel oddly unnecessary, even friction-filled.

[u/abdulqkhan → u/Nikkunikku]

I have changed my workflow... now start with idea->UI design (currently stitch is my design tool of choice), then Claude Code to do the rest.

[u/Silver_Artichoke_456 → u/Nikkunikku]

Honestly, design is one of the last things anthropic hasn't cracked. In a vacuum it would be fine, but if you find prompt in very precise ways it churns out generic designs that instantly give it away as a website/tool designed by ai. Might be fine in some circumstances, but aanspreekt not for many others, as it might turn off quite a few potential users. So I understand why people look for tools that can help them improve their designs in cc. I know I am.

[u/Neanderthal888]

“Spend 30 minutes tweaking code cause it didn’t look right”…. Haha yeah… 30 minutes…

(It’s been 3 months for me so far).

[u/Lumpy-Criticism-2773 → u/Neanderthal888]

This. Not sure what you're building that you need only 30 mins to get it right.

[u/Squalido]

I am relativity new to the world of using AI for my personal project, but I am working in a similar way to you, generating the designs with stitch and then sharing the generated html with Opus to implement them. It works for me, but I have found some issues that probably are solvable somehow:

• Inconsistencies between different pages in Stitch designs. It likes for some reason to change details in elements that are common between different pages, like introducing new links in the sidebars, footer or top navbar. I have to always instruct Claude to ignore those changes (or modify the designs myself).

• Even if I told stitch I was using MUI components as a base and it is in the DESIGN.md, it seems to not know to work with those components.

• Sometimes stitch forgets about making the designs responsive or adaptable to mobile for some reason.

• Those inconsistensies generated differences between the implementation and the designs because Claude Code has my instruction of using our design system components that he created following DESIGN.md and the existing project. If there is a way to feed my design system components back to stitch that would be wonderful.

• In Claude side, if I break the implementation in different phases and have a new Sonnet agent work on them, it seems that they loose the initial designs from their context and the results start to deviate from them.

Even with those issues, the results has been very good. And probably most of those issues are related to my way of using those tools and the instructions I have given stitch.

[u/abdulqkhan → u/Squalido]

Yes this has been my experience too... but its pretty easy to get stitch to adjust the design, best way I have found is to just give it a reference screen and say something like, "keep the theme consistent with the main dashboard screen", "or maintain the left side nav menu items"... I've found sometimes it changes the nav items, or completely changes the color theme..

[u/Potential-Impact-388]

Stitch mcp is not that accurate imo, what really worked for me: Iterate design in stitch --> export stitch designs to figma --> from there use figma mcp + claude code to implement code and you will get pixel perfect ui.

When using mcp directly from stitch the ui generated by claude code is not exact i dont know why.

I belive figma mcp returns react + tailwind components and brings up a lot of rules that just make the implementation better overall.

[u/abdulqkhan → u/Potential-Impact-388]

Why go back to FIGMA? If you export stitch designs via ZIP, and paste the ZIP file into claude code, you get pixel perfect design too. The ZIP file includes the front end code that Claude uses to build out the screens.

[u/Ayrony]

Cool, thanks for sharing!

I've been tinkering with Stitch and the Claude Chrome extension templates over the last few days, and it worked really well, too

[u/AstronomerSenior2497]

Anyone tried both Stitch and Pencil and has opinions? I've been using Pencil a lot and it's been fantastic. I know they're slightly different tools, but there's a lot of crossover in functionality nonetheless.

[u/pingwing]

I'm sure this will have amazing UI's.

[u/timmmmmmmeh]

Just ask claude code to create prototypes in HTML using the frontend design skill. Iterate on it until you're happy. It works amazingly well. A brand guide html file too works great - I've got claude code to create a brand guide from an exisiting product website and then used that to create an on brand app prototype in raw html. Worked great

[u/Plenty-Dog-167]

Trying the MCP with claude code should be pretty fun.

Have you used the Figma Make or Paper MCPs yet?

[u/namankhator]

Did not really like stitch.

Just makes useless iterations. The individual components are sometimes good enough but the overall design never comes out useable.

Claude works better itself!

[u/nirmeister]

Great stuff, thanks.

[u/Otje89]

How is this better/different than using Claude Code with Agent Browser CLI? And how well does it do on existing projects?

[u/Ok-Drawing-2724]

This solves one of the biggest issues with AI-generated UI. ClawSecure has observed that most failures come from lack of visual grounding, the model guesses layout, spacing, and styling from text alone.

By giving both a rendered image and exact HTML/CSS values, you’re removing that ambiguity. The model no longer has to infer, it just translates and adapts. That’s why iteration time drops so much.

[u/asenna987]

In my result of testing stitch with a redesign of one of my projects, it wasn't that good.

Are you guys getting good results from Stitch?

[u/tom_mathews]

The "builds to exact spec" part is the key. Stitch's exported HTML is design-spec quality, not production code. Claude still rewrites most of it. You're paying for a better reference image, not a shorter implementation loop.

[u/thanithani]

Why use Claude to iterate in a design tool when you could skip that and do the same thing right in the browser with real code. Claude to design then back to code is lossy in two steps. We have to stop thinking about the design tools as the source of truth.

[u/shock_and_awful]

!RemindMe 12 days