Vibe Coding Guide

---
name: vibe-coding
description: 谷歌开源 AI 编程工作流 - 从需求到代码的快速转化。包含20个专项技能、规范开发流程、7大实战案例。
---

# 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 编程工作流的完整规范与实战指南*