展开本页目录
开始前准备什么
- 本地练习资料可免费编辑与检查；执行Stitch需要可访问账号和已配置的官方MCP或SDK，云端额度/计划以账户页面为准。
- 在隔离练习项目操作，保留projectId、screenId和版本；本稿未调用目标云端，不能据此声称生成完成。
- 固定共同内容
- 设置设备枚举
- 生成并记录结果
- 检查内容等价
- 检查中间宽度
- 登记实现边界
- 交付设备矩阵
1. 固定共同内容
两端都用相同的日期、票价与报名字段，记录内容摘要。
移动版允许布局重排，不允许删掉退款说明。
2. 设置设备枚举
按SDK使用MOBILE和DESKTOP作为两次明确条件。
不要传小写mobile或把1280x800尺寸字符串当枚举。
3. 生成并记录结果
分别调用project.generate(prompt,deviceType)，保存实际返回screen。
未生成的一端保持待执行，不把另一端缩放图作为结果。
官方界面与功能位置
以下为官方文档配图，具体版本与账号入口以当前产品为准。本课练习输入与验收对照见相邻步骤。
4. 检查内容等价
逐项核对两端都有时间、价格、退款和报名入口。
内容遗漏先修正，不用视觉精简为删业务信息辩解。
5. 检查中间宽度
下载HTML后在375、768和1280宽度分别打开。
两端独立设计可能需要后续合并实现，中间布局不能由截图推断。
6. 登记实现边界
记录生成了两张屏幕还是同一份可响应HTML。
若仍是两套页面，说明切换策略待实现，不写自动响应已通过。
7. 交付设备矩阵
保存请求枚举、屏幕身份与三档宽度检查。
对未测试浏览器单独列待测。
下载本课材料并开始操作
练习包包含本课的具体输入、可编辑数据、正反样例与七步说明。index.html 可离线查看原件和验收参考，actual-results.csv 用于记录你实际操作后的结果。
怎样确认已经完成
- 设备枚举为官方允许值。
- 两端业务内容等价。
- 中间768px宽度有实际回看。
常见问题
Stitch选MOBILE就自动适配所有手机吗？
用同一份内容分别传 MOBILE、DESKTOP 生成，保存真实 screen 后核对内容等价。导出 HTML 再测中间宽度与溢出；两张设备截图不能证明页面已经具备响应式行为。
桌面和手机图都好看，还要测平板吗？
要。中间宽度最容易出现栏宽、导航和按钮挤压；两端截图不能替代实际HTML在768px的复查。