设计与前端 stitch-mcpwebsite-generationfrontend-buildingiterative-developmentbaton-passingchrome-devtools

Stitch 网站构建循环

用 Stitch 按迭代循环持续生成、整合和推进网站页面。

FollowSkills 评估 · FSRS-2.0
不推荐
41/ 100 五分制 2.1 / 5
信任安全9 / 25 · 1.8/5

明确声明所需工具和 Stitch MCP 依赖,且已有设计文件时要求用户确认是否刷新;但 Bash、Write 及外部 MCP 权限范围较宽,自动创建项目、下载资源、修改站点和持续更新 baton,缺少最小权限、敏感数据处理、回滚和完整数据流披露,因此扣分。

可靠稳定7 / 20 · 1.8/5

执行协议、文件结构、元数据模式、常见故障和 baton 校验规则较具体;但依赖外部 Stitch 服务,未覆盖项目创建失败、下载失败、无效页面名、权限错误等关键异常,且没有针对该技能的测试或可复现执行证据,因此按静态上限并扣分。

适用触发8 / 15 · 2.7/5

目标用户、迭代场景、输入文件和主要输出较清楚,也说明可选的 Chrome 验证;但非适用边界、语义触发条件、中文支持和中国大陆网络可达性未说明,核心功能依赖 Stitch MCP,适用范围证据有限,因此扣分。

规范维护8 / 15 · 2.7/5

SKILL.md 结构清晰,包含前置条件、流程、示例、资源模板、故障排查和限制提示;仓库提供 Apache-2.0、Security Policy 和 CI,但没有明确维护负责人、技能版本、变更日志或明确更新路径,且 README 的“自动验证”表述超出实际证据,因此扣分。

有效结果6 / 15 · 2.0/5

流程覆盖从读取任务、生成页面、整合站点、导航更新到准备下一 baton,理论上能完成核心迭代并产出可用 HTML;但生成质量、下载结果、链接修复和视觉一致性未经执行验证,且自动循环可能带来额外人工审查成本,因此未接近满分。

证据核验3 / 10 · 1.5/5

源文件、示例和元数据模式可审计,仓库有 CI;但 CI 仅验证另一个 react-components 技能,没有 stitch-loop 的测试、真实运行记录或第三方复核,结论主要来自文档,故分数受静态上限限制。

证据充分度: 评估于 2026年7月20日 审查版本 ad4b8bc8c519
上游仓库在本次评估后已有新提交;当前评分仍对应所示审查版本,可能尚未覆盖最新改动。
使用前请注意
  • 核心功能依赖 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

  1. 前端开发者希望用 Stitch 从一个初始提示开始,逐页构建多页面网站时。
  2. 需要保持多个生成页面视觉一致,并已有 `.stitch/DESIGN.md` 设计系统时。
  3. 希望通过 `.stitch/next-prompt.md` 在人工审核、CI/CD 或代理链之间传递下一项网页任务时。
  4. 需要把 Stitch 生成的静态 HTML 整合到现有 `site/public/` 网站结构时。
  5. 希望在可用时用 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/,并更新下一轮任务。若本地设计文件已存在,重新下载前需要先征得用户确认。

常见问题

使用这个技能需要 Stitch MCP Server 吗?
需要。SKILL.md 将 Stitch MCP Server 列为必需前提;Chrome DevTools MCP Server 仅为可选项。
它会自动完成整个网站而不需要人工介入吗?
它支持连续迭代和多种编排方式,但源材料也明确列出人工审核模式,因此是否完全自动运行取决于外部编排方式。
如果页面的本地 HTML 和截图已经存在,会发生什么?
技能应先询问是否从 Stitch 项目刷新设计;只有用户确认后才重新下载。
它只负责生成设计,还是也会修改网站文件?
它会把生成的 HTML 移动到 `site/public/`,修复资源路径、更新导航,并修改 `.stitch/SITE.md` 与 `.stitch/next-prompt.md`。

同仓库的其他 Skills

均来自 google-labs-code/stitch-skills

设计与前端

Stitch 设计系统文档生成器

分析 Stitch 项目并生成可复用的 DESIGN.md 设计规范。

设计与前端

Stitch 界面生成器

用文字或图片生成、编辑并探索 Stitch 界面设计。

设计与前端

Stitch 前端设计系统提取器

从前端源代码提炼可供 Stitch 使用的 DESIGN.md。

设计与前端

Stitch 提示词增强器

把模糊的界面想法整理成更具体、更适合 Stitch 生成的提示词。

设计与前端

Stitch 静态 HTML 提取器

把运行中的网页应用转换为可独立分享和上传的静态 HTML。

设计与前端

Stitch React 组件构建器

将 Stitch 设计屏幕转换为模块化、可维护且经过验证的 React 组件。

开发与工程

Stitch Remotion 演示视频生成器

将 Stitch 应用界面编排成带转场、缩放和文字说明的专业演示视频。

开发与工程

Stitch React 仪表盘构建器

将 Stitch 设计屏幕转换为生产级 React + Vite 数据密集型仪表盘。

开发与工程

Stitch React Native 构建器

将 Stitch HTML 设计转换为可维护的 React Native 组件,并同步现有原生界面。

设计与前端

Stitch 代码转设计

将现有前端代码提取为可上传到 Stitch 的设计与设计系统。

设计与前端

Stitch 设计系统管家

在 Stitch 中创建、更新并应用统一的界面设计系统。

设计与前端

Stitch 资产上传助手

将本地图片、HTML 和设计文档可靠上传到 Google Stitch 项目。

设计与前端

Stitch 品味设计系统

为 Google Stitch 生成严格、非模板化且可执行的 DESIGN.md 设计规范。

设计与前端

shadcn/ui 前端组件集成助手

帮助开发者发现、安装、定制并验证 shadcn/ui 组件。

相关 Skills