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 (

   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

Required:

• Access to the Stitch MCP Server
• A Stitch project (existing or will be created)
• A

  DESIGN.md

  file (generate one using the

  design-md

  skill if needed)
• A

  SITE.md

  file documenting the site vision and roadmap

Optional:

• Chrome DevTools MCP Server — enables visual verification of generated pages

The Baton System

The

next-prompt.md

---
page: about
---
A page describing how jules.top tracking works.

**DESIGN SYSTEM (REQUIRED):**
[Copy from 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

  DESIGN.md

• You MUST update this file before completing your work to continue the loop

Execution Protocol

Step 1: Read the Baton

Parse

next-prompt.md

• Page name from the

  page

  frontmatter field
• Prompt content from the markdown body

Step 2: Consult Context Files

Before generating, read these files:

SITE.md

DESIGN.md

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:

1. Discover namespace: Run

   list_tools

   to find the Stitch MCP prefix
2. Get or create project:
   • If

     stitch.json

     exists, use the

     projectId

     from it
   • Otherwise, call

     [prefix]:create_project

     and save the ID to

     stitch.json

3. 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)
4. Retrieve assets: Call

   [prefix]:get_screen

   to get:

   • htmlCode.downloadUrl

     — Download and save as

     queue/{page}.html

   • screenshot.downloadUrl

     — Download and save as

     queue/{page}.png

Step 4: Integrate into Site

1. Move generated HTML from

   queue/{page}.html

   to

   site/public/{page}.html

2. Fix any asset paths to be relative to the public folder
3. 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
4. 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:

1. Check availability: Run

   list_tools

   to see if

   chrome*

   tools are present
2. Start dev server: Use Bash to start a local server (e.g.,

   npx serve site/public

   )
3. Navigate to page: Call

   [chrome_prefix]:navigate

   to open

   http://localhost:3000/{page}.html

4. Capture screenshot: Call

   [chrome_prefix]:screenshot

   to capture the rendered page
5. Visual comparison: Compare against the Stitch screenshot (

   queue/{page}.png

   ) for fidelity
6. 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

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

next-prompt.md

1. Decide the next page:
   • Check

     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
2. 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 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/
├── next-prompt.md      # The baton — current task
├── stitch.json         # Stitch project ID (persist this!)
├── DESIGN.md           # Visual design system (from design-md skill)
├── SITE.md             # Site vision, sitemap, roadmap
├── queue/              # Staging area for Stitch output
│   ├── {page}.html
│   └── {page}.png
└── site/public/        # Production pages
    ├── index.html
    └── {page}.html

Orchestration Options

The loop can be driven by different orchestration layers:

next-prompt.md

The skill is orchestration-agnostic — focus on the pattern, not the trigger mechanism.

Design System Integration

This skill works best with the

design-md

1. First time setup: Generate

   DESIGN.md

   using the

   design-md

   skill from an existing Stitch screen
2. Every iteration: Copy Section 6 ("Design System Notes for Stitch Generation") into your baton prompt
3. Consistency: All generated pages will share the same visual language

Common Pitfalls

• ❌ Forgetting to update

  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
• ❌ Forgetting to persist

  stitch.json

  after creating a new project

Troubleshooting

next-prompt.md