11.2 Vibe Coding 工作流
🎯 本节目标
掌握 Vibe Coding 的核心工作流：从模糊的想法到可工作的代码，通过 PRD 和任务分解驯服 AI。
❌ 常见错误：直接开始 Vibe
很多人第一次尝试 Vibe Coding 会这样做：
你："Hey，帮我建一个宠物店的 app"
AI：[开始生成代码]
你：等等，这不是我想要的...
AI：[继续生成更多代码]
你：它陷入了无限循环！问题所在：
- ❌ 需求太模糊
- ❌ 没有足够的上下文
- ❌ AI 会"脑补"缺失的细节（幻觉）
- ❌ 容易陷入修复错误的死循环
✅ 正确方法：PRD 驱动开发
什么是 PRD？
PRD（Product Requirements Document，产品需求文档） 是描述项目需求和规格的文档。
PRD 的价值：
├── 强制你思考清楚需求
├── 为 AI 提供充足的上下文
├── 减少 AI 的幻觉
├── 形成可追溯的设计决策记录
└── 适合任何背景的人使用💡 你不需要任何编程背景就能写 PRD，你只需要你的想法。
📝 用 AI 创建 PRD（核心工作流）
步骤 1：启动 PRD 头脑风暴
使用 ChatGPT（4.5、4o 或 o3）发送以下 prompt：
markdown
你是一位资深软件工程师。我们将一起构建一个项目的 PRD。
非常重要：
- 每次只问一个问题
- 每个问题都基于之前的回答
- 深入挖掘每个重要细节
项目想法：
<在这里粘贴你的想法>步骤 2：进入问答循环
AI 会开始问你一系列问题：
AI: 你的目标用户群体是谁？
你: 主要是 25-35 岁的年轻人...
AI: 他们使用这个产品的主要场景是什么？
你: 通常是在通勤路上或午休时间...
AI: 你希望产品具备哪些核心功能？
你: 必须有 X、Y、Z 功能...技巧：
- 尽可能详细地回答
- 当你觉得足够了，进入下一步
步骤 3：编译 PRD
当问答足够充分后，发送这个 prompt：
markdown
将这些发现整理成一份 PRD。使用 markdown 格式。包含以下章节：
- 项目概述（Project overview）
- 核心需求（Core requirements）
- 核心功能（Core features）
- 核心组件（Core components）
- 应用/用户流程（App/user flow）
- 技术栈（Techstack）
- 实现计划（Implementation plan）步骤 4：保存 PRD
bash
# 在你的项目文件夹中创建 docs 目录
mkdir -p docs
# 将 PRD 保存为 specs.md
# 复制 AI 生成的内容到 docs/specs.md步骤 5：生成任务列表
发送这个 prompt：
markdown
基于生成的 PRD，创建一个详细的分步计划来构建这个项目。
然后将其分解为相互依赖的小任务。
基于这些任务，再分解为更小的子任务。
确保步骤足够小可以单独实现，但又足够大能完成项目。
使用软件开发和项目管理的最佳实践，避免复杂度跳跃。
将任务相互关联，创建依赖列表。不应该有孤立的任务。
非常重要：
- 使用 markdown 格式
- 每个任务和子任务应该是一个检查项
- 每个任务提供足够的上下文，让开发者能够实现
- 每个任务应该有一个数字 ID
- 每个任务应该列出依赖的任务 ID步骤 6：保存任务列表
bash
# 将任务列表保存为 todo.md
# 复制 AI 生成的内容到 docs/todo.md🚀 开始 Vibe Coding
初始化项目
bash
# 创建项目文件夹
mkdir my-project
cd my-project
# 初始化 Git（重要！）
git init
# 你的项目结构现在应该是：
# my-project/
# ├── docs/
# │ ├── specs.md # PRD
# │ └── todo.md # 任务列表
# └── .git/在 Cursor 中开始开发
打开 Cursor，发送这个 prompt：
markdown
你是一位资深软件工程师。学习 @docs/specs.md 并实现 @docs/todo.md 中还未完成的内容。
每次实现一个任务，尊重任务和子任务的依赖关系。完成一个任务后，在列表中勾选它，然后继续下一个。启用 YOLO 模式
第一次 Cursor Agent 执行命令时：
- 启用 YOLO 模式
- 持续点击"接受"或输入
continue
你正在 Vibe Coding！🎸
提示：
├── 有时 LLM 会达到限制，要求重试，正常继续即可
├── 保持关注生成的代码，这会帮助你在出错时调试
└── 定期 commit 你的代码📓 保持 Prompt 日志
为什么需要日志？
Prompt 日志的价值：
├── 记录设计决策和意图
├── 帮助未来的自己（或其他人）理解项目
├── 识别工作模式和技巧
└── 调试时的重要参考如何记录
bash
# 创建 prompt 日志文件
touch vibecode.md
# 或
touch history.md日志内容包含：
- 你发送的每个 prompt
- 你当时的思考过程
- 任何意外的结果
使用 aider 自动记录
aider 会自动保留所有对话历史。配置环境变量：
bash
# 在 .aider.conf.yml 中添加：
# AIDER_CHAT_HISTORY_FILE=.aider.chat.history.md
# AIDER_LLM_HISTORY_FILE=.aider.llm.history🧠 Prompt 工程技巧
基本原则
markdown
1. 不要一次要求太多
❌ "帮我建一个完整的电商网站"
✅ "帮我创建用户注册功能"
2. 提供具体细节
❌ "帮我写个 API"
✅ "用 FastAPI 写一个 /users 端点，支持 GET 和 POST"
3. 指定技术栈
✅ "使用 React + TypeScript + Tailwind CSS"
4. 分解任务
✅ "先实现任务 1，完成后再做任务 2"使用 XML 标签强调重点
markdown
<important>
这里是非常重要的约束条件
</important>
<context>
这里是背景信息
</context>
<requirements>
1. 必须支持 xxx
2. 不能做 yyy
</requirements>跨模型验证
技巧：使用不同的模型验证输出
步骤：
1. 用 Claude 生成代码
2. 用 GPT 审查代码
3. 用 Gemini 提出改进建议
LLM 是 "Yes Machine"，所以要保持批判性思考！🏗️ 项目启动指南
前端项目
| 框架 | 适用场景 | 部署位置 |
|---|---|---|
| Next.js | 需要 Vercel 生态 | Vercel |
| Vanilla React + Router | 灵活部署 | 任意平台 |
| Remix | 需要好的路由支持 | 任意平台 |
| FastHTML | Python 爱好者 | 任意平台 |
💡 技巧：
├── 在 Lovable 中启动项目（每天 5 条免费消息）
├── 输出到 GitHub
├── 克隆到本地用 Cursor 继续开发
└── 部署到 Render、Fly.io、CloudFlare 等项目结构建议：
my-project/
├── frontend/ # 前端代码
├── backend/ # 后端代码
└── docs/ # PRD 和任务后端项目
| 语言 | 框架 | 说明 |
|---|---|---|
| Python | FastAPI | 推荐，开发效率高 |
| JavaScript | Express | 与前端同语言 |
💡 后端开发建议：
├── 优先写端到端测试
├── 每个新功能完成后运行测试
├── 后端文档可作为前端开发的输入
└── 使用 mock 数据避免过早集成游戏项目
小游戏技术选择：
├── 单个 .js 文件
├── 3D 游戏：Three.js
├── 2D 游戏：PixiJS
└── 资源生成：Tripo AI、Anything World⚠️ 处理错误和 Bug
基本策略
markdown
1. 拥抱错误 —— 它们会发生
2. 复制错误信息，粘贴给 LLM 让它修复
3. 使用调试工具如 BrowserTools MCP
4. 不要让 AI 陷入无限修复循环（必要时手动干预）Rate Limit 处理
当遇到 "rate limit" 错误时：
解决方案：
├── 切换到不同的模型
├── 使用不同的 API 提供商
├── 等待一段时间后重试
└── 准备多个 API Key📎 实战案例
这是一个使用此工作流创建的真实项目：
项目：CLI 工具 localbiz 仓库：github.com/automata/localbiz开发时间：10 分钟
规划会话示例： ChatGPT 对话记录
🔗 下一步
继续学习 11.3 高级技巧与集成 —— 掌握 MCP、项目规则和模型选择！
📚 本节参考资源
- You are using Cursor AI incorrectly... - Geoffrey Huntley
- From Design doc to code - Geoffrey Huntley
- My LLM codegen workflow atm - Harper Reed
- Claude Code: Best practices - Anthropic
- Prompt Engineering - Google
- Not all AI-assisted programming is vibe coding - Simon Willison