Google Stitch Website Redesign

Stitch Website Builder is the most ambitious skill we've shipped so far. It connects two powerful tools that don't talk to each other out of the box, then automates the boring parts so you can focus on the work that matters.

Used wisely, this is one of the more lucrative skills we've put out. Web designers and freelancers routinely charge $1,500 to $4,000 for a small landing page or marketing site. With this skill, you can deliver one in under an hour. A handful of clients a week, and you're at around ten thousand dollars a month. The setup pain is a one-time cost. The output keeps coming.

The setup is a little more involved than most skills because you need to plug Claude into Google Stitch via something called an MCP server. Don't let that scare you. We've built a way for Claude to install everything for you while you watch. By the end of this guide, you'll have a working website builder that takes a single URL and a sentence of direction, and gives you back a polished static site you can deploy anywhere.

What it is

One folder: stitch-website-builder. Inside are the brain (SKILL.md), six reference files that teach Claude exactly how to use Stitch well, two helper scripts that handle setup and verification, and a configuration file that remembers your brand details so you never have to repeat them.

Once installed, the skill gives Claude two new abilities, both running on Google Stitch underneath:

Both modes produce real, deployable code. Not Figma files. Not screenshots. Actual HTML you can drop into Netlify, Vercel, Cloudflare Pages, or your own server.

What you need

Before we install anything, here's the lay of the land. Some of these you almost certainly already have.

Install it

Three paths to the same destination. The first is the easiest. The other two exist for people who like to know exactly what's happening on their machine.

This is the path we recommend if your goal is to get to the fun part fast. The skill bundle includes a file called STITCH-SETUP-GUIDE.md. You hand that file to Claude, ask Claude to follow it, and Claude does the entire installation while you approve a few prompts.

You'll see Claude open a terminal, run the wizard, install gcloud if you don't have it, open a browser tab for Google login, and configure the MCP at the end. Total clicks on your end: usually three or four. Total time: five to ten minutes depending on what's already installed.

Manual install in Cowork

If you'd rather install the skill yourself and let Claude only handle the Stitch connection, this is the middle path.

Manual install in Claude Code CLI

For developers who want to know exactly where every file goes.

First-run setup

The first time you trigger the skill after install, it runs a quick onboarding so it knows who you are. Five questions. Your answers save to a config file inside the skill folder, and you won't be asked again unless you ask for a redo.

After you answer, the skill writes everything to config.json and runs a setup check. If the Stitch MCP needs installing and you took the easy path above, this step is already done. If you installed the skill manually, this is where Claude offers to wire up Stitch for you.

Start here: Mode A, the Rapid Redesign

Mode A is where everyone should start. It's fast, it's forgiving, and it gives you a feel for how the skill thinks before you commit to a longer multi-page build. We'll walk through a real example so you can see exactly what it looks like.

Imagine you run a small specialty coffee roaster called Folio Coffee. Your current website was built five years ago and looks it. You want to see what a redesign could look like before you commit to hiring a designer. Here's the entire interaction.

Claude pulls your brand, voice, and default direction from the config file. Then it asks just the three or four things it doesn't already know.

That's the entire interview. Sixty seconds. Claude takes the answers, builds a dense prompt for Stitch, and sends it.

What happens next happens fast. Claude calls the Stitch MCP, generates the redesigned page in Stitch (this takes twenty to forty seconds on Stitch's side), pulls the design data back, downloads any images Stitch generated, and writes a single index.html file with the layout, typography, and Tailwind classes that match the Stitch design.

You get back a link to the file, a two-sentence summary of what got built, and the Stitch project URL so you can open the design in Stitch and tweak it visually if you want. Total elapsed time, from your first prompt to a working HTML file: usually three to four minutes.

What Mode A is not great for

Mode A is single-page only. It doesn't try to keep cohesion across multiple pages because it isn't designed to. If you ask Mode A to build you a full site by running it five times, you'll get five pages that don't quite match each other. That's what Mode B is for.

Level up: Mode B, the Premium Multi-Page Build

Once you've run Mode A once or twice and you trust how the skill works, you can tackle the bigger workflow. Mode B builds full multi-page websites that share a design system, sitemap, and visual rhythm. It does this by handing off to two skills made by Google itself: stitch-design and stitch-loop.

Stitch Website Builder installs those automatically when you choose Mode B for the first time. You don't have to know anything about them, but it helps to understand what each one does.

Helper skill	What it does
stitch-design	Takes your brief and creates the design system file (DESIGN.md), the sitemap (SITE.md), and one prompt per page.
stitch-loop	Generates pages one at a time, in order, each one inheriting the design system so they all look like they belong together.

Let's walk a real example. You're a small architecture firm called Maren Architects. You want a five-page site: home, about, projects, services, and contact. You want it to feel restrained, residential, expensive without showing off.

Claude collects a few more details (core offer, what to avoid, desired qualities) then hands the brief to stitch-design. A minute or two later, the .stitch/ folder appears in your project with three things in it.

Claude shows you a summary of DESIGN.md (mood, primary colors, type stack) and the page list, and asks if you want to change anything before any pages get generated. This is the moment to make adjustments. Changes here propagate to every page.

The home page is the anchor

Mode B always generates the home page first, by itself, and asks you to approve it before continuing. The home page sets the visual tone every other page will follow. If it's off, every other page will be off in the same way. It's worth spending an extra two minutes here.

Once you approve the home, Claude triggers stitch-loop. The loop reads from a small file called next-prompt.md (the "baton"), generates the next page on the list, integrates it into the site folder, and writes the next instruction back to the baton. You'll see Claude work through the pages one at a time, calling out progress: "Generated about.html, three of five pages done."

After the last page generates, Claude does a cohesion sweep. Same nav on every page with the active state correctly highlighted. Same footer. All cross-links resolve. Shared assets in one folder. Mobile breakpoints behave. Then it hands you the result.

For a five-page site, total elapsed time is usually fifteen to twenty-five minutes. Most of that is Stitch's generation time on Google's side, not anything you have to do.

When something breaks

Most issues with Stitch Website Builder come down to the same handful of root causes. Here's the troubleshooting list, in rough order of how often you'll hit each one.

OAuth token expired

You use the skill in the morning, it works fine, you come back in the evening, and a Stitch call fails with an authentication error. Your Google login token expired, which they do every few hours. The fix is one terminal command.

Sign in with the same Google account you used originally, close the browser tab, and the skill works again. Or just ask Claude to refresh your Stitch login and it'll run the command for you.

"API keys are not supported by this API"

You see this if your install ended up using stitch-mcp-server instead of @_davideast/stitch-mcp. The first one uses API keys. The second uses Google OAuth. Stitch's actual API rejects API keys, so the first package doesn't work. The fix is to switch to the OAuth-based package. The bundled installer in the skill always picks the right one, so this only happens if you installed the MCP yourself the wrong way.

The Stitch MCP doesn't show up in Claude Code

You ran the install but Claude says it doesn't have a Stitch tool. Three things to check, in order.

1. Did you fully restart Claude Code? Quit completely, then reopen. A window reload isn't always enough to reload MCP configs.
2. Is the Stitch entry actually in your MCP config file? On Mac that's ~/Library/Application Support/Claude/mcp_servers.json. On Linux ~/.config/claude/mcp_servers.json. On Windows %APPDATA%\Claude\mcp_servers.json. Open the file and confirm there's a "stitch" entry.
3. Is your JSON valid? A trailing comma will break the whole config silently.

"stitch-design not found"

Mode B specifically needs stitch-design and stitch-loop. If they're missing, the skill offers to install them. If the install fails, you can run it manually.

The bundled diagnostic script

If you're not sure what's wrong, run the preflight script. It checks every dependency and tells you what's missing in plain language.

The output lists each piece (Node, npx, gcloud, the MCP, OAuth, the Mode B helper skills) with an OK or MISS tag. Whatever has MISS, fix that.

What to try next

You've got a working website builder wired into Claude. Here's the order we'd suggest you try things in.

First, run Mode A on a real page. Not example.com, not a fake URL. A page you actually care about. Maybe your own outdated landing page, a competitor's site you've been meaning to copy and improve, or a friend's small business site. Seeing the skill work on something you have an opinion about is the fastest way to learn what it's good at and where it needs your judgment.

Second, experiment with the direction library. The skill ships with seven named directions: editorial restraint, bold modern SaaS, warm artisanal, quiet luxury, playful confident, dark mode brutal, and soft minimalism. Try the same source URL with three different directions and see how Stitch interprets each one. You'll start to develop intuition for what each direction actually looks like in practice.

Third, when you're ready, try Mode B with a small site. Three pages is fine for a first run: home, about, contact. The cohesion across pages is the part that genuinely surprises people the first time they see it.

Fourth, if you outgrow static HTML, look at Google's react:components skill from the same stitch-skills repo. It converts Stitch screens into React component systems with design tokens. We didn't include it in this bundle because most users don't need it, but it's there if you do.

That's the install done. The hardest part is behind you. Now go build something.