场景一：从 PRD 到可交互原型

A7 HTML 五件套 × AI — 用 AI Coding 把短 PRD 变成可点击的原型页面。

AI CODING · 场景一 · SPEC 原型

不接后端、不上框架：一份短 PRD + 一张给 AI 的 Prompt，换出能点通主路径的静态原型。练的是 Spec，不是氛围。

时间 60–90 分钟产出 可点 HTML栈 纯静态

开始本节 →

本节要点

• 一张可直接粘贴的短 PRD + 给 AI 的 Prompt
• 合格 / 不合格对照，知道何时喊停
• 本地三步验收清单（不过不进场景二）

产品真源 本课短 PRD 是教学切片。产品契约与演示勾选（含 Track B＝本课主路径）见 晨悦生活。勿把真仓转盘 / CPS 写进本场景验收。

目标示例 PRD步骤给 AI对照验收

这个场景解决什么

产品轨讲了原型要交什么；本场景讲怎么用 AI 写出来：短 PRD → 给 AI 的 Prompt → 本地可点 HTML。

备选做法

先上 Vue/构建、自创会员体系；看起来很全，主路径点不通。

推荐做法

纯静态 HTML：文案跟 PRD，首页 → 用餐场景 → 列表 → 详情能点通。

选型说明： 场景一练的是 Spec 闭环（复述 → 确认 → 验收），不是工程壳。框架和真接口会把「能不能点通」淹没在环境噪声里；场景二再搬进 uni-app。

完成标准：浏览器打开本地文件，主路径三步可点通，且能指出本人改动处——仅凭观感一致不视为完成。

和总览的关系 本场景是 Spec 工作流的第一次完整闭环。场景二把同一主路径搬进工程目录；此处禁止提前上 uni-app。

示例短 PRD（直接可用）

下面这份给人定边界、给 AI 当输入：直接贴写进给 AI 的 Prompt；也可换成自己的一页纸，结构保持「谁 / 三步 / 不做」。

给 AI · 短 PRD整段贴写进给 AI 的 Prompt的【PRD】区；先让 AI 复述再写代码

产品：晨悦·生活 · 静态原型（仅演示；默认「今天吃什么」切片）
用户：纠结午饭/晚饭吃什么、想按场景快速看到 2～3 道菜的人

说明（壳 vs 切片）：
- 真仓晨悦·生活首页有家庭成员设置（宝宝 / 老人 / 毛孩子 / 孕期等，
  对应小悦引导与主题解锁）；本课不练成员页，只练「今天吃什么」一条路径。
- 真仓「吃」还有定位、附近店、转盘等；本课静态原型只做到场景筛选 + 菜品详情。

主路径（必须点通）：
1. 打开首页，看到标题「今天吃什么」和 3 个用餐场景按钮
   （家庭 / 一人食 / 快手）
2. 点「一人食」→ 进入列表，至少 2 张菜品卡片
   （菜名 + 一句摘要即可）
3. 点第一张卡片 → 详情：菜名、摘要、「小贴士」区块、返回列表

明确不做：
- 登录、注册、支付
- 真实 API、数据库、定位、附近商家
- 家庭成员设置页、小程序包、构建工具、UI 组件库
- 超出三步的任何页面

若需求还糊，先用 澄清卡，确认后再生成。

跟做步骤

1. 建空目录 prototype-week01/，只放即将生成的 HTML（或 html+css+js）。
2. 新开 AI 对话，贴下方给 AI 的 Prompt（PRD 段用示例或你的一页纸）。
3. 先看复述：必须像「合格复述」；不对就改卡，禁止它先写代码。
4. 你回复「确认」 → 保存 AI 给出的文件。
5. 本地打开（双击或目录下 npx --yes serve .）。
6. 按验收清单点三遍；失败只用纠错卡，只贴现象。

节奏 第一轮只求「能点」。样式第二轮再改。第一轮追花活，主路径往往点不通。

合格复述长什么样

AI 应接近：

主路径：首页三用餐场景 → 点「一人食」出 ≥2 卡 → 点第一张进详情（含小贴士）可返回。
不做：登录/支付/真接口/定位/成员页/框架与构建工具/PRD 外页面。
将交付：单文件（或最多三文件）静态 HTML，确认后再写。

若复述里出现「用 Vue」「先搭路由」——打回，改约束后再确认。

给 AI 的 Prompt

给 AI · Prompt · 场景一 · HTML 原型

【目标】
根据下方 PRD，生成可本地打开的交互原型。
优先单文件 index.html；若拆分，最多 html + css + js 三个文件。

【PRD】
（粘贴上一节示例短 PRD，或你的一页纸）

【约束】
- 纯静态：无 npm 依赖、无框架、无 CDN 大型 UI 库
- 用餐场景切换与进详情必须可用（多页或同页显隐均可）
- 文案用中文；按钮名与 PRD 一致
- 先可点，再谈好看

【请你】
1. 用不超过 5 行复述主路径与「不做」
2. 等我回复「确认」后再给出完整文件内容
3. 最后列出：我如何打开、点哪三个地方验收

第二轮（可选）· 只改样式

主路径过了再发：

【范围】只改样式与间距，不改页面结构与文案，不新增文件。
【目标】手机宽度下三步仍可读；不要引入新依赖。
【请你】先说明将改哪些选择器，再给 diff。

对照：合格与不合格产出

不合格（常见）

引入 Vue CDN / React
只有炫酷首页，列表点不动
自创「会员中心」「商城」或「宝宝阶段」
三按钮无切换逻辑

合格

纯 HTML/CSS/少量 JS
三步路径全通
文案与 PRD 对齐
详情有小贴士与返回

结构示意（一种即可）

index.html
  ├─ #home     标题 + 三个用餐场景按钮
  ├─ #list     两张菜品卡（按所选场景过滤或写死「一人食」）
  └─ #detail   菜名 / 摘要 / 小贴士 / 返回

同页 hidden 切换或拆三个 html 都行。验收看路径，不看目录美学。

最小骨架参考（自行对照，勿整段交差）

生成结果应能覆盖这类结构（类名随意）：

<!-- 示意：三块区域，用 JS 显隐或换页 -->
<section id="home">…用餐场景按钮…</section>
<section id="list" hidden>…菜品卡片…</section>
<section id="detail" hidden>…小贴士…返回…</section>

若 AI 交出的文件没有「详情 / 返回 / 小贴士」三块之一——按不合格打回。

验收清单

• [ ] 不装依赖，双击或静态服务能打开
• [ ] 能选到「一人食」（或你 PRD 对应场景）
• [ ] 列表 ≥2 张卡，点第一张进详情
• [ ] 详情有小贴士 + 能返回列表
• [ ] 无登录墙、无控制台红字阻断操作
• [ ] 能指出：哪段是 AI 写的、你改过哪一处

常见纠错话术

现象	你怎么说
加了框架或构建	「删掉框架与打包，只保留静态 HTML，主路径三步不变。」
样式很花但点不通	「先保证三步能切屏，样式以后再说。」
自创页面	「删掉 PRD 未写的页面，只保留主路径。」
一次改太多文件	「只改当前这一个 HTML。」
未等确认就写代码	「停。先按 Prompt 复述；我确认前不要给文件。」

给 AI · 纠错 · 贴现象

【现象】我点了：… / 期望：… / 实际：… / 控制台：…
【约束】最小改动；不换栈；不重构目录
【请你】根因一句话 + 最小 diff + 我再点哪步确认

本场景收工物

1. index.html（或最多三文件）
2. 最终Prompt 原文（含你改过的 PRD）
3. 三步操作说明（可让 AI 写，你核对）

进场景二的门禁 验收清单全勾 + 收工物三件齐全。缺一件就还在场景一。

下一篇：场景二 · 晨悦·生活小程序前端。