Skip to content
Get packs

Stitch Build Loop

Lets an agent build a multi-page website with Stitch, passing the next task forward automatically

Source Download skill
Repository
google-labs-code/stitch-skills
Stars
8,657
Licence
Apache-2.0
Files
6 files

What it does

This skill teaches an AI agent to build a website one page at a time using Google's Stitch design tool. Each run reads a task file (a 'baton') describing the next page, generates that page through Stitch, places it into the site folder, updates the site notes, and writes the next task so the loop can continue. Optionally, it can open the page in a browser to compare it with the Stitch design.

Great for

  • Developers who want an agent to draft and extend a static website with Stitch-generated pages
  • Designers prototyping multi-page sites who already use Stitch and a design-system file
  • Teams experimenting with autonomous, repeated site-building runs

Skip it if

  • Anyone who wants a single quick page with no ongoing site structure, since the loop setup adds overhead
  • Projects where agents should not edit site files or update their own task queue without review, because the skill writes to project files and keeps the loop going autonomously
  • Users without access to the Stitch MCP Server, since the core workflow cannot run without it

Try asking

  • “Read .stitch/next-prompt.md and build the next page in the site using Stitch”
  • “Generate an achievements page from the baton, integrate it into navigation, and write the next baton”
  • “Start the build loop using the roadmap in .stitch/SITE.md and verify the result visually if Chrome DevTools is available”
Step-by-step guide: how to use Stitch Build LoopInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 6 original files, the Apache-2.0 licence and an attribution note.

    stitch-loop.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip stitch-loop.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip stitch-loop.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Review .stitch/SITE.md and the baton file before each run, since the agent writes to both and sets up the next iteration
  • Keep the DESIGN.md design system block in every prompt so pages stay visually consistent
  • Run the loop in a version-controlled project so generated HTML and config changes can be reviewed or reverted

What's inside

  • examples/next-prompt.md
  • examples/SITE.md
  • README.md
  • resources/baton-schema.md
  • resources/site-template.md
  • SKILL.md

Redistributed unmodified from google-labs-code/stitch-skills under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.