VibeCoding AI 编程工作流#

谷歌开源 · 2.5 万 GitHub 星标 · 20 个专项技能

核心理念：让 AI 按规范流程开发，而不是随意生成代码

---

一、核心定位#

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

模块内容20 个专项技能谷歌团队将真实开发流程转化为 AI 必须执行的规范规范流程先调研 → 写计划 → 写测试 → 实现 → 复现 Bug → 修复验收环节代码评审 + 浏览器测试 + 文档整理7 大实战案例企业级系统 / 仪表盘 / 字幕工具 / 音乐播放器 等

---

二、20 个专项技能概览#

#技能用途1Requirements Analysis结构化需求描述2Research Planning调研后写计划3Test-First Development先写测试再实现4Prototype Generation生成可运行初版代码5Validation & Testing运行验证 + 核心功能测试6Iterative Optimization自然语言迭代修改7Bug Reproduction先复现再修复 Bug8Code Review代码评审规范9Browser Testing浏览器测试流程10Documentation文档整理规范11Module Splitting复杂需求拆分12Context Management保持上下文13FastAPI Integration后端 FastAPI 开发14HTML/JS Frontend前端 HTML+JS 开发15LLM API IntegrationLLM API 调用16Data Visualization数据可视化开发17CI/CD Pipeline持续集成/部署18Security Review安全审查规范19Performance Tuning性能优化20User Acceptance Testing用户验收测试

---

三、核心开发流程#

text

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

---

四、使用步骤详解#

4.1 步骤一：明确需求#

结构化描述公式：

text

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

示例：

text

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

4.2 步骤二：生成原型#

推荐组合：

场景技术栈快速原型HTML + JS（无需构建工具）后端 APIFastAPI + LLM API数据处理Python + Pandas全栈React/Vue + FastAPI

关键原则：

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

4.3 步骤三：运行验证#

验证清单：

text

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

优先级：

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

4.4 步骤四：迭代优化#

迭代话术模板：

text

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

不要改变其他部分。"

每次迭代原则：

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

4.5 步骤五：验收收尾#

验收清单：

环节检查项代码评审代码规范、安全漏洞、性能问题单元测试核心函数测试覆盖率浏览器测试页面加载、交互、功能文档README、使用说明、API 文档

---

五、注意事项#

5.1 拆分复杂需求#

text

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

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

5.2 保持上下文#

text

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

5.3 工具选择#

工具用途推荐度VS Code代码编辑器⭐⭐⭐⭐⭐GitHub CopilotAI 代码补全⭐⭐⭐⭐⭐CursorAI 原生 IDE⭐⭐⭐⭐Claude Code命令行 AI⭐⭐⭐⭐WindsurfAI 编程⭐⭐⭐

5.4 常见陷阱#

陷阱后果正确做法需求太模糊AI 理解偏差结构化描述一次给太多代码混乱每次一个模块不测试就继续Bug 累积每步必测忽略代码评审安全/性能问题必须评审

---

六、7 大实战案例#

6.1 企业级 Text-to-BI 系统#

项目内容需求自然语言查询数据的系统，支持数据可视化传统耗时2 周VibeCoding 耗时3 天（效率提升 6 倍）关键步骤结构化需求 → 分模块开发 → AI 生成测试结果代码减少 20%，Bug 降低 58%，文档 95%

6.2 AI 驱动任务调度仪表盘#

项目内容需求工作订单 → 可视化时间线 + 优先级过滤实现方式自然语言描述 → AI 生成 HTML/CSS/JS + 后端逻辑优势快速验证交互，无需 prototyping 工具

6.3 视频字幕自动生成工具#

项目内容需求视频 → 自动生成 SRT 字幕 + 时间轴流程语音识别 → 翻译 → 字幕文件效率传统数小时 → AI 10 分钟（90% 工作）

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

项目内容需求复古风格播放器（播放/暂停/音量/浏览）实现方式描述交互逻辑 → AI 生成 HTML5 Canvas + JS结果2 小时完成可交互原型

6.5 招聘简历分析仪表盘#

项目内容需求上传简历 → AI 分析技能 + 匹配岗位 + 生成报告流程自然语言 → Python (pandas + LLM) → 可视化报告效率人工筛选效率提升 80%

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

项目内容案例"发型模拟" 应用（上传照片 → 预览不同发型）流程中文描述需求 → AI 调用图像生成 + 前端框架结果无需编码， 3 天 完成 MVP 上线

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

项目内容模式初级开发者用 VibeCoding，资深开发者专注架构效率对比初级产出提升 5 倍，资深专注架构优化

---

七、行业应用#

行业应用场景科技/软件开发快速原型、代码生成、测试视频/内容创作自动字幕、剪辑自动化企业应用/数据分析自然语言 BI、仪表盘创业/出海非技术创业者快速验证 MVP工具/脚本开发数据处理、文件操作自动化

---

八、优势总结#

VibeCoding vs 传统开发#

维度传统开发VibeCoding需求到代码数周数天原型验证需原型工具自然语言 → 可运行代码迭代速度慢（手动改代码）快（AI 批量修改）测试生成手动编写AI 自动生成文档容易忽略AI 同步生成

VibeCoding vs 纯 AI 生成#

维度纯 AI 生成VibeCoding流程规范❌ 随意✅ 规范流程代码质量❌ 良莠不齐✅ 先测后写可维护性❌ 低✅ 高复杂需求❌ 容易混乱✅ 拆分模块

---

九、使用方式#

触发场景#

text

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

组合使用#

text

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

---

十、与其他技能关联#

本技能关联技能关系VibeCodingbrowser-use浏览器自动化测试VibeCodingai-research-toolsAI 辅助开发VibeCodingthinking-knowledge-system思考四层次（需求分析）VibeCodingmckinsey-frameworks战略分析框架

---

十一、参考资料#

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

---

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