Skill: smseow001/vibe-coding-guide (version 1.0.0)

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


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)