Stitch Loop

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

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:

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

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

1. Move generated HTML from .stitch/designs/{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 (.stitch/designs/{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 .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.

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

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 .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"
  }
}

Orchestration Options

The loop can be driven by different orchestration layers:

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:

1. First time setup: Generate .stitch/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 .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

A warm, inviting contact page for Oakwood Furniture Co.

DESIGN SYSTEM (REQUIRED):

• Platform: Web, Desktop-first
• Theme: Light, minimal, photography-first
• Background: Warm barely-there cream (#FCFAFA)
• Surface: Crisp very light gray (#F5F5F5) for cards
• Primary Accent: Deep muted teal-navy (#294056) for buttons and links
• Text Primary: Charcoal near-black (#2C2C2C) for headlines
• Text Secondary: Soft warm gray (#6B6B6B) for body copy
• Font: Modern sans-serif (Manrope or similar), clean and approachable
• Buttons: Subtly rounded corners (8px), comfortable padding
• Cards: Gently rounded corners (12px), whisper-soft shadows on hover
• Layout: Centered content, max-width container, generous whitespace
• No harsh shadows, no aggressive colors - serene and trustworthy

Page Structure: 1. Header: Navigation with logo, Shop, Collections, About, Contact (active) 2. Hero Section: Warm headline "Get in Touch" with a brief welcome message 3. Contact Form: Name, email, message fields with the teal-navy submit button 4. Showroom Info: Address, hours, and an embedded map or beautiful showroom photo 5. Footer: Sustainability, Craftsmanship, Shipping links, and social icons

Project Vision & Constitution

AGENT INSTRUCTION: Read this file before every iteration. It serves as the project's "Long-Term Memory." If next-prompt.md is empty, pick the highest priority item from Section 5 OR invent a new page that fits the project vision.

1. Core Identity

• Project Name: Oakwood Furniture Co.
• Stitch Project ID: 13534454087919359824
• Mission: A premium online furniture showroom showcasing handcrafted, sustainable wood furniture.
• Target Audience: Design-conscious homeowners, interior designers, eco-minded buyers.
• Voice: Warm, refined, artisanal, and trustworthy.

2. Visual Language (Stitch Prompt Strategy)

Strictly adhere to these descriptive rules when prompting Stitch. Do NOT use code.

• The "Vibe" (Adjectives):
• Primary: Warm (Inviting, cozy, natural materials).
• Secondary: Minimal (Clean layouts, breathing room, gallery-like).
• Tertiary: Artisanal (Handcrafted feel, attention to detail).

• Color Philosophy (Semantic):
• Backgrounds: Warm barely-there cream (#FCFAFA). Soft, inviting canvas.
• Accents: Deep muted teal-navy (#294056) for CTAs and highlights.
• Text: Charcoal near-black (#2C2C2C) for headlines, soft gray (#6B6B6B) for body.

3. Architecture & File Structure

• Root: site/public/
• Asset Flow: Stitch generates to queue/ -> Validate -> Move to site/public/.
• Navigation Strategy:
• Global Header: Logo, Shop, Collections, About, Contact.
• Global Footer: Sustainability, Craftsmanship, Shipping Info, Social Links.

4. Live Sitemap (Current State)

The Agent MUST update this section when a new page is successfully merged.

• [x] index.html - Homepage with hero and featured collections.
• [x] collections.html - Overview of furniture categories.
• [x] about.html - Our story and craftsmanship philosophy.
• [ ] contact.html - Contact form and showroom locations.

5. The Roadmap (Backlog)

If `next-prompt.md` is empty or completed, pick the next task from here.

High Priority

• [ ] Product Detail Page: Template for individual furniture items.
• [ ] Contact Page: Contact form with showroom map.

Medium Priority

• [ ] Sustainability Page: Our commitment to eco-friendly practices.
• [ ] Care Guide: How to maintain wood furniture.

6. Creative Freedom Guidelines

When the backlog is empty, follow these guidelines to innovate.

1. Stay On-Brand: New pages must fit the "Warm + Minimal + Artisanal" vibe. 2. Enhance the Core: Support the furniture shopping experience. 3. Naming Convention: Use lowercase, descriptive filenames.

Ideas to Explore

Pick one, build it, then REMOVE it from this list.

• [ ] materials.html - Showcase of wood types and finishes
• [ ] custom.html - Custom furniture ordering process
• [ ] gallery.html - Customer homes featuring our furniture
• [ ] blog.html - Design tips and furniture care articles

7. Rules of Engagement

1. Do not recreate pages in Section 4. 2. Always update next-prompt.md before completing. 3. Consume ideas from Section 6 when you use them. 4. Keep the loop moving.

Stitch Build Loop Skill

Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern.

Install

npx skills add google-labs-code/stitch-skills --skill stitch-loop --global

What It Does

Enables continuous, autonomous website development through a "baton" system:

1. Agent reads task from next-prompt.md 2. Generates page via Stitch MCP tools 3. Integrates into site structure 4. Writes next task to continue the loop

Prerequisites

• Stitch MCP Server access
• A DESIGN.md file (generate with the design-md skill)
• A SITE.md file for project context

Example Prompt

Read my next-prompt.md and generate the page using Stitch, then prepare the next iteration.

Skill Structure

stitch-loop/
├── SKILL.md              — Core pattern instructions
├── README.md             — This file
├── resources/
│   ├── baton-schema.md   — Baton file format spec
│   └── site-template.md  — SITE.md/DESIGN.md templates
└── examples/
    ├── next-prompt.md    — Example baton
    └── SITE.md           — Example site constitution

Works With

• `design-md` skill: Generate DESIGN.md from existing Stitch screens
• CI/CD: GitHub Actions can trigger new iterations on push
• Agent chains: Dispatch to other agents (Jules, etc.)

Learn More

See SKILL.md for complete instructions.

Baton File Schema

The baton file (next-prompt.md) is the communication mechanism between loop iterations. It tells the next agent what to build.

Format

---
page: <filename-without-extension>
---
<prompt-content>

Fields

Frontmatter (YAML)

Body (Markdown)

The body contains the full Stitch prompt, which must include:

1. One-line description with vibe/atmosphere keywords 2. Design System block (required) — copied from DESIGN.md Section 6 3. Page Structure — numbered list of sections/components

Example

---
page: achievements
---
A competitive, gamified achievements page with terminal aesthetics.

**DESIGN SYSTEM (REQUIRED):**
- Platform: Web, Desktop-first
- Theme: Dark, minimal, data-focused
- Background: Deep charcoal/near-black (#0f1419)
- Primary Accent: Teal/Cyan (#2dd4bf)
- Text Primary: White (#ffffff)
- Font: Clean sans-serif (Inter, SF Pro, or system default)
- Layout: Centered content, max-width container

**Page Structure:**
1. Header with title "Achievements" and navigation
2. Badge grid showing locked/unlocked states with icons
3. Progress section with milestone bars
4. Footer with links to other pages

Validation Rules

Before completing an iteration, validate your baton:

• [ ] page frontmatter field exists and is a valid filename
• [ ] Prompt includes the design system block
• [ ] Prompt describes a page NOT already in SITE.md sitemap
• [ ] Prompt includes specific page structure details

Site Template

Use these templates when setting up a new project for the build loop.

SITE.md Template

# Project Vision & Constitution

> **AGENT INSTRUCTION:** Read this file before every iteration. It serves as the project's "Long-Term Memory."

## 1. Core Identity
* **Project Name:** [Your project name]
* **Stitch Project ID:** [Your Stitch project ID]
* **Mission:** [What the site achieves]
* **Target Audience:** [Who uses this site]
* **Voice:** [Tone and personality descriptors]

## 2. Visual Language
*Reference these descriptors when prompting Stitch.*

* **The "Vibe" (Adjectives):**
    * *Primary:* [Main aesthetic keyword]
    * *Secondary:* [Supporting aesthetic]
    * *Tertiary:* [Additional flavor]

## 3. Architecture & File Structure
* **Root:** `site/public/`
* **Asset Flow:** Stitch generates to `queue/` → Validate → Move to `site/public/`
* **Navigation Strategy:** [How nav works]

## 4. Live Sitemap (Current State)
*Update this when a new page is successfully merged.*

* [x] `index.html` - [Description]
* [ ] `about.html` - [Description]

## 5. The Roadmap (Backlog)
*Pick the next task from here if available.*

### High Priority
- [ ] [Task description]
- [ ] [Task description]

### Medium Priority
- [ ] [Task description]

## 6. Creative Freedom Guidelines
*When the backlog is empty, follow these guidelines to innovate.*

1. **Stay On-Brand:** New pages must fit the established vibe
2. **Enhance the Core:** Support the site mission
3. **Naming Convention:** Use lowercase, descriptive filenames

### Ideas to Explore
*Pick one, build it, then REMOVE it from this list.*

- [ ] `stats.html` - [Description]
- [ ] `settings.html` - [Description]

## 7. Rules of Engagement
1. Do not recreate pages in Section 4
2. Always update `next-prompt.md` before completing
3. Consume ideas from Section 6 when you use them

DESIGN.md Template

Generate this using the design-md skill from an existing Stitch screen, or create manually:

# Design System: [Project Name]
**Project ID:** [Stitch Project ID]

## 1. Visual Theme & Atmosphere
[Describe mood, density, aesthetic philosophy]

## 2. Color Palette & Roles
- **[Descriptive Name]** (#hexcode) – [Functional role]
- **[Descriptive Name]** (#hexcode) – [Functional role]

## 3. Typography Rules
[Font family, weights, sizes, spacing]

## 4. Component Stylings
* **Buttons:** [Shape, color, behavior]
* **Cards:** [Corners, background, shadows]
* **Inputs:** [Stroke, background, focus states]

## 5. Layout Principles
[Whitespace strategy, margins, grid alignment]

## 6. Design System Notes for Stitch Generation
**Copy this block into every baton prompt:**

**DESIGN SYSTEM (REQUIRED):**
- Platform: [Web/Mobile], [Desktop/Mobile]-first
- Theme: [Dark/Light], [descriptors]
- Background: [Description] (#hex)
- Primary Accent: [Description] (#hex)
- Text Primary: [Description] (#hex)
- Font: [Description]
- Layout: [Description]