超越Vibe Coding —— AI 辅助编程进阶指南

[mqyqingfeng]

你好，我是冴羽。

上一篇讲了 AI 编程的 4 大坑和基础原则，但那只是入门。

你可能已经开始用 Cursor、Copilot 这些工具写代码了，感觉还不错。但你有没有想过：

• 为什么同样的需求，别人用 AI 5 分钟搞定，你却要折腾半小时？

• 为什么 AI 给别人生成的代码能直接用，给你的却 Bug 一堆？

• 为什么有人说 AI 能提升 10 倍效率，你却感觉只快了一点点？

答案很简单：你还不懂 AI 编程的完整体系。

今天这篇文章，我会带你看清 AI 辅助开发的全景图，从工具选择到高级技巧，一次性讲透。

1. AI 编程工具的 3 种模式

1.1. 自动补全（Autocomplete）

这是最基础的模式。 AI 预测你的下一步代码，你按 Tab 键接受建议。

典型代表：

• GitHub Copilot：最早的 AI 代码补全工具

• Cursor Tab：Cursor 的智能补全

• Codeium：免费的代码补全工具

适用场景：

• 写重复性代码（CRUD、测试用例）

• 补全函数实现

• 生成样板代码

局限性： 只能处理单行或几行代码，无法理解复杂的业务逻辑。

1.2. 聊天机器人（Chatbot）

这是对话式的编程助手。 你用自然语言提问，AI 给你代码和解释。

典型代表：

• Cursor Chat：在编辑器里直接对话

• GitHub Copilot Chat：集成在 VS Code 中

• Claude / ChatGPT：通用的 AI 对话工具

适用场景：

• 询问代码库相关问题

• 解释复杂代码

• 获取实现思路

• Debug 错误

进阶技巧： 把相关文件、错误日志、设计文档都喂给 AI，让它理解完整上下文。

1.3. Agent（智能代理）

这是最高级的模式。 AI 能自主执行多步任务，跨文件修改代码，甚至运行测试。

典型代表：

• Cursor Composer：多文件编辑

• Cline：终端里的 AI Agent

• Bolt：直接生成可运行的应用

• v0：从设计稿生成 React 组件

适用场景：

• 实现完整功能（跨多个文件）

• 重构代码结构

• 生成完整的项目脚手架

• 自动化测试和部署

关键区别： Agent 模式会“持续在循环中”，你给一个目标，它会自己规划步骤、执行、验证、修正。

2. AI 辅助开发的完整光谱

很多人以为 AI 编程就是“让 AI 写代码”，但其实 AI 能介入开发的每一个环节。

2.1. 设计循环（Design Loop）

在写代码之前，AI 就能帮你。

• 需求分析：把产品需求转成技术方案

• 架构设计：生成系统架构图和技术选型建议

• 任务拆解：把大功能拆成可执行的小任务

• Bug 分类：自动分析 Bug 报告，分配优先级

举个例子：

你：我要做一个实时协作的在线白板，类似 Figma。

AI：

1. 技术选型建议：
   - 前端：React + Canvas API / Fabric.js
   - 实时通信：WebSocket / WebRTC
   - 后端：Node.js + Redis（存储操作历史）
   - 数据库：PostgreSQL（持久化）

2. 核心模块拆解：
   - 画布渲染引擎
   - 协作冲突解决（OT 或 CRDT 算法）
   - 权限管理
   - 历史记录和撤销/重做

3. 开发优先级：
   - MVP：单人画布 + 基础图形
   - V2：多人协作 + 实时同步
   - V3：权限控制 + 导出功能

2.2. 内循环（Inner Loop）

这是你日常写代码的核心流程。

• 代码生成：根据需求生成函数、组件

• 自动测试：生成单元测试和集成测试

• 实时 Debug：分析错误日志，提供修复建议

• 代码补全：智能预测下一行代码

关键点： 每次修改后立即测试，小步快跑。别等写完一大堆代码再测试，那时候出 Bug 你都不知道是哪里的问题。

2.3. 提交循环（Submit Loop）

代码写完了，提交之前 AI 还能帮你。

• 代码审查：自动检查代码质量、安全漏洞

• 生成 Commit Message：根据代码变更自动生成提交信息

• 文档生成：自动更新 API 文档、README

• 性能分析：检测潜在的性能问题

实用技巧：

# 让 AI 生成 Commit Message
git diff | pbcopy
# 然后问 AI："根据这个 diff 生成一个规范的 commit message"

2.4. 外循环（Outer Loop）

代码上线后，AI 还在工作。

• 监控告警：自动分析线上错误日志

• 性能优化：识别性能瓶颈，提供优化方案

• 用户反馈分析：从用户反馈中提取 Bug 和需求

• 自动化运维：智能扩容、故障恢复

这就是 AI 辅助开发的完整光谱 —— 从设计到上线，全流程覆盖。

3. 高级 Prompt 技巧

上一篇讲了 5 条基础原则，这里再补充 3 个高级技巧。

3.1. 链式思考（Chain of Thought）

不要让 AI 直接给答案，让它一步步推理。

❌ 错误："优化这个数据库查询"

✅ 正确："优化这个数据库查询，按以下步骤：

1. 先分析当前查询的性能瓶颈
2. 然后建议具体的索引优化
3. 接着用更高效的 JOIN 重写查询
4. 最后解释预期的性能提升

当前查询：[粘贴查询语句]"

为什么这样有效？ 因为 AI 在逐步推理时会更准确，就像你做数学题要列步骤一样。

3.2. 约束式提示（Constraint-Based Prompting）

给 AI 设定明确的边界和要求。

有效的约束：

• 技术栈约束：“只用原生 JavaScript，不要用任何外部库”

• 性能约束：“方案必须能高效处理 10,000+ 条数据”

• 兼容性约束：“必须兼容 IE 11”

• 代码风格约束：“遵循 Google JavaScript 风格指南”

举个例子：

"实现一个防抖函数，要求：

1. 只用原生 JavaScript，不依赖 lodash
2. 支持立即执行模式
3. 支持取消功能
4. 有完整的 TypeScript 类型定义
5. 代码不超过 30 行"

3.3. 多步验证（Multi-Step Validation）

让 AI 自己检查自己的输出。

"创建一个用户注册函数，要求：

1. 验证邮箱格式
2. 检查密码强度
3. 优雅处理重复用户

写完函数后，请：

1. 用有效输入测试
2. 用无效输入测试
3. 验证错误提示是否友好
4. 检查是否符合我们现有的代码模式"

这样做的好处： AI 会在生成代码的同时生成测试用例，大大减少 Bug。

4. 场景化 Prompt 策略

不同的任务需要不同的 Prompt 策略。

4.1. 调试代码

关键：清楚描述症状。

• 说明预期行为：“这个函数应该做什么”

• 说明实际行为：“现在它做了什么”

• 提供完整错误信息：不要只说“报错了”，要把完整的错误栈贴出来

进阶技巧：

"逐行分析这个函数，追踪 `total` 变量的值变化：

[粘贴代码]

预期：total 应该是所有订单金额的总和
实际：total 总是 NaN
错误信息：[粘贴错误]"

4.2. 重构优化

关键：明确优化目标。

❌ 错误："优化这段代码"

✅ 正确："重构这个函数，目标是：

1. 提高可读性
2. 减少代码重复
3. 保持现有功能不变

重构后请解释你做了哪些改动，为什么这样改。"

使用专家人设：

"作为一个经验丰富的开发者，指导一个初级开发者重构这段代码。
指出问题所在，并解释为什么要这样改。"

4.3. 实现新功能

关键：先要计划，后写代码。

"我要实现一个用户权限系统，要求：

- 支持角色继承（管理员 > 编辑 > 访客）
- 支持细粒度权限控制（读/写/删除）
- 支持动态权限检查

第一步：先给我一个技术方案，包括：

1. 数据库设计
2. API 设计
3. 前端权限检查逻辑

等我确认方案后再开始写代码。"

提供参考代码：

"参考我们现有的认证系统（见 auth.js），实现一个权限系统。
保持代码风格一致，使用相同的错误处理模式。"

5. 上下文工程（Context Engineering）

这是 AI 编程的核心技能 —— 不是写更好的 Prompt，而是构建更好的信息环境。

5.1. 什么是上下文工程？

传统的 Prompt 工程是“写一个好问题”，但上下文工程是“为 AI 准备一个完整的信息环境”。

类比：

• Prompt 工程：你问一个问题

• 上下文工程：你给 AI 一个完整的工作台，包括代码库、文档、历史对话、相关文件

5.2. 核心原则

原则 1：把 AI 当作操作系统

AI 模型 = CPU，上下文窗口 = RAM。

你要像管理内存一样管理上下文：

• 按需加载：只加载当前任务需要的信息

• 缓存常用数据：把常用的代码模式、规范保存起来

• 垃圾回收：移除过时的上下文

• 优先级调度：最相关的信息放在最前面

原则 2：动态信息组装

不要用固定的 Prompt，要根据任务动态组装上下文。

举个例子：

# 修 Bug 时的上下文

- 错误日志
- 相关代码文件
- 最近的代码变更
- 相似的历史 Bug 修复记录

# 实现新功能时的上下文

- 产品需求文档
- 相关的现有功能代码
- API 文档
- 设计稿

原则 3：精确和具体

模糊的上下文导致模糊的输出。

精确的上下文包括：

• 准确的版本号：“React 18.2.0”而不是“React 18”

• 明确的代码规范：“使用 ESLint + Prettier，配置文件在 .eslintrc.js”

• 清晰的成功标准：“函数必须在 100ms 内返回结果”

• 完整的错误信息：包括错误栈、触发条件、环境信息

5.3. 高级技巧：RAG（检索增强生成）

当任务需要的知识超出 AI 训练数据时，动态检索相关信息。

RAG 的工作流程：

1. 分析查询：理解需要什么信息

2. 检索信息：从文档库、代码库中检索相关内容

3. 组装上下文：把检索到的信息和 Prompt 组合

4. 生成响应：基于完整上下文生成答案

实际应用：

• Cursor 的 @Codebase 功能：自动检索代码库中的相关文件

• GitHub Copilot 的上下文感知：根据当前文件自动引入相关代码

• 自建 RAG 系统：用向量数据库存储项目文档，动态检索

5.4. 信息格式化

结构化的信息更容易被 AI 理解。

有效的格式化技巧：

• 清晰的标题：“相关文档：”、“错误日志：”、“当前代码：”

• 使用列表：把复杂信息拆成条目

• 代码块：用正确的语法高亮

• 表格：对比数据时用表格展示

举个例子：

❌ 错误（信息混乱）：
我的 API 报错了，用户登录时返回 500，数据库连接正常，
Redis 也能访问，不知道哪里出问题了。

✅ 正确（结构化）：

## 问题描述

用户登录时 API 返回 500 错误

## 错误信息

Error: Cannot read property 'id' of undefined
at /api/auth/login.js:45

## 环境信息
- Node.js: 18.16.0
- 数据库: PostgreSQL 14（连接正常）
- Redis: 6.2（连接正常）

## 相关代码
[粘贴 login.js 的关键部分]

## 已尝试的解决方案
1. 检查数据库连接 ✅
2. 检查 Redis 连接 ✅
3. 查看日志（见上方错误信息）

6. 命令行 AI 和多 Agent 系统

这是 AI 编程的前沿 —— 让 AI 直接在终端里工作，甚至让多个 AI 协同完成任务。

6.1. CLI Coding Agents

把终端变成强大的开发环境。

主流工具：

• Claude Code:Anthropic 的终端 AI 助手

• Gemini CLI：Google 的命令行 AI，免费额度很大

• Amp Code：专注于复杂任务的 AI Agent

典型工作流：

# 1. 启动 AI Agent
$ gemini chat

# 2. 给出任务
> "实现一个用户认证系统，包括注册、登录、JWT token"

# 3. AI 自动执行
- 创建数据库 schema
- 生成 API 路由
- 实现密码哈希
- 编写测试用例
- 更新文档

# 4. 你只需要 review 和确认

6.2. 最佳实践

1. 规划优先

不要上来就让 AI 写代码。

# ❌ 错误
$ gemini "实现用户认证"

# ✅ 正确
$ gemini "给我一个用户认证系统的实现计划，包括：
1. 数据库设计
2. API 端点
3. 安全措施
4. 测试策略

先别写代码，等我确认方案。"

2. Spec 驱动开发

写一个详细的任务说明（mini-PRD），让 AI 按照规范执行。

# 用户认证功能 Spec

## 目标

实现安全的用户认证，使用 JWT token

## 需求

- 邮箱/密码登录
- 使用 bcrypt 哈希密码
- 生成 JWT token
- 保护路由的中间件
- 输入验证和清理

## 验收标准

- [ ] 用户可以用邮箱/密码注册
- [ ] 用户可以登录并获得 JWT token
- [ ] 受保护的路由验证 JWT token
- [ ] 密码正确哈希
- [ ] 输入验证防止注入攻击

3. 测试驱动开发（TDD）

让 AI 先写测试，再写实现代码。

$ gemini "用 TDD 方式实现用户注册功能：
1. 先写失败的测试
2. 写最少的代码让测试通过
3. 重构代码
4. 重复以上步骤"

4. 使用沙箱

实验性的修改在隔离环境中进行。

# 使用 Git worktree 创建独立工作目录
$ git worktree add ../myproject-experiment

# 在沙箱中让 AI 实验
$ cd ../myproject-experiment
$ gemini --sandbox "尝试重构认证系统"

5. 善用 Checkpoint

在重要节点创建检查点，方便回滚。

# 重大修改前创建检查点
$ git commit -m "checkpoint: before refactoring auth"

# 让 AI 执行任务
$ gemini "重构认证系统"

# 如果不满意，一键回滚
$ git reset --hard HEAD^

6.3. 多 Agent 协同

让多个 AI Agent 分工合作，每个 Agent 负责特定任务。

典型架构：

• 规划 Agent：拆解需求，生成任务列表

• 编码 Agent：实现功能，修复 Bug

• 测试 Agent：编写和运行测试

• 审查 Agent：代码质量检查

• 文档 Agent：生成和更新文档

工作流示例：

任务：实现一个电商购物车功能

Agent A（规划）：

1. 设计数据库 schema
2. 定义 API 端点
3. 规划前端组件

Agent B（编码）：

- 实现后端 API
- 创建前端组件

Agent C（测试）：

- 编写单元测试
- 编写集成测试

Agent D（审查）：

- 检查代码质量
- 验证安全性

Agent E（文档）：

- 更新 API 文档
- 编写使用说明

关键技巧：

• 工作空间隔离：每个 Agent 在独立的 Git 分支工作

• 清晰的任务边界：每个 Agent 只负责一件事

• 明确的依赖关系：定义 Agent 之间的协作顺序

7. 总结

AI 编程不是简单的“让 AI 写代码”，而是一套完整的工程方法论。

从工具选择到上下文工程，从 Prompt 技巧到多 Agent 协同，每一个环节都有讲究。

记住这几个核心原则：

1. 规划优先：先让 AI 给方案，再写代码

2. 上下文为王：提供完整、结构化的信息

3. 小步快跑：每次修改后立即测试

4. 善用约束：给 AI 明确的边界和要求

5. 多步验证：让 AI 自己检查输出质量

最后，AI 只是工具，真正的核心还是你的工程思维。

但如果你真的想把 AI 编程用到极致，这篇文章里的每一个技巧都值得你实践。

我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。

欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。