通过Play补下一屏,区分新生成页面与真实业务动作
本页展示随包原生输入和验收参考。目标产品运行状态:未运行。表格与图片不代表产品已经生成的结果。
input.csv / practice-data.json
本课实际输入字段
| state | action | next | name | tickets | phone |
|---|---|---|---|---|---|
| event | 报名 | registration | |||
| registration-valid | confirmation | 小林 | 2 | 13000000000 | |
| registration-invalid | inline error | 小林 | 2 |
进入Play原型
reference.csv:作者验收映射,不是目标API回包
| confirmation | back | backendWrite |
|---|---|---|
| tickets=2, correct event | ||
| preserve tickets=2 | ||
| not implemented by visual prototype alone |
规则与输入文件原文
{
"inputRows": [
{
"state": "event",
"action": "报名",
"next": "registration"
},
{
"state": "registration-valid",
"name": "小林",
"tickets": 2,
"phone": "13000000000",
"next": "confirmation"
},
{
"state": "registration-invalid",
"name": "小林",
"tickets": 2,
"phone": "",
"next": "inline error"
}
],
"referenceRows": [
{
"confirmation": "tickets=2, correct event"
},
{
"back": "preserve tickets=2"
},
{
"backendWrite": "not implemented by visual prototype alone"
}
],
"invalidRows": [
{
"state": "invalid",
"next": "success",
"error": "missing validation"
},
{
"evidence": "generic success card",
"claim": "stored order",
"error": "no backend evidence"
}
],
"notes": [
"全部输入为作者自制教学资料,不含真实客户或账号。",
"referenceRows是校验基准,不是目标模型预测或识别结果;targetProduct=not_run。"
],
"files": {
"input.json": "[\n {\n \"state\": \"event\",\n \"action\": \"报名\",\n \"next\": \"registration\"\n },\n {\n \"state\": \"registration-valid\",\n \"name\": \"小林\",\n \"tickets\": 2,\n \"phone\": \"13000000000\",\n \"next\": \"confirmation\"\n },\n {\n \"state\": \"registration-invalid\",\n \"name\": \"小林\",\n \"tickets\": 2,\n \"phone\": \"\",\n \"next\": \"inline error\"\n }\n]\n",
"reference.json": "{\n \"identity\": \"作者验收参考,非模型返回\",\n \"rows\": [\n {\n \"confirmation\": \"tickets=2, correct event\"\n },\n {\n \"back\": \"preserve tickets=2\"\n },\n {\n \"backendWrite\": \"not implemented by visual prototype alone\"\n }\n ]\n}\n",
"invalid.json": "{\n \"identity\": \"作者构造负例,非实际错误回包\",\n \"rows\": [\n {\n \"state\": \"invalid\",\n \"next\": \"success\",\n \"error\": \"missing validation\"\n },\n {\n \"evidence\": \"generic success card\",\n \"claim\": \"stored order\",\n \"error\": \"no backend evidence\"\n }\n ]\n}\n",
"case.md": "# Stitch交互原型:通过Play补下一屏,区分新生成页面与真实业务动作\n\nStitch交互原型把报名按钮指向尚不存在的确认屏。通过Play补出逻辑下一屏后,核对成功、返回和输入错误状态;画面能走通不代表报名记录已写入后端。\n\n## 画出最小流程\n\n列活动页、报名页、确认页和错误状态,标出目前缺确认页。\n\n每一步写清页面应显示的信息,避免只有箭头没有内容。\n\n## 准备输入状态\n\n使用虚构姓名“小林”、票数2和无效空手机号两份输入。\n\n不提供真实个人信息,教程练习也不真的下单。\n\n## 进入Play原型\n\n在Stitch点击Play,从报名按钮观察下一步。\n\n当工具生成逻辑下一屏时登记其新页面身份。\n\n## 核对确认信息\n\n确认页应显示活动、票数和可返回修改入口。\n\n如果只出现通用成功图而没保留输入,本课仍未完成。\n\n## 检查错误与返回\n\n对空手机号应停留并提示,返回时保持已填票数。\n\n原型无法表达真实校验时标为待实现,不能伪称业务逻辑完备。\n\n## 分开验证后端边界\n\n检查是否存在实际提交接口与存储证据。\n\n仅有原型时明确“演示动作”,不显示虚构支付或订单回执。\n\n## 交付状态矩阵\n\n保存原型路径、生成屏幕和业务实现缺项。\n\n不同状态用实际画面说明,未运行只保留作者流程样本。\n\n身份:输入与参考为作者材料;localCli有实测记录时仅证明对应CLI运行,目标云端与模型推理未执行。\n",
"prototype-input.html": "<!doctype html><html lang=\"zh-CN\"><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><title>报名原型状态</title><style>body{font:16px/1.6 Arial,sans-serif;background:#f7f4ec;color:#183b39;margin:32px;max-width:1100px}h1{font-size:32px}article{padding:24px;border:1px solid #cbd4cc;background:white;margin:16px 0}button{background:#184a45;color:white;padding:12px 20px;border:0;border-radius:8px}table{border-collapse:collapse;width:100%}th,td{padding:10px;border:1px solid #cbd4cc;text-align:left}pre{white-space:pre-wrap;overflow-wrap:anywhere}</style><h1>周末手作夜报名</h1><label>姓名<input value=\"小林\"></label><label>票数<input type=\"number\" value=\"2\"></label><label>手机号<input value=\"\"></label><button>提交报名(作者静态原稿)</button></html>"
}
}应当保留的约束
| confirmation | back | backendWrite |
|---|---|---|
| tickets=2, correct event | ||
| preserve tickets=2 | ||
| not implemented by visual prototype alone |
故意构造的错误样例
| state | next | error | evidence | claim |
|---|---|---|---|---|
| invalid | success | missing validation | ||
| no backend evidence | generic success card | stored order |
先保存真实产品输出,再逐项对照。actualOutput / actualResult 在未执行时保持 not_run,不能把这里的期望值复制成已测结果。