VibeCoding AI 编程工作流
谷歌开源 · 2.5 万 GitHub 星标 · 20 个专项技能
核心理念：让 AI 按规范流程开发，而不是随意生成代码
一、核心定位
本技能整合 VibeCoding 完整工作流体系，包含：
| 模块 | 内容 |
|---|
| 20 个专项技能 | 谷歌团队将真实开发流程转化为 AI 必须执行的规范 |
| 规范流程 | 先调研 → 写计划 → 写测试 → 实现 → 复现 Bug → 修复 |
| 验收环节 | 代码评审 + 浏览器测试 + 文档整理 |
| 7 大实战案例 | 企业级系统 / 仪表盘 / 字幕工具 / 音乐播放器 等 |
二、20 个专项技能概览
| # | 技能 | 用途 |
|---|
| 1 | Requirements Analysis | 结构化需求描述 |
| 2 | Research Planning | 调研后写计划 |
| 3 | Test-First Development | 先写测试再实现 |
| 4 | Prototype Generation | 生成可运行初版代码 |
| 5 | Validation & Testing | 运行验证 + 核心功能测试 |
| 6 | Iterative Optimization | 自然语言迭代修改 |
| 7 | Bug Reproduction | 先复现再修复 Bug |
| 8 | Code Review | 代码评审规范 |
| 9 | Browser Testing | 浏览器测试流程 |
| 10 | Documentation | 文档整理规范 |
| 11 | Module Splitting | 复杂需求拆分 |
| 12 | Context Management | 保持上下文 |
| 13 | FastAPI Integration | 后端 FastAPI 开发 |
| 14 | HTML/JS Frontend | 前端 HTML+JS 开发 |
| 15 | LLM API Integration | LLM API 调用 |
| 16 | Data Visualization | 数据可视化开发 |
| 17 | CI/CD Pipeline | 持续集成/部署 |
| 18 | Security Review | 安全审查规范 |
| 19 | Performance Tuning | 性能优化 |
| 20 | User Acceptance Testing | 用户验收测试 |
三、核心开发流程
┌─────────────────────────────────────────────────────┐
│ VibeCoding 规范流程 │
├─────────────────────────────────────────────────────┤
│ │
│ 1️⃣ 明确需求 │
│ ↓ 结构化描述（输入/输出/约束条件） │
│ 2️⃣ 调研 + 写计划 │
│ ↓ AI 先调研，再制定计划 │
│ 3️⃣ 先写测试 │
│ ↓ AI 先写测试用例，再实现代码 │
│ 4️⃣ 生成原型 │
│ ↓ 一次一个模块，立即测试 │
│ 5️⃣ 运行验证 │
│ ↓ 检查逻辑正确性，忽略样式细节 │
│ 6️⃣ 迭代优化 │
│ ↓ 每次 2-3 个问题，逐步完善 │
│ 7️⃣ Bug 修复 │
│ ↓ 先复现，再修复 │
│ 8️⃣ 验收收尾 │
│ ↓ 代码评审 + 测试 + 文档 │
│ │
└─────────────────────────────────────────────────────┘
四、使用步骤详解
4.1 步骤一：明确需求
结构化描述公式：
目标：[核心目标]
功能细节：
- 输入：
- 输出：
- 交互逻辑：
约束条件：[限制条件，如"不用真实网络请求，用打印日志模拟"]
示例：
目标：构建费用跟踪器
功能细节：
- 输入：费用金额 + 类别
- 输出：每月费用统计表
- 交互逻辑：点击添加 → 显示输入框 → 提交 → 更新列表
约束条件：
- 不用真实网络请求
- 用 localStorage 模拟存储
- 仅限单页应用
4.2 步骤二：生成原型
推荐组合：
| 场景 | 技术栈 |
|---|
| 快速原型 | HTML + JS（无需构建工具） |
| 后端 API | FastAPI + LLM API |
| 数据处理 | Python + Pandas |
| 全栈 | React/Vue + FastAPI |
关键原则：
- ✅ 一次只生成一个功能模块
- ✅ 生成后立即测试核心逻辑
- ❌ 不要一次性要求完整项目
4.3 步骤三：运行验证
验证清单：
□ 代码是否能运行？
□ 核心功能是否实现？
□ 输入/输出是否符合预期？
□ 边界条件处理？
□ 错误处理？
优先级：
- ✅ 逻辑正确性（最重要）
- ✅ 核心功能（次重要）
- ❌ 样式/命名/注释（最后处理）
4.4 步骤四：迭代优化
迭代话术模板：
"基于上一版代码，帮我做以下修改：
1. [修改点1]
2. [修改点2]
3. [修改点3]
不要改变其他部分。"
每次迭代原则：
- 每次 2-3 个修改点
- 改完立即测试
- 保持上下文（粘贴上一版关键代码）
4.5 步骤五：验收收尾
验收清单：
| 环节 | 检查项 |
|---|
| 代码评审 | 代码规范、安全漏洞、性能问题 |
| 单元测试 | 核心函数测试覆盖率 |
| 浏览器测试 | 页面加载、交互、功能 |
| 文档 | README、使用说明、API 文档 |
五、注意事项
5.1 拆分复杂需求
❌ 错误：大任务一次给 AI
"帮我做一个电商网站"
✅ 正确：拆分为小模块
1. 地址选择 → 完成并测试
2. 商品展示 → 完成并测试
3. 购物车 → 完成并测试
4. 结算 → 完成并测试
5. 支付 → 完成并测试
5.2 保持上下文
迭代时告诉 AI：
- "基于上一版代码修改"
- 或粘贴上一版关键代码
- 明确指出修改位置
5.3 工具选择
| 工具 | 用途 | 推荐度 |
|---|
| VS Code | 代码编辑器 | ⭐⭐⭐⭐⭐ |
| GitHub Copilot | AI 代码补全 | ⭐⭐⭐⭐⭐ |
| Cursor | AI 原生 IDE | ⭐⭐⭐⭐ |
| Claude Code | 命令行 AI | ⭐⭐⭐⭐ |
| Windsurf | AI 编程 | ⭐⭐⭐ |
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 |
|---|
| 流程规范 | ❌ 随意 | ✅ 规范流程 |
| 代码质量 | ❌ 良莠不齐 | ✅ 先测后写 |
| 可维护性 | ❌ 低 | ✅ 高 |
| 复杂需求 | ❌ 容易混乱 | ✅ 拆分模块 |
九、使用方式
触发场景
用户说「帮我用 VibeCoding 做一个费用跟踪器」→ 展示完整流程
用户说「VibeCoding 怎么做」→ 展示使用步骤
用户说「有哪些案例」→ 展示 7 大实战案例
用户说「AI 编程工作流」→ 展示规范流程图
用户说「需求怎么描述」→ 展示结构化描述模板
组合使用
用户：「帮我用 VibeCoding 开发一个博客系统」
→ 步骤一：明确需求（结构化描述）
→ 步骤二：拆分模块（用户模块、文章模块、评论模块）
→ 步骤三：生成原型（每次一个模块）
→ 步骤四：迭代优化
→ 步骤五：验收收尾
十、与其他技能关联
| 本技能 | 关联技能 | 关系 |
|---|
| VibeCoding | browser-use | 浏览器自动化测试 |
| VibeCoding | ai-research-tools | AI 辅助开发 |
| VibeCoding | thinking-knowledge-system | 思考四层次（需求分析） |
| VibeCoding | mckinsey-frameworks | 战略分析框架 |
十一、参考资料
- GitHub:
addyosmani/agent-skills (25k ⭐)
- 工具推荐：VS Code + GitHub Copilot / Cursor / Claude Code
本技能整合 Google VibeCoding AI 编程工作流的完整规范与实战指南
