用途:把 Stitch 屏幕(HTML/截图)转换或同步为 React/Vite 组件,并在转换中校验设计 token、组件 Props 与导航一致性。面向设计师、前端开发者及维护该流程的团队。
主要能力:将门店预约等 Stitch 页转为 React 组件;修复桌面品牌标识未返回首页等导航问题;把新设计 token 同步到已有 React 页面并标出缺失输入与验证状态。
使用方式:先检索所需屏幕 HTML/截图,保留 ID 与来源时间;从当前 HTML 和 DESIGN.md 提取 token 到目标工程,避免覆盖 Skill 示例资源;拆组件、数据与 hooks,使用 readonly Props 并保持项目约定;接入既有路由,品牌 logo 与桌面导航可返回首页;执行脚本 AST 检查、项目类型/构建检查与视图验证,分层报告证据。按依赖排序:来源核对→本地产物→已授权外部操作→验证交接。缺信息时先输出假设草案并精确列出缺少项。
适用场景:Stitch 页转 React 组件、导航修复、设计 token 同步。
限制:不适用 React Native 原生界面(转 stitch-react-native)、shadcn 原语迁移(转 stitch-shadcn-ui)、Remotion 走查视频(转 stitch-remotion)。需要目标 React 工程与工具链、指定 Stitch 屏幕或有来源的缓存资产、路由表/主题/组件行为契约。AST 仅证明解析、Props 和字面 className hex 检查,不替代浏览器点击测试。不读取无关账号配置,不收集密码;示例用演示数据,上传前替换客户姓名、电话、订单号;禁止将密钥、cookie、base64 全文或签名下载 URL 写入报告或版本库。未验证的参数、视觉效果、业务数字不得编造。是否自动上传、安装或上线:只执行当前请求与已有授权覆盖的动作,无远程回执不称上传成功,无运行验证不称上线。