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:

1. Reads the current task from a baton file (.stitch/next-prompt.md)
2. Generates a page using Stitch MCP tools
3. Integrates the page into the site structure
4. Writes the next task to the baton file for the next iteration

Prerequisites

• 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

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 the page name and prompt content.

Step 2: Consult Context Files

Read .stitch/SITE.md (site vision, Stitch Project ID, existing pages, roadmap) and .stitch/DESIGN.md (required visual style).

Step 3: Generate with Stitch

1. Discover namespace by running list_tools to find the Stitch MCP prefix
2. Get or create project — save metadata to .stitch/metadata.json
3. Call [prefix]:generate_screen_from_text with the project ID and prompt
4. Retrieve HTML and PNG assets

Step 4: Integrate into Site

1. Move generated HTML from .stitch/designs/{page}.html to site/public/{page}.html
2. Fix asset paths to be relative
3. Wire existing placeholder links to the new page
4. Update global navigation

Step 5: Update Site Documentation

• Add new page to .stitch/SITE.md Section 4 (Sitemap)
• Remove consumed roadmap items

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 from the roadmap, creative freedom list, or invent something that fits the site vision.

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 in the prompt
• ❌ Leaving placeholder links (href="#") instead of wiring real navigation

Mirrored from https://github.com/google-labs-code/stitch-skills — original author: google-labs-code, license: Apache-2.0. This is an unclaimed mirror. Content and ownership transfer to the author when they claim this account.