Skip to content
Get packs

Guide · Agent skill

How to use the Stitch Build Loop agent skill (stitch-loop)

Updated · written with AI from the project's own documentation and checked against our catalogue data

The stitch-loop skill teaches an AI agent to build a static website one page at a time using Google's Stitch design tool. Each run reads a task file called a baton, generates the page through Stitch, places it in your site folder, updates your site notes, and writes the next task so the loop can continue. This guide is for people who may not have used agent skills before, and it walks through what the skill does, how to install it, how to trigger it, and what to watch for.

Stitch Build Loopgoogle-labs-code/stitch-skills · Apache-2.0

Quick start

  1. 1Confirm access and files. Make sure you have Stitch MCP Server access, a Stitch project, and .stitch/DESIGN.md and .stitch/SITE.md in your project.
  2. 2Download and unzip the skill. Download the stitch-loop ZIP from this page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder.
  3. 3Write the first baton. Create .stitch/next-prompt.md with a page field in the frontmatter and a prompt that includes the full design system block.
  4. 4Make a natural request. Ask the agent to read next-prompt.md, generate the page with Stitch, and prepare the next iteration.
  5. 5Review the output. Check the HTML in site/public/ and the screenshot in .stitch/designs/, and confirm the sitemap and navigation were updated.
  6. 6Check the next baton. Read the new next-prompt.md before running again so you know what the loop will build next.

What an agent skill is and what stitch-loop makes the agent do

An agent skill is a folder of instructions that an AI agent loads when a task matches it. The stitch-loop skill is a SKILL.md file plus supporting files that tell the agent how to run one iteration of a site-building loop.

Each iteration follows the same order: read the current task from .stitch/next-prompt.md, generate a page with the Stitch MCP tools, integrate the page into the site, update .stitch/SITE.md, and write the next task to the baton file so the next run has something to do.

  • Reads the page name from the frontmatter and the prompt from the body of the baton file
  • Generates the screen through Stitch and saves the HTML and a PNG screenshot under .stitch/designs/
  • Moves the HTML to site/public/ and wires up placeholder navigation links
  • Optionally opens the page in a browser to compare it with the Stitch screenshot
  • Marks the completed page in the sitemap and writes the next baton

Check the requirements before you install

The core workflow cannot run without access to the Stitch MCP Server. You also need a Stitch project, which can be existing or newly created, and two files in a .stitch folder: DESIGN.md (the visual design system) and SITE.md (the site vision and roadmap). The source suggests generating DESIGN.md with the design-md skill if you do not have one.

  • Required: Stitch MCP Server access
  • Required: a Stitch project (existing or new)
  • Required: .stitch/DESIGN.md, which can be generated with the design-md skill
  • Required: .stitch/SITE.md with the site vision and roadmap
  • Optional: Chrome DevTools MCP Server for visual verification
  • Optional: Bash access to run a local dev server such as npx serve

Install the stitch-loop skill

Download the stitch-loop ZIP from this page and unzip it. Then place the folder in one of two locations. Use ~/.claude/skills/ to make the skill available to all your projects, or use a project's .claude/skills/ folder to limit it to that project.

If you use the Claude apps instead of the file system, you can upload the skill under Settings → Capabilities → Skills.

  • Personal install: unzip into ~/.claude/skills/
  • Project install: unzip into the project's .claude/skills/ folder
  • Claude apps: Settings → Capabilities → Skills, then upload the skill

Set up your project files

Create a .stitch folder at the root of your project. The skill expects DESIGN.md and SITE.md there, plus a next-prompt.md baton file. It creates metadata.json and a designs folder during runs. The SITE.md file should include your Stitch Project ID and a sitemap, roadmap, and creative ideas section, because the agent reads those sections before choosing a page.

  • .stitch/DESIGN.md: visual design system used in every Stitch prompt
  • .stitch/SITE.md: vision, Stitch Project ID, sitemap (Section 4), roadmap (Section 5), creative ideas (Section 6)
  • .stitch/next-prompt.md: the baton with the first page task
  • site/public/: where production pages are placed

Write a baton and trigger the skill with a natural request

The baton is a markdown file whose YAML frontmatter has a page field. That value sets the output filename, so page: about produces about.html. The body holds the prompt, and it must include the full design system block copied from DESIGN.md.

To start a run, ask the agent in plain language. The README gives this example request, and it works as a starting point for your own wording.

  • Example request: Read my next-prompt.md and generate the page using Stitch, then prepare the next iteration.
--- page: about --- A page describing how the company works. **DESIGN SYSTEM (REQUIRED):** [Copy from .stitch/DESIGN.md] **Page Structure:** 1. Header with navigation 2. Main content 3. Footer with links

Review the output and keep the loop controlled

After a run, check the generated HTML in site/public/ and the screenshot in .stitch/designs/. If Chrome DevTools MCP is available, the skill can open the page at a local address such as http://localhost:3000 and compare the rendered result with the Stitch screenshot. If the files already exist, the skill asks whether to refresh from Stitch or reuse the local copies.

Because the skill updates site files and writes the next baton, review what it changes before starting another run, especially if you are experimenting with repeated autonomous runs.

  • Compare site/public/{page}.html with .stitch/designs/{page}.png
  • Check that navigation links point to the new page and headers and footers match
  • Read the updated SITE.md sitemap and the new next-prompt.md before continuing

What people use it for

  • Drafting a multi-page static marketing site, one Stitch-generated page per iteration
  • Extending an existing site by adding new pages from the roadmap in SITE.md
  • Prototyping a design system's pages with a designer who already uses Stitch
  • Testing how an agent handles repeated, autonomous site-building runs

Frequently asked questions

How do I install the stitch-loop skill?

Download the stitch-loop ZIP from this page and unzip it into ~/.claude/skills/ for all projects, or into a project's .claude/skills/ folder for one project. In the Claude apps, you can upload it under Settings → Capabilities → Skills.

Do I need the Stitch MCP Server to use stitch-loop?

Yes. The source says the core workflow cannot run without access to the Stitch MCP Server. You also need a Stitch project and the DESIGN.md and SITE.md files.

What is the baton file?

The baton is .stitch/next-prompt.md. It holds the task for the current run in YAML frontmatter and markdown body, and the agent rewrites it at the end so the loop continues.

Is stitch-loop free to use?

The skill is published under the Apache-2.0 licence. This page does not state pricing for Stitch or the MCP Server, so check Google's own terms for those.

Can I use stitch-loop without Chrome DevTools MCP?

Yes. Chrome DevTools MCP is optional and only enables visual verification. Without it, the skill skips that step and continues to the documentation update and next baton.

What should I use instead if I only need one page?

The source says the loop setup adds overhead, so for a single quick page with no ongoing site structure, a simpler approach such as generating the page directly with Stitch is a better fit. Choose stitch-loop when you want an agent to keep extending a site.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use stitch-loop if you already use Stitch and want an agent to draft and extend a static multi-page site with a design-system file and a sitemap. Skip it for one-off pages, for projects where you do not want an agent editing site files or its own task queue unreviewed, or if you cannot get Stitch MCP Server access.

Download the skill