高效提示词技巧
提示词是你和Claude Code沟通的桥梁。写得好,事半功倍;写得模糊,反复修改浪费时间。下面聊聊怎么写出高质量的提示词,让Claude Code发挥最大潜力。
提示词为什么重要
对比一下
模糊的提示词:
你: 帮我写个函数
Claude: 好的,你要什么功能的函数?
你: 就是处理数据的
Claude: 能具体说吗?什么数据?怎么处理?
你: 就是数组过滤吧
[来回好几次才完成任务]
优秀的提示词:
你: 创建一个TypeScript函数:
接收Product[]数组,过滤出价格在minPrice到maxPrice之间、
库存大于0的商品,按价格降序排列。
用数组的filter和sort方法。
Claude: 我来创建这个函数。
[一次性生成符合要求的代码,有类型定义和注释]
好的提示词能:
- 减少沟通成本 - 一次说清楚需求
- 提高准确率 - 生成的代码符合预期
- 节省时间 - 避免反复修改
- 保证质量 - 明确规范和约束
提示词的核心要素
1. 清晰的目标描述
告诉Claude你要做什么,而不是怎么做。
好的示例:
创建一个用户认证中间件,验证JWT token并将其解码为用户对象
不好的示例:
写个中间件,用jsonwebtoken库的verify方法,然后...
2. 具体的技术要求
明确技术栈、语言、框架等要求。
完整的技术规格:
使用TypeScript创建一个React函数组件:
- 使用React Router的useParams钩子获取ID参数
- 使用TanStack Query的useQuery获取数据
- 显示加载状态、错误状态和成功状态
- 样式使用Tailwind CSS
3. 明确的输入输出
定义函数的输入参数和返回值。
示例:
创建一个函数:
- 输入: dateString (string, 格式: "YYYY-MM-DD")
- 输出: 相对时间描述 (string, 如"3天前"、"2小时后")
- 边界情况: 处理无效日期、null、undefined
4. 约束和规范
告诉Claude必须遵守的规则。
约束示例:
创建一个API路由:
- 必须使用Zod进行输入验证
- 必须包含错误处理
- 必须返回统一的响应格式 { success, data, error }
- 禁止使用any类型
- 必须包含JSDoc注释
提示词的结构模式
STAR模式
STAR模式是编写提示词的经典框架:
**S**ituation (情境) - 当前上下文是什么
**T**ask (任务) - 需要完成什么
**A**ction (行动) - 具体要做什么
**R**esult (结果) - 期望什么样的结果
应用示例:
# Situation
我们有一个React应用,用户列表页面加载缓慢,因为一次性获取了所有数据。
# Task
实现分页功能来优化性能和用户体验。
# Action
1. 修改API调用,添加page和pageSize参数
2. 使用React Query管理分页状态
3. 添加分页组件(上一页、下一页、页码显示)
4. 保持URL同步(使用query params)
# Result
- 每页显示20条数据
- URL格式: /users?page=2&pageSize=20
- 支持浏览器前进/后退
- 保持当前滚动位置
5W1H模式
对于复杂任务,使用5W1H确保信息完整:
**What** (什么) - 要实现什么功能
**Why** (为什么) - 为什么需要这个功能
**Who** (谁) - 谁会使用/影响谁
**Where** (哪里) - 在哪个模块/文件中实现
**When** (何时) - 什么时候触发/什么条件下
**How** (如何) - 具体实现方式
应用示例:
# What: 添加购物车功能
# Why: 用户需要批量购买商品,提高转化率
# Who: 所有注册用户
# Where: 在/src/components/Cart/目录下创建
# When: 用户点击"加入购物车"按钮时
# How:
- 使用Zustand管理购物车状态
- 本地存储持久化(localStorage)
- 实时计算总价
- 支持数量增减和删除
上下文提供技巧
1. 引用相关文件
让Claude了解现有代码结构:
修改 /src/components/Header/Header.tsx 组件:
参考 /src/components/Footer/Footer.tsx 的样式结构
使用 /src/hooks/useAuth.ts 中的用户信息
Claude会自动读取这些文件,确保新代码与现有代码风格一致。
2. 说明代码位置
明确告诉Claude代码应该放在哪里:
在 /src/pages/products/ 目录下创建:
- ProductList.tsx (组件文件)
- ProductList.types.ts (类型定义)
- ProductList.module.css (样式文件)
- index.ts (导出文件)
3. 提供代码示例
当需要特定代码风格时,提供示例:
创建一个用户服务类,按照这个模式:
```typescript
// 示例模式
export class AuthService {
async login(credentials: LoginInput): Promise<AuthResult> {
// 实现逻辑
}
async logout(): Promise<void> {
// 实现逻辑
}
}
现在创建 UserService,包含:
- getUserById(id: string)
- updateUser(id: string, data: UpdateUserInput)
- deleteUser(id: string)
### 4. 解释业务逻辑
对于复杂的业务规则,详细解释:
实现库存检查逻辑:
业务规则:
- 当用户下单时,检查每个商品的库存
- 如果库存不足,抛出错误并告知哪些商品缺货
- 如果库存充足,预扣库存(设置reserved字段)
- 如果订单取消,释放预扣的库存
- 如果订单支付成功,正式扣减库存
技术要求:
- 使用Prisma事务确保原子性
- 错误消息要友好(显示商品名称)
- 添加详细的日志记录
## 分步骤引导技巧
### 任务分解
对于复杂任务,使用分步骤的方式:
帮助我们实现用户评论功能,分步骤进行:
步骤1: 数据模型 创建Prisma模型 Comment,包含:
- id, content, createdAt, updatedAt
- 关联User (作者)
- 关联Post (文章)
- 父评论 (支持嵌套回复)
步骤2: API路由 创建评论相关的API端点:
- GET /api/posts/:postId/comments
- POST /api/posts/:postId/comments
- PATCH /api/comments/:id
- DELETE /api/comments/:id
步骤3: 前端组件 创建评论组件:
- CommentList.tsx (显示评论列表)
- CommentItem.tsx (单条评论)
- CommentForm.tsx (发表评论)
步骤4: 集成 将评论组件集成到文章详情页
请先从步骤1开始。
### 迭代优化
使用"改进"而不是"重新做":
这个函数实现了基本功能,但需要优化:
- 添加错误处理(try-catch)
- 添加输入参数验证
- 添加JSDoc注释
- 优化性能(使用memoization)
- 添加单元测试
请在现有代码基础上改进。
### 渐进式提示
从简单开始,逐步增加复杂度:
第一轮: 创建一个简单的表单组件,包含用户名和密码输入框
第二轮(基于上一轮): 添加表单验证,用户名至少3个字符,密码至少8个字符
第三轮(基于上一轮): 添加"显示密码"切换按钮
第四轮(基于上一轮): 添加表单提交到登录API,处理加载和错误状态
## 具体示例
### 示例1: 创建React组件
**完整的提示词:**
创建一个ProductCard组件,用于显示商品卡片:
技术栈:
- React 18 + TypeScript
- Tailwind CSS用于样式
- React Router用于导航
组件Props类型:
interface ProductCardProps {
product: {
id: string;
name: string;
price: number;
image: string;
category: string;
inStock: boolean;
};
onAddToCart?: (productId: string) => void;
}
功能要求:
- 显示商品图片、名称、价格、分类
- 如果库存不足,显示"缺货"并禁用购买按钮
- 点击卡片跳转到商品详情页(/products/:id)
- 有"加入购物车"按钮,点击时调用onAddToCart回调
样式要求:
- 卡片使用白色背景,圆角8px,阴影效果
- 图片使用object-fit: cover,固定高度200px
- 价格用红色字体突出显示
- 鼠标悬停时卡片上浮(translate-y)
文件位置:
- /src/components/Product/ProductCard.tsx
- 同时创建 /src/components/Product/ProductCard.module.css
代码规范:
- 使用函数式组件
- 添加完整的JSDoc注释
- 导出类型定义
### 示例2: 创建API端点
**完整的提示词:**
创建一个Express API端点,用于用户注册:
路由: POST /api/v1/auth/register
请求体验证(Zod schema):
- email: string, email格式,必填
- password: string, 最少8个字符,必须包含字母和数字
- name: string, 2-50个字符,必填
业务逻辑:
- 验证输入数据
- 检查邮箱是否已注册(如果已存在,返回409错误)
- 使用bcrypt对密码进行哈希(salt rounds: 10)
- 创建用户到数据库
- 生成JWT token (有效期: 7天)
- 返回用户信息(不包含密码)和token
响应格式:
成功(201):
{
"success": true,
"data": {
"user": {
"id": "uuid",
"email": "user@example.com",
"name": "John Doe",
"createdAt": "2024-01-01T00:00:00.000Z"
},
"token": "jwt-token-string"
}
}
错误(400/409):
{
"success": false,
"error": {
"code": "EMAIL_ALREADY_EXISTS",
"message": "该邮箱已被注册",
"details": {
"field": "email"
}
}
}
文件位置:
- /src/routes/auth.routes.ts
- 验证schema放在 /src/validators/auth.validators.ts
- 业务逻辑放在 /src/services/auth.service.ts
要求:
- 使用TypeScript
- 完整的错误处理
- 添加日志记录(Winston)
- 编写Jest测试
### 示例3: 重构代码
**完整的提示词:**
重构这个函数,提高可读性和性能:
当前代码: [粘贴现有代码]
重构目标:
- 将复杂逻辑拆分为多个小函数
- 使用早返回(early return)减少嵌套
- 添加有意义的变量名
- 添加JSDoc注释说明每个函数的作用
- 使用TypeScript严格类型
约束:
- 保持函数签名不变
- 保持返回值格式不变
- 添加充分的错误处理
- 不破坏现有功能
性能优化:
- 如果可能,使用memoization
- 减少不必要的循环
- 避免重复计算
请先:
- 分析当前代码的问题
- 提出重构计划
- 然后执行重构
### 示例4: 调试问题
**完整的提示词:**
帮我调试这个bug:
问题描述: 用户点击"保存"按钮后,数据没有保存到数据库,但前端显示"保存成功"。
相关文件:
- /src/components/UserForm.tsx
- /src/api/userApi.ts
- /src/pages/users/edit.tsx
预期行为:
- 用户填写表单
- 点击"保存"按钮
- 显示加载状态
- 调用API保存数据
- 如果成功,显示成功消息并跳转到列表页
- 如果失败,显示错误消息
当前问题:
- API返回成功,但数据库中没有记录
- 前端没有显示任何错误
调试步骤:
- 检查UserForm组件的提交逻辑
- 检查userApi的调用方式
- 检查API路由的实现
- 添加详细的日志记录
- 找出问题所在并修复
- 添加防止未来出现类似问题的代码
请开始调试,并在每一步告诉我你发现了什么。
### 示例5: 编写测试
**完整的提示词:**
为UserService编写完整的单元测试:
文件: /src/services/user.service.ts
测试框架: Jest + ts-jest
需要测试的功能:
- createUser - 创建用户
- getUserById - 根据ID获取用户
- updateUser - 更新用户信息
- deleteUser - 删除用户
- listUsers - 列出用户(分页)
测试要求:
- 使用mock模拟Prisma客户端
- 覆盖所有成功场景
- 覆盖所有错误场景
- 测试边界情况(如用户不存在、无效输入等)
- 每个测试都有清晰的描述
- 使用beforeEach和afterEach进行setup和teardown
覆盖率目标: >90%
示例测试结构:
describe('UserService.createUser', () => {
it('should create a user with valid data', async () => {
// 测试逻辑
});
it('should throw error if email already exists', async () => {
// 测试逻辑
});
it('should hash password before saving', async () => {
// 测试逻辑
});
});
请创建完整的测试文件。
## 常见误区
### 误区1: 提示词过于简短
**不好的示例:**
写个登 录功能
**问题:**
- 缺少技术栈信息
- 缺少功能规格
- 缺少代码规范
**好的示例:**
使用TypeScript和React Hook Form创建登录表单:
- 包含邮箱和密码字段
- 使用Zod进行验证
- 集成React Router用于登录后跳转
- 样式使用Tailwind CSS
### 误区2: 提示词过于冗长
**不好的示例:**
创建一个函数,这个函数的名字叫calculatePrice,它接收一个参数, 这个参数的类型是一个对象,这个对象里面有很多属性,包括price, taxRate,discount,shipping等等,然后这个函数要做的事情是计算 最终价格,首先要计算税,然后计算折扣,然后加上运费,最后返回... [500字的详细描述]
**问题:**
- 信息过载,难以抓住重点
- 混淆了逻辑和描述
- 不如直接用代码示例清晰
**好的示例:**
创建价格计算函数:
interface PriceInput {
basePrice: number;
taxRate: number; // 税率(如0.1表示10%)
discount: number; // 折扣金额
shipping: number; // 运费
}
function calculatePrice(input: PriceInput): number {
// 实现: (basePrice * taxRate) - discount + shipping
}
要求:
- 处理边界情况(负数、null等)
- 添加JSDoc注释
- 编写单元测试
### 误区3: 缺少上下文
**不好的示例:**
修复这个函数的bug [只粘贴函数代码,不说明任何背景]
**问题:**
- Claude不知道期望行为
- 不知道bug是什么
- 不知道如何使用这个函数
**好的示例:**
修复formatDate函数的bug:
当前行为: formatDate('2024-01-15') 返回 "1/15/2024"
期望行为: formatDate('2024-01-15') 应该返回 "2024年1月15日"
函数用途: 用于在订单详情页显示订单日期
当前代码: [粘贴代码]
要求:
- 支持中文格式
- 处理无效日期(返回"无效日期")
- 保持向后兼容
### 误区4: 一次性要求太多
**不好的示例:**
创建一个完整的电商系统,包括用户管理、商品管理、 购物车、订单系统、支付集成、后台管理、数据报表...
**问题:**
- 任务过于庞大,难以一次完成
- 缺少优先级
- 容易产生混乱
**好的示例:**
我们计划创建一个电商系统,分阶段实现:
第一阶段(MVP):
- 用户注册和登录
- 商品列表和详情页
- 基础购物车功能
请先从第一阶段开始,创建用户注册和登录功能。
### 误区5: 假设Claude知道所有项目细节
**不好的示例:**
修复ProductList的bug,应该和UserList一样处理
**问题:**
- Claude不知道UserList是怎么处理的
- 需要Claude自己去找,可能找到错误的参考
**好的示例:**
修复ProductList的分页bug。
参考UserList的实现(/src/components/UserList.tsx), 它使用usePagination hook正确处理了分页。 ProductList目前的问题是第二页的数据没有显示。
请参照UserList的模式修复ProductList。
## 提示词模板库
### 模板1: 创建新功能
创建【功能名称】:
背景: 【为什么需要这个功能】
功能需求:
- 【需求1】
- 【需求2】
- 【需求3】
技术栈:
- 【框架/语言】
- 【相关库】
文件位置: 【指定文件路径】
参考文件: 【相关文件路径】
约束条件:
- 【约束1】
- 【约束2】
验收标准:
- 【标准1】
- 【标准2】
### 模板2: 修复Bug
修复Bug:
Bug描述: 【详细描述bug现象】
复现步骤:
- 【步骤1】
- 【步骤2】
预期行为: 【应该发生什么】
实际行为: 【实际发生了什么】
相关文件:
- 【文件1】
- 【文件2】
环境信息:
- 浏览器/Node版本
- 相关依赖版本
优先级: 【高/中/低】
### 模板3: 重构代码
重构代码:
当前代码: 【粘贴代码】
重构原因: 【为什么要重构】
重构目标:
- 【目标1,如提高可读性】
- 【目标2,如提升性能】
约束条件:
- 【约束1,如保持API兼容】
- 【约束2,如不破坏现有功能】
期望风格: 【描述期望的代码风格】
### 模板4: 添加测试
为【文件/模块】编写测试:
文件路径: 【文件路径】
测试 类型:
- 单元测试
- 集成测试
- E2E测试
测试框架: 【如Jest, Vitest】
需要测试的功能:
- 【功能1】
- 【功能2】
测试场景:
- 正常场景
- 边界情况
- 错误处理
覆盖率要求: 【如>80%】
Mock依赖: 【需要mock的外部依赖】
### 模板5: 代码审查
审查以下代码:
代码文件: 【文件路径】
代码内容: 【粘贴代码】
审查重点:
- 代码质量
- 性能问题
- 安全漏洞
- 最佳实践
- 可维护性
请提供:
- 整体评价
- 具体问题列表
- 改进建议
- 修改后的代码示例(如果有必要)
### 模板6: 性能优化
优化性能:
目标文件/功能: 【文件路径或功能描述】
性能问题: 【描述当前性能问题,如加载慢、卡顿等】
优化目标:
- 【目标1,如减少50%加载时间】
- 【目标2,如提升渲染性能】
技术约束:
- 【约束1】
- 【约束2】
优化方向: 【提示可能的优化方向,如代码分割、懒加载等】
请提供:
- 性能分析
- 优化方案
- 实施步骤
- 优化前后对比
### 模板7: 文档生成
为【模块/功能】生成文档:
文件路径: 【相关文件】
文档类型:
- API文档
- 用户指南
- 开发者文档
目标受众: 【如初学者、有经验的开发者】
文档 风格: 【如简洁明了、详细示例】
包含内容:
- 功能概述
- 安装/配置说明
- 使用示例
- API参考
- 常见问题
- 最佳实践
## 实用技巧和最佳实践
### 技巧1: 使用角色设定
给Claude分配一个明确的角色:
你是一位资深的前端性能优化专家,拥有10年React开发经验。 请审查这段代码,找出性能瓶颈并提供优化建议。
【代码】
**其他角色示例:**
- "你是一位安全专家,审查这段代码的安全漏洞..."
- "你是一位UX设计师,评估这个组件的用户体验..."
- "你是一位测试工程师,为这个功能设计测试用例..."
### 技巧2: 提供示例
**输入示例:**
```text
输入: { name: "John", age: 30 }
期望输出: "Hello John, you are 30 years old"
代码风格示例:
按照这个风格编写:
【示例代码】
反例(不想要的):
不要这样写:
【不好的代码示例】
技巧3: 分层次组织信息
使用结构化的格式:
## 概述
【简要说明】
## 详细需求
### 功能需求
1. 【需求1】
2. 【需求2】
### 技术需求
- 【技术1】
- 【技术2】
## 实现步骤
1. 【步骤1】
2. 【步骤2】
## 验收标准
- 【标准1】
- 【标准2】
技巧4: 使用关键词
在提示词中使用明确的关键词引导Claude:
"创建"、"实现"、"编写" - 生成新代码 "修复"、"解决"、"调试" - 修复问题 "重构"、"优化"、"改进" - 改进现有代码 "解释"、"分析"、"评估" - 理解代码 "比较"、"对比" - 对比不同方案 "扩展"、"增强"、"添加" - 在现有基础上添加功能
技巧5: 设置优先级
明确任务的优先级:
**高优先级(必须完成):**
- 【核心功能】
- 【关键修复】
**中优先级(重要):**
- 【改进项】
**低优先级(可选):**
- 【锦上添花的功能】
**如果时间有限,请优先完成高优先级任务。**
技巧6: 要求思考过程
对于复杂任务,要求Claude先思考:
在开始编写代码之前,请:
1. 分析需求
2. 提出技术方案
3. 列出实现步骤
4. 说明可能的问题
然后等待我的确认后再开始实现。
技巧7: 使用版本迭代
**版本1(MVP):**
实现基础功能:【基础需求】
**版本2(增强):**
添加功能:【增强需求】
**版本3(完善):**
优化:【优化项】
请从版本1开始,完成后我会让你继续版本2。
技巧8: 明确输出格式
请按以下格式输出:
**代码:**
【代码块】
**说明:**
【文字说明】
**使用示例:**
【示例代码】
**注意事项:**
【注意事项列表】
技巧9: 请求多种方案
请提供3种实现方案:
**方案1: 【方案名称】**
- 优点: 【优点】
- 缺点: 【缺点】
- 适用场景: 【场景】
**方案2: 【方案名称】**
...
**方案3: 【方案名称】**
...
请推荐最合适的方案并说明理由。
技巧10: 设置检 查点
对于长任务,设置检查点:
这是一个多步骤任务,请在每步完成后停下来等待我的反馈:
步骤1: 【步骤1描述】
[完成并等待确认]
步骤2: 【步骤2描述】
[完成并等待确认]
步骤3: 【步骤3描述】
不同场景的提示词策略
场景1: 快速原型开发
策略: 先实现功能,后完善细节
创建一个用户仪表板原型:
- 先实现基本布局和数据展示
- 使用mock数据
- 样式可以简单一些
- 不需要完整错误处理
重点是快速验证设计思路,后续会完善。
场景2: 生产级代码
策略: 强调质量、测试、文档
创建支付处理模块:
- 必须包含完整的错误处理
- 必须编写单元测试(覆盖率>90%)
- 必须添加JSDoc注释
- 必须处理边界情况
- 必须添加日志记录
- 必须包含集成测试
这是生产代码,质量优先于速度。
场景3: 学习和理解
策略: 要求解释和教学
解释这段React代码的工作原理:
【粘贴代码】
请包含:
1. 代码的整体流程
2. 关键技术点说明
3. 为什么这样设计
4. 可能的改进方向
5. 相关的最佳实践
场景4: 代码审查
策略: 系统化的检查清单
审查以下代码:
【代码】
请按以下清单检查:
□ 代码风格
□ 命名规范
□ 错误处理
□ 性能问题
□ 安全漏洞
□ 可测试性
□ 可维护性
□ 文档完整性
对每个问题,请提供:
- 问题描述
- 严重程度(高/中/低)
- 修复建议
- 示例代码
场景5: 调试和问题排查
策略: 系统化的诊断流程
帮我排查这个问题:
**问题:** 【问题描述】
**已尝试的方法:**
1. 【方法1】 - 【结果】
2. 【方法2】 - 【结果】
**环境:**
- Node版本: 【版本】
- 相关依赖: 【依赖和版本】
**请按以下步骤诊断:**
1. 分析可能的原 因(列出3-5个)
2. 对每个原因提供验证方法
3. 推荐最可能的调试步骤
4. 如果找到问题,提供修复方案
高级技巧
技巧1: 链式提示
使用上一次的输出作为下一次的输入:
【第一次对话】
你: 创建一个用户模型
Claude: [创建了User模型]
【第二次对话】
你: 基于这个User模型,创建用户注册API
Claude: [创建注册API,使用User模型]
【第三次对话】
你: 为注册API添加测试用例
Claude: [创建测试,测试注册API]
技巧2: 对话式开发
像与同事交谈一样:
你: 我想实现一个搜索功能
Claude: 好的,需要搜索哪些内容?
你: 搜索文章标题和内容
Claude: 明白了。需要实时搜索(输入时搜索)还是点击按钮搜索?
你: 实时搜索,但要加防抖,避免频繁请求
Claude: 了解。前端使用什么框架?
你: React,使用Tailwind CSS
Claude: 好的,我来创建搜索组件...
技巧3: 渐进式完善
从粗略到精细:
你: 创建一个商品列表页
Claude: [创建基础列表]
你: 添加筛选功能(按分类和价格)
Claude: [添加筛选功能]
你: 添加排序功能(价格、销量、评分)
Claude: [添加排序功能]
你: 优化性能,使用虚拟滚动
Claude: [优化性能]
技巧4: 对比和选择
请对比以下两种方案:
**方案A:** 使用Redux管理状态
**方案B:** 使用Zustand管理状态
对比维度:
1. 学习曲线
2. 代码量
3. Bundle大小
4. TypeScript支持
5. 性能
6. 社区生态
推荐最适合我们项目的方案并说明理由。
技巧5: 使用代码审查清单
创建可重用的审查模板:
使用这个清单审查代码:
## 功能性
□ 实现了所有需求
□ 处理了边界情况
□ 错误处理完整
## 代码质量
□ 遵循项目规范
□ 命名清晰
□ 逻辑清晰
□ 无重复代码
## 性能
□ 无明显性能问题
□ 使用了适当的优化
## 安全
□ 无安全漏洞
□ 输入已验证
□ 敏感信息已保护
## 可维护性
□ 代码可读
□ 有必要注释
□ 易于修改
## 测试
□ 有单元测试
□ 测试覆盖充分
请按此清单审查我的代码。
常见问题解答
Q1: 如何让Claude理解我的项目特定术语?
A: 在CLAUDE.md中定义术语表:
## 项目术语表
- **SKU**: Stock Keeping Unit,商品库存单位
- **ERP**: Enterprise Resource Planning,企业资源计划
- **OMS**: Order Management System,订单管理系统
这些术语在代码和注释中经常出现,请使用正确的缩写。