Build a professional website
with Claude Code + Google Stitch

The desktop app is the easiest way to get started: no terminal setup, no npm, just download and sign in. Go to claude.com/download and grab the installer for your OS.

Run the installer, launch the app, and sign in with your Anthropic account.

Once you're in, click the Code tab at the top of the app. Then click Select folder and choose the folder where you want to build your website. This is where Claude Code will read and write files.

MCP (Model Context Protocol) lets Claude Code talk directly to your Stitch projects, no manual exporting or copy-pasting HTML. This is the official connection from Google's own Stitch docs.

First, get your API key. Go to stitch.withgoogle.com, sign in with your Google account, click your profile picture → Settings → API Key → Create Key. Copy it.

Then add it to Claude Code. With a folder open in Claude Code, paste this into the chat prompt (replace YOUR-API-KEY with the key you just copied):

! claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

Restart Claude Code, then test the connection by typing: "List my Stitch projects". It should return your projects.

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

Google published an official set of Stitch skills for Claude Code on GitHub. Install the stitch-loop skill. This is the one that takes your project files and builds out a full page automatically.

npx skills add google-labs-code/stitch-skills --skill stitch-loop --global

Open Claude Code and paste this prompt. Fill in the three required placeholders: what you're building, who it's for, and the visual direction. The optional line at the bottom adds detail but isn't needed to get a good result.

Set up my stitch-loop project files. I want to build [DESCRIBE YOUR WEBSITE]
for [TARGET VISITOR]. Generate a site.md file with my pages. Create a Stitch
home screen with this vibe: [YOUR STYLE], then run design MD to generate
DESIGN.md. Save both files. Don't run the loop yet.

Optional: Pages needed: [PAGES]. Key sections: [KEY SECTIONS].
Primary CTA: [PRIMARY CTA]. Style references: [STYLE REFERENCES].

Claude Code will generate two files: site.md (your site structure and content plan) and design.md (your visual design system). These are the blueprints for Step 4.

Now run the skill. This single prompt kicks off the full build: Claude Code reads your site.md and design.md, generates React components matching your Stitch design system, and deploys the result to a live Vercel URL.

Run the stitch-loop skill across all my pages. Build with React
components and deploy to a live Vercel URL.

Claude Code will work through the build automatically. When it's done, it gives you a live Vercel URL. That's your website, live on the internet.

Once the skill is installed, try these for your first run. Each description goes into the Step 4 prompt. Swap it in and run.

A landing page for my consulting business. We help professional
service firms implement AI tools and automations. Target audience:
business owners with 5-50 employees. Main CTA: book a free discovery call.

A portfolio site for a freelance brand strategist. Show case studies,
a brief about section, services offered, and a contact form.
Clean, minimal, premium feel.

A pricing and features page for a B2B SaaS tool that automates client
reporting for marketing agencies. Three pricing tiers. Hero section
with a headline and one CTA button. Feature comparison table below.

A lead generation page for a local accounting firm. Target audience:
small business owners. Services: bookkeeping, tax prep, payroll.
Main CTA: get a free 30-minute consult. Include trust signals like
years in business and client count.