2.6 如何交可点的原型

本节帮你什么

• 排期 — Day 16–18 · 阶段二三件套之二 · PM 交可运行物
• 跟练主线 — 原型即代码：Page / css / Interactions / mock / README；默认官网 1 模块或小悦可演示链路
• 可交作业 — 能打开 · 能点 · 能讲 · 能交接的模块 + 截图 2–3 张
• PRD 已定稿？ — 从 五件套 或 跟做选项 开工；否则先回 2.5

L3 目标

不是高保真视觉稿，而是 能打开 · 能点 · 能讲 · 能交接。练 0.1 · ③ L3 + 链路落地。模板 → 块二 §5 · 跟做真源 → 品牌站 / 场景与案例。

跟练锚点五件套mock跟做选项自验收练习

---

跟练锚点 · 接上 2.5

❌ 只交说明

PRD + 截图
「大概长这样」

✅ 交可运行物

PRD + 本地/托管可点 Demo
「点这里会这样，空态是这样」

字段从哪来 2.5 PRD 附录的 mock 字段表 直接抄进 mock.json。字段名不一致 = 阶段二常见翻车。

真实经历

五件套听起来多，其实就是「能打开能点能讲」的最低标准。第一次只交截图，被问「点这个按钮会怎样」答不上。加了 Interactions 和 mock，哪怕丑一点也能演示完整流程——面试时能点的东西比截图有说服力得多。

---

五件套是什么

文件	职责
Page（如 index.html）	结构、路由入口
css	样式；先能看再美化
Interactions	点击、切换、表单、空态
mock	字段、状态、边界数据
README	路由、依赖、分期、待办

角色	本阶段常改
你（PM）	Page 结构、mock、Interactions、README
设计	css / token（可简化）
开发	后续接 API；本阶段 mock 即契约

样式不卡像素 信息层级清楚 · 可点区域明显 · 有空态/错误态即可。有 token 用 token；没有就用简洁默认样式。

---

mock 即契约

mock 需覆盖：

• 正常态：列表有数据
• 空态：无数据提示
• 边界：长文案、单条、错误提示（选 1–2 种）

交互最少集

至少实现 本期 PRD 验收 涉及的操作：Tab / 展开 / 跳转 · 表单假成功 · 切换 mock 演示空态。不必接真实后端。

README 最少

## 模块名
- 路由：/courses#timeline
- 依赖：无 / 静态托管即可
- 本期做：…
- 下期做：…
- 待办：接 API、权限…

---

跟做选项

怎么选辅案例默认：品牌站选 1 个模块做五件套，与 2.5 辅 PRD 切片同模块。
主案例：不要求完整 0→1，要求可演示链路（投屏 2–3 分钟）。

辅 · 品牌站 1 模块（选 1）

选项	练什么
/courses 时间轴	阶段列表、当前高亮 · 适合讲 40 天路径
/agent 接入说明	步骤状态、代码块占位 · 适合讲工具/平台
首页分流卡片	卡片列表、跳转 · 适合讲增长/分流

真源 → 品牌站案例

主 · 可演示链路（选一加深）

选项	说明
编排	单页：Agent 配置项 + 假对话 1 轮
小悦 / 生活	单场景对话 UI + mock 轮次（选购或纯咨询）

路径 C：官网 单模块五件套 + 1 页说明（可并进 README）即可。

---

故事 ↔ 页面 ↔ mock

用户故事	页面元素	mock 字段	✓
As a …	…	…

每条本期 story 至少 1 行映射。

---

自验收

• [ ] 本地或托管 能打开
• [ ] 核心路径 能点
• [ ] 1 分钟 讲清模块价值
• [ ] README 别人 能接手

---

常见错误

别踩这几坑

• 只有截图 — 没有 Interactions / 空态
• 字段另起炉灶 — 必须抄 2.5 mock 附录
• 辅模块和 PRD 切片不是同一个 — 统一模块名
• 追求完美视觉 — 阶段二不卡像素，先能演示
• 无人审/无派活 — 结构大改建议追加 1 条 dispatch-log

---

练习 · 自检与截图

1. 五件套文件齐
2. 对照自验收打勾
3. 截 2–3 张 关键态（正常 / 空态）备作品集

模板 → 2.8

---

过关自检

2.6 五件套 · 过关 · 打勾再进 2.7

• [ ] 五文件齐 · 能打开能点
• [ ] mock 与 PRD 附录字段一致
• [ ] 故事↔页面↔字段对照表填完
• [ ] README 含路由 / 分期 / 待办
• [ ] 截图 2–3 张已备

过关 → 2.7 阶段验收

Demo 能点后，下一节把 PRD · Demo · 派活记录 三条线对照打包 — 别等进阶段三再发现对不上。

---

四件套

#	内容	说明
阅读	本节 + 品牌站 / 场景	跟做真源
练习	五件套自检 + 截图	worksheet
观看	配套讲解（陆续更新）	可选
提交	可运行模块	三件套之二

---

下一节

← 2.5 写 PRD
→ 2.7 阶段验收