Appearance
2.7 原型即代码 · 五件套交付
Day 13–14 · PM 交 可运行物 — 辅案例默认作业。五件套模板 → 块二 §5。
本节在学什么
L3 目标：能打开 · 能点 · 能讲 · 能交接。不是高保真视觉稿，而是 原型即代码 模块 + mock 契约。
真实经历
五件套听起来多，其实就是「能打开能点能讲」的最低标准。我第一次交原型只给了截图，被问「点这个按钮会怎样」答不上来。后来加了 Interactions 和 mock，哪怕丑一点，至少能演示完整流程。面试的时候能点的东西比截图有说服力 10 倍。
2.7.1 L3 目标：PM 交可运行物，不只交说明
| 只交说明 | 交可运行物 |
|---|---|
| PRD + 截图 | PRD + 本地/托管可点 Demo |
| 「大概长这样」 | 「点这里会这样，空态是这样」 |
阶段二 辅案例 必须达到 可运行 底线。
2.7.2 模块五件套：Page / css / Interactions / mock / README
| 文件 | 职责 |
|---|---|
Page（如 index.html / 组件） | 结构、路由入口 |
| css | 样式；先能看再美化 |
| Interactions | 点击、切换、表单、空态脚本 |
| mock | 字段、状态、边界数据 |
| README | 路由、依赖、分期、待办 |
跟做真源 → 晨悦官网产品
2.7.3 各文件职责与谁改什么
| 角色 | 常改 |
|---|---|
| PM（你） | Page 结构、mock、Interactions 逻辑、README |
| 设计 | css / token（本阶段可简化） |
| 开发 | 后续接 API；本阶段 mock 即契约 |
2.7.4 mock 即契约：字段、状态、边界数据
mock 需覆盖：
- 正常态：列表有数据
- 空态：无数据提示
- 边界：长文案、单条、错误提示（选 1–2 种）
字段名 与 2.6.8 PRD 附录一致。
2.7.5 交互脚本：点击、切换、表单、空态
至少实现 本模块 PRD 验收 涉及的操作：
- Tab / 展开 / 跳转锚点
- 表单提交 假成功（mock）
- 切换 mock 状态演示空态
不必接真实后端。
2.7.6 README 交接：路由、依赖、分期、待办
README 最少包含：
markdown
## 模块名
- 路由：/courses#timeline
- 依赖：无 / 静态托管即可
- 本期做：…
- 下期做：…
- 待办：接 API、权限…2.7.7 样式与 token：先能看，再美化
阶段二 不卡 像素级设计：
- 信息层级清楚
- 可点击区域明显
- 有空态 / 错误态
有设计 token 可引用；没有则用 简洁默认样式。
2.7.8 跟做默认：官网 1 模块（辅案例作业）
默认：从 晨悦官网 选 1 个模块 做五件套。
2.7.8a 选项 · /courses 时间轴模块
- 展示课程阶段、Day 节奏
- mock：阶段列表、当前高亮
- 适合讲 转型路径叙事
2.7.8b 选项 · /agent 接入说明模块
- 展示 Agent 接入方式、步骤
- mock：步骤状态、代码块占位
- 适合讲 工具 / 平台产品
2.7.8c 选项 · 首页分流卡片模块
- 展示路径 A/B/C 或产品入口卡片
- mock：卡片列表、跳转
- 适合讲 增长 / 分流
选 1 个，与 2.6 辅案例 PRD 切片 同模块。
2.7.9 主案例 Demo 策略：可演示链路（非完整 0→1）
主案例 不要求 完整产品，要求 可演示链路（投屏 2–3 分钟）。
2.7.9a 编排 · 单 Agent 配置演示页
- 单页：Agent 配置项 + 假对话 1 轮
- 讲 平台 PM / Agent 编排 能力
2.7.9b 生活 · 单场景对话 / 小程序页
- 单场景：如「选课咨询」对话 UI
- mock 对话轮次
- 讲 场景 MVP
2.7.10 原型与 PRD 对照：故事 ↔ 页面 ↔ mock 字段
自检表：
| 用户故事 | 页面元素 | mock 字段 | ✓ |
|---|---|---|---|
| As a 访客… | 时间轴第 2 节 | stages[1] |
每条本期 story 至少 1 行映射。
2.7.11 自验收：能打开 · 能点 · 能讲 · 能交接
- [ ] 本地或托管 能打开
- [ ] 核心路径 能点
- [ ] 1 分钟 讲清模块价值
- [ ] README 别人 能接手
2.7.12 路径 C：单模块 + 1 页说明即可
路径 C：官网 单模块五件套 + 1 页说明（可合并进 README），不要求主案例 Demo 页。
2.7.13 练习：五件套自检表 + Demo 截图位
- 五件套文件齐
- 对照 2.7.11 自验收
- 截 2–3 张 关键态（正常 / 空态）备作品集
四件套
| # | 内容 | 说明 |
|---|---|---|
| 阅读 | 本节 + 官网模块真源 | 主材料 |
| 练习 | 五件套自检 + 截图 | worksheet |
| 观看 | 配套讲解（陆续更新） | 可选 |
| 提交 | 可运行模块 | 阶段二验收之二 |