高效提示词技巧
提 示词是你和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
}
要求: