⏱ 本页预计时间

阅读 11 分钟 · 练习 60 分钟

8.1 高级 AI 协作模式

学会这些技巧，让 AI 成为你真正的编程搭档。

🎯

学完这节你会：

管理多个项目的 AI 对话上下文
用 AI 做代码审查和重构
高效定位和修复 Bug
掌握常用场景的提示词模板
写出专业的 Git commit 和 PR 描述

多项目管理：切换上下文

当你同时维护多个项目时，如何让 AI 记住每个项目的背景？

问题场景

常见困境：

你在做项目 A（Next.js 博客），突然要修项目 B（Vue 后台）的 Bug，回头又要继续项目 A。

AI 经常搞混：

❌ 用 Vue 语法给 React 项目写代码
❌ 忘记项目的技术栈和文件结构
❌ 不记得之前讨论过的设计决策

解决方案 1：项目简介文件

为每个项目创建 PROJECT.md：


# 项目：个人博客
 
## 技术栈
- Next.js 15 + TypeScript
- Tailwind CSS
- MDX (博客内容)
- Vercel 部署
 
## 文件结构
- `src/app/` - 页面路由
- `src/content/` - MDX 博客文章
- `src/components/` - 复用组件
 
## 编码规范
- 组件用函数式 + TypeScript
- 样式用 Tailwind，不写 CSS 文件
- 图片放 `public/images/`，用 WebP 格式
 
## 当前任务
正在实现：文章搜索功能
 
## 重要约定
- 所有 API 调用走 `/api` 路由
- 环境变量放 `.env.local`

使用方法：


请阅读 @PROJECT.md，然后帮我添加文章搜索功能

AI 会先读取项目背景，再动手写代码，不容易出错。

解决方案 2：Cursor/Trae 的 .cursorrules

在项目根目录创建 .cursorrules 文件:

什么是 .cursorrules？ 这是 Cursor 编辑器的项目配置文件,类似于编程规范文档。Cursor 会自动读取这个文件,确保 AI 生成的代码符合你的项目规范。你可以在里面定义技术栈、命名规则、禁止事项等,AI 就会遵循这些规则工作。


# 项目规则

技术栈：Next.js 15 + TypeScript + Tailwind CSS

编码规范：
- 使用函数式组件
- 所有组件必须有 TypeScript 类型
- 使用 Tailwind 类名，不写 CSS 文件
- API 调用统一放在 /api 文件夹

文件命名：
- 组件：PascalCase (Button.tsx)
- 工具函数：camelCase (formatDate.ts)
- 页面：kebab-case (blog-post.tsx)

禁止：
- 不要用 class 组件
- 不要内联样式
- 不要省略类型定义

Cursor/Trae 会自动读取这个文件，确保生成的代码符合项目规范。

解决方案 3：切换项目时的开场白

每次切换项目，先发一条消息设置上下文：


【切换项目】

现在我要开发项目 B：电商后台管理系统

技术栈：Vue 3 + Element Plus + Pinia
当前任务：修复订单列表分页 Bug
相关文件：src/views/OrderList.vue

请暂时忘记之前的项目 A，专注帮我处理项目 B。

AI 辅助代码审查与重构

场景 1：审查自己的代码

写完代码后，让 AI 帮你检查：

提示词模板：


请审查以下代码，重点检查：

1. 安全问题（SQL 注入、XSS、密钥泄露）
2. 性能问题（重复查询、大循环、内存泄漏）
3. 代码规范（命名、缩进、注释）
4. 边界情况（空值、错误处理）
5. 可维护性（函数太长、逻辑太复杂）

[粘贴代码]

请给出具体的改进建议和修改后的代码。

实战示例：


// 原代码
export default function UserList() {
  const [users, setUsers] = useState([])
 
  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers(data))
  }, [])
 
  return (
    <div>
      {users.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  )
}

AI 审查后：


// AI 改进后的代码
export default function UserList() {
  const [users, setUsers] = useState<User[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
 
  useEffect(() => {
    const fetchUsers = async () => {
      try {
        setLoading(true)
        const res = await fetch('/api/users')
 
        if (!res.ok) {
          throw new Error(`HTTP ${res.status}: ${res.statusText}`)
        }
 
        const data = await res.json()
        setUsers(data)
      } catch (err) {
        setError(err instanceof Error ? err.message : '获取用户失败')
      } finally {
        setLoading(false)
      }
    }
 
    fetchUsers()
  }, [])
 
  if (loading) return <div>加载中...</div>
  if (error) return <div className="text-red-500">错误：{error}</div>
 
  return (
    <div>
      {users.length === 0 ? (
        <div>暂无用户</div>
      ) : (
        users.map(user => (
          <div key={user.id}>{user.name}</div>
        ))
      )}
    </div>
  )
}
 
// 额外建议：考虑使用 SWR 或 React Query 简化数据获取

改进点：

✅ 添加 TypeScript 类型
✅ 添加 loading 和 error 状态
✅ 错误处理
✅ HTTP 状态码检查
✅ 空列表处理
✅ 建议更好的工具

场景 2：重构遗留代码

提示词模板：


这是一段遗留代码，请帮我重构：

重构目标：
- 提升可读性（拆分函数、清晰命名）
- 提升性能（减少重复计算）
- 添加类型安全（TypeScript）
- 添加错误处理

[粘贴代码]

请分步骤重构，每一步说明原因。

AI 调试技巧：快速定位问题

技巧 1：完整报错信息 + 相关代码

黄金法则：给 AI 越完整的信息，越快解决问题。

必须提供：

✅ 完整的报错信息（从第一行到最后一行）
✅ 报错相关的代码文件
✅ 你做了什么操作导致报错
✅ 期望的结果是什么

提示词模板：


我遇到一个错误，请帮我定位和修复：

【操作步骤】
1. 我在做什么：提交表单
2. 期望结果：保存到数据库并显示成功提示
3. 实际结果：报错了

【完整报错】
[粘贴完整的 error stack trace]

【相关代码】
文件：app/api/contact/route.ts
[粘贴代码]

文件：app/contact/page.tsx
[粘贴调用代码]

【环境信息】
- Node 版本：20.10.0
- Next.js 版本：15.0.0
- 浏览器：Chrome 120

请分析问题原因，并提供修复方案。

技巧 2：逐步缩小范围

如果问题不明显，用二分法定位：

第 1 步：验证 API 是否正常


# 用 curl 直接测试 API
curl -X POST http://localhost:3000/api/contact \
  -H "Content-Type: application/json" \
  -d '{"name":"Test","email":"[email protected]","message":"Hello"}'

如果这里正常，说明问题在前端。

第 2 步：检查网络请求

打开浏览器 DevTools → Network 标签，查看：

请求是否发出
请求参数是否正确
响应状态码是多少

截图发给 AI：


Network 面板显示 500 错误，响应是：
{"error": "Database connection failed"}

请帮我检查数据库连接代码。

第 3 步：添加日志

在关键位置添加 console.log：


export async function POST(request: NextRequest) {
  console.log('1. 进入 POST 函数')
 
  const body = await request.json()
  console.log('2. 收到的数据：', body)
 
  const result = await db.insert(body)
  console.log('3. 插入结果：', result)
 
  return NextResponse.json({ success: true })
}

把日志输出发给 AI，让它分析哪一步出问题了。

技巧 3：对比工作代码和问题代码

提示词：


我有两段代码，第一段能正常工作，第二段有问题。
请对比它们的差异，找出问题所在。

【正常工作的代码】
[粘贴代码 A]

【有问题的代码】
[粘贴代码 B]

【问题描述】
代码 B 报错：[具体错误]

提示词模板库：常见场景速查

1. 新功能开发


我要开发一个新功能：[功能描述]

背景：
- 项目技术栈：[Next.js/Vue/...]
- 已有相关功能：[列出相似功能]

需求：
1. [具体需求点 1]
2. [具体需求点 2]
3. [具体需求点 3]

请提供：
1. 数据库表设计（如果需要）
2. API 接口设计
3. 前端组件代码
4. 完整的实现步骤

每一步完成后，我会确认再继续。

2. Bug 修复


Bug 描述：[具体现象]

复现步骤：
1. [步骤 1]
2. [步骤 2]
3. [步骤 3]

期望结果：[应该怎样]
实际结果：[实际怎样]

相关代码：
[粘贴代码]

报错信息（如果有）：
[粘贴错误]

请帮我定位问题并提供修复方案。

3. 性能优化


我的 [页面/功能] 很慢，请帮我优化。

性能数据：
- 加载时间：[X 秒]
- 首次内容绘制(FCP)：[X ms]
- 最大内容绘制(LCP)：[X ms]

代码：
[粘贴代码]

请分析性能瓶颈，并提供优化方案。

4. 代码解释


请解释这段代码的工作原理：

[粘贴代码]

请用简单的语言说明：
1. 这段代码做了什么
2. 每一行的作用
3. 为什么要这样写
4. 有没有更好的写法

5. 技术选型


我要做 [项目/功能]，在 [技术A] 和 [技术B] 之间选择。

项目背景：
- 规模：[小/中/大]
- 用户量：[预期]
- 团队：[人数/技术栈]

请对比两种技术的：
1. 学习曲线
2. 性能表现
3. 社区生态
4. 长期维护成本
5. 适用场景

并给出推荐和理由。

Git + AI：写专业的提交信息

场景 1：生成 Commit Message

什么是 Conventional Commits？ 这是一种规范化的 commit message 格式,让提交历史更清晰易读。格式为: 类型: 描述。常见类型:

feat: 新功能

fix: 修复 Bug

docs: 文档修改

style: 代码格式(不影响功能)

refactor: 重构(既不是新功能也不是 Bug 修复)

test: 测试相关

chore: 构建/工具配置

提示词：


我做了以下代码修改，请生成一个规范的 commit message：

修改内容：
[用 git diff 或简要描述]

要求：
- 遵循 Conventional Commits 规范
- 第一行不超过 50 字符
- 如果需要，添加详细说明
- 使用中文

格式示例：
feat: 添加用户登录功能

- 实现邮箱密码登录
- 添加 JWT 认证
- 集成 Google OAuth

AI 生成示例：


feat: 添加文章搜索功能

- 实现基于标题和标签的搜索
- 添加搜索结果高亮
- 优化搜索性能（添加索引）
- 支持搜索历史记录

场景 2：生成 PR 描述

提示词：


我要提交一个 Pull Request，请根据以下信息生成 PR 描述：

改动内容：
[列出主要改动]

相关 Issue：
#123

测试：
- [测试方法]

请生成包含以下部分的 PR 描述：
1. 摘要（做了什么）
2. 改动详情（技术实现）
3. 测试计划
4. 截图（如果有 UI 改动）
5. Checklist

AI 生成示例：


## 摘要
添加文章搜索功能，支持按标题、标签、内容搜索。
 
## 改动详情
- 新增 `app/api/search/route.ts` API 接口
- 新增 `SearchBar` 组件
- 添加搜索结果高亮功能
- 优化数据库查询（添加全文索引）
 
## 测试计划
- [x] 单元测试覆盖 API 接口
- [x] 手动测试搜索功能
- [x] 验证搜索性能（1000+ 文章）
 
## Checklist
- [x] 代码遵循项目规范
- [x] 添加了必要的注释
- [x] 更新了文档
- [x] 通过了所有测试

实用技巧汇总

高效协作的 10 个习惯：

✅ 项目切换时明确告知 AI：避免上下文混淆
✅ 创建项目简介文件：让 AI 快速了解项目背景
✅ 报错必须完整粘贴：不要只复制一部分
✅ 代码审查成为习惯：写完就让 AI 检查一遍
✅ 善用模板库：常见场景用固定模板提问
✅ 分步骤开发：复杂功能拆分成多轮对话
✅ 每次只改一个文件：避免改动太多难以追踪
✅ 重要决策让 AI 解释：理解”为什么”才能学到东西
✅ 遇到问题先搜索：可能别人遇到过同样的问题
✅ 保存有用的对话：建立自己的知识库

常见问题

1. AI 生成的代码总是有 Bug？

可能原因：

提示词不够清晰
没有提供项目上下文
没有告诉 AI 技术栈版本

解决方法：


【明确版本】
我用的是 Next.js 15（App Router），不是 Pages Router
请用新的 API 写代码

【提供示例】
我之前类似的功能是这样写的：
[粘贴已有代码]

请参考这个风格，写新功能的代码

2. AI 一次改动太多文件，改乱了？

解决方法：


请一次只修改一个文件。

第一步：只修改 Button.tsx
第二步：只修改 page.tsx 调用 Button
第三步：只修改样式文件

每一步我会验证，确认无误再继续。

3. AI 的建议太复杂，我看不懂？

解决方法：


你刚才的方案太复杂了，我是新手，看不太懂。

能不能：
1. 用更简单的方式实现（可以牺牲一些性能）
2. 每一行代码都加注释说明
3. 给我一个最小可运行的示例

我先把简单版本跑通，再考虑优化。

下一节：8.2 从功能到系统：架构思维入门 - 学会把小功能组合成完整系统

学习进度0%

0/60 篇已完成