提示词编写技巧
编写有效的提示词是获得高质量 Claude Code 响应的关键。
提示词基本原则
1. 清晰和具体
bash
# ❌ 模糊
创建一个组件
# ✅ 清晰具体
创建一个 React 函数组件，名称为 UserProfile，
包含用户头像、姓名和简介，使用 TypeScript2. 提供上下文
bash
# ❌ 缺少上下文
创建一个购物车组件
# ✅ 提供上下文
我正在开发一个电商平台，使用 React + TypeScript + Tailwind CSS。
请创建一个购物车组件，显示商品列表、数量和总价。
使用 Zustand 管理状态。3. 明确期望的输出
bash
# ❌ 不明确的输出
帮我改进这段代码
# ✅ 明确的输出
请重构这段代码，提取重复的逻辑，改进错误处理，
并添加 TypeScript 类型定义。请同时解释每处改进的原因。提示词结构
推荐结构
markdown
1. 角色/身份
2. 任务/目标
3. 上下文/背景
4. 要求/约束
5. 输出格式
6. 示例（如有）示例
markdown
你是一位有 10 年经验的 React 专家 (1. 角色)。
请创建一个数据表格组件 (2. 任务)。
技术栈：React 18 + TypeScript + Tailwind CSS (3. 上下文)。
要求：
- 支持排序和筛选
- 支持分页
- 响应式设计
- 可访问性 (4. 要求)。
请按以下格式输出：
1. TypeScript 类型定义
2. 组件代码
3. 使用示例 (5. 输出格式)。不同场景的提示词技巧
1. 代码生成
原则：越详细越好
bash
# 好的提示词
创建一个 React 表单组件，用于用户注册：
- 字段：用户名、邮箱、密码、确认密码
- 验证：
* 用户名：3-20 个字符，字母数字下划线
* 邮箱：标准邮箱格式
* 密码：最少 8 位，包含字母和数字
* 确认密码：必须与密码一致
- 样式：使用 Tailwind CSS
- 提交：调用 /api/v1/auth/register
- 成功：显示成功消息，跳转到登录页
- 失败：显示错误消息
- 使用 TypeScript2. 代码解释
原则：指定解释的深度
bash
# 浅层解释
简要解释这个函数的作用
# 深层解释
详细解释这个函数：
1. 函数的作用和目的
2. 输入参数和返回值
3. 算法逻辑
4. 时间复杂度
5. 可能的改进点3. 代码审查
原则：指定审查的标准
bash
# 全面审查
请审查这段代码，检查：
1. 代码质量
2. 性能问题
3. 安全隐患
4. 最佳实践
5. 可维护性
请提供具体的改进建议和代码示例。4. Bug 修复
原则：提供充分的错误信息
bash
# 好的提示词
我在使用这个组件时遇到错误：
错误信息：TypeError: Cannot read properties of undefined (reading 'map')
错误位置：ProductList.tsx:25
代码：
```typescript
{products.map(product => ...)}问题：products 在某些情况下是 undefined 请修复这个问题，添加适当的空值检查。
### 5. 代码重构
**原则**：说明重构的目标
```bash
# 好的提示词
请重构这个函数，目标是：
1. 提高可读性
2. 减少复杂度
3. 提高性能
当前代码：[代码]
请：
1. 解释当前代码的问题
2. 提供重构后的代码
3. 说明改进之处提示词优化技巧
1. 使用示例
bash
# 提供期望的输入输出示例
创建一个函数，将日期格式化为 "YYYY-MM-DD"。
示例：
- format(new Date(2024, 0, 1)) -> "2024-01-01"
- format(new Date(2024, 11, 31)) -> "2024-12-31"2. 使用约束条件
bash
# 明确约束
创建一个排序函数：
- 纯函数（无副作用）
- 时间复杂度 O(n log n)
- 支持自定义比较函数
- 使用 TypeScript 泛型3. 分步骤
bash
# 对于复杂任务，分步骤提出
第一步：先创建基础的数据模型和类型定义
第二步：根据类型定义创建组件
第三步：添加交互逻辑4. 迭代改进
bash
# 第一次
创建一个商品列表组件
# 检查后改进
添加虚拟滚动功能以支持大量数据
# 继续改进
添加骨架屏加载效果常见问题
问题 1：生成代码不符合项目风格
解决方案：在提示词中说明风格要求
bash
请按照以下编码规范：
- 组件使用函数组件
- Props 使用 interface
- 文件名使用 PascalCase
- 使用 const 声明问题 2：生成代码缺少错误处理
解决方案：明确要求错误处理
bash
创建函数时，请：
1. 处理所有可能的错误情况
2. 提供有意义的错误信息
3. 使用 try-catch
4. 添加错误日志问题 3：生成代码性能不佳
解决方案：要求性能优化
bash
创建组件时，请考虑性能：
1. 使用 React.memo
2. 使用 useMemo 和 useCallback
3. 避免不必要的重渲染
4. 优化列表渲染提示词模板库
组件创建模板
markdown
创建一个 {{componentType}} 组件：
- 名称：{{componentName}}
- 功能：{{description}}
- 框架：{{framework}}
- 语言：{{language}}
- 特殊要求：
{{each requirements}}
- {{this}}
{{endeach}}
请提供：
1. 完整的 TypeScript 类型定义
2. 组件实现代码
3. 使用示例Bug 修复模板
markdown
修复以下错误：
错误类型：{{errorType}}
错误信息：{{errorMessage}}
错误位置：{{errorLocation}}
代码：
\`\`\`
{{code}}
\`\`\`
请：
1. 分析问题原因
2. 提供修复方案
3. 解释为什么会出现这个问题代码审查模板
markdown
审查以下代码：
代码：
\`\`\`
{{code}}
\`\`\`
请检查：
{{each checks}}
- {{this}}
{{endeach}}
请提供：
1. 发现的问题
2. 改进建议
3. 优化后的代码（如有必要）下一步：代码质量保证