Skip to main content

Vibe Coding 工作流

从"AI 写代码"到"共鸣编程"

完成本节后,你将掌握工具选择、上下文管理、调试技巧和高效协作的核心方法。

一、工具选择: Cursor vs CLI​

对比总结​

维度Cursor (推荐)Claude Code (CLI)
学习曲线极低中等
上下文管理@ 符号,直观命令行参数
适合人群新手、所有人终端极客

建议: 从 Cursor 开始,完全掌握后再尝试 CLI。

Cursor 核心功能​

1. 全局规则 (Global Rules)​

推荐配置:

Always respond in 中文

你是资深软件工程师,专注构建可扩展、可维护的系统。

# 规划模式
进入"规划模式"时:
1. 深入思考变更范围
2. 提出 4-6 个澄清问题
3. 制定详细计划并寻求批准
4. 按步骤实施

# 调试模式
进入"调试模式"时:
1. 列举 5-7 个可能原因
2. 缩小到 1-2 个最可能的
3. 添加日志验证假设
4. 修复后删除调试代码

# 知识来源
使用 Context7 MCP 获取最新官方文档

2. 项目规则 (Project Rules)​

示例 (Next.js 项目):

# React 组件
- 优先函数式组件
- 用 TypeScript 定义 Props
- 文件命名: PascalCase

# 状态管理
- 简单场景用 Zustand
- 复杂场景用 Redux Toolkit

# 代码质量
- 函数最大 50 行
- 文件最大 300 行
- 必须有 JSDoc 注释

3. Git 面板​

工作流:

  1. AI 修改后,点击 Git 图标
  2. 逐文件查看 Diff
  3. 确认后 commit

黄金法则: AI 修改后必看 Git Diff,风险操作前必 commit。

4. Problems 面板​

显示 ESLint/TypeScript 错误,AI 生成代码后的"质检员"。

操作: "修复 Problems 面板中所有错误"

5. MCP 集成​

  • Context7: 实时查询最新文档
  • Figma: 读取设计稿生成代码

二、上下文管理​

为什么重要?​

  • AI 上下文窗口 ~200k tokens
  • 过长 → 注意力分散 → 质量下降

技法 1: 精准投喂​

任务@ 哪些文件
实现 UI@ui_mockups/ + @design_system.md
写数据交互@schema.sql + @api.md
理解业务@PRD.md

示例:

@PRD.md (用户资料部分)
@schema.sql (users 表)
@ui_mockups/profile_page.png

请实现用户个人资料编辑页面。

技法 2: "场外"处理噪音​

错误做法: 在 Cursor 主对话中反复讨论方案 → 大量噪音消耗上下文

正确做法:

  1. 在 ChatGPT/Claude 网页版头脑风暴
  2. 得到最终方案后复制到 Cursor
  3. 发出简洁指令

技法 3: 定期重置​

症状: 对话 50+ 条,AI 答非所问

解决:

  1. git commit 保存代码
  2. 开启新对话
  3. @ 必要文档重新开始

三、模型选择​

模型"性格"​

模型擅长适合场景
Claude前端 UI、文案登录页、设计稿转代码
GPT-4o后端逻辑、算法数据库优化、Bug 排查
Gemini多模态、数据分析图表生成、数据处理

策略: 根据任务切换,卡住时尝试换模型。

四、调试心法​

前端: F12 工具​

Console:

[看到错误]
→ 复制完整错误信息
→ 对 AI: "遇到以下错误: [粘贴]"

Network:

[API 失败]
→ 查看状态码和 Response
→ 截图/复制给 AI

Elements:

[UI 问题]
→ 右键检查 → 复制 Selector
→ 对 AI: "调整 .profile-card > .avatar 的 margin"

描述 Bug 模板​

**预期行为**: 点击保存后显示成功提示

**实际行为**: 页面直接刷新,无提示

**重现步骤**:
1. 进入个人资料页
2. 修改昵称
3. 点击保存

**相关代码**: @src/components/ProfileForm.tsx

**猜测**: 可能缺少 preventDefault?

调用"调试模式"​

进入调试模式

问题: [描述]
文件: @file1 @file2
日志: [粘贴]

五、Git 的妙用​

Git = 安全网​

黄金法则: 风险操作前必 commit

# 准备让 AI 重构大文件
git add .
git commit -m "Refactor: 重构前快照"

# AI 重构...

# 如果失败
git reset --hard HEAD

Git = 复盘教练​

错误做法: 默默 reset 后重来

正确做法:

1. 对 AI: "当前方案走入死胡同,准备回溯到 abc123。
   请复盘从该版本到现在的修改,分析哪里走错,建议新策略。"

2. git reset --hard abc123

3. 根据 AI 复盘,用新策略实现

六、进阶技巧​

1. 重构暂停​

时机: 完成一个大功能后

我们完成了 [功能],现在进入"重构审查"模式:
@src/features/[目录]

请审查:
1. 是否有可复用组件?
2. 是否有代码坏味道?
3. 性能优化点?

给出重构计划。

2. AI 驱动测试​

[选中组件代码]

请用 Jest 和 React Testing Library 为 SignUpForm.tsx 编写测试。

场景:
1. 组件渲染
2. 有效数据输入
3. 无效数据错误提示
4. 提交成功调用

3. 专业术语​

边界情况:

"为上传功能考虑边界情况:
空文件、超大文件、错误格式、网络失败"

幂等性:

"确保点赞 API 幂等,
多次请求不会重复点赞"

乐观更新:

"添加待办时用乐观更新,
立即显示,后台同步"

优雅降级:

"如果天气 API 失败,
页面正常显示,组件显示'暂不可用'"

七、核心工作流​

┌────────────────────────────────┐
│      AI 驱动的开发循环          │
├────────────────────────────────┤
│                                │
│  1. 明确任务                   │
│  2. @ 文档,发指令              │
│  3. AI 编写代码                │
│  4. 查看 Git Diff              │
│  5. 运行/测试,F12 调试         │
│  6. 问题 → 回步骤 2            │
│     或                         │
│  7. 完成 → 编写测试            │
│  8. Git commit                 │
│  9. 更新文档                   │
│ 10. (可选) 重构 & 复盘         │
│ 11. 下一功能                   │
│                                │
└────────────────────────────────┘

八、复盘思维​

个人复盘​

创建 retrospective.md:

## [功能] 复盘

**成功之处**: 做对了什么?
**改进空间**: 遇到的困难?
**关键学习**: 学到了什么?
**行动项**:
- [ ] 将 XX 经验加入项目规则

AI 复盘​

我们完成了 [功能]。

挑战: [列举]
方案: @src/[代码]

请总结最佳实践,
生成可添加到项目规则的新规则。

示例输出:

规则: 所有 API 调用必须:
1. try/catch 错误处理
2. 统一响应格式 { success, data?, error? }
3. 调用日志服务

行动: 将规则加入 .cursor/rules

九、检查清单​

  • 选择并配置 AI 工具 (推荐 Cursor)
  • 设置全局和项目规则
  • 理解上下文管理技法
  • 学会根据任务选择模型
  • 掌握 F12 调试技巧
  • 建立 Git 使用习惯
  • 开始使用 retrospective.md

十、下一步​

工作流已建立,下一步是 工程化与部署。

你将学习:

  • 部署前检查
  • CI/CD 自动化
  • 线上维护
  • 角色进化思考

← 上一节: 技术栈与架构 | 下一节: 工程化与复盘 →

你已掌握与 AI 协作的核心技能,准备将产品推向世界! 🚀