What is the stitch-loop skill?
The stitch-loop skill is a SKILL.md in google-labs-code/stitch-skills. It runs a baton loop: read the next-prompt.md file, generate a screen with the Stitch MCP, save the HTML and image, integrate the page into the site, update SITE.md, then write the next baton so the next run continues the build.
The stitch-loop skill builds a website one page at a time using Google Stitch. It lives in the stitch-utilities plugin and relies on the Stitch MCP to generate screens.
Its core device is a baton. A file named next-prompt.md carries the next page's instructions in a short YAML header, and each run ends by writing the following baton, so the loop can continue across runs and agents.
What changes in your agent's output
- The agent reads
.stitch/next-prompt.mdand consults.stitch/SITE.mdand.stitch/DESIGN.mdfor the site plan and the look. - It generates a screen with
generate_screen_from_textand saves.stitch/designs/{page}.htmland a PNG. - It integrates the page into
site/public/{page}.html, wires navigation and updates SITE.md. - It persists metadata in
.stitch/metadata.jsonand writes the next baton before it stops.
Who the stitch-loop skill is for
Best for
- Building a multi-page marketing site from a plan, one screen per run.
- Running the loop under CI, a human-in-the-loop flow, agent chains or manually.
- Projects where a SITE.md and DESIGN.md already exist.
Not for
- Single-screen designs. A normal Stitch prompt is enough.
- Writing the prompts. enhance-prompt improves each baton.
- Converting screens into React code. See stitch-react-components.
Use it with UiChemy
UiChemy covers the step after Stitch: bring a design or an AI build into WordPress. AI to WordPress imports an existing AI build or clones a site, and Composer edits the result in Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install Stitch Loop Skill: Autonomous Multi-Page Site Builds
git clone https://github.com/google-labs-code/stitch-skills.gitSet up the Stitch MCP server
These skills assume the Stitch MCP server is configured in your agent. Follow the Stitch MCP setup docs first.
Clone the repository
Run
git clone https://github.com/google-labs-code/stitch-skills.git. This skill is at plugins/stitch-utilities/skills/stitch-loop.Copy the skill folder
Copy that folder into your agent's skills folder with every file in it. The project's own plugin installer,
npx plugins add google-labs-code/stitch-skills, is the alternative and installs the whole collection.Invoke it
Create a
.stitchfolder with SITE.md, DESIGN.md and a first next-prompt.md, then ask your agent to run stitch-loop.
Check that it loaded
Run one iteration. A new page should appear under .stitch/designs and site/public, SITE.md should list it, and next-prompt.md should now describe the following page. If the baton is unchanged, the loop did not complete.
Key features
- Baton file
.stitch/next-prompt.mdholds a page field in YAML and the instruction for the next screen. - Site planSITE.md tracks the pages, and the agent updates it after each integration.
- Design system fileDESIGN.md keeps every generated page on the same look.
- Stitch generationScreens come from the Stitch MCP using
generate_screen_from_text. - Saved artifactsEach page is saved as HTML and a PNG under
.stitch/designs. - Navigation wiringThe new page is integrated into the site folder and linked from navigation.
- Optional visual checkA Chrome DevTools MCP check is available for visual verification.
- Four orchestration modesRun it through CI, with a human in the loop, in agent chains or manually.
- Named pitfallsThe skill lists failures to avoid: forgetting the baton, recreating existing pages and dropping the design system block.
Frequently asked questions
What is the stitch-loop skill?
It is a skill in google-labs-code/stitch-skills that builds a multi-page site with Google Stitch. Each run reads a next-prompt.md baton, generates and integrates one page, updates the site plan and writes the next baton.
How do I install stitch-loop?
Configure the Stitch MCP server, then clone google-labs-code/stitch-skills and copy plugins/stitch-utilities/skills/stitch-loop into your agent's skills folder, or use the project's plugin installer. Add a .stitch folder with SITE.md and a first baton.
What is the baton?
A file named next-prompt.md under .stitch with a page field in YAML and the instruction for the next screen. The skill reads it at the start of a run and rewrites it at the end.
Does it run by itself?
It is described as autonomous, but each run completes one iteration and passes the baton on. You choose how to chain runs: CI, a human in the loop, agent chains or manual starts.
Which files does it create?
HTML and PNG files under .stitch/designs, a finished page in site/public, an updated SITE.md and .stitch/metadata.json. It also reads DESIGN.md so every screen shares one look, and it keeps the project's navigation updated.
Which AI agents can use stitch-loop?
The README lists Codex, Antigravity, Gemini CLI, Claude Code, Cursor and OpenCode, with OpenCode set up manually. Every agent needs the Stitch MCP server configured to generate screens. Check your agent's documentation for where skills folders live.
What should I set up first?
Create the look with design-md, sharpen each prompt with enhance-prompt, then start the loop and check each page. To go from generated pages to React components afterwards, read stitch-react-components and continue from there.