design-loop
Autonomous multi-page site builder using a baton-passing loop. Each iteration reads a task from .design/next-prompt.md, generates a page in HTML/Tailwind, integrates it into the site, verifies visually, then writes the next task to keep the loop alive. Use whenever the user asks to build an entire site autonomously, build all pages of a site, generate multiple pages in sequence, or run a 'design loop' / 'baton loop' / 'autonomous site build' — even if they say 'just keep going' or 'build the next page' or 'next page' mid-flow.
npx skills add jezweb/claude-skills --skill design-loop --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Build complete multi-page websites through an autonomous baton-passing loop. Each iteration reads a task from .design/next-prompt.md, generates a page in HTML/Tailwind, integrates it into the site, verifies visually (if browser automation is available), then writes the NEXT task to keep the loop alive.
How it works
- Uses a baton file at .design/next-prompt.md as a relay baton between iterations.
- Each cycle reads the current task, then generates the page either via Claude or Google Stitch.
- Integrates the new page into the site structure (navigation, links).
- Verifies visually via browser automation if available.
- Updates site documentation and writes the NEXT task to the baton to continue the loop.
- Loop can be driven by human-in-the-loop, fully autonomous Claude run, or CI/CD triggers on baton changes.
Generation backends:
- Claude (default): Generates complete HTML with Tailwind CDN, ensuring design system conformity and identical header/nav/footer as existing pages.
- Google Stitch: If available, uses Stitch to generate screens, then post-processes HTML to align with shared elements and navigation, before writing to site/public.
When to use it
Use for building entire sites autonomously, creating all pages, generating multiple pages in sequence, or running a "design loop" / baton loop / autonomous site build. Triggered when user asks to continue or when mid-flow commands like "build the next page" are issued.
What it can touch
- Writes generated pages to site/public/{page}.html
- Reads/writes .design/next-prompt.md and related metadata
- May utilize node tooling for Stitch interactions (Stitch SDK) and local assets in .design/metadata.json
- Reads .design/SITE.md and .design/DESIGN.md for context
Caveats
- Compatibility limited to claude-code-only environments; requires appropriate tools declared in frontmatter.
- If browser automation is unavailable, visual verification is skipped.
- Stitch usage depends on environment: requires npm package @google/stitch-sdk and STITCH_API_KEY (or STITCH_ACCESS_TOKEN + GOOGLE_CLOUD_PROJECT); errors throw StitchError with codes AUTH_FAILED, NOT_FOUND, RATE_LIMITED.
- Header/Nav/Footer must be copied verbatim from the most recent page; design drift is discouraged as a rule.
# 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 | | **Goog
- Overview
- Generation Backends
- Detecting Stitch
- Stitch SDK Reference
- Stitch Project Persistence
- Getting Started
- First Run: Bootstrap the Project
- Subsequent Runs: Read the Baton
- The Baton File
- Execution Protocol
- Step 1: Read the Baton
- Step 2: Consult Context Files
- Step 3: Generate the Page
- Step 4: Integrate into the Site
What does the design-loop skill do?
Autonomous multi-page site builder using a baton-passing loop. Each iteration reads a task from .design/next-prompt.md, generates a page in HTML/Tailwind, integrates it into the site, verifies visually, then writes the next task to keep the loop alive. Use whenever the user asks to build an entire site autonomously, build all pages of a site, generate multiple pages in sequence, or run a 'design loop' / 'baton loop' / 'autonomous site build' — even if they say 'just keep going' or 'build the next page' or 'next page' mid-flow.
How do I install it?
Run `npx skills add jezweb/claude-skills --skill design-loop --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From jezweb/claude-skills, a repository with 954 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.