skills.rest
jezweb
jezwebCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-loop

Generates multi-page HTML/Tailwind websites through an autonomous baton-passing iteration loop.

989|102|Updated Oct 20, 2025
Search Tags:#HTML#tailwind CSS#website generation#Design system#autonomous loop#Google Stitch#multi-page site
One-click install
npx skills add https://github.com/jezweb/claude-skills --skill design-loop
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-loop
Source: https://github.com/jezweb/claude-skills/tree/main/plugins/frontend/skills/design-loop
Command: npx skills add https://github.com/jezweb/claude-skills --skill design-loop

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/stitch-sdk.

What problem does it solve?

Building a complete multi-page website page-by-page causes visual drift, broken navigation links, and inconsistent headers and footers, and manually coordinating each page generation is slow and error-prone.

Core Features & Use Cases

  • Baton-Passing Loop: Reads each task from .design/next-prompt.md, generates one page, integrates it into the site, then writes the next task to keep the loop alive until the site is complete.
  • Dual Generation Backends: Uses Claude by default for HTML/Tailwind pages, or Google Stitch SDK for higher-fidelity AI designs when the SDK and API key are detected.
  • Consistency Enforcement: Copies header, nav, and footer verbatim across pages, updates navigation site-wide, and optionally verifies pages visually via Playwright or Chrome MCP screenshots.
  • Use Case: Ask Claude to build an entire small-business site — homepage, about, services, contact — and it generates each page in sequence with a shared design system, updating the sitemap and roadmap in .design/SITE.md as it goes.

Quick Start

Ask Claude to build an entire multi-page website autonomously using the design loop, starting with the homepage.

Frequently Asked Questions about design-loop

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an entire multi-page website autonomously with Claude?▼

Start the design loop by describing your site, audience, aesthetic, and page list. The skill bootstraps .design/SITE.md and DESIGN.md, then generates one page per iteration, writing the next task to .design/next-prompt.md until the site is complete.

How does the design loop keep pages visually consistent?▼

It copies the header, navigation, and footer HTML verbatim from the most recent page instead of regenerating them, and enforces exact hex colours, fonts, and Tailwind config from DESIGN.md across every page.

Can I use Google Stitch instead of Claude for page generation?▼

Yes, if @google/stitch-sdk is installed, STITCH_API_KEY is set, and .design/metadata.json exists, the loop generates screens via Stitch, downloads the HTML, and post-processes it with your shared header and footer.

What happens when the design loop finishes all pages?▼

When the roadmap in SITE.md is exhausted, the loop writes a baton with page: _complete and outputs a summary of pages built, screenshots captured, and remaining ideas for future work.

Why did my design loop stop after one page?▼

The loop breaks if .design/next-prompt.md is not updated at the end of an iteration. Each cycle must write the next task to the baton file before completing, otherwise there is no task for the following run.

Related Skills

Explore More Design & Creative Skills→
automatedigitalautomatedigital
1

popular-web-designs

Generate HTML/CSS replicating design systems from 54 real-world websites.

Official
Intermediate
ChatAndBuildChatAndBuild
1

cloudflare-deploy

Deploy applications and manage services on Cloudflare using Workers and Pages.

Official
Advanced
dylanfeltusdylanfeltus
178

visual-qa

Automate visual QA of UI screenshots with vision models for design conformance.

Community
Advanced
guillempucheguillempuche

lifecycle/migrate-from-nextjs

Migrate a Next.js App Router application to TanStack Start.

Community
Advanced