skills.rest
scsm-unrestrict
scsm-unrestrictCOMMUNITY
Explore all skills by this author →
GitHub

design-loop

Generates multi-page websites autonomously through a baton-passing loop with HTML and Tailwind output.

1|Updated Aug 18, 2026
Search Tags:#html#design system#tailwind css#google stitch#website generation#autonomous loop#multi-page site
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill design-loop-scsm-unrestrict
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-loop
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/design-loop
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill design-loop-scsm-unrestrict

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, while manually coordinating each page generation is repetitive and error-prone. ## Core Features & Use Cases - Baton-Passing Loop: Each iteration reads a task from .design/next-prompt.md, generates one page, integrates it into the site, verifies it visually, then writes the next task to keep the loop alive. - Dual Generation Backends: Generates pages with Claude by default, or uses the Google Stitch SDK for higher-fidelity AI designs when the SDK and API key are detected. - Cross-Page Consistency Enforcement: Copies header, nav, and footer verbatim from existing pages, wires real navigation links, and updates the sitemap in .design/SITE.md after every page. - Use Case: Ask the agent to build an entire small-business site; it bootstraps SITE.md and DESIGN.md, then autonomously produces the homepage, about, services, and contact pages one per iteration until the roadmap is complete. ## Quick Start Ask the agent to autonomously build all pages of your website using the design loop, providing the site name, audience, aesthetic, and page list.

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 an AI agent?▼

Use the design loop pattern: bootstrap a .design directory with SITE.md, DESIGN.md, and next-prompt.md, then let the agent generate one page per iteration. Each cycle reads the baton task, builds the page in HTML with Tailwind, integrates navigation, and writes the next task.

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. It also enforces exact hex colors from DESIGN.md, identical Tailwind config blocks, and the same font imports across all pages.

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 with a project ID. The loop then generates screens via Stitch, downloads the HTML, and post-processes it to match shared site elements.

What happens when the design loop finishes all pages?▼

The loop ends when all roadmap items in SITE.md are checked off, the user stops it, or the baton contains page: _complete. On completion it outputs a summary of pages built, screenshots captured, and remaining ideas.

Why does the design loop generate only one page per iteration?▼

Generating one page per iteration prevents drift and keeps each cycle verifiable. It allows visual verification via screenshots at desktop and mobile widths before the next page builds on the established shared elements.

Related Skills

Explore More Design & Creative Skills→
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
yandex-ai-studioyandex-ai-studio
2

sourcecraft-sites

Creates and publishes a static website on SourceCraft Sites via the src CLI.

Official
Intermediate
maplin-comaplin-co

accessibility-audit

Audit UI components and web pages for WCAG 2.1/2.2 accessibility compliance.

Official
Intermediate
hasnahasna

next

Convert JSON UI specifications into Next.js applications with routing and SSR.

Official
Advanced