VibeCoding AI编程工作流

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

Install

openclaw skills install @smseow001/vibe-coding-guide

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	用户验收测试

三、核心开发流程

text

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

四、使用步骤详解

4.1 步骤一：明确需求

结构化描述公式：

text

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

示例：

text

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

4.2 步骤二：生成原型

推荐组合：

场景	技术栈
快速原型	HTML + JS（无需构建工具）
后端 API	FastAPI + 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 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
流程规范	❌ 随意	✅ 规范流程
代码质量	❌ 良莠不齐	✅ 先测后写
可维护性	❌ 低	✅ 高
复杂需求	❌ 容易混乱	✅ 拆分模块

九、使用方式

触发场景

text

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

组合使用

text

用户：「帮我用 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 编程工作流的完整规范与实战指南

VibeCoding AI编程工作流

Install

VibeCoding AI 编程工作流

一、核心定位

二、20 个专项技能概览

三、核心开发流程

四、使用步骤详解

4.1 步骤一：明确需求

4.2 步骤二：生成原型

4.3 步骤三：运行验证

4.4 步骤四：迭代优化

4.5 步骤五：验收收尾

五、注意事项

5.1 拆分复杂需求

5.2 保持上下文

5.3 工具选择

5.4 常见陷阱

六、7 大实战案例

6.1 企业级 Text-to-BI 系统

6.2 AI 驱动任务调度仪表盘

6.3 视频字幕自动生成工具

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

6.5 招聘简历分析仪表盘

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

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

七、行业应用

八、优势总结

VibeCoding vs 传统开发

VibeCoding vs 纯 AI 生成

九、使用方式

触发场景

组合使用

十、与其他技能关联

十一、参考资料

Related skills