vibe-coding-guide（氛围编码指南）

VibeCoding AI 编程工作流

谷歌开源 · 2.5 万 GitHub 星标 · 20 个专项技能 核心理念：让 AI 按规范流程开发，而不是随意生成代码

一、核心定位

本技能整合 VibeCoding 完整工作流体系，包含：

二、20 个专项技能概览

三、核心开发流程

┌─────────────────────────────────────────────────────┐
│                  VibeCoding 规范流程                 │
├─────────────────────────────────────────────────────┤
│                                                      │
│   1️⃣ 明确需求                                      │
│      ↓ 结构化描述（输入/输出/约束条件）               │
│   2️⃣ 调研 + 写计划                                  │
│      ↓ AI 先调研，再制定计划                          │
│   3️⃣ 先写测试                                       │
│      ↓ AI 先写测试用例，再实现代码                    │
│   4️⃣ 生成原型                                       │
│      ↓ 一次一个模块，立即测试                         │
│   5️⃣ 运行验证                                       │
│      ↓ 检查逻辑正确性，忽略样式细节                    │
│   6️⃣ 迭代优化                                       │
│      ↓ 每次 2-3 个问题，逐步完善                     │
│   7️⃣ Bug 修复                                       │
│      ↓ 先复现，再修复                                 │
│   8️⃣ 验收收尾                                       │
│      ↓ 代码评审 + 测试 + 文档                          │
│                                                      │
└─────────────────────────────────────────────────────┘

四、使用步骤详解

4.1 步骤一：明确需求

结构化描述公式：

目标：[核心目标]
功能细节：
  - 输入：
  - 输出：
  - 交互逻辑：
约束条件：[限制条件，如"不用真实网络请求，用打印日志模拟"]

示例：

目标：构建费用跟踪器
功能细节：
  - 输入：费用金额 + 类别
  - 输出：每月费用统计表
  - 交互逻辑：点击添加 → 显示输入框 → 提交 → 更新列表
约束条件：
  - 不用真实网络请求
  - 用 localStorage 模拟存储
  - 仅限单页应用

4.2 步骤二：生成原型

推荐组合：

关键原则：

• ✅ 一次只生成一个功能模块
• ✅ 生成后立即测试核心逻辑
• ❌ 不要一次性要求完整项目

4.3 步骤三：运行验证

验证清单：

□ 代码是否能运行？
□ 核心功能是否实现？
□ 输入/输出是否符合预期？
□ 边界条件处理？
□ 错误处理？

优先级：

• ✅ 逻辑正确性（最重要）
• ✅ 核心功能（次重要）
• ❌ 样式/命名/注释（最后处理）

4.4 步骤四：迭代优化

迭代话术模板：

"基于上一版代码，帮我做以下修改：
1. [修改点1]
2. [修改点2]
3. [修改点3]

不要改变其他部分。"

每次迭代原则：

• 每次 2-3 个修改点
• 改完立即测试
• 保持上下文（粘贴上一版关键代码）

4.5 步骤五：验收收尾

验收清单：

五、注意事项

5.1 拆分复杂需求

❌ 错误：大任务一次给 AI
   "帮我做一个电商网站"

✅ 正确：拆分为小模块
   1. 地址选择 → 完成并测试
   2. 商品展示 → 完成并测试
   3. 购物车 → 完成并测试
   4. 结算 → 完成并测试
   5. 支付 → 完成并测试

5.2 保持上下文

迭代时告诉 AI：
- "基于上一版代码修改"
- 或粘贴上一版关键代码
- 明确指出修改位置

5.3 工具选择

5.4 常见陷阱

六、7 大实战案例

6.1 企业级 Text-to-BI 系统

6.2 AI 驱动任务调度仪表盘

6.3 视频字幕自动生成工具

6.4 个人项目：音乐播放器原型

6.5 招聘简历分析仪表盘

6.6 跨境 AI 应用（不懂代码）

6.7 团队协作：初级开发者效率提升

七、行业应用

八、优势总结

VibeCoding vs 传统开发

VibeCoding vs 纯 AI 生成

九、使用方式

触发场景

用户说「帮我用 VibeCoding 做一个费用跟踪器」→ 展示完整流程
用户说「VibeCoding 怎么做」→ 展示使用步骤
用户说「有哪些案例」→ 展示 7 大实战案例
用户说「AI 编程工作流」→ 展示规范流程图
用户说「需求怎么描述」→ 展示结构化描述模板

组合使用

用户：「帮我用 VibeCoding 开发一个博客系统」
→ 步骤一：明确需求（结构化描述）
→ 步骤二：拆分模块（用户模块、文章模块、评论模块）
→ 步骤三：生成原型（每次一个模块）
→ 步骤四：迭代优化
→ 步骤五：验收收尾

十、与其他技能关联

十一、参考资料

• GitHub: addyosmani/agent-skills (25k ⭐)
• 工具推荐：VS Code + GitHub Copilot / Cursor / Claude Code

*本技能整合 Google VibeCoding AI 编程工作流的完整规范与实战指南*