夜雨聆风你好，我是冴羽。
在《超越 Vibe Coding —— AI 辅助编程指南》，我们介绍了 AI 编程的 4 大坑和提示词 5 大原则。
在《超越 Vibe Coding —— AI 辅助编程进阶指南》中，我们介绍了 AI 编程工具的 3 种模式、完整开发历程、高级 Prompt 技巧和上下文工程。1. 规划阶段（6 条）
1.1. 永远先要计划，后写代码
❌ 错误："帮我做一个 Todo 应用"
✅ 正确："给我 3 个 Todo 应用的架构方案，从最简单到最完整。
先别写代码，只列出技术选型、数据结构、核心功能。
让我选一个方向后再开始实现。"
为什么： AI 十有八九会给你一个过度设计的方案，先看计划能避免返工。
1.2. 写一个 mini-PRD 或 SPEC.md
在项目根目录创建 SPEC.md，包含：
# 项目名称
## 目标
用一句话说清楚要解决什么问题
## 核心功能
- 功能 1：具体描述
- 功能 2：具体描述
- 功能 3：具体描述
## 技术约束
- 使用 React 18 + TypeScript
- 不使用任何 UI 框架
- 必须支持移动端
## 验收标准
- [ ] 用户可以完成 XXX
- [ ] 页面加载时间 < 2 秒
- [ ] 通过所有单元测试
为什么： 有了 SPEC，AI 就有了明确的执行标准，不会跑偏。
1.3. 使用 Plan Mode
主流工具的规划模式：
Cursor：
Cmd+K→ 勾选 “Plan first”Cline：默认先生成计划，需要你确认后才执行
Bolt：点击 “Enhance Prompt” 把粗糙想法变成结构化需求
为什么： 规划模式强制 AI 先思考再动手，减少 90% 的返工。
1.4. 把大任务拆成小任务
❌ 错误："实现用户认证系统"
✅ 正确：
"第一步：设计用户表的数据库 schema，包括邮箱、密码哈希、创建时间"
确认后 →
"第二步：实现用户注册接口，包括邮箱验证和密码强度检查"
确认后 →
"第三步：实现登录接口，生成 JWT token"
为什么： 小任务更容易验证，出错了也容易定位。
1.5. 先用 Mock 数据，别急着搞数据库
"先用 Mock 数据实现完整的前端功能，数据结构如下：
[粘贴 JSON 示例]
等前端功能确认没问题后，我们再连接真实数据库。"
为什么： Mock 数据让你快速验证业务逻辑，避免在数据库配置上浪费时间。
1.6. 设置全局开发规则
在项目根目录创建 .cursorrules 或 .clinerules：
# 开发规则
## 代码风格
- 使用 ESLint + Prettier
- 组件名用 PascalCase
- 函数名用 camelCase
- 文件名用 kebab-case
## 开发流程
1. 先定义 TypeScript 类型
2. 再实现功能代码
3. 最后写测试用例
## 禁止事项
- 不要使用 any 类型
- 不要直接修改 props
- 不要在循环中使用 useEffect
为什么： 全局规则让 AI 生成的代码风格统一，减少后期重构。
2. 提示词工程（8 条）
2.1. 提供完整的错误信息
❌ 错误："我的代码报错了"
✅ 正确："这段代码在运行时报错：
错误信息：
TypeError: Cannot read property 'name' of undefined
at UserProfile.jsx:45:12
at renderWithHooks (react-dom.js:...)
代码：
[粘贴完整的相关代码]
环境：
- React 18.2.0
- Node.js 18.16.0
- 浏览器：Chrome 120
预期行为：应该显示用户名
实际行为：页面白屏并报错"
为什么： 完整的上下文让 AI 一次性定位问题，不用来回问。
2.2. 用对比结构描述需求
❌ 错误："优化这个函数"
✅ 正确："优化这个函数：
当前性能：
- 处理 1000 条数据耗时 2.3 秒
- 内存占用 150MB
目标性能：
- 处理 1000 条数据 < 500ms
- 内存占用 < 50MB
约束条件：
- 不能改变函数签名
- 必须保持结果完全一致"
为什么： 明确的目标和约束让 AI 知道优化的方向。
2.3. 提供输入输出示例
"实现一个格式化金额的函数：
formatMoney(1234.5) → "¥1,234.50"
formatMoney(1000000) → "¥1,000,000.00"
formatMoney(0.99) → "¥0.99"
formatMoney(-500) → "-¥500.00"
要求：
- 支持负数
- 千位分隔符
- 保留两位小数"
为什么： 具体示例比文字描述精确 100 倍。
2.4. 使用角色人设
"作为一个有 10 年经验的 React 性能优化专家，
review 这段代码，指出所有可能的性能问题，
并给出具体的优化方案。
[粘贴代码]"
常用人设：
“作为资深前端架构师”
“作为安全审计专家”
“作为 TypeScript 类型专家”
“作为代码审查者”
为什么： 人设会影响 AI 的回答深度和角度。
2.5. 链式思考提示
"优化这个数据库查询，按以下步骤：
1. 先用 EXPLAIN 分析当前查询的执行计划
2. 识别性能瓶颈（全表扫描、临时表、文件排序）
3. 设计合适的索引策略
4. 重写查询语句
5. 对比优化前后的执行时间
当前查询：
[粘贴 SQL]"
为什么： 逐步推理比直接要答案准确率高 3 倍。
2.6. 约束式提示
"实现一个轮播图组件，约束条件：
技术栈：
- 只用原生 JavaScript，不用任何库
- 不用 jQuery
性能要求：
- 支持 100+ 张图片流畅切换
- 动画帧率 ≥ 60fps
兼容性：
- 支持 Chrome/Firefox/Safari 最新版
- 移动端支持触摸滑动"
为什么： 明确的约束防止 AI 引入不必要的依赖。
2.7. 多步验证
"创建一个用户注册表单，完成后请：
1. 用有效数据测试（正常注册流程）
2. 用无效数据测试：
- 邮箱格式错误
- 密码太短
- 重复邮箱
3. 检查错误提示是否友好
4. 验证是否符合我们的组件规范（见 components/README.md）"
为什么： 让 AI 自己检查输出，大幅减少 Bug。
2.8. 提供参考代码
"参考现有的 LoginForm 组件（见 src/components/LoginForm.jsx），
实现一个 RegisterForm 组件。
要求：
- 保持相同的代码风格
- 使用相同的表单验证逻辑
- 复用相同的 UI 组件"
为什么： 参考代码让 AI 理解你的代码风格，生成的代码更统一。
3. 上下文管理（6 条）
3.1. 检查 AI 的知识截止日期
"你知道 Tailwind CSS 的哪个版本？
如果是 v3，我需要给你 v4 的文档。"
常见的知识过期：
Tailwind CSS v4（2025 年发布）
React 19（2024 年发布）
Next.js 15（2024 年发布）
为什么： 避免 AI 用过时的 API 写代码。
3.2. 主动提供最新文档
"我要用 Tailwind CSS v4，这是官方文档：
[粘贴关键部分的文档]
请基于 v4 的语法实现一个响应式导航栏。"
为什么： 最新文档确保 AI 用正确的 API。
3.3. 使用 @Codebase 引用
在 Cursor 中：
"@Codebase 我们的认证逻辑是怎么实现的？
我要实现一个类似的权限检查功能。"
为什么： 让 AI 理解你的代码库，生成的代码更符合项目规范。
3.4. 附加截图
适用场景：
实现 UI 设计稿
修复视觉 Bug
对齐设计规范
操作：
Cursor：直接拖拽图片到对话框
Claude：点击 📎 上传图片
Bolt：支持从 Figma 导入
为什么： 一张图胜过千言万语，能实现“一次性”生成正确的 UI。
3.5. 提供完整的技术栈信息
"项目技术栈：
前端：
- React 18.2.0
- TypeScript 5.0
- Tailwind CSS 3.3
- React Router 6.10
后端：
- Node.js 18.16
- Express 4.18
- PostgreSQL 14
- Redis 6.2
工具：
- Vite 4.3
- ESLint + Prettier
- Jest + React Testing Library"
为什么： 完整的技术栈让 AI 生成兼容的代码。
3.6. 使用结构化的错误报告
## 问题描述
用户点击"保存"按钮后，数据没有保存成功
## 错误信息
POST /api/users 500 Internal Server ErrorError: Cannot read property ‘id’ of undefined
## 环境信息
- 浏览器：Chrome 120
- 操作系统：macOS 14.0
- 后端版本：v1.2.3
## 复现步骤
1. 打开用户编辑页面
2. 修改用户名
3. 点击"保存"按钮
4. 看到错误提示
## 相关代码
[粘贴 API 路由代码]
## 已尝试的方案
- ✅ 检查数据库连接（正常）
- ✅ 检查 Redis 连接（正常）
- ❌ 重启服务器（问题依旧）
为什么： 结构化的信息让 AI 快速定位问题。
4. 测试和验证（5 条）
4.1. 每次修改后立即测试
铁律： 不要等 AI 写完一大堆代码再测试。
正确流程：
AI 修改一个文件 → 立即测试
测试通过 → 继续下一个修改
测试失败 → 立即让 AI 修复
为什么： 小步测试能快速定位问题，避免“改了 10 个文件不知道哪里错了”。
4.2. 打开浏览器控制台
快捷键：
Mac：
Cmd + Option + JWindows：
Ctrl + Shift + J
检查：
红色错误信息
黄色警告信息
Network 面板的请求状态
为什么： 控制台能看到 AI 看不到的运行时错误。
4.3. 让 AI 生成测试用例
"为这个用户注册函数生成完整的测试用例：
[粘贴函数代码]
测试场景包括：
- ✅ 有效输入（正常注册）
- ❌ 邮箱格式错误
- ❌ 密码太短（< 8 位）
- ❌ 重复邮箱
- ❌ 缺少必填字段
- ❌ SQL 注入尝试
- ❌ XSS 攻击尝试
使用 Jest + React Testing Library。"
为什么： AI 生成的测试用例覆盖率高，能发现你没想到的边界情况。
4.4. 使用 TDD（测试驱动开发）
"用 TDD 方式实现一个购物车功能：
1. 先写失败的测试：
- 添加商品到购物车
- 修改商品数量
- 删除商品
- 计算总价
2. 写最少的代码让测试通过
3. 重构代码
4. 重复以上步骤"
为什么： TDD 确保代码质量，减少后期 Bug。
4.5. 创建测试检查清单
在项目根目录创建 TEST_CHECKLIST.md：
# 测试检查清单
## 功能测试
- [ ] 所有按钮可点击
- [ ] 表单验证正常
- [ ] 数据正确保存
- [ ] 错误提示友好
## 性能测试
- [ ] 页面加载 < 2 秒
- [ ] 列表渲染流畅（60fps）
- [ ] 内存无泄漏
## 兼容性测试
- [ ] Chrome 最新版
- [ ] Safari 最新版
- [ ] 移动端 Safari
- [ ] 移动端 Chrome
## 安全测试
- [ ] 输入验证和清理
- [ ] SQL 注入防护
- [ ] XSS 防护
- [ ] CSRF 防护
为什么： 检查清单确保不遗漏关键测试。
5. 生产代码（5 条）
5.1. 把 AI 代码当作初级开发者的代码
Review 重点：
✅ 是否有安全漏洞？
✅ 是否有性能问题？
✅ 错误处理是否完善？
✅ 代码是否可维护？
为什么： AI 会写出“能跑”的代码，但不一定是“好”代码。
5.2. 安全检查清单
## 输入验证
- [ ] 所有用户输入都经过验证
- [ ] 使用白名单而非黑名单
- [ ] 长度限制和格式检查
## 认证授权
- [ ] 密码正确哈希（bcrypt/argon2）
- [ ] JWT token 有过期时间
- [ ] 敏感操作需要二次验证
## 数据安全
- [ ] SQL 注入防护（使用参数化查询）
- [ ] XSS 防护（输出转义）
- [ ] CSRF 防护（使用 token）
- [ ] 敏感数据加密存储
## API 安全
- [ ] 使用 HTTPS
- [ ] API key 不暴露在前端
- [ ] 限流防止暴力破解
为什么： AI 经常忽略安全细节，需要人工检查。
5.3. 性能优化检查
"分析这段代码的性能问题：
[粘贴代码]
重点检查：
- 是否有不必要的重渲染？
- 是否有内存泄漏？
- 是否有阻塞主线程的操作？
- 是否有可以缓存的计算？
给出具体的优化方案和预期的性能提升。"
为什么： AI 生成的代码往往“能用但不快”。
5.4. 代码可维护性检查
检查点：
✅ 函数是否过长？（> 50 行需要拆分）
✅ 是否有重复代码？（DRY 原则）
✅ 变量命名是否清晰？
✅ 是否有注释说明复杂逻辑？
✅ 是否符合项目的代码规范？
为什么： 可维护的代码才能长期演进。
5.5. 使用 Git Checkpoint
关键节点创建检查点：
# 重大修改前
git commit -m "checkpoint: before refactoring auth system"
# 让 AI 执行任务
# ...
# 如果不满意，一键回滚
git reset --hard HEAD^
为什么： 检查点让你敢于尝试大胆的重构。
6. 总结
AI 编程的核心是：把 AI 当作一个聪明但缺乏经验的初级开发者。
你需要：
明确的需求（SPEC.md）
清晰的指令（结构化 Prompt）
完整的上下文（文档、代码、错误信息）
严格的验证（测试、Review、安全检查）
记住这 30 条最佳实践，你的 AI 编程效率能提升 10 倍。
新的一年，不知道学什么？
那来看看我的知识星球：“冴羽·前端开发者的破局之路”，8 大专栏、10 年经验总结、100 篇深度长文、总计 70W 字的原创内容，带你从底层重构自己：
