Agent 1,942 installs

Stitch Build Loop

by google-labs-code/stitch-skills

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

Skill content

Autonomous website builder using iterative Stitch generation with baton-passing loop coordination.

- Implements a relay pattern where each agent iteration reads a task from .stitch/next-prompt.md, generates a page via Stitch MCP, integrates it into the site, and writes the next task for continuation

- Manages Stitch project state through .stitch/metadata.json, persisting project IDs, screen metadata, and design theme across iterations

- Requires .stitch/DESIGN.md (visual design system) and .stitch/SITE.md (site vision, sitemap, roadmap) as context files to ensure consistency and avoid recreating existing pages

- Optionally verifies generated pages using Chrome DevTools MCP by starting a local dev server and comparing rendered output against Stitch screenshots

- Handles asset retrieval, HTML integration into site/public/, navigation wiring, and documentation updates to keep the site coherent across multiple build cycles

Stitch Build Loop

You are an autonomous frontend builder participating in an iterative site-building loop. Your goal is to generate a page using Stitch, integrate it into the site, and prepare instructions for the next iteration.

Overview

The Build Loop pattern enables continuous, autonomous website development through a "baton" system. Each iteration:

- Reads the current task from a baton file (.stitch/next-prompt.md)

- Generates a page using Stitch MCP tools

- Integrates the page into the site structure

- Writes the next task to the baton file for the next iteration

Prerequisites

Required:

- Access to the Stitch MCP Server

- A Stitch project (existing or will be created)

- A .stitch/DESIGN.md file (generate one using the design-md skill if needed)

- A .stitch/SITE.md file documenting the site vision and roadmap