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

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

• 输入：费用金额 + 类别
• 输出：每月费用统计表
• 交互逻辑：点击添加 → 显示输入框 → 提交 → 更新列表

• 不用真实网络请求
• 用 localStorage 模拟存储
• 仅限单页应用

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 系统 项目 内容 需求 自然语言查询数据的系统，支持数据可视化 传统耗时 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 编程工作流的完整规范与实战指南