显式传deviceType,分别验收而非把宽截图当响应式
本页展示随包原生输入和验收参考。目标产品运行状态:未运行。表格与图片不代表产品已经生成的结果。
input.csv / practice-data.json
本课实际输入字段
| deviceType | viewport | required |
|---|---|---|
| MOBILE | 375 | 退款说明 |
| DESKTOP | 1280 | 退款说明 |
| TABLET | 768 | 无横向溢出 |
生成并记录结果
reference.csv:作者验收映射,不是目标API回包
| enumeration | contentEquality | responsiveClaim |
|---|---|---|
| ["MOBILE", "DESKTOP", "TABLET", "AGNOSTIC"] | ||
| ["时间", "票价", "退款", "报名"] | ||
| only after actual HTML checks |
规则与输入文件原文
{
"inputRows": [
{
"deviceType": "MOBILE",
"viewport": 375,
"required": "退款说明"
},
{
"deviceType": "DESKTOP",
"viewport": 1280,
"required": "退款说明"
},
{
"deviceType": "TABLET",
"viewport": 768,
"required": "无横向溢出"
}
],
"referenceRows": [
{
"enumeration": [
"MOBILE",
"DESKTOP",
"TABLET",
"AGNOSTIC"
]
},
{
"contentEquality": [
"时间",
"票价",
"退款",
"报名"
]
},
{
"responsiveClaim": "only after actual HTML checks"
}
],
"invalidRows": [
{
"deviceType": "mobile",
"error": "wrong enum case"
},
{
"evidence": "desktop image scaled to375",
"error": "not responsive implementation test"
}
],
"notes": [
"全部输入为作者自制教学资料,不含真实客户或账号。",
"referenceRows是校验基准,不是目标模型预测或识别结果;targetProduct=not_run。"
],
"files": {
"input.json": "[\n {\n \"deviceType\": \"MOBILE\",\n \"viewport\": 375,\n \"required\": \"退款说明\"\n },\n {\n \"deviceType\": \"DESKTOP\",\n \"viewport\": 1280,\n \"required\": \"退款说明\"\n },\n {\n \"deviceType\": \"TABLET\",\n \"viewport\": 768,\n \"required\": \"无横向溢出\"\n }\n]\n",
"reference.json": "{\n \"identity\": \"作者验收参考,非模型返回\",\n \"rows\": [\n {\n \"enumeration\": [\n \"MOBILE\",\n \"DESKTOP\",\n \"TABLET\",\n \"AGNOSTIC\"\n ]\n },\n {\n \"contentEquality\": [\n \"时间\",\n \"票价\",\n \"退款\",\n \"报名\"\n ]\n },\n {\n \"responsiveClaim\": \"only after actual HTML checks\"\n }\n ]\n}\n",
"invalid.json": "{\n \"identity\": \"作者构造负例,非实际错误回包\",\n \"rows\": [\n {\n \"deviceType\": \"mobile\",\n \"error\": \"wrong enum case\"\n },\n {\n \"evidence\": \"desktop image scaled to375\",\n \"error\": \"not responsive implementation test\"\n }\n ]\n}\n",
"case.md": "# Stitch手机和桌面设计:显式传deviceType,分别验收而非把宽截图当响应式\n\nStitch手机和桌面设计以同一份活动内容生成两种设备目标。deviceType是生成条件,响应式行为仍需在实际HTML中验证;两张好看的截图不能证明中间宽度没有溢出。\n\n## 固定共同内容\n\n两端都用相同的日期、票价与报名字段,记录内容摘要。\n\n移动版允许布局重排,不允许删掉退款说明。\n\n## 设置设备枚举\n\n按SDK使用MOBILE和DESKTOP作为两次明确条件。\n\n不要传小写mobile或把1280x800尺寸字符串当枚举。\n\n## 生成并记录结果\n\n分别调用project.generate(prompt,deviceType),保存实际返回screen。\n\n未生成的一端保持待执行,不把另一端缩放图作为结果。\n\n## 检查内容等价\n\n逐项核对两端都有时间、价格、退款和报名入口。\n\n内容遗漏先修正,不用视觉精简为删业务信息辩解。\n\n## 检查中间宽度\n\n下载HTML后在375、768和1280宽度分别打开。\n\n两端独立设计可能需要后续合并实现,中间布局不能由截图推断。\n\n## 登记实现边界\n\n记录生成了两张屏幕还是同一份可响应HTML。\n\n若仍是两套页面,说明切换策略待实现,不写自动响应已通过。\n\n## 交付设备矩阵\n\n保存请求枚举、屏幕身份与三档宽度检查。\n\n对未测试浏览器单独列待测。\n\n身份:输入与参考为作者材料;localCli有实测记录时仅证明对应CLI运行,目标云端与模型推理未执行。\n"
}
}应当保留的约束
| enumeration | contentEquality | responsiveClaim |
|---|---|---|
| ["MOBILE", "DESKTOP", "TABLET", "AGNOSTIC"] | ||
| ["时间", "票价", "退款", "报名"] | ||
| only after actual HTML checks |
故意构造的错误样例
| deviceType | error | evidence |
|---|---|---|
| mobile | wrong enum case | |
| not responsive implementation test | desktop image scaled to375 |
先保存真实产品输出,再逐项对照。actualOutput / actualResult 在未执行时保持 not_run,不能把这里的期望值复制成已测结果。