用途：把 Stitch 设计转换为干净的模块化 Vite/React（TypeScript）代码，配合校验与设计令牌一致性。仅当用户明确提到 Stitch 且要把 Stitch 屏幕转为 React 时使用。
前置条件：Stitch MCP Server、Node.js 与 npm，以及 Stitch 的 projectId 与 screenId。获取 ID 有两种方式：从 Stitch 设计 URL 解析 projectId（路径）与 screenId（node-id 查询参数）；无 URL 或需浏览时用 stitch-mcp-list-projects 与 stitch-mcp-list-screens 发现并获取。
取数：先运行 list_tools 找到 MCP 前缀（如 mcp_stitch__stitch:），再调用 [prefix]:get_screen 传入数值 projectId 与 screenId，取得设计 JSON、htmlCode.downloadUrl、screenshot.downloadUrl、尺寸与 deviceType。下载 HTML 时 AI 抓取工具可能对 Google Cloud Storage URL 失败，改用脚本：bash scripts/fetch-stitch.sh "<htmlCode.downloadUrl>" "temp/source.html"，该脚本用 curl -L 处理重定向与 TLS，URL 需加引号。可用截图 URL 核对布局细节。
架构规则：拆分为多个组件文件，避免单文件过大；事件处理与业务逻辑放 src/hooks/；静态文本、图片 URL 与列表移到 src/data/mockData.ts；每个组件都要有 Readonly TypeScript 接口 [ComponentName]Props；生成的组件省略第三方许可头；从 HTML <head> 提取 tailwind.config，若存在 resources/style-guide.json 则同步，使用主题映射的 Tailwind 类而非原始十六进制色值。
执行步骤：项目无 node_modules 时先 npm install；创建 src/data/mockData.ts；以 resources/component-template.tsx 为基座并把 StitchComponent 替换为真实组件名；更新 App.tsx 等入口渲染新组件；若有 validate 脚本运行 npm run validate <file_path>，按 resources/architecture-checklist.md 核对，并 npm run dev 目视确认。
集成：若项目有 DESIGN.md，映射 Tailwind 时对齐其语义颜色与字体；转换 HTML 时参考 references/tailwind-to-react.md，将 Stitch 令牌同步到 tailwind.config。
排障：抓取报错时给 URL 加引号并确保 scripts/fetch-stitch.sh 可执行；校验报错时按 AST 报告补齐 Props 接口、去掉硬编码样式。
限制：仅适用于明确提及 Stitch 并将屏幕转为 Vite/React + TypeScript 的场景；其余环境适配、收费与平台支持范围资料暂未提供。