stitch-loop Skill for Claude: Build a Website Page by Page with Stitch

stitch-loop makes Claude build a website one page at a time with Google Stitch, leaving a task file for the next run.

Installs: 56.8K; on skills.sh
Stars: 8.7K; on GitHub
Files: 5; besides SKILL.md
Updated: Aug 2026; last repo commit

This skill, from Google Labs' stitch-skills repo, runs a baton loop. Each run reads the task in .stitch/next-prompt.md, generates that page with the Stitch MCP tools, drops the HTML into site/public/, wires up navigation, updates .stitch/SITE.md, then writes the next page's task to the baton file so the loop continues.

It needs the Stitch MCP server, a Stitch project, a .stitch/DESIGN.md and a .stitch/SITE.md. A Chrome DevTools MCP server is optional and adds a visual check. The SKILL.md says the loop can run with a person reviewing each pass, from CI, or through agent chains.

Good for

Developers building a multi-page site from Stitch designs
Teams that want an unattended build loop in CI
Designers who review each generated page before the next

Install stitch-loop

Claude Code

Copy this prompt.

Install the stitch-loop skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

Set up the Stitch MCP server first, following the repo README's link to the Stitch MCP setup page. The command also installs design-md, the skill SKILL.md names for creating the required .stitch/DESIGN.md. The skill's own README shows only --skill stitch-loop; the extra --skill design-md follows the skills CLI's repeated-flag form. The chrome tools are optional and only used for the visual check. The plugin route installs the repo's whole suite: the README names three plugins (stitch-design, stitch-build, stitch-utilities) and the file tree holds 16 skills across them. Their plugin.json files list no hooks or MCP servers. Pick one route, not both.

From the project README. Source.

What's in the skill

When it loads

Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern

Sections in SKILL.md

Overview
Prerequisites
The Baton System
Execution Protocol
Step 1: Read the Baton
Step 2: Consult Context Files
Step 3: Generate with Stitch
Step 4: Integrate into Site
Step 4.5: Visual Verification (Optional)
Step 5: Update Site Documentation
Step 6: Prepare the Next Baton (Critical)
File Structure Reference
.stitch/metadata.json Schema
Orchestration Options
Design System Integration
Common Pitfalls

Key facts

Author: google-labs-code (GitHub repo owner)
Repo: google-labs-code/stitch-skills
Installs on skills.sh: 56,782 as of 2026-11-02
GitHub stars (repo): 8,653 as of 2026-11-02
Last repo commit: 2026-08-17
License: Apache-2.0
Files: 6 files including SKILL.md (README.md, 2 examples and 2 resource templates)
Works in: Codex, Antigravity, Gemini CLI, Claude Code, Cursor and OpenCode (manual install), per the repo README
Allowed tools in SKILL.md: Stitch and Chrome MCP tools, Read, Write, Bash
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

Task file with the page name and prompt
YAML frontmatter names the page, and the body holds the prompt including the design system block. The skill must update it before finishing or the loop stops.
The baton: .stitch/next-prompt.md
Get page name and prompt
Parses the `page` field and the prompt text.
Files · Step 1: Read the baton
SITE.md and DESIGN.md
Checks the sitemap so existing pages are not recreated, then the roadmap and creative-freedom ideas.
Files · Step 2: Consult context files
Create or reuse a project, then make the screen
Finds the Stitch tool prefix, reads or creates the project, saves its details to `.stitch/metadata.json`, generates the screen (desktop by default) and downloads the HTML and screenshot. It asks before replacing existing local designs.
Write · Step 3: Generate with Stitch
Move HTML to site/public and wire navigation
Moves the page to `site/public/{page}.html`, fixes asset paths, replaces placeholder links and keeps headers and footers consistent.
Write · Step 4: Integrate into the site
Preview in Chrome and compare
With the Chrome DevTools MCP server it starts a local server such as `npx serve site/public`, takes a screenshot, compares it to the Stitch one and stops the server.
Runs code · Step 4.5: Visual verification (optional)
Tick the sitemap and roadmap
Adds the new page to the sitemap and removes ideas it used.
Write · Step 5: Update SITE.md
Choose the next page and write it
Picks from the roadmap, then creative-freedom ideas, or invents one that fits the site vision.
Write · Step 6: Prepare the next baton

From the official docs

Permissions

Medium risk

Each run writes generated pages and links into your site folder and can repeat on its own through the baton file. Work on a branch and review each page before deploying.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It writes and rewrites files in your site
Each run moves generated HTML into site/public, edits navigation links and updates .stitch files. Work on a branch and review the diff.
It can run unattended in a loop
Each run must write the next task, so the work continues until something stops it. The SKILL.md lists CI triggers and agent chains as options. Limit the pages per run or keep a person approving each pass.
It can start a local web server
The optional visual check runs a command such as `npx serve site/public`, then stops it. Skip the Chrome step if you would rather not run it.
Generated HTML goes straight into your site
Pages come from Stitch download links and are saved as-is before Claude fixes paths and links. Read them before you deploy.

Technical details

Talks to	Stitch MCP server. Download URLs for generated HTML and screenshots. localhost preview server
Scopes	Stitch MCP server access

Questions

What does stitch-loop do?

It builds a website page by page. Claude takes one task from a baton file, generates the page in Stitch, adds it to your site folder, updates the site notes and writes the next task, so the next run picks up where this one stopped.

How do I install it?

Use the install box above. The skill's README gives the npx skills add command with --skill stitch-loop; our box also adds design-md, which the SKILL.md names for creating the required .stitch/DESIGN.md. You also need the Stitch MCP server set up as the repo README describes.

What do I need before the first run?

Access to the Stitch MCP server, a .stitch/DESIGN.md and a .stitch/SITE.md. The SKILL.md says to generate the design file with the design-md skill if needed. A Stitch project is created if you do not have one.

Does it run on its own?

It can. The SKILL.md lists human review of each iteration, CI/CD triggered by changes to the baton file, agent chains and manual repeat runs. Pick the one that matches how much you want to review.

Why did my loop stop?

The troubleshooting table says to check that .stitch/next-prompt.md was updated with valid frontmatter. Forgetting to update the baton breaks the loop.

Does it work in Cursor, Codex or Gemini CLI?

The repo README says the Stitch skills are compatible with Codex, Antigravity, Gemini CLI, Claude Code, Cursor and OpenCode (manual install). This skill also needs the Stitch MCP server in whichever one you use.

Is it safe to use?

It writes files into your project and runs generated pages through a local preview, so review each page before you publish. Use a branch, and keep a person in the loop until you trust the output.

Information

updated Nov 2, 2026

Repository: google-labs-code/stitch-skills
Folder: plugins/stitch-utilities/skills/stitch-loop

google-labs-code/stitch-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4

google-labs-code/stitch-skills README · github.com
stitch-loop README · github.com
design-md SKILL.md · github.com
stitch-loop SKILL.md · github.com