Website Design with an AI Agent: Google Stitch and Claude Code

Additional instructions for working with Ailoot are in the documentation.

Why do websites built with Claude Code look like “AI slop”?#

In the practical case described, work on the homepage for a calling app began with an empty project and a request for Claude Code to build a landing page. The result was the classic: slate-950 for the background, indigo-500 for the accent, bold Inter in the heading, and three identical cards with shadows beneath it. The same layout as the first v0, the first Lovable, the first ChatGPT generation. I rewrote the prompt five times, added “premium,” “not like everyone else,” “modern”—the page still looked like a WordPress theme from 2015.

The purple gradient isn't a coincidence.

The logic is simple: without constraints, the model takes the statistical average of what it has seen. And it has seen a million identical landing pages built with Bootstrap and Tailwind. To get a result that isn't average, you need to give the agent specifics: which colors, which fonts, which spacing, which components to treat as canonical. To a model, the word “beautiful” means “the median of 2020.” Adjectives won't shift it; you need exact parameters.

I examined this same gap in a guide to ready-made design systems with Refero—there, you take someone else's style (Apple, Linear, Stripe) and give it to the agent. Google Stitch comes at it from the other side: instead of borrowing someone else's style, you generate your own—from your description.

What is Google Stitch and how does it help?#

Stitch is an experiment from Google Labs, introduced at Google I/O in May 2025. You write in the prompt field what you want the app to look like (or upload a screenshot, a whiteboard sketch, or a competitor's page), and Stitch generates interface screens on an infinite canvas. Under the hood, it uses Gemini 2.5 Pro and Flash, and Gemini 3 was added in December 2025 for more polished layouts.

What's useful for us:

• Vibe Design—describe the feeling in words (“minimalist and premium, like Stripe”) and get several visual directions to choose from.
• References—upload an image from Dribbble or Pinterest; Stitch preserves its layout and applies your requirements.
• Export in three formats: to Figma (with editable layers), as clean HTML/CSS, and through MCP—straight into the agent.

The distinction from ready-made styles like Refero matters. Refero is a library of design systems already extracted from real websites; you take an existing brand. Stitch generates a system for your product from scratch. No reference design and you want your own look? That's Stitch. Need to quickly apply the style of a well-known product? Refero. They cover different steps and complement each other nicely.

Claude itself also has a built-in design mode; I covered it in a guide to Claude Design. Stitch is different because it provides a ready-made system in an external file that the agent reads every time it builds something.

Google Stitch availability requirements#

Stitch isn't available in every country. In restricted regions, you see exactly one message when you visit: “Sorry, Stitch is unavailable.”

You need a Google account—you can only sign in with one.

When Stitch MCP authorization blocks the Claude Code workflow#

There's a lot of junk online about connecting MCP, and half the instructions simply don't work. For example, many guides (including popular English-language ones) recommend installing the @google/stitch-mcp package with the command npx -y @google/stitch-mcp@latest. That package doesn't exist—npm returns 404. Don't copy this command; you'll waste time. For the same reason, choose integrations whose installation and verification on a real task have been confirmed.

The remote MCP attempt described here reached an Incompatible auth server error in Claude Code. That observed error is not a working setup recipe or proof that every current configuration fails. Do not continue with an unspecified “connect MCP” step: use the manual HTML/CSS export path below until an exact compatible configuration has been verified.

The Stitch and DESIGN.md workflow is context engineering in its purest form: you put exact tokens in Claude's context ahead of time, and it builds strictly according to them, without “guessing what I meant.”

What is DESIGN.md and why is it better than a screenshot?#

Here's a key detail that most instructions get wrong: there is no “Export DESIGN.md” button in Stitch. The agent assembles the file itself. According to Google's official codelab, the prompt goes roughly like this: “go through Stitch MCP to the project, extract the palette and typography, and assemble a DESIGN.md from them.” That codelab assumes a functioning MCP connection. In the manual path here, Claude Code reads your exported HTML/CSS instead and writes the structured file in the project root; it must flag missing tokens rather than guess them from an image.

DESIGN.md contains specifics instead of adjectives:

# DESIGN.md
## Colors
- Primary:   #0F172A
- Accent:    #F97316
- Success / Error / Warning: ...
- Background / surfaces: ...
## Typography
- Font (body): "Instrument Sans"; (headings): "Instrument Serif"
- Scale: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4
- Weights: 400 / 500 / 700
## Spacing (base 8px)
- xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64
## Layout
- Container max-width: 1200px; breakpoints: 640 / 768 / 1024 / 1280
## Components
- Button: radius 10px; variants primary / secondary / ghost; states hover / active / disabled
- Card: radius 16px; shadow 0 4px 24px rgba(0,0,0,.08)

To make Claude Code use it, point to the file from CLAUDE.md (for example, with the line “Use the design of all components from DESIGN.md”)—and the agent pulls in the same tokens in every session. A button from Monday and a card from Friday come out in the same style because there's one source of truth.

Two local references work together in this setup. DESIGN.md holds the system rules—color, typography, spacing, and components. The exported Stitch HTML/CSS and assets provide the specific screen layout. MCP is optional and is not a prerequisite for this path.

How do you build a website: the complete path from text to design?#

Here's the whole process in order:

1. Open Stitch. Check availability in your country and sign in to stitch.withgoogle.com with your Google account.
2. Describe the product. State the screens and user journey; confirm or edit the proposed screen list.
3. Add a reference. Upload the intended screenshot and specify the colors, typography, and layout you want to keep.
4. Generate and polish. Pick one screen and refine it before expanding the design.
5. Export the selected screen as HTML/CSS. Save the exported files and required assets in a reference folder in your project. Open the exported HTML locally and check that it is the screen you selected; a screenshot alone does not carry exact CSS values.
6. Assemble DESIGN.md from the local export. Ask Claude Code to read the exported HTML/CSS, record the actual color, font, spacing, layout, and component values, and list any missing values for your decision. This path does not require a Stitch API key or MCP authentication.
7. Build and check one page. Give Claude Code these prompts, replacing the folder name with the actual local export path:

Read the Stitch HTML/CSS export in refs/stitch-export/. Create DESIGN.md in the project root using the values present in those files. Identify missing values instead of inventing them.

Build one page from DESIGN.md and the local Stitch export. Keep the components modular. Check the rendered page against the export at desktop and mobile widths, then verify navigation and interactive states separately.

From there, it's all Claude Code: routing between screens, responsiveness at the breakpoints in DESIGN.md, animations, and interactivity. Stitch provides static screens and a clickable prototype, but it doesn't build working logic or publish to hosting—that's the agent's job.

How do you get rid of the “AI look”: what exactly should you change?#

Here are the specific points where a site stops giving itself away:

• Color. Purple indigo-500 is the first giveaway. Set the primary and accent colors as exact hex values right in DESIGN.md. Every agent will interpret “brand blue” in its own way.
• Font. Inter is the safest and therefore the most recognizable “AI font.” Choose an expressive pairing: for example, a sans serif for body text and something with character for headings. Set it in Stitch's design and record it in DESIGN.md.
• A reference instead of an adjective. The model interprets “make it modern” as “the median of 2020.” It takes “use the layout from this page” with a real screenshot literally. Upload a reference image to Stitch; you can't convey taste in words.
• Spacing and breathing room. A templated layout is recognizable by its cramped, identical blocks. Set a generous spacing scale in DESIGN.md—the agent will arrange elements more freely.

Specificity beats subjective adjectives. Stitch is essentially a machine that translates your “I want it like this” into precise tokens, so the agent has nothing left to guess.

MCP Claude Code Figma integration or Google Stitch: which design workflow fits?#

I compared the tools along the dimensions that actually matter when vibe coding on a budget:

The workflow I use myself: Stitch for exploring the design → Claude Code for building and logic. For a vibe coder on a budget, Stitch wins because it's free and draws a unique look from scratch for your product. If you want to understand the full set of tools on the market, I covered them in the pillar article what to code with in 2026.

Where does Google Stitch break down: what are its limitations?#

Here's an honest list so you won't be disappointed by the third screen:

• Interface only. No backend, database, or publishing to hosting. You need Claude Code for that (or Lovable, if you want everything in one place).
• Limited editing inside the tool. You can't move an individual element with the mouse—only change it through a prompt and regenerate. It's not Figma.
• Nondeterminism. The same prompt produces different results. Good for exploring ideas, inconvenient when you need repeatable output.
• Quota. You'll hit the free generation limit (currently daily); you can't buy more, so you have to wait for the quota to reset. The exact number varies, so check the interface.
• Experimental status. Google Labs makes no commitment to long-term support. The service could change or shut down.
• Geographic restriction and the MCP authorization issue in Claude Code, mentioned in the sections on availability and setup.

When Stitch is a poor fit: if you have a strict brand guide for many projects, if the design is already in Figma, or if you need an app with a backend that is already published.

What's next?#

Build the smallest workflow with one screen: describe the product in Stitch, generate the homepage, export its HTML/CSS, and ask Claude Code to assemble DESIGN.md and build the page from those local files. Once you see the purple gradient disappear on its own, the rest will get easier.

Designing with Stitch is one context engineering technique.

For further work with models, you can go to Ailoot.