以 skill 自身的术语
该 skill 可将 Stitch 项目转换为模块化的 React 与 Vite 前端，或将现有 React 组件同步至最新的 Stitch 设计。它面向基于 Stitch 屏幕工作的前端工程师：Agent 先用 list_tools 找到 Stitch MCP 前缀，再用 get_screen 拉取每个屏幕，通过 scripts/fetch-stitch.sh 下载 HTML 与截图，将 tailwind.config 中的 token 提取到 resources/style-guide.json，然后构建组件、hooks 与模拟数据，并交由 AST 验证检查。
四个受门控的阶段强制执行这一顺序，npm run validate 会强制要求 Readonly Props 接口、使用主题 token 而非十六进制颜色值，以及不允许出现单体式页面文件。
它产出什么
- 每个屏幕对应下载的设计素材，位于 .stitch/designs/{page}.html 与 .stitch/designs/{page}.png。
- 一个 .stitch/metadata.json 文件，保存 projectId、title、deviceType、screens 映射以及 Last Sync Time 字段。
- 一个被覆盖的 resources/style-guide.json 文件，携带当前项目的颜色、字体、间距、圆角和排版 token。
- src/components 中的 React 组件、src/hooks 中的 hooks、src/data/mockData.ts 中的模拟数据，以及一个渲染它们的更新后入口文件。
工作方式
- 01找到 Stitch 命名空间
运行 list_tools 来发现 MCP 前缀，然后在之后每次调用 Stitch 时复用该前缀。
- 02拉取每个页面的元数据
对项目中的每个页面调用 get_screen，获取设计 JSON 及其下载链接，不遗漏任何页面。
- 03通过脚本下载
内部 fetch 工具在访问 Google Cloud Storage 时可能失败，因此下载需通过提供的 bash 脚本进行，该脚本处理重定向和安全握手。
- 04提取设计 token
打开每个下载的 HTML 文件，读取 head 脚本块中的 tailwind.config 对象，获取颜色、字体、间距、圆角和排版信息。
- 05根据模板起草组件
以随附的组件模板为基础，在连接入口文件之前，重命名所有占位组件名称的实例。