design-looplisted

# 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/@goo