What is the design-loop skill?
The design-loop skill is a SKILL.md in the frontend plugin of Jezweb's skills repository. It reads a baton file, .design/next-prompt.md, generates one HTML and Tailwind page, wires it into the site, checks it in a browser if one is available, then writes the next task so the loop continues.
The design-loop skill is a folder in Jezweb's skills repository that turns a site build into a relay. A file named .design/next-prompt.md holds the current task, and every pass ends by writing the next one.
That baton carries a page name, an optional layout and a prompt body. The agent builds the page, then picks what comes next from the roadmap in .design/SITE.md. When the baton reads page: _complete, the loop stops.
What one pass does
- Reads the baton, then the sitemap in SITE.md, the design system in DESIGN.md and the newest page in site/public.
- Writes one self-contained HTML file using the Tailwind CDN with no build step, copying the header, nav and footer verbatim from the previous page.
- Adds the new page to the navigation of every existing page, replaces href="#" placeholders and checks internal links.
- Takes desktop and mobile screenshots when Playwright CLI or a Chrome MCP is available, and skips that step when neither is.
- Marks the page done in SITE.md and writes the next baton so the relay never stalls.
Two generation backends
By default the agent writes the HTML and Tailwind itself, with no dependencies. If the Google Stitch SDK is installed, a STITCH_API_KEY is set and .design/metadata.json exists, the loop generates screens through Stitch and then post-processes the HTML.
Stitch designs are saved to .design/designs and screenshots to .design/screenshots. Refinements use screen.edit instead of a full regeneration. For related Stitch skills in this hub, see stitch-loop and stitch-generate-design.
Who the design-loop skill is for
Best for
- Building every page of a small brochure or marketing site from one brief, with a person saying next or keep going between pages.
- Hands-off runs where the agent works through a roadmap until the site is complete, or a CI job triggered by changes to the baton file.
- Projects that want a sitemap and a written design system kept on disk, so each pass starts from the same facts.
Not for
- A single page or one component. The SITE.md and DESIGN.md scaffolding is overhead there. Try frontend-design instead.
- Agents outside the one its frontmatter names. See the compatibility answer in the FAQ below.
- Framework apps or CMS themes. The output is plain HTML files in site/public, not React components or a WordPress theme.
- Sign-off without a browser tool. With none available, the visual check is skipped.
Use it with UiChemy
The loop ends with static HTML and Tailwind files in site/public. To move a finished build into WordPress, UiChemy AI to WordPress imports an AI build, and you can refine the result in UiChemy Composer. Click Get Started on uichemy.com.
If you already have a live site to match, extract its tokens first and feed them into DESIGN.md. See extract-design-system and design-md for that step.
How to install Design Loop Skill: Build a Whole Site Page by Page
git clone https://github.com/jezweb/claude-skills.gitKnow the install route
The repository README documents a plugin marketplace, but its list of frontend plugin skills does not include design-loop. The skill lives in the plugins/frontend/skills/design-loop folder, so take it from the repository.
Clone the repository
Run
git clone https://github.com/jezweb/claude-skills.git.Copy the skill folder
Copy plugins/frontend/skills/design-loop into the folder your agent loads skills from.
Optional: enable Stitch
Run
npm install @google/stitch-sdk, set STITCH_API_KEY in the environment or in .dev.vars, and keep the project id in .design/metadata.json. Without these the loop uses agent generation.Start the loop
Ask the agent to build all pages of a site as a design loop. On a first run it asks for the site name, audience, aesthetic, page list and brand colours.
Check that it loaded
Ask for a design loop on a small site. The agent should ask its setup questions, create .design/SITE.md, DESIGN.md and next-prompt.md, then write the first page into site/public.
Key features
- Baton file relayThe file .design/next-prompt.md carries YAML frontmatter with page and an optional layout of standard, wide or sidebar, followed by the prompt. Each pass must rewrite it before finishing.
- First run bootstrapIf .design does not exist, the agent asks for site name, audience, aesthetic, page list and brand colours, then creates SITE.md, DESIGN.md, next-prompt.md and a site/public folder.
- Agent or Stitch generationThe agent writes HTML and Tailwind by default. When the Stitch SDK, an API key and .design/metadata.json are all present, screens come from Stitch with a desktop, mobile or tablet device type.
- Context before generationBefore writing, the agent reads the sitemap in SITE.md, the palette and type rules in DESIGN.md, and the most recent page, so it does not recreate an existing page.
- Site integration stepAfter each page, navigation is updated across all existing pages, placeholder links are replaced with real URLs, and header, footer and nav are checked for consistency.
- Visual verificationWith Playwright CLI or a Chrome MCP, the agent serves site/public on port 3456, screenshots the page at 1280px and 375px, compares it with the design system and fixes issues.
- Living site documentationSITE.md is updated each pass: the page is ticked off in the sitemap, consumed roadmap items are removed and new ideas are added.
- Drift prevention rulesA consistency table says to copy header and footer HTML verbatim, keep the Tailwind config identical, use exact hex codes from DESIGN.md and reuse the same font imports.
- Design mappingsVague requests become precise instructions: menu at the top turns into a sticky navigation bar, and a Modern vibe becomes clean, minimal layouts with generous whitespace and high contrast type.
Frequently asked questions
What is the design-loop skill?
It is a skill in the frontend plugin of Jezweb's skills repository. It builds a multi-page site as a relay: each pass reads a task from .design/next-prompt.md, generates one page, integrates and checks it, then writes the next task into the same file.
How do I install the design-loop skill?
The jezweb README documents a plugin marketplace, but its list of frontend plugin skills does not name design-loop. Clone the repository and copy plugins/frontend/skills/design-loop into the folder your agent loads skills from. Then ask the agent to build a site as a design loop.
What is the baton file in design-loop?
The baton is .design/next-prompt.md. Its frontmatter names the page to build and an optional layout, and its body holds the page brief, the design system block and a numbered page structure. The agent must rewrite it at the end of every pass.
Does the design-loop skill need Google Stitch?
No. Agent generation of HTML and Tailwind is the default and needs no dependencies. Stitch is used only when the @google/stitch-sdk package is installed, a STITCH_API_KEY is set and .design/metadata.json exists. Otherwise the loop falls back to agent generation.
Can the design-loop skill run without a browser tool?
Yes. The visual check only runs if Playwright CLI or a Chrome MCP is available. Without one, the skill skips straight to updating SITE.md and writing the next baton, so you review the pages yourself in a browser.
Which AI coding agents can use the design-loop skill?
The SKILL.md frontmatter marks compatibility as claude-code-only and lists Read, Write, Edit, Glob, Grep and Bash as allowed tools. The repository describes itself as skills for Claude Code. Other agents may load the folder, but the repository does not confirm it.
How does design-loop keep pages consistent?
It copies the header, nav and footer HTML from the newest page instead of regenerating them, keeps one Tailwind config and font import across pages, and uses exact hex codes from DESIGN.md. For writing that design system file, see design-md.
What license does the design-loop skill use?
The repository is licensed MIT, and the README ends with a short License section that says MIT. The skill folder sits inside that repository, so it is covered together with the rest of the plugins. Check the repository itself before redistributing it.