--- title: "4.6.2 从 0 到 1 的完整历程回顾" order: 3 --- ![04-practice-0-to-1_4.6-summary_4.6.2-journey-review.png](/images/Basic/04-practice-0-to-1_4.6-summary_4.6.2-journey-review.png) # 4.6.2 从 0 到 1 的完整历程回顾 > **本步目标**：回顾整个开发历程，理解每一步如何串联第二章思维和第三章技法 ## 从想法到产品的完整链路 让我们用一张图回顾你走过的完整路径： ``` 第二章：想清楚 第三章：说明白 第四章：做出来 ───────────── ───────────── ───────────── 问题发现 上下文思维 │ │ ▼ ▼ JTBD思维 ─────────────────▶ PRD整合 ──────────────▶ 4.1 准备工作 │ │ │ ▼ ▼ ▼ 灵魂三问 S.C.A.F.F.框架 ──────────▶ 4.2 静态页面 │ │ │ ▼ ▼ ▼ 减法思维 ─────────────────▶ 迭代对话 ──────────────▶ 4.3 核心功能 (MVP定义) │ │ │ ▼ ▼ ▼ 问题诊断 ──────────────▶ 4.4 数据存储 逆向思维 ─────────────────▶ 修复策略 ──────────────▶ 4.5 Debug (预判失败) ``` 每一章都不是孤立的。第二章的思考成果，通过第三章的表达技法，最终在第四章落地成为可运行的代码。 ## 每轮迭代用到的思维工具 下面这张表格展示了第四章每个步骤背后的思维和技法支撑： | 第四章步骤 | 使用的第二章思维 | 使用的第三章技法 | 核心产出 | |-----------|-----------------|-----------------|---------| | **4.1 准备工作** | 灵魂三问（确认方向）、MVP定义（明确范围） | PRD整合（汇总需求） | 项目启动卡 | | **4.2 静态页面** | 故事思维（用户场景）、用户画像 | S.C.A.F.F.框架写Prompt | 可视化的页面骨架 | | **4.3 核心功能** | 减法思维（只做P0功能） | 迭代对话（功能逐个实现） | 添加/删除/完成功能 | | **4.4 数据存储** | — | 渐进式Prompt（分步实现） | localStorage持久化 | | **4.5 Debug** | 逆向思维（预判可能的问题） | 诊断→修复→验证流程 | 问题解决能力 | 这张表的价值在于：**下次你做新项目时，可以按同样的模式操作**。 ## 时间与产出数据 让我们看看完成这个项目的实际数据： ### 时间分配 | 阶段 | 投入时间 | 产出 | |------|---------|------| | 4.1 准备工作 | 约 15 分钟 | 明确的项目定义 | | 4.2 静态页面 | 约 20 分钟 | 完整的页面UI | | 4.3 核心功能 | 约 35 分钟 | 增删改三个功能 | | 4.4 数据存储 | 约 20 分钟 | 数据持久化 | | 4.5 Debug调试 | 约 15-20 分钟 | 问题解决经验 | | **总计** | **约 2 小时** | **完整可用的应用** | ### Prompt 与代码对比 | 指标 | 数值 | 说明 | |------|------|------| | 发送的 Prompt 数量 | 约 10-15 条 | 包括初始生成和调整修复 | | 生成的代码行数 | 约 150-250 行 | HTML + CSS + JavaScript | | 你需要理解的代码 | 0 行 | AI 处理所有技术细节 | | 你需要表达清楚的需求 | 100% | 这是你的核心工作 | **关键洞察**：Vibe Coding 把你的工作从"写代码"变成了"表达需求"。你的时间花在想清楚和说明白上，代码由 AI 生成。 ## 三轮迭代的递进关系 回顾 4.2-4.4 三轮迭代，它们之间有清晰的递进关系： ``` 第一轮（4.2） 第二轮（4.3） 第三轮（4.4） ───────────── ───────────── ───────────── 静态页面 交互功能 数据存储 "空壳子" → "活起来" → "记得住" 只有外观 点击有反应 刷新不丢失 没有功能 但刷新就没了 真正可用 ``` 这种"静态→交互→存储"的三轮迭代模式，是一个通用的开发节奏。你做其他项目时，也可以按这个顺序推进。 ## 如果重来一次，可以更快的地方 基于这次经验，如果让你重新做一遍，以下几点可以帮你提速： ### 可以更快的环节 | 环节 | 加速方法 | |------|---------| | 写第一个 Prompt | 直接用第三章的模板，不用从头想 | | 样式调整 | 第一次就描述清楚设计偏好，减少来回修改 | | 功能实现 | 一次 Prompt 实现一个功能，比一次要求多个功能更高效 | | Debug | 提供完整的报错信息，AI 修复更准确 | ### 常见的"慢"的原因 | 慢的表现 | 原因 | 改进方法 | |---------|------|---------| | AI 生成的不是想要的 | Prompt 描述不够具体 | 用 S.C.A.F.F. 框架补全信息 | | 反复调整样式 | 没有提前说明设计偏好 | 第一个 Prompt 就描述颜色、风格 | | Debug 花太多时间 | 没有给 AI 足够的错误信息 | 复制完整的控制台报错 | | 功能做一半卡住了 | 一次想实现太多功能 | 一次只做一个功能，确认后再下一个 | ## 可复用的工作流模板 基于这次经验，总结一个可复用的 Vibe Coding 工作流： ``` ┌─────────────────────────────────────────────────────────────┐ │ Vibe Coding 项目工作流 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 准备阶段 │ │ ────── │ │ 1. 回答灵魂三问：用户是谁？痛点在哪？为什么选你？ │ │ 2. 确定 MVP 范围：第一版只做什么？明确不做什么？ │ │ 3. 整理项目启动卡：把思考成果结构化 │ │ │ │ 开发阶段 │ │ ────── │ │ 4. 第一轮 - 静态页面：用 S.C.A.F.F. 框架写 Prompt │ │ 5. 第二轮 - 核心功能：一次一个功能，迭代实现 │ │ 6. 第三轮 - 数据存储：根据需求选择存储方案 │ │ │ │ 收尾阶段 │ │ ────── │ │ 7. 完整测试：按功能清单逐一验证 │ │ 8. 备份保存：保留当前版本，方便日后修改 │ │ │ └─────────────────────────────────────────────────────────────┘ ``` 这个流程不只适用于待办清单，任何你想用 Vibe Coding 做的项目都可以参考。 ## 本步检查点 - [ ] 理解第二章思维→第三章技法→第四章实战的串联关系 - [ ] 知道每轮迭代分别用到了哪些思维工具和技法 - [ ] 明白"静态→交互→存储"的三轮迭代模式 - [ ] 掌握可复用的 Vibe Coding 工作流 接下来，让我们具体盘点一下你在这个过程中获得了哪些技能。 → [4.6.3 你学到了什么](./4.6.3-what-learned.md)