来源：https://github.com/datawhalechina/vibe-vibe

从想法到代码的八步流程

把第二章的「想清楚」和第三章的「说明白」串联起来，形成一个完整的工作流：

┌─────────────────────────────────────────────────────────────────────┐
│                     从想法到代码：八步流程                            │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  第二章：想清楚                                                      │
│  ─────────────────────────────────────────────────────────────────  │
│                                                                     │
│  Step 1: 问题发现                                                   │
│  └─▶ 识别值得解决的问题（烦恼日记、五维评分）                         │
│                                                                     │
│  Step 2: 任务定义                                                   │
│  └─▶ 用 JTBD 描述用户要完成的任务                                    │
│                                                                     │
│  Step 3: 风险预判                                                   │
│  └─▶ 用逆向思维列出可能的失败原因                                    │
│                                                                     │
│  Step 4: 范围收敛                                                   │
│  └─▶ 用减法思维确定 MVP 范围（P0/P1/P2）                             │
│                                                                     │
│  Step 5: 用户理解                                                   │
│  └─▶ 用故事思维构建用户画像和旅程                                    │
│                                                                     │
│  Step 6: 最终自检                                                   │
│  └─▶ 用灵魂三问确认准备就绪                                          │
│                                                                     │
│  第三章：说明白                                                      │
│  ─────────────────────────────────────────────────────────────────  │
│                                                                     │
│  Step 7: 编写 PRD                                                   │
│  └─▶ 整合前六步成果，形成 AI 能理解的任务书                          │
│                                                                     │
│  Step 8: 迭代对话                                                   │
│  └─▶ 与 AI 对话，逐步逼近理想结果                                    │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

成果映射表：第二章输出如何用于第三章

贯穿案例：小李的待办清单完整演示

让我们用小李的待办清单项目，完整演示八步流程。

Step 1-6：第二章的思考成果

小李在第二章完成了以下思考：

问题发现：

我经常遗漏重要任务，被领导批评了好几次。用烦恼日记记录了一周，五维评分 23 分，适合用 Vibe Coding 解决。

JTBD 任务描述：

当我每天开始工作时，我想快速记录今天要做的事，这样我就不会遗漏重要任务，可以安心投入工作。

Pre-mortem 风险清单：
| 失败原因 | 预防措施 |
|---------|---------|
| 功能太多做不完 | 第一版只做 3 个核心功能 |
| 用起来比便签还麻烦 | 添加任务必须 3 秒内完成 |
| 做完了自己都不用 | 先用一周纸质清单验证习惯 |

MVP 优先级：
| 优先级 | 功能 |
|-------|------|
| P0 | 添加任务、完成任务、查看今日任务 |
| P1 | 删除任务、任务排序 |
| 不做 | 分类标签、截止日期、提醒通知、历史统计 |

用户画像：
| 维度 | 内容 |
|-----|------|
| 表面属性 | 25 岁，职场新人，每天处理 10-15 件事务 |
| 行为习惯 | 早上到公司第一件事看邮件，用手机备忘录但经常忘记看 |
| 深层动机 | 害怕遗漏任务被批评，想成为靠谱的人 |

灵魂三问：
| 问题 | 回答 |
|-----|------|
| 用户是谁？ | 像我一样怕遗漏任务的职场新人 |
| 痛点在哪？ | 经常忘事被批评，感到焦虑 |
| 为什么选我？ | 比便签好用，比复杂工具简单 |

Step 7：编写 PRD（整合第二章成果）

现在，把第二章的思考成果整合进 PRD：

# 个人待办清单 PRD

## 1. 项目背景

### 问题来源
我是一名 25 岁的职场新人，每天需要处理 10-15 件大小事务。
经常因为忘记任务被领导批评，用过手机备忘录但经常忘记看。

### 核心任务（JTBD）
当我每天开始工作时，我想快速记录今天要做的事，
这样我就不会遗漏重要任务，可以安心投入工作。

### 为什么现有方案不够好
- 便签纸：容易丢，不能随时带着
- 手机备忘录：需要专门打开，经常忘记看
- 专业工具（Notion、滴答清单）：功能太多，学习成本高


## 2. 目标用户

### 用户画像
- **身份**：职场新人（1-3 年工作经验）
- **特点**：事情多、容易忘、怕被批评
- **场景**：早上到公司打开电脑、突然想起一件事、下班前检查

### 核心需求
- 打开就能看到今天的任务
- 添加任务要极快（3 秒内）
- 界面简单，没有学习成本


## 3. 功能范围

### P0 功能（第一版必须有）
1. **添加任务**：输入框 + 回车即可添加
2. **完成任务**：点击任务左侧圆圈打勾
3. **查看任务**：打开页面就是今日任务列表

### P1 功能（第二版考虑）
- 删除任务
- 任务排序（拖拽）

### 不做清单
- ❌ 任务分类或标签
- ❌ 截止日期或提醒
- ❌ 历史记录或统计
- ❌ 用户登录
- ❌ 多设备同步


## 4. 技术约束

- 技术栈：React + TypeScript + Tailwind CSS
- 数据存储：浏览器 localStorage（暂不需要后端）
- 响应式：手机和电脑都能用


## 5. 验证标准

### MVP 成功标准
自己连续使用 7 天，每天都用它记录和完成任务。

### 核心假设
一个极简的每日待办清单，比便签纸和手机备忘录更好用。

Step 8：转化为第一个 Prompt

有了 PRD，我们可以开始与 AI 对话。第一个 Prompt 用于实现 P0 功能中的「添加任务」：

【Situation - 情境】
我在做一个个人待办清单网页应用。
技术栈：React + TypeScript + Tailwind CSS
目标用户：容易忘事的职场新人（就是我自己）
设计原则：
- 极简，打开就是今日待办
- 添加任务 3 秒内完成
- 没有学习成本

当前进度：项目刚初始化，还没有任何功能代码

【Challenge - 挑战】
实现「添加任务」功能：
- 用户在输入框输入任务内容
- 按回车键或点击添加按钮，任务添加到列表
- 添加成功后自动清空输入框并聚焦
- 空内容不能添加，输入框轻微抖动提示

【Audience - 受众】
- 用户：我自己，希望操作越简单越好
- 代码维护者：我自己，React 初学者
- 请在关键逻辑处加注释，解释为什么这样写

【Format - 格式】
请提供：
1. AddTask 组件代码（处理输入和添加）
2. TaskList 组件代码（展示任务列表）
3. 任务数据的 TypeScript 类型定义
4. 简单的组件使用说明

【Foundations - 约束】
- 任务数据暂存在组件 state，不需要持久化
- 不用任何状态管理库（Redux、Zustand 等）
- 不用任何 UI 组件库
- 样式用 Tailwind，保持简洁
- 每个任务只需要：id + 内容文本 + 完成状态

工作流检查清单

在开始与 AI 对话之前，用这份清单确认你已经准备好了：

第二章成果检查

□ 我知道要解决什么问题（问题发现）
□ 我能用 JTBD 格式描述用户任务
□ 我列出了可能导致失败的原因（Pre-mortem）
□ 我明确了 P0/P1/P2 和不做清单（减法思维）
□ 我知道用户是谁、在什么场景使用（用户画像）
□ 灵魂三问都能一句话回答

第三章准备检查

□ 我整合了第二章成果，写好了 PRD
□ 我知道第一个 Prompt 要实现什么功能
□ 我选择了合适的提示词框架（S.C.A.F.F. / R.G.C.）
□ 我准备好了迭代（不期待一次完美）
□ 我知道如何验证 AI 的输出（特别是包和 API）

常见问题：从第二章到第三章的过渡

Q1：第二章的内容太多，PRD 要全部写进去吗？

A：不需要。PRD 只需要包含 AI 执行任务所需的信息。

Q2：每次对话都要写完整的 PRD 吗？

A：不需要。PRD 是项目级别的文档，单次对话只需要提供当前任务所需的上下文。

• 项目开始时：写完整的 PRD，让 AI 理解整体背景
• 后续对话：引用 PRD 中的相关部分，聚焦当前任务

Q3：PRD 和 Prompt 有什么区别？

A：

本节要点

✓ 八步流程：问题发现 → 任务定义 → 风险预判 → 范围收敛 → 用户理解 → 最终自检 → 编写 PRD → 迭代对话

✓ 成果映射：第二章的每个输出都能对应到 PRD 的某个部分

✓ PRD 是桥梁：它连接了「想清楚」和「说明白」，是从思考到执行的转换器

✓ 不需要完美：PRD 是活文档，可以在开发过程中不断完善

下一节，我们将提供一份可随时查阅的提示词速查清单。