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 Design the screen in Stitch (text prompt or image upload) Iterate with variants until it looks right Export as ZIP — contains design PNG + HTML with inline CSS Unzip into my project folder 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. 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 submitted by /u/abdulqkhan
Originally posted by u/abdulqkhan on r/ClaudeCode