stitch-loop by google-labs-code/stitch-skills
npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch-loop你是一个自主前端构建器,参与迭代式网站构建循环。你的目标是使用 Stitch 生成页面,将其集成到网站中,并为下一次迭代准备指令。
构建循环模式通过“接力棒”系统实现持续、自主的网站开发。每次迭代:
.stitch/next-prompt.md)读取当前任务必需项:
.stitch/DESIGN.md 文件(如果需要,可使用 design-md 技能生成).stitch/SITE.md 文件,记录网站愿景和路线图可选项:
.stitch/next-prompt.md 文件充当迭代之间的接力棒:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
---
page: about
---
一个描述 jules.top 跟踪工作原理的页面。
**设计系统(必需):**
[从 .stitch/DESIGN.md 第 6 节复制]
**页面结构:**
1. 带导航的页眉
2. 跟踪方法说明
3. 带链接的页脚
关键规则:
page 字段决定输出文件名.stitch/DESIGN.md 的设计系统块解析 .stitch/next-prompt.md 以提取:
page 前言字段获取在生成之前,读取这些文件:
| 文件 | 用途 |
|---|---|
.stitch/SITE.md | 网站愿景、Stitch 项目 ID、现有页面(站点地图)、路线图 |
.stitch/DESIGN.md | Stitch 提示所需的视觉样式 |
重要检查项:
使用 Stitch MCP 工具生成页面:
list_tools 以查找 Stitch MCP 前缀.stitch/metadata.json 存在,则使用其中的 projectId[prefix]:create_project,然后调用 [prefix]:get_project 以检索完整的项目详情,并将其保存到 .stitch/metadata.json(参见下方模式)[prefix]:get_project,并使用每个屏幕的完整元数据(id、sourceScreen、尺寸、画布位置)更新 .stitch/metadata.json 中的 screens 映射[prefix]:generate_screen_from_text,参数包括:
projectId:项目 IDprompt:来自接力棒的完整提示(包括设计系统块)deviceType:DESKTOP(或按指定).stitch/designs/{page}.html 和 .stitch/designs/{page}.png 是否已存在:
htmlCode.downloadUrl —— 下载并保存为 .stitch/designs/{page}.htmlscreenshot.downloadUrl —— 在下载前将 =w{width} 附加到 URL,其中 {width} 是屏幕元数据中的 width 值(Google CDN 默认提供低分辨率缩略图)。保存为 .stitch/designs/{page}.png.stitch/designs/{page}.html 移动到 site/public/{page}.htmlhref="#")并将其连接到新页面如果 Chrome DevTools MCP 服务器 可用,验证生成的页面:
list_tools 查看是否存在 chrome* 工具npx serve site/public)[chrome_prefix]:navigate 打开 http://localhost:3000/{page}.html[chrome_prefix]:screenshot 捕获渲染的页面.stitch/designs/{page}.png)进行保真度比较注意: 此步骤是可选的。如果未安装 Chrome DevTools MCP,请跳至步骤 5。
修改 .stitch/SITE.md:
[x]你必须在完成前更新 .stitch/next-prompt.md。 这能保持循环持续进行。
.stitch/SITE.md 第 5 节(路线图)中的待处理项---
page: achievements
---
一个展示开发者徽章和里程碑的竞争性成就页面。
**设计系统(必需):**
[从 .stitch/DESIGN.md 复制整个设计系统块]
**页面结构:**
1. 带标题和导航的页眉
2. 显示已解锁/锁定状态的徽章网格
3. 用于里程碑跟踪的进度条
project/
├── .stitch/
│ ├── metadata.json # Stitch 项目 & 屏幕 ID(持久化保存!)
│ ├── DESIGN.md # 视觉设计系统(来自 design-md 技能)
│ ├── SITE.md # 网站愿景、站点地图、路线图
│ ├── next-prompt.md # 接力棒 —— 当前任务
│ └── designs/ # Stitch 输出的暂存区
│ ├── {page}.html
│ └── {page}.png
└── site/public/ # 生产页面
├── index.html
└── {page}.html
.stitch/metadata.json 模式此文件持久化保存所有 Stitch 标识符,以便未来的迭代可以引用它们进行编辑或创建变体。通过在创建项目或生成屏幕后调用 [prefix]:get_project 来填充它。
{
"name": "projects/6139132077804554844",
"projectId": "6139132077804554844",
"title": "My App",
"visibility": "PRIVATE",
"createTime": "2026-03-04T23:11:25.514932Z",
"updateTime": "2026-03-04T23:34:40.400007Z",
"projectType": "PROJECT_DESIGN",
"origin": "STITCH",
"deviceType": "MOBILE",
"designTheme": {
"colorMode": "DARK",
"font": "INTER",
"roundness": "ROUND_EIGHT",
"customColor": "#40baf7",
"saturation": 3
},
"screens": {
"index": {
"id": "d7237c7d78f44befa4f60afb17c818c1",
"sourceScreen": "projects/6139132077804554844/screens/d7237c7d78f44befa4f60afb17c818c1",
"x": 0,
"y": 0,
"width": 390,
"height": 1249
},
"about": {
"id": "bf6a3fe5c75348e58cf21fc7a9ddeafb",
"sourceScreen": "projects/6139132077804554844/screens/bf6a3fe5c75348e58cf21fc7a9ddeafb",
"x": 549,
"y": 0,
"width": 390,
"height": 1159
}
},
"metadata": {
"userRole": "OWNER"
}
}
| 字段 | 描述 |
|---|---|
name | 完整资源名称(projects/{id}) |
projectId | Stitch 项目 ID(来自 create_project 或 get_project) |
title | 人类可读的项目标题 |
designTheme | 设计系统标记:颜色模式、字体、圆角、自定义颜色、饱和度 |
deviceType | 目标设备:MOBILE、DESKTOP、TABLET |
screens | 页面名称 → 屏幕对象的映射。每个屏幕包括 id、sourceScreen(用于 MCP 调用的资源路径)、画布位置(x、y)和尺寸(width、height) |
metadata.userRole | 用户在项目中的角色(OWNER、EDITOR、VIEWER) |
循环可以由不同的编排层驱动:
| 方法 | 工作原理 |
|---|---|
| CI/CD | GitHub Actions 在 .stitch/next-prompt.md 更改时触发 |
| 人在循环中 | 开发者在继续之前审查每次迭代 |
| 智能体链 | 一个智能体分派给另一个(例如,Jules API) |
| 手动 | 开发者使用相同的仓库重复运行智能体 |
此技能是编排无关的 —— 专注于模式,而非触发机制。
此技能与 design-md 技能配合使用效果最佳:
design-md 技能从现有的 Stitch 屏幕生成 .stitch/DESIGN.md.stitch/next-prompt.md(中断循环).stitch/DESIGN.md 的设计系统块href="#")而不是连接真实的导航.stitch/metadata.json| 问题 | 解决方案 |
|---|---|
| Stitch 生成失败 | 检查提示是否包含设计系统块 |
| 样式不一致 | 确保 .stitch/DESIGN.md 是最新的并正确复制 |
| 循环停滞 | 验证 .stitch/next-prompt.md 是否已使用有效的前言更新 |
| 导航损坏 | 检查所有内部链接是否使用正确的相对路径 |
每周安装量
19.1K
代码仓库
GitHub 星标
3.1K
首次出现
2026年1月23日
安全审计
安装于
gemini-cli16.2K
codex16.2K
opencode15.8K
github-copilot15.1K
amp14.4K
kimi-cli14.4K
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.
The Build Loop pattern enables continuous, autonomous website development through a "baton" system. Each iteration:
.stitch/next-prompt.md)Required:
.stitch/DESIGN.md file (generate one using the design-md skill if needed).stitch/SITE.md file documenting the site vision and roadmapOptional:
The .stitch/next-prompt.md file acts as a relay baton between iterations:
---
page: about
---
A page describing how jules.top tracking works.
**DESIGN SYSTEM (REQUIRED):**
[Copy from .stitch/DESIGN.md Section 6]
**Page Structure:**
1. Header with navigation
2. Explanation of tracking methodology
3. Footer with links
Critical rules:
page field in YAML frontmatter determines the output filename.stitch/DESIGN.mdParse .stitch/next-prompt.md to extract:
page frontmatter fieldBefore generating, read these files:
| File | Purpose |
|---|---|
.stitch/SITE.md | Site vision, Stitch Project ID , existing pages (sitemap), roadmap |
.stitch/DESIGN.md | Required visual style for Stitch prompts |
Important checks:
Use the Stitch MCP tools to generate the page:
list_tools to find the Stitch MCP prefix.stitch/metadata.json exists, use the projectId from it[prefix]:create_project, then call [prefix]:get_project to retrieve full project details, and save them to .stitch/metadata.json (see schema below)[prefix]:get_project again and update the screens map in .stitch/metadata.json with each screen's full metadata (id, sourceScreen, dimensions, canvas position).stitch/designs/{page}.html to site/public/{page}.htmlhref="#") and wire them to the new pageIf the Chrome DevTools MCP Server is available, verify the generated page:
list_tools to see if chrome* tools are presentnpx serve site/public)[chrome_prefix]:navigate to open http://localhost:3000/{page}.html[chrome_prefix]:screenshot to capture the rendered page.stitch/designs/{page}.png) for fidelityNote: This step is optional. If Chrome DevTools MCP is not installed, skip to Step 5.
Modify .stitch/SITE.md:
[x]You MUST update.stitch/next-prompt.md before completing. This keeps the loop alive.
.stitch/SITE.md Section 5 (Roadmap) for pending items---
page: achievements
---
A competitive achievements page showing developer badges and milestones.
**DESIGN SYSTEM (REQUIRED):**
[Copy the entire design system block from .stitch/DESIGN.md]
**Page Structure:**
1. Header with title and navigation
2. Badge grid showing unlocked/locked states
3. Progress bars for milestone tracking
project/
├── .stitch/
│ ├── metadata.json # Stitch project & screen IDs (persist this!)
│ ├── DESIGN.md # Visual design system (from design-md skill)
│ ├── SITE.md # Site vision, sitemap, roadmap
│ ├── next-prompt.md # The baton — current task
│ └── designs/ # Staging area for Stitch output
│ ├── {page}.html
│ └── {page}.png
└── site/public/ # Production pages
├── index.html
└── {page}.html
.stitch/metadata.json SchemaThis 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.
{
"name": "projects/6139132077804554844",
"projectId": "6139132077804554844",
"title": "My App",
"visibility": "PRIVATE",
"createTime": "2026-03-04T23:11:25.514932Z",
"updateTime": "2026-03-04T23:34:40.400007Z",
"projectType": "PROJECT_DESIGN",
"origin": "STITCH",
"deviceType": "MOBILE",
"designTheme": {
"colorMode": "DARK",
"font": "INTER",
"roundness": "ROUND_EIGHT",
"customColor": "#40baf7",
"saturation": 3
},
"screens": {
"index": {
"id": "d7237c7d78f44befa4f60afb17c818c1",
"sourceScreen": "projects/6139132077804554844/screens/d7237c7d78f44befa4f60afb17c818c1",
"x": 0,
"y": 0,
"width": 390,
"height": 1249
},
"about": {
"id": "bf6a3fe5c75348e58cf21fc7a9ddeafb",
"sourceScreen": "projects/6139132077804554844/screens/bf6a3fe5c75348e58cf21fc7a9ddeafb",
"x": 549,
"y": 0,
"width": 390,
"height": 1159
}
},
"metadata": {
"userRole": "OWNER"
}
}
| Field | Description |
|---|---|
name | Full resource name (projects/{id}) |
projectId | Stitch project ID (from create_project or get_project) |
title | Human-readable project title |
designTheme | Design system tokens: color mode, font, roundness, custom color, saturation |
The loop can be driven by different orchestration layers:
| Method | How it works |
|---|---|
| CI/CD | GitHub Actions triggers on .stitch/next-prompt.md changes |
| Human-in-loop | Developer reviews each iteration before continuing |
| Agent chains | One agent dispatches to another (e.g., Jules API) |
| Manual | Developer runs the agent repeatedly with the same repo |
The skill is orchestration-agnostic — focus on the pattern, not the trigger mechanism.
This skill works best with the design-md skill:
.stitch/DESIGN.md using the design-md skill from an existing Stitch screen.stitch/next-prompt.md (breaks the loop).stitch/DESIGN.md in the prompthref="#") instead of wiring real navigation.stitch/metadata.json after creating a new project| Issue | Solution |
|---|---|
| Stitch generation fails | Check that the prompt includes the design system block |
| Inconsistent styles | Ensure .stitch/DESIGN.md is up-to-date and copied correctly |
| Loop stalls | Verify .stitch/next-prompt.md was updated with valid frontmatter |
| Navigation broken | Check all internal links use correct relative paths |
Weekly Installs
19.1K
Repository
GitHub Stars
3.1K
First Seen
Jan 23, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli16.2K
codex16.2K
opencode15.8K
github-copilot15.1K
amp14.4K
kimi-cli14.4K
97,600 周安装
[prefix]:generate_screen_from_text with:
projectId: The project IDprompt: The full prompt from the baton (including design system block)deviceType: DESKTOP (or as specified).stitch/designs/{page}.html and .stitch/designs/{page}.png already exist:
htmlCode.downloadUrl — Download and save as .stitch/designs/{page}.htmlscreenshot.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}.pngdeviceTypeTarget device: MOBILE, DESKTOP, TABLET |
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) |
metadata.userRole | User's role on the project (OWNER, EDITOR, VIEWER) |