Design Loop, Autonomous Site Builder

Build complete multi-page websites through an autonomous loop. Each iteration reads a task, generates a page, integrates it, verifies it visually, then writes the next task to keep going.

Overview

The Design Loop uses a "baton" pattern, a file (.design/next-prompt.md) acts as a relay baton between iterations. Each cycle:

1. Reads the current task from the baton
2. Generates the page (via Claude or Google Stitch)
3. Integrates into the site structure (navigation, links)
4. Verifies visually via browser automation (if available)
5. Updates site documentation
6. Writes the NEXT task to the baton, keeping the loop alive

This is orchestration-agnostic. The loop can be driven by:

• Human-in-loop: User reviews each page, then says "next" or "keep going"
• Fully autonomous: Claude runs continuously until the site is complete
• CI/CD: Triggered on .design/next-prompt.md changes

Generation Backends

Backend	Setup	Quality	Speed	Best for
Claude (default)	Zero dependencies	Great, production-ready HTML/Tailwind	Fast	Most projects, full code control
Google Stitch	npm install @google/stitch-sdk + API key	Higher fidelity AI designs	~10-20s/screen	Design-heavy projects, visual polish

Detecting Stitch

At the start of each loop, check if Stitch is available:

1. Check if @google/stitch-sdk is installed: ls node_modules/@google/stitch-sdk 2>/dev/null
2. Check if STITCH_API_KEY is set in .dev.vars or environment
3. Check if .design/metadata.json exists (contains Stitch project ID)

If all three are present, use Stitch. Otherwise, fall back to Claude generation.

Stitch SDK Reference

Install: npm install @google/stitch-sdk. Set STITCH_API_KEY in environment or .dev.vars.

import { stitch } from "@google/stitch-sdk";