# Stitch Loop

> Iterative build loop pattern for autonomously generating multi-page websites using Stitch -- continuous website development via baton system. Triggers on: Stitch loop, website generation, multi-page, build loop. NOT for: single page, React apps.

- Skill: `jh941213/stitch-loop-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jh941213/stitch-loop-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jh941213/stitch-loop-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: jh941213 (https://skillmd.com/u/jh941213)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jh941213/stitch-loop-2

---


# Stitch Build Loop

You are an **autonomous frontend builder** participating in an iterative site build loop. Your goal is to generate pages using Stitch, integrate them 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:
1. Read current task from baton file (`next-prompt.md`)
2. Generate page using Stitch MCP tools
3. Integrate page into site structure
4. Write next task to baton file for next iteration

## Prerequisites

**Required:**
- Stitch MCP server access
- Stitch project (existing or newly created)
- `DESIGN.md` file (if missing, create it first with the `stitch-design-md` skill -- execution order: `stitch-design-md` → this skill)
- `SITE.md` file (site vision and roadmap document)

**Optional:**
- Chrome DevTools MCP server -- enables visual verification of generated pages

## Baton System

The `next-prompt.md` file acts as a relay baton between iterations:

```markdown
---
page: about
---

A page explaining how Jules.top tracks rankings.

**Design System (required):**
[Copy from DESIGN.md section 6]

**Page Structure:**
1. Header with navigation
2. Tracking methodology explanation
3. Footer with links
```

**Important rules:**
- The `page` field in YAML frontmatter determines the output filename
- Prompt content MUST include the design system block from `DESIGN.md`
- Update this file before completing work to maintain the loop

## Execution Protocol

### Step 1: Read the Baton

Parse `next-prompt.md` to extract:
- **Page name** from the `page` frontmatter field
- **Prompt content** from the markdown body

### Step 2: Reference Context Files

Before generation, read these files:

| File | Purpose |
|------|---------|
| `SITE.md` | Site vision, **Stitch Project ID**, existing pages (sitemap), roadmap |
| `DESIGN.md` | Visual style needed for Stitch prompts |

**Important checks:**
- Section 4 (Sitemap) -- do not recreate pages that already exist
- Section 5 (Roadmap) -- if there's a backlog, select tasks from here
- Section 6 (Creative Freedom) -- if roadmap is empty, new page ideas

### Step 3: Generate with Stitch

Use Stitch MCP tools to generate the page.

### Step 4: Integrate into Site

1. Move generated HTML from `queue/{page}.html` to `site/public/{page}.html`
2. Fix asset paths to be relative to the public folder
3. Update navigation:
   - Connect existing placeholder links (e.g., `href="#"`) to new page
   - Add new page to global navigation where appropriate
4. Ensure consistent header/footer across all pages

### Step 5: Update Site Documentation

Modify `SITE.md`:
- Mark new page as `[x]` in Section 4 (Sitemap)
- Remove used ideas from Section 6 (Creative Freedom)
- Update Section 5 (Roadmap) when backlog items are completed

### Step 6: Prepare Next Baton (Important!)

**You MUST update `next-prompt.md` before completing.** This maintains the loop.

## File Structure Reference

```
project/
├── next-prompt.md          # Baton -- current task
├── stitch.json             # Stitch project ID (must preserve!)
├── DESIGN.md               # Visual design system (from design-md skill)
├── SITE.md                 # Site vision, sitemap, roadmap
├── queue/                  # Stitch output staging area
│   ├── {page}.html
│   └── {page}.png
└── site/public/            # Production pages
    ├── index.html
    └── {page}.html
```

## Common Pitfalls

| Issue | Description |
|-------|-------------|
| Missing `next-prompt.md` update | Loop breaks |
| Recreating pages already in sitemap | Duplicate pages |
| Not including design system block in prompt | Inconsistent styles |
| Leaving placeholder links (`href="#"`) | Navigation doesn't work |
| Not saving `stitch.json` after creating new project | Cannot track project |

## Resources

- **Stitch official docs**: https://stitch.withgoogle.com/docs/
- **Stitch MCP setup**: https://stitch.withgoogle.com/docs/mcp/setup
- **stitch-skills repo**: https://github.com/google-labs-code/stitch-skills