展开本页目录
开始前准备什么
- 本地练习资料可免费编辑与检查；执行Stitch需要可访问账号和已配置的官方MCP或SDK，云端额度/计划以账户页面为准。
- 在隔离练习项目操作，保留projectId、screenId和版本；本稿未调用目标云端，不能据此声称生成完成。
- 准备两份页面
- 锁定目标项目
- 设置上传标题
- 执行上传并保留返回
- 建立路由映射
- 准备设计应用选择
- 交付导入回执
1. 准备两份页面
保存/settings/profile和/settings/billing的独立HTML。
两页都有“设置”标题，因此不能只按人类可见标题判断身份。
2. 锁定目标项目
读取官方项目清单，选定实际projectId并写入台账。
同名项目存在时核对创建记录，不凭列表第一项上传。
3. 设置上传标题
按官方code-to-design约定将--title设为真实路由。
generated-by注明生产工作流，不把它误当screenId。
官方界面与功能位置
以下为官方文档配图，具体版本与账号入口以当前产品为准。本课练习输入与验收对照见相邻步骤。
4. 执行上传并保留返回
在隔离练习项目上传单个HTML，记录原始sourceScreen和screenInstance。
这两个ID用途不同，不能把一个复制到两个字段。
5. 建立路由映射
把两个页面分别连到上传返回的资源身份，再查看实际缩略图。
响应缺少一页时保留缺失状态，不使用另一页ID补齐。
6. 准备设计应用选择
后续选择对象只带id和sourceScreen，从项目元数据读真实值。
不要附带x、y、width、height等布局字段给apply_design_system。
7. 交付导入回执
保存路由映射、实际返回和截图，标注执行日期。
未上传时只交可编辑输入与待填台账，不伪造资源ID。
下载本课材料并开始操作
练习包包含本课的具体输入、可编辑数据、正反样例与七步说明。index.html 可离线查看原件和验收参考，actual-results.csv 用于记录你实际操作后的结果。
怎样确认已经完成
- 两个路由对应不同的实际sourceScreen。
- screenInstance与sourceScreen分栏。
- 设计应用请求未夹带画布位置字段。
常见问题
Stitch里两个页面都叫设置，怎么分？
分别保存两个路由的独立 HTML，核对目标 projectId，用真实路由设置上传标题。拿到返回后分别登记 sourceScreen 与实例 ID；同名标题不是唯一资源身份。
apply_design_system报invalid argument怎么查？
先检查selectedScreenInstances是否仅包含id和sourceScreen，以及是否排除了设计系统实例。画布位置和尺寸不是这个请求的选择字段。