Build in a loop

The stitch-loop skill generates entire websites page by page, automatically. You define the vision and design system upfront. The skill handles the rest — generating each page, wiring navigation, and queuing the next task.

How the baton loop works

A relay baton file at .stitch/next-prompt.md defines the current page to generate. After each page, the skill updates the baton with the next task. This creates a self-sustaining build cycle.

State files the skill manages:

File	Purpose
.stitch/next-prompt.md	Current task (the baton)
.stitch/SITE.md	Site vision, sitemap, and roadmap
.stitch/DESIGN.md	Design system for visual consistency
.stitch/metadata.json	Stitch project and screen IDs

Step 1: Define the site vision

Create .stitch/SITE.md describing your site:

# Site: Artisan Coffee Co.

## Vision
A 5-page portfolio website for a specialty coffee roaster.

## Sitemap
- [ ] index — Landing page with hero and featured blends
- [ ] about — Origin story and roasting philosophy
- [ ] menu — Coffee menu with categories and pricing
- [ ] locations — Store locations with map
- [ ] contact — Contact form and hours

Step 2: Establish a design system

Set visual consistency before generating any pages. The preferred approach — generate a premium design system:

Or extract from an existing codebase:

Step 3: Write the first baton

Create .stitch/next-prompt.md for the first page:

---
page: index
---
A warm, editorial landing page for Artisan Coffee Co.

**DESIGN SYSTEM (REQUIRED):**
[Paste from .stitch/DESIGN.md]

**Page Structure:**
1. Header with logo and navigation links to about, menu, locations, contact
2. Hero section with full-width image, headline, and primary CTA
3. Featured blends section with three product cards
4. Testimonial section with customer quote
5. Footer with address, social links, and copyright

Step 4: Run the loop

The skill generates the screen via Stitch, downloads HTML and screenshots, moves the HTML to site/public/, updates the sitemap, and writes the next baton. Repeat the same prompt for each subsequent page — the baton drives the cycle forward.

Navigation and consistency

The skill automatically wires internal links across pages, adds new pages to the global navigation, and maintains consistent headers and footers.

If navigation drifts after several pages:

Tips for better results

• Edit rather than regenerate. If a page is close but not right, targeted edits preserve more context than starting over.
• Check the design system. Visual drift usually means the DESIGN.md wasn’t included in the prompt.
• Compare screenshots. After generating multiple pages, ask the agent to compare them for visual consistency.

Orchestration options

Method	How it works
Manual	Run the agent repeatedly with the same prompt
Human-in-loop	Review each page before continuing
CI/CD	Trigger on .stitch/next-prompt.md changes
Agent chains	One agent dispatches to another via the baton file