Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern
Permissions
Files
Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern
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.
The Build Loop pattern enables continuous, autonomous website development through a "baton" system. Each iteration:
.stitch/next-prompt.md)Version history
Required:
.stitch/DESIGN.md file (generate one using the design-md skill if needed).stitch/SITE.md file documenting the site vision and roadmapOptional:
The .stitch/next-prompt.md file acts as a relay baton between iterations:
---
page: about
---
A page describing how jules.top tracking works.
**DESIGN SYSTEM (REQUIRED):**
[Copy from .stitch/DESIGN.md Section 6]
**Page Structure:**
1. Header with navigation
2. Explanation of tracking methodology
3. Footer with links
Critical rules:
page field in YAML frontmatter determines the output filename.stitch/DESIGN.mdParse .stitch/next-prompt.md to extract:
page frontmatter fieldBefore generating, read these files:
| File | Purpose |
|---|---|
.stitch/SITE.md | Site vision, Stitch Project ID, existing pages (sitemap), roadmap |
.stitch/DESIGN.md | Required visual style for Stitch prompts |
Important checks:
Use the Stitch MCP tools to generate the page:
list_tools to find the Stitch MCP prefix.stitch/metadata.json exists, use the projectId from it[prefix]:create_project, then call [prefix]:get_project to retrieve full project details, and save them to .stitch/metadata.json (see schema below)[prefix]:get_project again and update the screens map in .stitch/metadata.json with each screen's full metadata (id, sourceScreen, dimensions, canvas position)[prefix]:generate_screen_from_text with:
projectId: The project IDprompt: The full prompt from the baton (including design system block)deviceType: DESKTOP (or as specified).stitch/designs/{page}.html and .stitch/designs/{page}.png already exist:
htmlCode.downloadUrl — Download and save as .stitch/designs/{page}.htmlscreenshot.downloadUrl — Append =w{width} to the URL before downloading, where {width} is the width value from the screen metadata (Google CDN serves low-res thumbnails by default). Save as .stitch/designs/{page}.png.stitch/designs/{page}.html to site/public/{page}.htmlhref="#") and wire them to the new pageIf the Chrome DevTools MCP Server is available, verify the generated page:
list_tools to see if chrome* tools are presentnpx serve site/public)[chrome_prefix]:navigate to open http://localhost:3000/{page}.html[chrome_prefix]:screenshot to capture the rendered page.stitch/designs/{page}.png) for fidelityNote: This step is optional. If Chrome DevTools MCP is not installed, skip to Step 5.
Modify .stitch/SITE.md:
[x]You MUST update .stitch/next-prompt.md before completing. This keeps the loop alive.
.stitch/SITE.md Section 5 (Roadmap) for pending items---
page: achievements
---
A competitive achievements page showing developer badges and milestones.
**DESIGN SYSTEM (REQUIRED):**
[Copy the entire design system block from .stitch/DESIGN.md]
**Page Structure:**
1. Header with title and navigation
2. Badge grid showing unlocked/locked states
3. Progress bars for milestone tracking
project/
├── .stitch/
│ ├── metadata.json # Stitch project & screen IDs (persist this!)
│ ├── DESIGN.md # Visual design system (from design-md skill)
│ ├── SITE.md # Site vision, sitemap, roadmap
│ ├── next-prompt.md # The baton — current task
│ └── designs/ # Staging area for Stitch output
│ ├── {page}.html
│ └── {page}.png
└── site/public/ # Production pages
├── index.html
└── {page}.html
.stitch/metadata.json SchemaThis file persists all Stitch identifiers so future iterations can reference them for edits or variants. Populate it by calling [prefix]:get_project after creating a project or generating screens.
{
"name": "projects/6139132077804554844",
"projectId": "6139132077804554844",
"title": "My App",
"visibility": "PRIVATE",
"createTime": "2026-03-04T23:11:25.514932Z",
"updateTime": "2026-03-04T23:34:40.400007Z",
"projectType": "PROJECT_DESIGN",
"origin": "STITCH",
"deviceType": "MOBILE",
"designTheme": {
"colorMode": "DARK",
"font": "INTER",
"roundness": "ROUND_EIGHT",
"customColor": "#40baf7",
"saturation": 3
},
"screens": {
"index": {
"id": "d7237c7d78f44befa4f60afb17c818c1",
"sourceScreen": "projects/6139132077804554844/screens/d7237c7d78f44befa4f60afb17c818c1",
"x": 0,
"y": 0,
"width": 390,
"height": 1249
},
"about": {
"id": "bf6a3fe5c75348e58cf21fc7a9ddeafb",
"sourceScreen": "projects/6139132077804554844/screens/bf6a3fe5c75348e58cf21fc7a9ddeafb",
"x": 549,
"y": 0,
"width": 390,
"height": 1159
}
},
"metadata": {
"userRole": "OWNER"
}
}
| Field | Description |
|---|---|
name | Full resource name (projects/{id}) |
projectId | Stitch project ID (from create_project or get_project) |
title | Human-readable project title |
designTheme | Design system tokens: color mode, font, roundness, custom color, saturation |
deviceType | Target device: MOBILE, DESKTOP, TABLET |
screens | Map of page name → screen object. Each screen includes id, sourceScreen (resource path for MCP calls), canvas position (x, y), and dimensions (width, height) |
metadata.userRole | User's role on the project (OWNER, EDITOR, VIEWER) |
The loop can be driven by different orchestration layers:
| Method | How it works |
|---|---|
| CI/CD | GitHub Actions triggers on .stitch/next-prompt.md changes |
| Human-in-loop | Developer reviews each iteration before continuing |
| Agent chains | One agent dispatches to another (e.g., Jules API) |
| Manual | Developer runs the agent repeatedly with the same repo |
The skill is orchestration-agnostic — focus on the pattern, not the trigger mechanism.
This skill works best with the design-md skill:
.stitch/DESIGN.md using the design-md skill from an existing Stitch screen.stitch/next-prompt.md (breaks the loop).stitch/DESIGN.md in the prompthref="#") instead of wiring real navigation.stitch/metadata.json after creating a new project| Issue | Solution |
|---|---|
| Stitch generation fails | Check that the prompt includes the design system block |
| Inconsistent styles | Ensure .stitch/DESIGN.md is up-to-date and copied correctly |
| Loop stalls | Verify .stitch/next-prompt.md was updated with valid frontmatter |
| Navigation broken | Check all internal links use correct relative paths |
In these kits
Works with
Claude, Codex, Cursor & more