design-loop

Name: design-loop
Author: jezweb

749installs96forks

How to install design-loop?

jezweb/claude-skills/design-loop

$npx -y skills add jezweb/claude-skills --skill design-loop

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# Design Loop — Autonomous Site Builder
2
3	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.
4
5	## Overview
6
7	The Design Loop uses a "baton" pattern — a file (`.design/next-prompt.md`) acts as a relay baton between iterations. Each cycle:
8
9	1. Reads the current task from the baton
10	2. Generates the page (via Claude or Google Stitch)
11	3. Integrates into the site structure (navigation, links)
12	4. Verifies visually via browser automation (if available)
13	5. Updates site documentation
14	6. Writes the NEXT task to the baton — keeping the loop alive
15
16	This is orchestration-agnostic. The loop can be driven by:
17	- Human-in-loop: User reviews each page, then says "next" or "keep going"
18	- Fully autonomous: Claude runs continuously until the site is complete
19	- CI/CD: Triggered on `.design/next-prompt.md` changes
20
21	## Generation Backends
22
23	\| Backend \| Setup \| Quality \| Speed \| Best for \|
24	\|---------\|-------\|---------\|-------\|----------\|
25	\| Claude (default) \| Zero dependencies \| Great — production-ready HTML/Tailwind \| Fast \| Most projects, full code control \|
26	\| Google Stitch \| `npm install @google/stitch-sdk` + API key \| Higher fidelity AI designs \| ~10-20s/screen \| Design-heavy projects, visual polish \|
27
28	### Detecting Stitch
29
30	At the start of each loop, check if Stitch is available:
31
32	1. Check if `@google/stitch-sdk` is installed: `ls node_modules/@google/stitch-sdk 2>/dev/null`
33	2. Check if `STITCH_API_KEY` is set in `.dev.vars` or environment
34	3. Check if `.design/metadata.json` exists (contains Stitch project ID)
35
36	If all three are present, use Stitch. Otherwise, fall back to Claude generation.
37
38	### Stitch SDK Reference
39
40	Install: `npm install @google/stitch-sdk`. Set `STITCH_API_KEY` in environment or `.dev.vars`.
41
42	```typescript
43	import { stitch } from "@google/stitch-sdk";
44
45	// Create a project
46	const result = await stitch.callTool("create_project", { title: "My Site" });
47
48	// Reference an existing project
49	const project = stitch.project("4044680601076201931");
50
51	// Generate a screen
52	const screen = await project.generate("A modern landing page with hero section", "DESKTOP");
53
54	// Get assets
55	const htmlUrl = await screen.getHtml(); // Download URL for HTML
56	const imageUrl = await screen.getImage(); // Download URL for screenshot
57
58	// Edit an existing screen (prefer this for refinements)
59	const edited = await screen.edit("Make the background dark and enlarge the CTA button");
60
61	// Generate variants
62	const variants = await screen.variants("Try different colour schemes", {
63	variantCount: 3,
64	creativeRange: "EXPLORE", // "REFINE" \| "EXPLORE" \| "REIMAGINE"
65	aspects: ["COLOR_SCHEME"], // "LAYOUT" \| "COLOR_SCHEME" \| "IMAGES" \| "TEXT_FONT" \| "TEXT_CONTENT"
66	});
67	```
68
69	Device types: `"MOBILE"` \| `"DESKTOP"` \| `"TABLET"` \| `"AGNOSTIC"`. Model selection: pass `"GEMINI_3_PRO"` \| `"GEMINI_3_FLASH"` as third arg to `generate()`.
70
71	Other operations: `stitch.projects()` lists projects, `project.screens()` lists screens, `project.getScreen("id")` fetches one.
72
73	`getHtml()` and `getImage()` return download URLs. Append `=w1280` to image URLs for full resolution. Auth: `STITCH_API_KEY` required (or `STITCH_ACCESS_TOKEN` + `GOOGLE_CLOUD_PROJECT` for OAuth). Errors throw `StitchError` with codes: `AUTH_FAILED`, `NOT_FOUND`, `RATE_LIMITED`.
74
75	### Stitch Project Persistence
76
77	Save Stitch identifiers to `.design/metadata.json` so future iterations can reference them:
78
79	```json
80	{
81	"projectId": "4044680601076201931",
82	"screens": {
83	"index": { "screenId": "d7237c7d78f44befa4f60afb17c818c1" },
84	"about": { "screenId": "bf6a3fe5c75348e58cf21fc7a9ddeafb" }
85	}
86	}
87	```
88
89	Stitch integration tips:
90	1. Persist project ID in `.design/metadata.json` — don't create a new project each iteration
91	2. Use `screen.edit()` for refinements rather than full regeneration
92	3. Post-process Stitch HTML — replace headers/footers with your shared elements
93	4. Include DESIGN.md context in prompts — Stitch generates better results with explicit design system instructions
94
95	## Getting Started
96
97	### First Run: Bootstrap the Project
98
99	If `.design/` doesn't exist yet, create the project scaffolding:
100
101	1. Ask the user for:
102	- Site name and purpose
103	- Target audience
104	- Desired

People who liked this also viewed

6 picks

Type

design-loop

749installs96forks

View on GitHub

How to install design-loop?

jezweb/claude-skills/design-loop

$npx -y skills add jezweb/claude-skills --skill design-loop

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Design Loop — Autonomous Site Builder
2
3	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.
4
5	## Overview
6
7	The Design Loop uses a "baton" pattern — a file (`.design/next-prompt.md`) acts as a relay baton between iterations. Each cycle:
8
9	1. Reads the current task from the baton
10	2. Generates the page (via Claude or Google Stitch)
11	3. Integrates into the site structure (navigation, links)
12	4. Verifies visually via browser automation (if available)
13	5. Updates site documentation
14	6. Writes the NEXT task to the baton — keeping the loop alive
15
16	This is orchestration-agnostic. The loop can be driven by:
17	- Human-in-loop: User reviews each page, then says "next" or "keep going"
18	- Fully autonomous: Claude runs continuously until the site is complete
19	- CI/CD: Triggered on `.design/next-prompt.md` changes
20
21	## Generation Backends
22
23	\| Backend \| Setup \| Quality \| Speed \| Best for \|
24	\|---------\|-------\|---------\|-------\|----------\|
25	\| Claude (default) \| Zero dependencies \| Great — production-ready HTML/Tailwind \| Fast \| Most projects, full code control \|
26	\| Google Stitch \| `npm install @google/stitch-sdk` + API key \| Higher fidelity AI designs \| ~10-20s/screen \| Design-heavy projects, visual polish \|
27
28	### Detecting Stitch
29
30	At the start of each loop, check if Stitch is available:
31
32	1. Check if `@google/stitch-sdk` is installed: `ls node_modules/@google/stitch-sdk 2>/dev/null`
33	2. Check if `STITCH_API_KEY` is set in `.dev.vars` or environment
34	3. Check if `.design/metadata.json` exists (contains Stitch project ID)
35
36	If all three are present, use Stitch. Otherwise, fall back to Claude generation.
37
38	### Stitch SDK Reference
39
40	Install: `npm install @google/stitch-sdk`. Set `STITCH_API_KEY` in environment or `.dev.vars`.
41
42	```typescript
43	import { stitch } from "@google/stitch-sdk";
44
45	// Create a project
46	const result = await stitch.callTool("create_project", { title: "My Site" });
47
48	// Reference an existing project
49	const project = stitch.project("4044680601076201931");
50
51	// Generate a screen
52	const screen = await project.generate("A modern landing page with hero section", "DESKTOP");
53
54	// Get assets
55	const htmlUrl = await screen.getHtml(); // Download URL for HTML
56	const imageUrl = await screen.getImage(); // Download URL for screenshot
57
58	// Edit an existing screen (prefer this for refinements)
59	const edited = await screen.edit("Make the background dark and enlarge the CTA button");
60
61	// Generate variants
62	const variants = await screen.variants("Try different colour schemes", {
63	variantCount: 3,
64	creativeRange: "EXPLORE", // "REFINE" \| "EXPLORE" \| "REIMAGINE"
65	aspects: ["COLOR_SCHEME"], // "LAYOUT" \| "COLOR_SCHEME" \| "IMAGES" \| "TEXT_FONT" \| "TEXT_CONTENT"
66	});
67	```
68
69	Device types: `"MOBILE"` \| `"DESKTOP"` \| `"TABLET"` \| `"AGNOSTIC"`. Model selection: pass `"GEMINI_3_PRO"` \| `"GEMINI_3_FLASH"` as third arg to `generate()`.
70
71	Other operations: `stitch.projects()` lists projects, `project.screens()` lists screens, `project.getScreen("id")` fetches one.
72
73	`getHtml()` and `getImage()` return download URLs. Append `=w1280` to image URLs for full resolution. Auth: `STITCH_API_KEY` required (or `STITCH_ACCESS_TOKEN` + `GOOGLE_CLOUD_PROJECT` for OAuth). Errors throw `StitchError` with codes: `AUTH_FAILED`, `NOT_FOUND`, `RATE_LIMITED`.
74
75	### Stitch Project Persistence
76
77	Save Stitch identifiers to `.design/metadata.json` so future iterations can reference them:
78
79	```json
80	{
81	"projectId": "4044680601076201931",
82	"screens": {
83	"index": { "screenId": "d7237c7d78f44befa4f60afb17c818c1" },
84	"about": { "screenId": "bf6a3fe5c75348e58cf21fc7a9ddeafb" }
85	}
86	}
87	```
88
89	Stitch integration tips:
90	1. Persist project ID in `.design/metadata.json` — don't create a new project each iteration
91	2. Use `screen.edit()` for refinements rather than full regeneration
92	3. Post-process Stitch HTML — replace headers/footers with your shared elements
93	4. Include DESIGN.md context in prompts — Stitch generates better results with explicit design system instructions
94
95	## Getting Started
96
97	### First Run: Bootstrap the Project
98
99	If `.design/` doesn't exist yet, create the project scaffolding:
100
101	1. Ask the user for:
102	- Site name and purpose
103	- Target audience
104	- Desired

People who liked this also viewed

6 picks

Type