📦 VibeCoding AI编程工作流

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 步骤一：明确需求 结构化描述公式： 目标：[核心目标] 功能细节：

• 输入：
• 输出：
• 交互逻辑：

4.2 步骤二：生成原型 推荐组合： 场景 | 技术栈 快速原型 | HTML + JS（无需构建工具） 后端 API | FastAPI + LLM API 数据处理 | Python + Pandas 全栈 | React/Vue + FastAPI

4.3 步骤三：运行验证 验证清单： □ 代码是否能运行？ □ 核心功能是否实现？ □ 输入/输出是否符合预期？ □ 边界条件处理？ □ 错误处理？

4.4 步骤四：迭代优化 迭代话术模板： "基于上一版代码，帮我做以下修改：

• [修改点1]
• [修改点2]
• [修改点3]

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

五、注意事项 5.1 拆分复杂需求 ❌ 错误：大任务一次给 AI ✅ 正确：拆分为小模块，逐个完成并测试

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 系统 需求：自然语言查询数据的系统，支持数据可视化 VibeCoding 耗时：3 天（效率提升 6 倍） 结果：代码减少 20%，Bug 降低 58%，文档 95%

6.2 AI 驱动任务调度仪表盘 需求：工作订单 → 可视化时间线 + 优先级过滤 实现：自然语言描述 → AI 生成 HTML/CSS/JS + 后端逻辑

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