Stitch 网站构建循环
用 Stitch 按迭代循环持续生成、整合和推进网站页面。
明确声明所需工具和 Stitch MCP 依赖,且已有设计文件时要求用户确认是否刷新;但 Bash、Write 及外部 MCP 权限范围较宽,自动创建项目、下载资源、修改站点和持续更新 baton,缺少最小权限、敏感数据处理、回滚和完整数据流披露,因此扣分。
执行协议、文件结构、元数据模式、常见故障和 baton 校验规则较具体;但依赖外部 Stitch 服务,未覆盖项目创建失败、下载失败、无效页面名、权限错误等关键异常,且没有针对该技能的测试或可复现执行证据,因此按静态上限并扣分。
目标用户、迭代场景、输入文件和主要输出较清楚,也说明可选的 Chrome 验证;但非适用边界、语义触发条件、中文支持和中国大陆网络可达性未说明,核心功能依赖 Stitch MCP,适用范围证据有限,因此扣分。
SKILL.md 结构清晰,包含前置条件、流程、示例、资源模板、故障排查和限制提示;仓库提供 Apache-2.0、Security Policy 和 CI,但没有明确维护负责人、技能版本、变更日志或明确更新路径,且 README 的“自动验证”表述超出实际证据,因此扣分。
流程覆盖从读取任务、生成页面、整合站点、导航更新到准备下一 baton,理论上能完成核心迭代并产出可用 HTML;但生成质量、下载结果、链接修复和视觉一致性未经执行验证,且自动循环可能带来额外人工审查成本,因此未接近满分。
源文件、示例和元数据模式可审计,仓库有 CI;但 CI 仅验证另一个 react-components 技能,没有 stitch-loop 的测试、真实运行记录或第三方复核,结论主要来自文档,故分数受静态上限限制。
- 核心功能依赖 Stitch MCP、项目凭据和可能的海外服务;在中国大陆网络或凭据不可用时,需先验证可达性与认证方式。
- SKILL.md 授予 Bash、Write 以及多个 MCP 命名空间权限;执行前应审查实际工具清单、限制写入路径,并为项目创建、下载和站点修改保留可恢复副本。
- “自主”循环会要求每次完成前修改 next-prompt.md,并可能自行选择或发明下一页面;建议在生产仓库中增加人工确认、预算和循环终止条件。
- 未发现所选技能路径的专门测试或真实执行证据;应在采纳前验证元数据持久化、下载 URL 处理、相对路径修复、导航更新和失败反馈。
这个 Skill 能做什么,适合哪些场景?
这是一个面向 Stitch MCP Server 的前端构建技能,采用“接力棒”文件驱动的迭代流程。每次迭代读取当前任务,使用 Stitch 生成页面,将页面整合到网站,并为下一次迭代写入新任务。它要求项目具备 Stitch 项目、设计系统文件和网站规划文件。Chrome DevTools MCP Server 可用于生成页面的视觉验证,但不是必需项。
读取 .stitch/next-prompt.md 获取页面名称和任务;读取 .stitch/SITE.md 与 .stitch/DESIGN.md 获取网站规划和视觉规范;发现 Stitch MCP 工具并创建或读取 Stitch 项目;调用 generate_screen_from_text 生成桌面或指定设备页面;保存项目及屏幕元数据到 .stitch/metadata.json;下载 HTML 和截图到 .stitch/designs/;将 HTML 移动到 site/public/,修复资源路径并更新导航;更新 .stitch/SITE.md;最后写入下一轮的 .stitch/next-prompt.md。
- 前端开发者希望用 Stitch 从一个初始提示开始,逐页构建多页面网站时。
- 需要保持多个生成页面视觉一致,并已有 `.stitch/DESIGN.md` 设计系统时。
- 希望通过 `.stitch/next-prompt.md` 在人工审核、CI/CD 或代理链之间传递下一项网页任务时。
- 需要把 Stitch 生成的静态 HTML 整合到现有 `site/public/` 网站结构时。
- 希望在可用时用 Chrome DevTools MCP Server 对生成页面进行截图核验时。
这个 Skill 有哪些优点和局限?
- 流程覆盖任务读取、Stitch 生成、HTML 整合、导航更新和下一轮任务准备。
- 通过 `.stitch/DESIGN.md` 和 `.stitch/SITE.md` 约束视觉一致性与页面路线图。
- 支持保存 Stitch 项目和屏幕元数据,便于后续迭代。
- 可选接入 Chrome DevTools MCP Server 进行视觉核验。
- 必须使用 Stitch MCP Server,并需要本地文件读写和 Shell 能力。
- Chrome 视觉验证是可选的,未配置时不会执行。
- 源材料未提供测试套件、性能基准或跨平台验证结果。
- 技能要求每轮更新接力棒文件,流程依赖明确的项目文件结构。
如何安装这个 Skill?
将仓库中的 plugins/stitch-utilities 安装为 Stitch Utilities 插件,或按 README 使用:npx skills add google-labs-code/stitch-skills。使用前还需配置并运行 Stitch MCP Server。源材料没有提供该单独技能的独立安装命令或版本要求。
如何使用这个 Skill?
准备 Stitch 项目、.stitch/DESIGN.md、.stitch/SITE.md 和 .stitch/next-prompt.md,然后触发代理,例如:Build a 5-page portfolio website with Stitch.。技能会按接力棒流程生成页面、整合到 site/public/,并更新下一轮任务。若本地设计文件已存在,重新下载前需要先征得用户确认。