以 skill 自身的术语
该 skill 将 Stitch 的 HTML/CSS 网页设计转换为使用 StyleSheet 的生产级 React Native 组件，也能将现有原生组件同步回最新的 Stitch 设计。它分四个受控阶段运行：通过 scripts/fetch-stitch.sh 脚本下载每个画面并对每张截图进行视觉审查，将 tailwind.config 中的 token 提取到 src/theme.ts，按照严格的架构规则将 HTML 元素和 CSS 映射为 React Native 基础组件，然后基于 resources/component-template.tsx 起草组件。
组件遵循 src/components/ 下的 Atomic Design 文件夹结构，逻辑存放在 src/hooks/ 中，内容存放在 src/data/mockData.ts 中，每个组件文件都导出一个 readonly 的 [ComponentName]Props 接口。通过 npm run validate 和 tsc --noEmit 进行验证是可选的，且需要用户许可。
它产出什么
- src/theme.ts 是一个 TypeScript token 文件，保存从设计的 tailwind.config 中提取的颜色、间距和字体信息。
- src/data/mockData.ts 保存所有静态文本、图片 URL 和列表，确保组件中不硬编码任何内容。
- 位于 src/hooks/ 下的自定义 hooks，承载事件处理、API 调用和业务逻辑，让组件只负责渲染。
- 写入应用文件夹内的 .stitch/metadata.json 文件，并在工作区根目录中镜像一份。
工作方式
- 01发现 MCP 命名空间
运行 list_tools 找到 Stitch MCP 前缀，然后在本次会话后续的所有调用中复用该前缀。
- 02通过脚本下载
内部的抓取工具在 Google Cloud Storage 域名上可能失败，因此 HTML 和截图通过 scripts/fetch-stitch.sh 下载，该脚本会处理重定向和安全握手。
- 03审查每张截图
打开下载的 PNG 以确认设计意图和布局细节，而不是假设设计的样子。
- 04提取主题
读取每个 HTML 头部脚本块中的 tailwind.config 对象，获取颜色、字体、间距、圆角和字体样式，然后将它们作为 TypeScript 常量写入 src/theme.ts。
- 05基于模板起草
每个组件都从 resources/component-template.tsx 开始编写，并查找替换所有占位组件名称的实例。
- 06记录同步元数据
将项目配置保存到 .stitch/metadata.json，其中 Last Sync Time 字段要与当前同步执行时间一致。