stitch-loop

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Stitch Build Loop

Stitch 构建循环

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.

你是一名参与迭代式网站构建循环的自主前端构建Agent。你的目标是使用Stitch生成页面，将其集成到网站中，并为下一次迭代准备指令。

Overview

概述

The Build Loop pattern enables continuous, autonomous website development through a "baton" system. Each iteration:

Reads the current task from a baton file (
```
next-prompt.md
```
)
Generates a page using Stitch MCP tools
Integrates the page into the site structure
Writes the next task to the baton file for the next iteration

构建循环模式通过“接力棒”系统实现持续、自主的网站开发。每次迭代包含以下步骤：

从接力棒文件（
```
next-prompt.md
```
）中读取当前任务
使用Stitch MCP工具生成页面
将页面集成到网站结构中
向下一个迭代的接力棒文件写入新任务

Prerequisites

前提条件

Required:

Access to the Stitch MCP Server
A Stitch project (existing or will be created)
A
```
DESIGN.md
```
file (generate one using the
```
design-md
```
skill if needed)
A
```
SITE.md
```
file documenting the site vision and roadmap

Optional:

Chrome DevTools MCP Server — enables visual verification of generated pages

必需项：

可访问Stitch MCP Server
一个Stitch项目（已存在或即将创建）
一个
```
DESIGN.md
```
文件（如果需要，可使用
```
design-md
```
技能生成）
一个记录网站愿景和路线图的
```
SITE.md
```
文件

可选项：

Chrome DevTools MCP Server — 支持对生成的页面进行视觉验证

The Baton System

接力棒系统

The

next-prompt.md

file acts as a relay baton between iterations:

markdown

---
page: about
---
A page describing how jules.top tracking works.

**DESIGN SYSTEM (REQUIRED):**
[Copy from DESIGN.md Section 6]

**Page Structure:**
1. Header with navigation
2. Explanation of tracking methodology
3. Footer with links

Critical rules:

The
```
page
```
field in YAML frontmatter determines the output filename
The prompt content must include the design system block from
```
DESIGN.md
```
You MUST update this file before completing your work to continue the loop

next-prompt.md

文件充当迭代之间的接力棒：

markdown

---
page: about
---
一个介绍jules.top追踪机制的页面。

**设计系统（必需）：**
[从DESIGN.md第6节复制]

**页面结构：**
1. 带有导航的页眉
2. 追踪方法的说明
3. 带有链接的页脚

关键规则：

YAML前置元数据中的
```
page
```
字段决定输出文件名
提示内容必须包含
```
DESIGN.md
```
中的设计系统块
完成工作前必须更新此文件以维持循环运行

Execution Protocol

执行协议

Step 1: Read the Baton

步骤1：读取接力棒

Parse

next-prompt.md

to extract:

Page name from the
```
page
```
frontmatter field
Prompt content from the markdown body

解析

next-prompt.md

以提取：

前置元数据
```
page
```
字段中的页面名称
Markdown正文中的提示内容

Step 2: Consult Context Files

步骤2：查阅上下文文件

Before generating, read these files:

File	Purpose
`SITE.md`	Site vision, Stitch Project ID, existing pages (sitemap), roadmap
`DESIGN.md`	Required visual style for Stitch prompts

Important checks:

Section 4 (Sitemap) — Do NOT recreate pages that already exist
Section 5 (Roadmap) — Pick tasks from here if backlog exists
Section 6 (Creative Freedom) — Ideas for new pages if roadmap is empty

生成页面之前，请阅读以下文件：

文件	用途
`SITE.md`	网站愿景、Stitch项目ID、现有页面（站点地图）、路线图
`DESIGN.md`	Stitch提示所需的视觉样式

重要检查：

第4节（站点地图）—— 不要重新创建已存在的页面
第5节（路线图）—— 如果有积压任务，从中选择
第6节（创意空间）—— 如果路线图为空，可从中获取新页面的想法

Step 3: Generate with Stitch

步骤3：使用Stitch生成页面

Use the Stitch MCP tools to generate the page:

Discover namespace: Run
```
list_tools
```
to find the Stitch MCP prefix
Get or create project:
- If
```
stitch.json
```
  exists, use the
```
projectId
```
  from it
- Otherwise, call
```
[prefix]:create_project
```
  and save the ID to
```
stitch.json
```
Generate screen: Call
```
[prefix]:generate_screen_from_text
```
with:
- ```
projectId
```
  : The project ID
- ```
prompt
```
  : The full prompt from the baton (including design system block)
- ```
deviceType
```
  :
```
DESKTOP
```
  (or as specified)

Retrieve assets: Call

[prefix]:get_screen

to get:

```
htmlCode.downloadUrl
```
— Download and save as
```
queue/{page}.html
```
```
screenshot.downloadUrl
```
— Download and save as
```
queue/{page}.png
```

使用Stitch MCP工具生成页面：

发现命名空间：运行
```
list_tools
```
以找到Stitch MCP的前缀
获取或创建项目：
- 如果
```
stitch.json
```
  已存在，使用其中的
```
projectId
```
- 否则，调用
```
[prefix]:create_project
```
  并将ID保存到
```
stitch.json
```
生成页面：调用
```
[prefix]:generate_screen_from_text
```
，参数包括：
- ```
projectId
```
  ：项目ID
- ```
prompt
```
  ：接力棒中的完整提示（包含设计系统块）
- ```
deviceType
```
  ：
```
DESKTOP
```
  （或按指定值）

获取资源：调用

[prefix]:get_screen

以获取：

```
htmlCode.downloadUrl
```
—— 下载并保存为
```
queue/{page}.html
```
```
screenshot.downloadUrl
```
—— 下载并保存为
```
queue/{page}.png
```

Step 4: Integrate into Site

步骤4：集成到网站中

Move generated HTML from

queue/{page}.html

site/public/{page}.html

Fix any asset paths to be relative to the public folder
Update navigation:
- Find existing placeholder links (e.g.,
```
href="#"
```
  ) and wire them to the new page
- Add the new page to the global navigation if appropriate
Ensure consistent headers/footers across all pages

将生成的HTML从

queue/{page}.html

移动到

site/public/{page}.html

修正所有资源路径，使其相对于public文件夹
更新导航：
- 找到现有的占位符链接（例如
```
href="#"
```
  ）并将其连接到新页面
- 如有必要，将新页面添加到全局导航中
确保所有页面的页眉/页脚保持一致

Step 4.5: Visual Verification (Optional)

步骤4.5：视觉验证（可选）

If the Chrome DevTools MCP Server is available, verify the generated page:

Check availability: Run
```
list_tools
```
to see if
```
chrome*
```
tools are present
Start dev server: Use Bash to start a local server (e.g.,
```
npx serve site/public
```
)

Navigate to page: Call

[chrome_prefix]:navigate

to open

http://localhost:3000/{page}.html

Capture screenshot: Call
```
[chrome_prefix]:screenshot
```
to capture the rendered page
Visual comparison: Compare against the Stitch screenshot (
```
queue/{page}.png
```
) for fidelity
Stop server: Terminate the dev server process

Note: This step is optional. If Chrome DevTools MCP is not installed, skip to Step 5.

如果Chrome DevTools MCP Server可用，验证生成的页面：

检查可用性：运行
```
list_tools
```
查看是否存在
```
chrome*
```
工具
启动开发服务器：使用Bash启动本地服务器（例如
```
npx serve site/public
```
）

导航到页面：调用

[chrome_prefix]:navigate

打开

http://localhost:3000/{page}.html

捕获截图：调用
```
[chrome_prefix]:screenshot
```
捕获渲染后的页面
视觉对比：将其与Stitch生成的截图（
```
queue/{page}.png
```
）进行对比，确保一致性
停止服务器：终止开发服务器进程

注意： 此步骤为可选操作。如果未安装Chrome DevTools MCP，请跳至步骤5。

Step 5: Update Site Documentation

步骤5：更新网站文档

Modify

SITE.md

Add the new page to Section 4 (Sitemap) with
```
[x]
```
Remove any idea you consumed from Section 6 (Creative Freedom)
Update Section 5 (Roadmap) if you completed a backlog item

修改

SITE.md

：

将新页面添加到第4节（站点地图），并标记为
```
[x]
```
从第6节（创意空间）中移除已使用的想法
如果完成了积压任务，更新第5节（路线图）

Step 6: Prepare the Next Baton (Critical)

步骤6：准备下一个接力棒（关键）

You MUST update
next-prompt.md
before completing. This keeps the loop alive.

Decide the next page:
- Check
```
SITE.md
```
  Section 5 (Roadmap) for pending items
- If empty, pick from Section 6 (Creative Freedom)
- Or invent something new that fits the site vision
Write the baton with proper YAML frontmatter:

markdown

---
page: achievements
---
A competitive achievements page showing developer badges and milestones.

**DESIGN SYSTEM (REQUIRED):**
[Copy the entire design system block from DESIGN.md]

**Page Structure:**
1. Header with title and navigation
2. Badge grid showing unlocked/locked states
3. Progress bars for milestone tracking

完成工作前必须更新
next-prompt.md
，这是维持循环运行的关键。

确定下一个页面：
- 查看
```
SITE.md
```
  第5节（路线图）中的待处理项
- 如果为空，从第6节（创意空间）中选择
- 或者根据网站愿景创造新的内容
编写接力棒，确保包含正确的YAML前置元数据：

markdown

---
page: achievements
---
一个展示开发者徽章和里程碑的竞争性成就页面。

**设计系统（必需）：**
[从DESIGN.md中复制完整的设计系统块]

**页面结构：**
1. 带有标题和导航的页眉
2. 展示已解锁/锁定状态的徽章网格
3. 用于里程碑追踪的进度条

File Structure Reference

文件结构参考

project/
├── next-prompt.md      # The baton — current task
├── stitch.json         # Stitch project ID (persist this!)
├── DESIGN.md           # Visual design system (from design-md skill)
├── SITE.md             # Site vision, sitemap, roadmap
├── queue/              # Staging area for Stitch output
│   ├── {page}.html
│   └── {page}.png
└── site/public/        # Production pages
    ├── index.html
    └── {page}.html

project/
├── next-prompt.md      # 接力棒 — 当前任务
├── stitch.json         # Stitch项目ID（请妥善保存！）
├── DESIGN.md           # 视觉设计系统（来自design-md技能）
├── SITE.md             # 网站愿景、站点地图、路线图
├── queue/              # Stitch输出的暂存区
│   ├── {page}.html
│   └── {page}.png
└── site/public/        # 生产环境页面
    ├── index.html
    └── {page}.html

Orchestration Options

编排选项

The loop can be driven by different orchestration layers:

Method	How it works
CI/CD	GitHub Actions triggers on `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.

该循环可由不同的编排层驱动：

方法	工作原理
CI/CD	GitHub Actions在 `next-prompt.md` 变更时触发
人在环中	开发者在继续前审核每次迭代
Agent链	一个Agent调度到另一个Agent（例如Jules API）
手动	开发者在同一个仓库中重复运行Agent

该技能与编排方式无关——重点关注模式，而非触发机制。

Design System Integration

设计系统集成

This skill works best with the

design-md

skill:

First time setup: Generate
```
DESIGN.md
```
using the
```
design-md
```
skill from an existing Stitch screen
Every iteration: Copy Section 6 ("Design System Notes for Stitch Generation") into your baton prompt
Consistency: All generated pages will share the same visual language

此技能与

design-md

技能配合使用效果最佳：

首次设置：使用
```
design-md
```
技能从现有Stitch页面生成
```
DESIGN.md
```
每次迭代：将第6节（“用于Stitch生成的设计系统说明”）复制到你的接力棒提示中
一致性：所有生成的页面将共享相同的视觉语言

Common Pitfalls

常见陷阱

❌ Forgetting to update
```
next-prompt.md
```
(breaks the loop)
❌ Recreating a page that already exists in the sitemap
❌ Not including the design system block in the prompt
❌ Leaving placeholder links (
```
href="#"
```
) instead of wiring real navigation
❌ Forgetting to persist
```
stitch.json
```
after creating a new project

❌ 忘记更新
```
next-prompt.md
```
（会打破循环）
❌ 重新创建站点地图中已存在的页面
❌ 提示中未包含设计系统块
❌ 保留占位符链接（
```
href="#"
```
）而未连接到真实页面
❌ 创建新项目后未保存
```
stitch.json
```

Troubleshooting

故障排除

Issue	Solution
Stitch generation fails	Check that the prompt includes the design system block
Inconsistent styles	Ensure DESIGN.md is up-to-date and copied correctly
Loop stalls	Verify `next-prompt.md` was updated with valid frontmatter
Navigation broken	Check all internal links use correct relative paths

问题	解决方案
Stitch生成失败	检查提示中是否包含设计系统块
样式不一致	确保DESIGN.md是最新的且已正确复制
循环停滞	验证 `next-prompt.md` 是否已更新且包含有效的前置元数据
导航失效	检查所有内部链接是否使用正确的相对路径