Stitch Build Loop Skill

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

Optional:

Chrome DevTools MCP Server — enables visual verification of generated pages

The Baton System

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:

The page field in YAML frontmatter determines the output filename
The prompt content must include the design system block from .stitch/DESIGN.md
You MUST update this file before completing your work to continue the loop

Execution Protocol

Step 1: Read the Baton

Parse .stitch/next-prompt.md to extract:

Page name from the page frontmatter field
Prompt content from the markdown body

Step 2: Consult Context Files

Before 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:

Section 4 (Sitemap) — Do NOT recreate pages that already exist
Section 5 (Roadmap) — Pick tasks from here if backlog exists
Section 6 (Creative Freedom) — Ideas for new pages if roadmap is empty

Step 3: Generate with Stitch

Use the Stitch MCP tools to generate the page:

Discover namespace: Run list_tools to find the Stitch MCP prefix
Get or create project:
- If .stitch/metadata.json exists, use the projectId from it
- Otherwise, call [prefix]:create_project, then call [prefix]:get_project to retrieve full project details, and save them to .stitch/metadata.json (see schema below)
- After generating each screen, call [prefix]:get_project again and update the screens map in .stitch/metadata.json with each screen's full metadata (id, sourceScreen, dimensions, canvas position)
Generate screen: Call [prefix]:generate_screen_from_text with:
- projectId: The project ID
- prompt: The full prompt from the baton (including design system block)
- deviceType: DESKTOP (or as specified)
Retrieve assets: Before downloading, check if .stitch/designs/{page}.html and .stitch/designs/{page}.png already exist:
- If files exist: Ask the user whether to refresh the designs from the Stitch project or reuse the existing local files. Only re-download if the user confirms.
- If files do not exist: Proceed with download:
  - htmlCode.downloadUrl — Download and save as .stitch/designs/{page}.html
  - screenshot.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

Step 4: Integrate into Site

Move generated HTML from .stitch/designs/{page}.html to site/public/{page}.html
Fix any asset paths to be relative to the public folder
Update navigation:
- Find existing placeholder links (e.g., href="#") and wire them to the new page
- Add the new page to the global navigation if appropriate
Ensure consistent headers/footers across all pages

Step 4.5: Visual Verification (Optional)

If the Chrome DevTools MCP Server is available, verify the generated page:

Check availability: Run list_tools to see if chrome* tools are present
Start dev server: Use Bash to start a local server (e.g., npx serve site/public)
Navigate to page: Call [chrome_prefix]:navigate to open http://localhost:3000/{page}.html
Capture screenshot: Call [chrome_prefix]:screenshot to capture the rendered page
Visual comparison: Compare against the Stitch screenshot (.stitch/designs/{page}.png) for fidelity
Stop server: Terminate the dev server process

Note: This step is optional. If Chrome DevTools MCP is not installed, skip to Step 5.

Step 5: Update Site Documentation

Modify .stitch/SITE.md:

Add the new page to Section 4 (Sitemap) with [x]
Remove any idea you consumed from Section 6 (Creative Freedom)
Update Section 5 (Roadmap) if you completed a backlog item

Step 6: Prepare the Next Baton (Critical)

You MUST update .stitch/next-prompt.md before completing. This keeps the loop alive.

Decide the next page:
- Check .stitch/SITE.md Section 5 (Roadmap) for pending items
- If empty, pick from Section 6 (Creative Freedom)
- Or invent something new that fits the site vision
Write the baton with proper YAML frontmatter:

---
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

File Structure Reference

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` Schema

This 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) |

Orchestration Options

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.

Design System Integration

This skill works best with the design-md skill:

First time setup: Generate .stitch/DESIGN.md using the design-md skill from an existing Stitch screen
Every iteration: Copy Section 6 ("Design System Notes for Stitch Generation") into your baton prompt
Consistency: All generated pages will share the same visual language

Common Pitfalls

❌ Forgetting to update .stitch/next-prompt.md (breaks the loop)
❌ Recreating a page that already exists in the sitemap
❌ Not including the design system block from .stitch/DESIGN.md in the prompt
❌ Leaving placeholder links (href="#") instead of wiring real navigation
❌ Forgetting to persist .stitch/metadata.json after creating a new project

Troubleshooting

| 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 |

Agent Skills: Stitch Build Loop

Install this agent skill to your local

Skill Files