Stitch React 组件构建器
将 Stitch 设计屏幕转换为模块化、可维护且经过验证的 React 组件。
技能明确要求发现已有设计文件时征求用户确认，并限制操作目标为项目文件；但允许 Bash、Write、web_fetch、系统级网络和签名外部下载，未充分说明数据流、敏感数据处理、最小权限、回滚或下载内容隔离，因此扣分。未见恶意软件、凭据窃取或隐蔽外泄红线证据。
流程分阶段、脚本参数和失败提示较明确，且存在锁文件与 CI 校验；但静态材料未证明关键路径可运行，视觉审计、MCP 工具前缀、目录约定和多屏幕处理依赖外部环境，异常输入与验证失败覆盖有限，按静态上限保守扣分。
目标用户、React/Vite 转换和同步场景较清楚，也列出若干架构约束；但非适用范围、触发条件和输入输出契约不完整，强依赖 Stitch MCP、Google Cloud Storage 和相关外部网络，未提供中文语言或中国大陆网络可达性说明，因此扣分。
目录结构、安装方式、依赖、示例提示、架构清单、许可证、版本字段、锁文件、安全政策和 GitHub Actions 均有证据；但变更日志、明确维护责任、更新路径、已知限制和故障排查仍不完整，README 的示例/资源声明也未由所给文件充分核实，因此扣分。
技能针对从 Stitch 设计生成或同步模块化 React 组件，包含数据层、导航、主题和 AST 校验要求，核心目标具有实际价值；但静态阅读无法验证生成结果，且部分要求可能造成较高人工与外部服务成本，输出完整性和相对手工方案的收益证据不足，因此按静态上限保守评分。
存在可审计的脚本、package-lock、CI 工作流和明确验证规则，提供有限的可复核材料；但未提供实际执行输出、完整测试套件或多种独立证据，CI 仅验证一个示例文件，故按静态上限内低分。
- 核心流程依赖已配置且可访问的 Stitch MCP、签名下载地址和 Google Cloud Storage 网络；在中国大陆网络环境中可达性未被证明。
- 允许 Bash、Write 和 web_fetch，使用前应审查外部 URL、写入路径及生成内容，并自行建立备份和回滚机制。
- CI 只展示单个 gold-standard 示例的验证，不能证明所有生成组件、TypeScript 编译、视觉一致性或异常场景。
- Phase 3 将所有步骤称为强制，但 Phase 4 又将验证称为可选，完成标准存在不一致。
这个 Skill 能做什么，适合哪些场景？
该技能面向需要把 Google Stitch 设计转化为前端代码的开发者。它读取 Stitch 项目的全部屏幕，通过脚本下载 HTML 和截图，审查视觉设计，并提取当前项目的 Tailwind 设计令牌。随后，它按组件、Hooks 和模拟数据分层构建 Vite/React 应用，并使用 AST 验证规则检查代码结构。它适合已有 Stitch MCP 环境、希望保持设计令牌一致性的 React 项目，但执行流程严格依赖 Stitch MCP、网络和本地文件操作。
发现 Stitch MCP 工具前缀；为项目中的每个屏幕调用 get_screen 获取设计 JSON 和下载地址；使用 scripts/fetch-stitch.sh 下载 HTML 与指定宽度的 PNG 截图并进行视觉审查；调用 get_project 并写入 .stitch/metadata.json；从 HTML head 中提取 Tailwind 颜色、字体、间距、圆角和排版令牌，覆盖 resources/style-guide.json；创建 src/data/mockData.ts、模块化 React 组件和自定义 Hooks；将占位导航链接改为 React Router Link；使用 npm run validate 和 tsc --noEmit 进行可选验证。
- 前端开发者需要把 Stitch 项目的全部屏幕转换成 Vite/React 组件时。
- React 团队需要根据最新 Stitch 设计同步和更新已有组件时。
- 设计系统需要从当前 Stitch HTML 提取 Tailwind 令牌并保持代码一致时。
- 多页面 React 应用需要把 Stitch 的占位导航链接接入真实路由时。
这个 Skill 有哪些优点和局限？
- 覆盖从屏幕获取、资源下载、视觉审查到 React 代码组织的完整流程。
- 强制模块化组件、Hooks、外置模拟数据、Props 接口和主题令牌映射。
- 支持将多个 Stitch 屏幕接入 React Router，并要求桌面端可返回首页。
- 包含 AST 验证、TypeScript 检查和架构清单等质量控制步骤。
- 必须配置并运行 Stitch MCP server，且需要网络和本地 shell/文件系统访问。
- 流程要求下载并查看每个屏幕，处理大型项目时可能较慢。
- 验证、开发服务器和浏览器测试是可选步骤，且需要额外用户许可。
- 源材料未提供测试套件、平台覆盖结果或具体的 Vite/React 版本。
如何安装这个 Skill？
先配置并运行 Stitch MCP server。选择性安装技能：npx skills add google-labs-code/stitch-skills。README 还提供了 Codex、Claude Code 和 Cursor 的插件安装方式；具体的单技能安装后目录部署细节未在源材料中说明。
如何使用这个 Skill？
在已配置 Stitch MCP 的编码代理中触发，例如："Convert all screens in Stitch project projects/123 to React components." 或 "Sync the app to the last updates of the Stitch project 13039335308618232534." 如果检测到已有 .stitch/designs 文件，技能会要求先决定刷新设计还是复用本地文件。验证脚本、开发服务器和浏览器审查需要先获得用户许可。