stitch-loop

Name: stitch-loop
Author: google-labs-code

bygoogle-labs-code· 30 skills

Installs

50k

Stars

7.8k

Forks

950

How to install stitch-loop?

google-labs-code/stitch-skills/stitch-loop

$npx -y skills add google-labs-code/stitch-skills --skill stitch-loop

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/google-labs-code/stitch-skills" --skill "google-labs-code/stitch-skills/stitch-loop"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/google-labs-code/stitch-skills" that are relevant to the current task. Run `npx skills add "https://github.com/google-labs-code/stitch-skills"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# Stitch Build Loop
2
3	You are an autonomous frontend builder participating in an iterative site-building loop. Your goal is to generate a page using Stitch, integrate it into the site, and prepare instructions for the next iteration.
4
5	## Overview
6
7	The Build Loop pattern enables continuous, autonomous website development through a "baton" system. Each iteration:
8	1. Reads the current task from a baton file (`.stitch/next-prompt.md`)
9	2. Generates a page using Stitch MCP tools
10	3. Integrates the page into the site structure
11	4. Writes the next task to the baton file for the next iteration
12
13	## Prerequisites
14
15	Required:
16	- Access to the Stitch MCP Server
17	- A Stitch project (existing or will be created)
18	- A `.stitch/DESIGN.md` file (generate one using the `design-md` skill if needed)
19	- A `.stitch/SITE.md` file documenting the site vision and roadmap
20
21	Optional:
22	- Chrome DevTools MCP Server — enables visual verification of generated pages
23
24	## The Baton System
25
26	The `.stitch/next-prompt.md` file acts as a relay baton between iterations:
27
28	```markdown
29	---
30	page: about
31	---
32	A page describing how jules.top tracking works.
33
34	DESIGN SYSTEM (REQUIRED):
35	[Copy from .stitch/DESIGN.md Section 6]
36
37	Page Structure:
38	1. Header with navigation
39	2. Explanation of tracking methodology
40	3. Footer with links
41	```
42
43	Critical rules:
44	- The `page` field in YAML frontmatter determines the output filename
45	- The prompt content must include the design system block from `.stitch/DESIGN.md`
46	- You MUST update this file before completing your work to continue the loop
47
48	## Execution Protocol
49
50	### Step 1: Read the Baton
51
52	Parse `.stitch/next-prompt.md` to extract:
53	- Page name from the `page` frontmatter field
54	- Prompt content from the markdown body
55
56	### Step 2: Consult Context Files
57
58	Before generating, read these files:
59
60	\| File \| Purpose \|
61	\|------\|---------\|
62	\| `.stitch/SITE.md` \| Site vision, Stitch Project ID, existing pages (sitemap), roadmap \|
63	\| `.stitch/DESIGN.md` \| Required visual style for Stitch prompts \|
64
65	Important checks:
66	- Section 4 (Sitemap) — Do NOT recreate pages that already exist
67	- Section 5 (Roadmap) — Pick tasks from here if backlog exists
68	- Section 6 (Creative Freedom) — Ideas for new pages if roadmap is empty
69
70	### Step 3: Generate with Stitch
71
72	Use the Stitch MCP tools to generate the page:
73
74	1. Discover namespace: Run `list_tools` to find the Stitch MCP prefix
75	2. Get or create project:
76	- If `.stitch/metadata.json` exists, use the `projectId` from it
77	- Otherwise, call `[prefix]:create_project`, then call `[prefix]:get_project` to retrieve full project details, and save them to `.stitch/metadata.json` (see schema below)
78	- After generating each screen, call `[prefix]:get_project` again and update the `screens` map in `.stitch/metadata.json` with each screen's full metadata (id, sourceScreen, dimensions, canvas position)
79	3. Generate screen: Call `[prefix]:generate_screen_from_text` with:
80	- `projectId`: The project ID
81	- `prompt`: The full prompt from the baton (including design system block)
82	- `deviceType`: `DESKTOP` (or as specified)
83	4. Retrieve assets: Before downloading, check if `.stitch/designs/{page}.html` and `.stitch/designs/{page}.png` already exist:
84	- If files exist: Ask the user whether to refresh the designs from the Stitch project or reuse the existing local files. Only re-download if the user confirms.
85	- If files do not exist: Proceed with download:
86	- `htmlCode.downloadUrl` — Download and save as `.stitch/designs/{page}.html`
87	- `screenshot.downloadUrl` — Append `=w{width}` to the URL before downloading, where `{width}` is the `width` value from the screen metadata (Google CDN serves low-res thumbnails by default). Save as `.stitch/designs/{page}.png`
88
89	### Step 4: Integrate into Site
90
91	1. Move generated HTML from `.stitch/designs/{page}.html` to `site/public/{page}.html`
92	2. Fix any asset paths to be relative to the public folder
93	3. Update navigation:
94	- Find existing placeholder links (e.g., `href="#"`) and wire them to the new page
95	- Add the new page to the global navigation if appropriate
96	4. Ensure consistent headers/footers across all pages
97
98	### Step 4.5: Visual Verification (Optional)
99
100	If the Chrome DevTools MCP Server is available, verify the generated page:
101
102	1. Check availability: Run `list_tools` to see if `chrome*` tools are present
103	2. Start dev server: Use Bash to start a local server (e.g., `npx serve site/public`)
104	3. Navigate to page: Call `[chrome_prefix]:navigate` to open `http://localhost:3000/{page}.html`
105	4. Capture screenshot: Call `[chrome_prefix]:screenshot` to capture the rendered page
106	5. Visual comparison: Compare against the Stitch screenshot (`.stitch/designs/{page}.png`) for fidelity
107	6. Stop server: Terminate the dev server process
108
109	> Note: This step is optional. If Chrome DevTools MCP is not installed, skip to Step 5.
110
111	### Step 5: Update Site Documentation
112
113	Modify `.stitch/SITE.md`:
114	- Add the new page to Section 4 (Sitemap) with `[x]`
115	- Remove any idea you consumed from Section 6 (Creative Freedom)
116	- Update Section 5 (Roadmap) if you completed a backlog item
117
118	### Step 6: Prepare the Next Baton (Critical)
119
120	You MUST update `.stitch/next-prompt.md` before completing. This keeps the loop alive.
121
122	1. Decide the next page:
123	- Check `.stitch/SITE.md` Section 5 (Roadmap) for pending items
124	- If empty, pick from Section 6 (Creative Freedom)
125	- Or invent something new that fits the site vision
126	2. Write the baton with proper YAML frontmatter:
127
128	```markdown
129	---
130	page: achievements
131	---
132	A competitive achievements page showing developer badges and milestones.
133
134	DESIGN SYSTEM (REQUIRED):
135	[Copy the entire design system block from .stitch/DESIGN.md]
136
137	Page Structure:
138	1. Header with title and navigation
139	2. Badge grid showing unlocked/locked states
140	3. Progress bars for milestone tracking
141	```
142
143	## File Structure Reference
144
145	```
146	project/
147	├── .stitch/
148	│ ├── metadata.json # Stitch project & screen IDs (persist this!)
149	│ ├── DESIGN.md # Visual design system (from design-md skill)
150	│ ├── SITE.md # Site vision, sitemap, roadmap
151	│ ├── next-prompt.md # The baton — current task
152	│ └── designs/ # Staging area for Stitch output
153	│ ├── {page}.html
154	│ └── {page}.png
155	└── site/public/ # Production pages
156	├── index.html
157	└── {page}.html
158	```
159
160	### `.stitch/metadata.json` Schema
161
162	This file persists all Stitch identifiers so future iterations can reference them for edits or variants. Populate it by calling `[prefix]:get_project` after creating a project or generating screens.
163
164	```json
165	{
166	"name": "projects/6139132077804554844",
167	"projectId": "6139132077804554844",
168	"title": "My App",
169	"visibility": "PRIVATE",
170	"createTime": "2026-03-04T23:11:25.514932Z",
171	"updateTime": "2026-03-04T23:34:40.400007Z",
172	"projectType": "PROJECT_DESIGN",
173	"origin": "STITCH",
174	"deviceType": "MOBILE",
175	"designTheme": {
176	"colorMode": "DARK",
177	"font": "INTER",
178	"roundness": "ROUND_EIGHT",
179	"customColor": "#40baf7",
180	"saturation": 3
181	},
182	"screens": {
183	"index": {
184	"id": "d7237c7d78f44befa4f60afb17c818c1",
185	"sourceScreen": "projects/6139132077804554844/screens/d7237c7d78f44befa4f60afb17c818c1",
186	"x": 0,
187	"y": 0,
188	"width": 390,
189	"height": 1249
190	},
191	"about": {
192	"id": "bf6a3fe5c75348e58cf21fc7a9ddeafb",
193	"sourceScreen": "projects/6139132077804554844/screens/bf6a3fe5c75348e58cf21fc7a9ddeafb",
194	"x": 549,
195	"y": 0,
196	"width": 390,
197	"height": 1159
198	}
199	},
200	"metadata": {
201	"userRole": "OWNER"
202	}
203	}
204	```
205
206	\| Field \| Description \|
207	\|-------\|-------------\|
208	\| `name` \| Full resource name (`projects/{id}`) \|
209	\| `projectId` \| Stitch project ID (from `create_project` or `get_project`) \|
210	\| `title` \| Human-readable project title \|
211	\| `designTheme` \| Design system tokens: color mode, font, roundness, custom color, saturation \|
212	\| `deviceType` \| Target device: `MOBILE`, `DESKTOP`, `TABLET` \|
213	\| `screens` \| Map of page name → screen object. Each screen includes `id`, `sourceScreen` (resource path for MCP calls), canvas position (`x`, `y`), and dimensions (`width`, `height`) \|
214	\| `metadata.userRole` \| User's role on the project (`OWNER`, `EDITOR`, `VIEWER`) \|
215
216	## Orchestration Options
217
218	The loop can be driven by different orchestration layers:
219
220	\| Method \| How it works \|
221	\|--------\|--------------\|
222	\| CI/CD \| GitHub Actions triggers on `.stitch/next-prompt.md` changes \|
223	\| Human-in-loop \| Developer reviews each iteration before continuing \|
224	\| Agent chains \| One agent dispatches to another (e.g., Jules API) \|
225	\| Manual \| Developer runs the agent repeatedly with the same repo \|
226
227	The skill is orchestration-agnostic — focus on the pattern, not the trigger mechanism.
228
229	## Design System Integration
230
231	This skill works best with the `design-md` skill:
232
233	1. First time setup: Generate `.stitch/DESIGN.md` using the `design-md` skill from an existing Stitch screen
234	2. Every iteration: Copy Section 6 ("Design System Notes for Stitch Generation") into your baton prompt
235	3. Consistency: All generated pages will share the same visual language
236
237	## Common Pitfalls
238
239	- ❌ Forgetting to update `.stitch/next-prompt.md` (breaks the loop)
240	- ❌ Recreating a page that already exists in the sitemap
241	- ❌ Not including the design system block from `.stitch/DESIGN.md` in the prompt
242	- ❌ Leaving placeholder links (`href="#"`) instead of wiring real navigation
243	- ❌ Forgetting to persist `.stitch/metadata.json` after creating a new project
244
245	## Troubleshooting
246
247	\| Issue \| Solution \|
248	\|-------\|----------\|
249	\| Stitch generation fails \| Check that the prompt includes the design system block \|
250	\| Inconsistent styles \| Ensure `.stitch/DESIGN.md` is up-to-date and copied correctly \|
251	\| Loop stalls \| Verify `.stitch/next-prompt.md` was updated with valid frontmatter \|
252	\| Navigation broken \| Check all internal links use correct relative paths \|

6 picks

Type

Run `npx skills use "https://github.com/google-labs-code/stitch-skills" --skill "google-labs-code/stitch-skills/stitch-loop"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/google-labs-code/stitch-skills" that are relevant to the current task. Run `npx skills add "https://github.com/google-labs-code/stitch-skills"` and select the relevant skills, then follow their instructions.

stitch-loop

How to install stitch-loop?

Related

stitch-loop

How to install stitch-loop?

Related