这是 Cursor 提示词系列教程的第二篇，也适用于其他AI产品，主要介绍不同场景下的提示词写法、实战案例和常见错误。😍

不同场景下的提示词写法

场景 1：写新代码

什么时候用： 要创建新功能、新组件或新文件

模板：

创建一个 [类型] [名称]，用于 [目的]。
技术栈：[技术栈]
要求：
- [要求1]
- [要求2]
包含：[功能点]

实际例子：

创建一个 React 函数组件 UserProfile，用于显示用户信息卡片。
技术栈：TypeScript + React 18 + Tailwind CSS
要求：
- 使用 TypeScript 接口定义 props
- 响应式设计，支持移动端和桌面端
- 包含头像、姓名、邮箱、注册时间
- 添加加载状态和错误处理

深入技巧：

1. 明确组件职责：告诉 AI 这个组件是展示型还是交互型
2. 指定数据来源：说明数据是从 props、API 还是状态管理获取
3. 考虑可复用性：如果需要复用，明确说明使用场景

完整示例：

创建一个可复用的 React 函数组件 UserCard，用于在多个页面展示用户信息。

技术栈：
- React 18.2 + TypeScript 5.0
- Tailwind CSS 3.3
- 项目使用 features-based 架构

功能需求：
- 显示用户头像（支持默认头像）
- 显示用户姓名和邮箱
- 显示用户角色标签（admin/user）
- 支持点击跳转到用户详情页
- 支持编辑模式（可选）

Props 接口：
- userId: string - 用户 ID
- showActions?: boolean - 是否显示操作按钮
- onEdit?: () => void - 编辑回调
- variant?: 'default' | 'compact' - 显示变体

要求：
- 使用 TypeScript 严格模式
- 响应式设计（移动端和桌面端）
- 添加加载状态和错误处理
- 遵循项目的代码风格（参考 src/components/Button.tsx）
- 添加 JSDoc 注释
- 可访问性支持（a11y）

参考文件：
- src/components/Button.tsx（代码风格参考）
- src/features/user/types.ts（类型定义参考）

场景 2：重构代码

什么时候用： 想改进现有代码的结构、性能或可读性

模板：

重构以下代码：
目标：[重构目标]
方法：[重构方法]
要求：
- [要求1]
- [要求2]

实际例子：

重构以下组件，将类组件转换为函数组件：
目标：使用 React Hooks，提高代码可读性和可维护性
方法：
- 使用 useState 替代 this.state
- 使用 useEffect 替代生命周期方法
- 使用 useCallback 优化事件处理函数
要求：
- 保持原有功能不变
- 添加 TypeScript 类型定义
- 遵循 React Hooks 最佳实践

深入技巧：

1. 明确重构原因：说明为什么要重构（性能、可维护性、新需求）
2. 提供对比基准：说明重构前后的对比标准
3. 分阶段重构：对于大型重构，分阶段进行

完整示例：

重构以下类组件，将其转换为函数组件并优化性能：

## 重构目标
1. 将类组件转换为函数组件（使用 React Hooks）
2. 优化渲染性能（减少不必要的重新渲染）
3. 提高代码可读性和可维护性

## 当前代码
[代码片段]

## 重构方法
1. 使用 useState 替代 this.state
2. 使用 useEffect 替代 componentDidMount 和 componentDidUpdate
3. 使用 useCallback 和 useMemo 优化性能
4. 提取自定义 Hooks（如果逻辑复杂）

## 性能优化目标
- 组件重新渲染次数：从每次父组件更新都渲染 → 只在 props 变化时渲染
- 使用 React.memo 包装组件
- 使用 useCallback 包装事件处理函数
- 使用 useMemo 缓存计算结果

## 要求
- 保持原有功能完全一致
- 通过所有现有测试
- 添加 TypeScript 类型定义
- 遵循 React Hooks 最佳实践
- 代码可读性提升（添加注释，提取逻辑）

## 验证标准
- 功能测试：所有原有功能正常工作
- 性能测试：渲染次数减少 50% 以上
- 代码质量：通过 ESLint 检查，无 warning

场景 3：修 Bug

什么时候用： 代码出错了，需要修复

模板：

修复以下 bug：
问题描述：[问题]
错误信息：[错误信息]
复现步骤：[步骤]
期望行为：[期望]

实际例子：

修复以下 bug：
问题描述：在用户点击删除按钮后，列表项没有立即更新
错误信息：控制台显示 'Warning: Cannot update during render'
复现步骤：
1. 打开用户列表页面
2. 点击任意用户的删除按钮
3. 观察列表更新情况
期望行为：删除后列表应立即更新，无需刷新页面

深入技巧：

1. 提供完整错误信息：包括错误堆栈、浏览器控制台信息
2. 描述环境信息：浏览器版本、Node 版本、框架版本
3. 提供相关代码：只提供相关的代码片段，不要整个文件

完整示例：

修复以下 bug：

## 问题描述
在用户管理页面，当用户点击删除按钮后，列表项没有立即更新，需要刷新页面才能看到变化。

## 错误信息
控制台显示：

Warning: Cannot update during render
at UserList (UserList.tsx:45)
at renderWithHooks (react-dom.development.js:14985)

## 复现步骤
1. 打开 http://localhost:3000/users
2. 点击任意用户的删除按钮
3. 观察列表更新情况
4. 检查浏览器控制台

## 期望行为
- 点击删除按钮后，列表项应立即从列表中移除
- 显示删除成功的提示消息
- 无需刷新页面

## 相关代码
当前文件：src/features/user/components/UserList.tsx
相关文件：
- src/features/user/hooks/useUser.ts（用户数据 Hook）
- src/api/user.ts（用户 API）

[相关代码片段]

## 环境信息
- React 18.2
- TypeScript 5.0
- 浏览器：Chrome 120
- Node.js 18.17

## 可能的原因
根据错误信息，可能是：
1. 在渲染过程中调用了 setState
2. useEffect 的依赖项设置不当
3. 事件处理函数中直接更新状态

请分析问题原因，提供修复方案，并说明如何避免类似问题。

场景 4：理解代码

什么时候用： 看不懂别人的代码，或者想了解代码逻辑

模板：

请解释以下代码：
- 功能是什么？
- 工作原理是什么？
- 关键点有哪些？
- 可能的改进点？

实际例子：

请详细解释以下代码的工作原理：
- 这个函数的主要功能是什么？
- 每一步是如何工作的？
- 为什么要使用这种实现方式？
- 有没有潜在的性能问题或边界情况？
[代码片段]

深入技巧：

1. 指定解释深度：说明需要多详细的解释（概览、详细、逐行）
2. 关注特定方面：如果只关心某个方面（性能、安全性），明确说明
3. 要求改进建议：如果需要，要求 AI 提供改进建议

完整示例：

请详细解释以下代码的工作原理，重点关注性能和可维护性：

## 代码
[代码片段]

## 需要解释的内容
1. **功能说明**：这个函数/组件的主要功能是什么？
2. **工作原理**：每一步是如何工作的？数据流是怎样的？
3. **设计决策**：为什么要使用这种实现方式？有什么优势？
4. **性能分析**：
   - 时间复杂度是多少？
   - 有没有性能瓶颈？
   - 有没有内存泄漏的风险？
5. **边界情况**：如何处理边界情况和异常？
6. **可维护性**：
   - 代码是否清晰易懂？
   - 有没有可以改进的地方？
7. **改进建议**：如果有，请提供具体的改进建议

## 上下文信息
- 项目使用 React 18 + TypeScript
- 这是用户列表组件的一部分
- 需要处理大量数据（可能上千条）

场景 5：写测试

什么时候用： 需要为代码写单元测试或集成测试

模板：

为以下代码编写 [测试类型]：
测试框架：[框架]
覆盖范围：[范围]
测试用例：[用例]

实际例子：

为以下函数编写单元测试：
测试框架：Jest + React Testing Library
覆盖范围：
- 正常输入场景
- 边界情况
- 错误处理
测试用例：
- 输入有效邮箱应返回 true
- 输入无效邮箱应返回 false
- 输入空字符串应返回 false
- 输入 null 或 undefined 应抛出错误
[函数代码]

深入技巧：

1. 明确测试目标：单元测试、集成测试、E2E 测试
2. 指定覆盖率要求：如果需要，明确覆盖率目标
3. 提供测试数据：如果有特定的测试数据，一并提供

完整示例：

为以下 React 组件编写完整的单元测试：

## 组件代码
[组件代码]

## 测试要求
- 测试框架：Jest + React Testing Library
- 测试类型：单元测试
- 覆盖率目标：> 80%

## 测试覆盖范围
1. **渲染测试**
   - 组件能正常渲染
   - 所有必需的 props 都正确显示
   - 条件渲染逻辑正确

2. **交互测试**
   - 用户点击按钮能触发正确的行为
   - 表单输入能正确更新状态
   - 事件处理函数被正确调用

3. **状态测试**
   - 初始状态正确
   - 状态更新正确
   - 状态重置正确

4. **边界情况**
   - 空数据/undefined/null 的处理
   - 错误状态的处理
   - 加载状态的处理

5. **集成测试**
   - 与子组件的交互
   - 与 Hooks 的集成
   - 与 API 的集成（使用 mock）

## 测试数据
[如果有特定的测试数据，提供在这里]

## 要求
- 使用描述性的测试名称
- 每个测试用例独立，不依赖其他测试
- 使用 beforeEach/afterEach 清理状态
- Mock 外部依赖（API、localStorage 等）
- 测试错误处理和边界情况

---

实战案例分享

案例 1：做一个完整的 Todo 应用

这是我之前让 Cursor 帮我做的一个 Todo 应用，提示词是这样的：

创建一个完整的待办事项（Todo）应用，包含以下功能：

技术栈：
- React 18 + TypeScript
- Tailwind CSS（样式）
- LocalStorage（数据持久化）

功能需求：
1. 添加待办事项（输入框 + 添加按钮）
2. 显示待办事项列表（显示标题、完成状态、创建时间）
3. 标记完成/未完成（点击切换）
4. 删除待办事项（删除按钮）
5. 筛选功能（全部/未完成/已完成）
6. 统计信息（总数、已完成数、未完成数）

要求：
- 使用 TypeScript 严格模式
- 组件化设计，代码结构清晰
- 响应式布局，移动端友好
- 添加适当的动画效果（如删除动画）
- 数据持久化到 LocalStorage
- 包含错误处理和边界情况处理

请提供完整的代码实现，包括所有组件和工具函数。

结果分析：

AI 给我生成了一个完整的应用，包括：

• ✅ 所有组件（TodoList, TodoItem, TodoForm, TodoFilter）
• ✅ 状态管理（使用 useState 和自定义 Hook）
• ✅ 数据持久化（LocalStorage 封装）
• ✅ 样式（Tailwind CSS）
• ✅ 错误处理（边界情况处理）

经验总结：

1. 明确功能边界：明确列出所有功能点，避免 AI 遗漏
2. 指定技术栈：明确使用的技术和版本，确保一致性
3. 要求结构化：要求组件化设计，便于维护
4. 考虑用户体验：要求响应式设计和动画效果

案例 2：优化性能问题

有一次我发现组件渲染太慢，就用了这个提示词：

分析并优化以下 React 组件的性能问题：

当前问题：
- 组件在每次父组件更新时都会重新渲染
- 列表项渲染时没有使用虚拟滚动，导致大量 DOM 节点
- 事件处理函数在每次渲染时都会重新创建

优化目标：
1. 减少不必要的重新渲染
2. 优化长列表渲染性能
3. 优化事件处理函数

请提供：
1. 性能分析报告
2. 优化后的代码
3. 优化说明和性能提升数据
[组件代码]

结果分析：

AI 不仅给我优化了代码，还：

• ✅ 提供了详细的性能分析报告
• ✅ 解释了每个优化的原理
• ✅ 提供了性能提升数据（渲染次数减少 60%）
• ✅ 给出了进一步优化的建议

经验总结：

1. 明确问题：具体列出性能问题，不要只说"慢"
2. 设定目标：明确优化目标，便于验证
3. 要求分析：要求 AI 提供分析报告，理解优化原理
4. 量化结果：要求提供性能数据，验证优化效果

案例 3：代码审查和重构

有时候接手别人的代码，不知道从哪开始，就让 AI 帮忙看看：

请对以下代码进行审查和重构：

审查重点：
1. 代码质量和可读性
2. 性能问题
3. 安全性问题
4. 最佳实践遵循情况
5. 错误处理完整性

重构要求：
- 提高代码可读性和可维护性
- 修复潜在 bug
- 优化性能
- 添加适当的注释和文档
- 遵循项目代码规范

请提供：
1. 代码审查报告（列出所有问题）
2. 重构后的代码
3. 改动说明
[代码片段]

结果分析：

AI 提供了：

• ✅ 详细的代码审查报告（按严重程度分类）
• ✅ 重构后的代码（保持功能一致）
• ✅ 改动说明（每个改动的理由）
• ✅ 改进建议（进一步优化的方向）

经验总结：

1. 明确审查维度：列出要审查的方面，确保全面
2. 要求分类：要求按严重程度分类问题，便于优先处理
3. 保持功能一致：明确要求保持原有功能，避免引入新 bug
4. 提供改动说明：要求说明每个改动的原因，便于理解

---

新手常犯的错误

错误 1：提示词太简单

❌ 这样写：

写个登录功能

问题分析：

• AI 不知道用什么技术栈
• AI 不知道要实现哪些功能
• AI 不知道代码风格要求
• 结果：生成的代码可能不符合需求，需要大量修改

✅ 应该这样：

实现用户登录功能，包括：
- 登录表单（邮箱/密码）
- 表单验证（邮箱格式、密码长度）
- API 集成（POST /api/login）
- 成功处理（保存 token，跳转首页）
- 错误处理（显示错误消息）
- 加载状态（提交时禁用按钮）

技术栈：React 18 + TypeScript + Tailwind CSS
要求：遵循项目代码规范，参考 src/components/Button.tsx 的代码风格

改进要点：

1. 列出所有功能点
2. 明确技术栈
3. 提供代码风格参考
4. 考虑用户体验（加载状态、错误处理）

错误 2：不说技术栈

❌ 这样写：

创建一个按钮组件

问题分析：

• AI 可能用 JavaScript 而不是 TypeScript
• AI 可能用 class 组件而不是函数组件
• AI 可能用内联样式而不是 CSS 框架
• 结果：生成的代码风格不一致

✅ 应该这样：

创建一个可复用的按钮组件：
技术栈：React + TypeScript + Tailwind CSS
支持属性：variant (primary/secondary), size (sm/md/lg), disabled, loading
要求：
- 使用 TypeScript 接口定义 props
- 响应式设计
- 可访问性支持（a11y）
- 参考 src/components/Button.tsx 的代码风格

改进要点：

1. 明确技术栈和版本
2. 列出所有支持的属性
3. 提供代码风格参考
4. 考虑可访问性

错误 3：不给上下文

❌ 这样写：

修复这个错误

问题分析：

• AI 不知道是什么错误
• AI 不知道错误在哪里
• AI 不知道如何复现
• 结果：AI 无法理解问题，可能给出错误的解决方案

✅ 应该这样：

修复以下错误：
错误信息：'Cannot read property 'token' of undefined'
出现位置：src/features/auth/components/LoginForm.tsx:45
相关代码：
[代码片段]
复现步骤：
1. 打开登录页面
2. 输入错误的密码
3. 点击登录按钮
4. 观察控制台错误

期望行为：应该显示错误消息，而不是崩溃

改进要点：

1. 提供完整的错误信息
2. 指明错误位置
3. 提供相关代码
4. 描述复现步骤
5. 说明期望行为

错误 4：要求不明确

❌ 这样写：

优化这个函数，让它更快

问题分析：

• "更快"太模糊，没有量化指标
• 不知道当前性能如何
• 不知道目标性能是多少
• 结果：AI 可能过度优化或优化不足

✅ 应该这样：

优化以下函数的性能：
- 当前时间复杂度：O(n²)
- 目标时间复杂度：O(n log n)
- 使用更高效的算法（如排序后使用双指针）
- 添加适当的缓存机制
- 保持原有功能不变

验证标准：
- 通过所有现有测试
- 性能提升至少 50%（使用性能测试工具验证）

改进要点：

1. 量化性能指标（时间复杂度、响应时间）
2. 明确优化方法
3. 设定验证标准
4. 保持功能一致性

错误 5：一次性要太多

❌ 这样写：

创建一个完整的电商网站，包含用户系统、商品管理、购物车、支付、订单管理、评价系统、推荐系统...

问题分析：

• 需求太庞大，AI 可能遗漏功能
• 生成的代码可能结构混乱
• 难以验证和测试
• 结果：生成的代码质量差，需要大量修改

✅ 应该这样：

分阶段实现电商网站功能：

第一阶段：用户认证系统
- 用户注册（邮箱/密码）
- 用户登录（邮箱/密码）
- 密码重置（邮箱验证）
- 用户资料管理（查看/编辑）

技术栈：React 18 + TypeScript + Tailwind CSS
要求：
- 使用 JWT 进行身份验证
- 密码加密存储
- 表单验证
- 错误处理

[完成第一阶段后，再继续下一阶段]

改进要点：

1. 分阶段实现，每阶段功能明确
2. 每阶段都有明确的技术栈和要求
3. 完成一个阶段再继续下一个
4. 保持代码结构清晰

记住：一次只做一件事，把事情做好。

---

总结

1. 5 种常见场景：写新代码、重构代码、修 Bug、理解代码、写测试
2. 3 个实战案例：Todo 应用、性能优化、代码审查
3. 5 种常见错误：提示词太简单、不说技术栈、不给上下文、要求不明确、一次性要太多

掌握了这些实战技巧，你就能应对大部分开发场景了。

回顾基础：
【AI】👉提示词入门基础篇指南 https://blog.csdn.net/qq_38161537/article/details/154993237?spm=1011.2415.3001.5331