Claude Code提示词模板库：20个高频场景即拿即用

Claude Code提示词模板库：20个高频场景即拿即用 🎯

📅 更新于：2026年5月 | ✍️ 原创文章，转载请注明出处

📌 目录

1. 使用说明
2. 前端开发篇（1-7）
3. 后端开发篇（8-14）
4. 全栈通用篇（15-20）
5. 模板使用技巧
6. 总结

1. 使用说明

1.1 如何使用这些模板

# 方式1：直接复制提示词# 复制模板内容，粘贴到Claude Code中，替换[占位符]# 方式2：保存为自定义命令# 将模板保存到 .claude/commands/ 目录# 然后用 /命令名 调用

1.2 模板约定

1.3 模板分类

📱 前端开发篇（7个） 🖥️ 后端开发篇（7个） 🔧 全栈通用篇（6个）

2. 前端开发篇

模板1：创建React组件

场景：快速创建符合项目规范的React组件

创建一个[组件名]组件，要求： ## 技术栈 - React 18 + TypeScript - 函数组件 + Hooks - Tailwind CSS ## 功能需求 - [功能1] - [功能2] - [功能3] ## Props定义 interface [组件名]Props { [prop1]: [类型]; // [说明] [prop2]: [类型]; // [说明] [prop3]?: [类型]; // [说明，可选] } ## 代码规范 - 使用const声明组件 - 使用interface定义Props - 样式用Tailwind CSS - 参考 src/components/[参考组件].tsx 的写法 ## 输出 1. 组件代码 2. 使用示例 3. TypeScript类型定义

使用示例：

# 替换占位符后创建一个UserCard组件，要求：## 技术栈- React18+ TypeScript - 函数组件 + Hooks - Tailwind CSS## 功能需求- 显示用户头像、姓名、邮箱 - 支持点击事件 - 支持加载状态## Props定义interface UserCardProps{user: User;// 用户信息 onClick:(id: string)=>void;// 点击回调 loading?: boolean;// 加载状态，可选}## 代码规范- 使用const声明组件 - 使用interface定义Props - 样式用Tailwind CSS - 参考 src/components/ProductCard.tsx 的写法

模板2：添加表单处理

场景：创建表单组件，包含验证和提交

创建一个[表单名]表单组件，要求： ## 表单字段 | 字段名 | 类型 | 必填 | 验证规则 | |--------|------|------|----------| | [字段1] | [text/email/number/...] | [是/否] | [规则] | | [字段2] | [text/email/number/...] | [是/否] | [规则] | ## 功能需求 1. 表单验证（实时验证 + 提交验证） 2. 错误提示显示 3. 提交按钮（loading状态） 4. 重置按钮 5. 默认值支持 ## 技术方案 - 表单库：[React Hook Form / Formik] - 验证库：[Zod / Yup] - UI组件：[Ant Design / 自定义] ## API接口 - 提交接口：POST [接口地址] - 请求参数：[参数格式] - 响应格式：[响应格式] ## 输出 1. 表单组件代码 2. 验证Schema定义 3. TypeScript类型定义 4. 使用示例

使用示例：

创建一个用户注册表单组件，要求：## 表单字段|字段名|类型|必填|验证规则||--------|------|------|----------||username|text|是|3-20个字符||email|email|是|邮箱格式||password|password|是|至少8位，包含数字和字母||confirmPassword|password|是|必须与password一致|## 功能需求1. 表单验证（实时验证 + 提交验证）2. 错误提示显示3. 提交按钮（loading状态）4. 重置按钮5. 默认值支持## 技术方案- 表单库：React Hook Form - 验证库：Zod - UI组件：Ant Design## API接口- 提交接口：POST /api/users/register - 请求参数：{username, email, password}- 响应格式：{code:0, data:{userId: string}}

模板3：状态管理

场景：创建Zustand/Redux状态管理

创建一个[模块名]的状态管理，要求： ## 状态定义 interface [模块名]State { [字段1]: [类型]; // [说明] [字段2]: [类型]; // [说明] loading: boolean; // 加载状态 error: string | null; // 错误信息 } ## Actions 1. [action1]：[功能说明] 2. [action2]：[功能说明] 3. fetch[数据]：异步获取数据 4. reset：重置状态 ## 技术方案 - 状态库：[Zustand / Redux Toolkit / Jotai] - 持久化：[是否需要localStorage] - DevTools：[是否启用] ## 异步处理 - 使用 [React Query / SWR / 手写async] - 错误处理：统一错误提示 - Loading状态：自动管理 ## 输出 1. Store代码 2. TypeScript类型定义 3. 使用示例 4. 测试代码

使用示例：

创建一个用户模块的状态管理，要求：## 状态定义interface UserState{currentUser: User|null;// 当前用户 userList: User[];// 用户列表 token: string|null;// 登录token loading: boolean;// 加载状态 error: string|null;// 错误信息}## Actions1. setUser：设置当前用户2. setToken：设置token3. fetchUsers：异步获取用户列表4. login：用户登录5. logout：用户登出6. reset：重置状态## 技术方案- 状态库：Zustand - 持久化：token需要localStorage - DevTools：启用

模板4：列表页面

场景：创建带分页、搜索、筛选的列表页

创建一个[列表名]列表页面，要求： ## 功能需求 1. **列表展示** - 表格/卡片布局 - 列配置：[列1]、[列2]、[列3] - 空状态处理 2. **搜索功能** - 搜索字段：[字段1]、[字段2] - 防抖：300ms - 回车搜索 3. **筛选功能** - 筛选项：[筛选1]、[筛选2] - 重置筛选 4. **分页功能** - 每页条数：[10/20/50] - 页码切换 - 总数显示 5. **操作** - 新增按钮 - 批量删除 - 导出功能 ## API接口 - 列表查询：GET /api/[模块] - 参数：{ page, pageSize, keyword, ...filters } - 响应：{ code: 0, data: { list: [], total: number } } ## 技术方案 - UI组件：[Ant Design ProTable / 自定义] - 数据请求：[React Query / SWR] - 路由：[React Router] ## 输出 1. 页面组件代码 2. 表格列配置 3. 搜索组件 4. API请求封装 5. TypeScript类型定义

模板5：路由配置

场景：配置React Router路由

配置[项目名]的路由系统，要求： ## 路由结构

/ → 首页
/login → 登录页
/dashboard → 仪表盘（需要登录）
/users → 用户列表（需要登录）
/users/:id → 用户详情（需要登录）
/settings → 设置页（需要登录 + 权限）
/404 → 404页面

## 功能需求 1. **路由守卫** - 登录检查：未登录跳转 /login - 权限检查：无权限跳转 /403 2. **路由懒加载** - 使用 React.lazy + Suspense - Loading组件 3. **面包屑** - 自动生成面包屑 - 支持自定义 4. **页面标题** - 根据路由自动设置title ## 技术方案 - 路由库：React Router v6 - 状态管理：[Zustand / Context] ## 输出 1. 路由配置文件 2. 路由守卫组件 3. 面包屑组件 4. Layout组件

模板6：样式方案

场景：配置和使用样式系统

为[项目名]配置样式方案，要求： ## 技术选型 - CSS方案：[Tailwind CSS / CSS Modules / Styled Components] - UI库：[Ant Design / MUI / 自定义] - 主题系统：[支持/不支持] ## 设计规范 ### 颜色 - 主色：#[颜色值] - 成功色：#[颜色值] - 警告色：#[颜色值] - 错误色：#[颜色值] ### 字体 - 标题：[字体] [大小] - 正文：[字体] [大小] - 辅助：[字体] [大小] ### 间距 - 基础单位：[4px / 8px] - 常用间距：[4, 8, 12, 16, 24, 32, 48] ## 输出 1. 全局样式文件 2. 主题配置文件 3. 常用样式工具类 4. 使用文档

模板7：性能优化

场景：优化前端性能问题

优化[页面/组件]的性能，当前问题： - [问题1]：[具体表现] - [问题2]：[具体表现] ## 优化方向 ### 1. 渲染优化 - React.memo - useMemo / useCallback - 虚拟滚动 - 懒加载 ### 2. 网络优化 - 请求合并 - 数据缓存 - 预加载 - 防抖节流 ### 3. 资源优化 - 图片懒加载 - 代码分割 - Tree Shaking - 压缩 ## 测量指标 - 首屏加载时间：[当前] → [目标] - FPS：[当前] → [目标] - 内存占用：[当前] → [目标] ## 输出 1. 优化后的代码 2. 性能对比数据 3. 优化说明文档

3. 后端开发篇

模板8：创建RESTful API

场景：快速创建CRUD接口

创建[资源名]的RESTful API，要求： ## 资源定义 - 资源名：[resource] - 数据模型： ```typescript interface [Resource] { id: string; [字段1]: [类型]; [字段2]: [类型]; createdAt: Date; updatedAt: Date; }

接口列表

技术方案

• 框架：[Express / FastAPI / Spring Boot]
• 数据库：[MySQL / PostgreSQL / MongoDB]
• ORM：[Prisma / SQLAlchemy / MyBatis-Plus]

功能需求

1. 参数验证
2. 错误处理
3. 分页查询
4. 排序支持
5. 日志记录

输出

1. Controller代码
2. Service代码
3. Model/Entity代码
4. DTO定义
5. 单元测试

**使用示例**： ```bash 创建订单的RESTful API，要求： ## 资源定义 - 资源名：order - 数据模型： ```typescript interface Order { id: string; userId: string; productIds: string[]; totalAmount: number; status: 'pending' | 'paid' | 'shipped' | 'completed'; createdAt: Date; updatedAt: Date; }

接口列表

技术方案

• 框架：Express + TypeScript
• 数据库：PostgreSQL
• ORM：Prisma

--- ### 模板9：数据库设计 **场景**：设计数据库表结构 ```markdown 设计[业务模块]的数据库表结构，要求： ## 业务需求 - [需求1] - [需求2] - [需求3] ## 实体关系 - [实体1] → [实体2]：[1:1 / 1:N / M:N] - [实体2] → [实体3]：[1:1 / 1:N / M:N] ## 表结构设计 ### [表名1] | 字段名 | 类型 | 必填 | 默认值 | 说明 | |--------|------|------|--------|------| | id | bigint | 是 | 自增 | 主键 | | [字段1] | [类型] | [是/否] | [默认值] | [说明] | | created_at | timestamp | 是 | CURRENT_TIMESTAMP | 创建时间 | | updated_at | timestamp | 是 | CURRENT_TIMESTAMP | 更新时间 | ### [表名2] ... ## 索引设计 - [表名1]：[字段1, 字段2]（联合索引） - [表名2]：[字段1]（唯一索引） ## 技术方案 - 数据库：[MySQL / PostgreSQL] - ORM：[Prisma / TypeORM / MyBatis-Plus] - 迁移工具：[Alembic / Flyway / Prisma Migrate] ## 输出 1. Schema定义（SQL / ORM代码） 2. 迁移脚本 3. ER图（文字描述） 4. 索引说明

模板10：错误处理

场景：实现统一错误处理机制

为[项目名]实现统一错误处理，要求： ## 错误分类 | 错误类型 | HTTP状态码 | 错误码 | 说明 | |----------|-----------|--------|------| | 参数错误 | 400 | 1001 | 请求参数无效 | | 未授权 | 401 | 2001 | 未登录或token过期 | | 无权限 | 403 | 2002 | 无访问权限 | | 未找到 | 404 | 3001 | 资源不存在 | | 服务器错误 | 500 | 9999 | 系统内部错误 | ## 错误响应格式 ```json { "code": -1, "message": "错误信息", "error": { "code": "1001", "details": "具体错误详情" }, "timestamp": "2026-05-18T10:00:00Z", "path": "/api/users" }

实现要求

1. 全局异常拦截器
2. 业务异常类
3. 参数验证异常
4. 数据库异常转换
5. 错误日志记录

输出

1. 异常类定义
2. 全局异常处理器
3. 错误码枚举
4. 使用示例

--- ### 模板11：权限控制 **场景**：实现RBAC权限系统 ```markdown 为[项目名]实现权限控制系统，要求： ## 权限模型 ### 角色（Role） - admin：管理员 - user：普通用户 - guest：访客 ### 权限（Permission） - user:read：查看用户 - user:write：编辑用户 - user:delete：删除用户 - order:read：查看订单 - order:write：编辑订单 ### 角色-权限映射 | 角色 | 权限 | |------|------| | admin | user:*, order:* | | user | user:read, order:read, order:write | | guest | 无 | ## 实现方式 - [JWT + 中间件 / Spring Security / Casbin] - [前端路由守卫 + 按钮权限] ## 功能需求 1. 用户登录获取token 2. 接口权限验证 3. 前端权限控制 4. 权限缓存 ## 输出 1. 权限中间件/拦截器 2. 权限注解/装饰器 3. 前端权限Hook 4. 使用文档

模板12：日志记录

场景：配置日志系统

为[项目名]配置日志系统，要求： ## 日志级别 - error：错误日志 - warn：警告日志 - info：信息日志 - debug：调试日志 ## 日志格式

[时间] [级别] [模块] [请求ID] 消息内容
[2026-05-18 10:00:00] [INFO] [UserService] [req-123] 用户登录成功

## 日志内容 1. 请求日志 - 请求方法、URL、参数 - 响应状态码、耗时 - 用户ID、IP地址 2. 业务日志 - 操作类型、操作结果 - 关键业务数据 3. 错误日志 - 错误堆栈 - 请求上下文 - 用户信息 ## 技术方案 - 日志库：[Winston / Pino / Logback / SLF4J] - 日志存储：[文件 / Elasticsearch / 数据库] - 日志轮转：[按天 / 按大小] ## 输出 1. 日志配置 2. 日志中间件 3. 日志工具类 4. 使用示例

模板13：缓存策略

场景：实现缓存机制

为[项目名]实现缓存策略，要求： ## 缓存方案 - 缓存层：[Redis / Memcached / 本地缓存] - 缓存粒度：[接口级 / 数据级 / 页面级] ## 缓存策略 | 数据类型 | 缓存时间 | 更新策略 | 说明 | |----------|----------|----------|------| | 用户信息 | 30分钟 | 主动更新 | 用户修改后清除 | | 列表数据 | 5分钟 | 懒更新 | 过期后重新查询 | | 配置数据 | 24小时 | 主动更新 | 后台修改后清除 | | 热点数据 | 1小时 | LRU淘汰 | 自动管理 | ## 缓存Key设计

user:info:123
order:list:page:1:keyword:xxx
config:system:all

## 实现要求 1. 缓存穿透处理 2. 缓存雪崩处理 3. 缓存击穿处理 4. 缓存更新一致性 ## 输出 1. 缓存工具类 2. 缓存注解/装饰器 3. 缓存配置 4. 使用示例

模板14：消息队列

场景：实现异步消息处理

为[项目名]实现消息队列，要求： ## 消息场景 | 场景 | 消息类型 | 优先级 | 说明 | |------|----------|--------|------| | 订单创建 | 订单消息 | 高 | 触发库存扣减、通知 | | 用户注册 | 用户消息 | 中 | 触发欢迎邮件、初始化 | | 日志收集 | 日志消息 | 低 | 异步写入日志 | ## 技术方案 - 消息队列：[RabbitMQ / Kafka / Redis Stream] - 消息格式：JSON - 序列化：[JSON / Protobuf / Avro] ## 功能需求 1. 消息发送（同步/异步） 2. 消息消费（手动/自动ACK） 3. 死信队列 4. 消息重试 5. 消息幂等 ## 输出 1. 生产者代码 2. 消费者代码 3. 消息定义 4. 配置文件 5. 使用文档

4. 全栈通用篇

模板15：用户认证

场景：实现登录注册系统

为[项目名]实现用户认证系统，要求： ## 功能需求 1. **注册** - 用户名 + 密码注册 - 邮箱验证（可选） - 手机号验证（可选） 2. **登录** - 用户名/邮箱/手机号 + 密码 - 第三方登录（微信/GitHub） - 记住我 3. **Token管理** - JWT Token - Access Token + Refresh Token - Token刷新机制 - Token黑名单 4. **安全** - 密码加密（bcrypt） - 登录失败限制 - 验证码 ## 技术方案 - 认证方式：[JWT / Session / OAuth2] - 密码加密：[bcrypt / argon2] - 第三方登录：[Passport.js / Spring Security] ## 输出 1. 注册接口 2. 登录接口 3. Token刷新接口 4. 认证中间件 5. 前端登录页 6. 前端认证Hook

模板16：文件上传

场景：实现文件上传功能

为[项目名]实现文件上传，要求： ## 功能需求 1. **上传方式** - 单文件上传 - 多文件上传 - 分片上传（大文件） - 拖拽上传 2. **文件限制** - 文件类型：[图片/文档/视频] - 文件大小：[单文件最大]MB - 数量限制：[最多]个 3. **存储方案** - 本地存储 - 对象存储（[阿里云OSS / AWS S3 / MinIO]） 4. **图片处理** - 缩略图生成 - 图片压缩 - 水印添加 ## API接口 - 上传：POST /api/upload - 响应：{ code: 0, data: { url: string, filename: string } } ## 输出 1. 后端上传接口 2. 前端上传组件 3. 进度条显示 4. 文件预览

模板17：国际化

场景：实现多语言支持

为[项目名]实现国际化，要求： ## 支持语言 - 中文（zh-CN） - 英文（en-US） - [其他语言] ## 技术方案 - 前端：[react-i18next / vue-i18n / Intl API] - 后端：[i18next / Spring MessageSource] ## 实现范围 1. **前端国际化** - UI文本翻译 - 日期格式 - 数字格式 - 货币格式 2. **后端国际化** - 错误信息翻译 - 验证信息翻译 - 业务文案翻译 ## 语言文件结构

locales/
├── zh-CN/
│ ├── common.json
│ ├── login.json
│ └── errors.json
├── en-US/
│ ├── common.json
│ ├── login.json
│ └── errors.json

## 输出 1. i18n配置 2. 语言文件 3. 翻译Hook/工具 4. 使用示例

模板18：部署配置

场景：配置项目部署

为[项目名]配置部署方案，要求： ## 部署环境 - 开发环境（dev） - 测试环境（test） - 预发环境（staging） - 生产环境（prod） ## 部署方式 - [Docker / K8s / 传统部署] - [CI/CD工具：GitHub Actions / GitLab CI / Jenkins] ## 配置管理 | 配置项 | 开发 | 测试 | 生产 | |--------|------|------|------| | 数据库 | localhost | test-db | prod-db | | Redis | localhost | test-redis | prod-redis | | 日志级别 | debug | info | warn | ## Docker配置 ```dockerfile FROM node:18-alpine WORKDIR /app COPY package*.json ./ RUN npm ci --only=production COPY . . EXPOSE 3000 CMD ["npm", "start"]

CI/CD流程

1. 代码推送
2. 自动测试
3. 构建镜像
4. 部署到环境
5. 健康检查

输出

1. Dockerfile
2. docker-compose.yml
3. CI/CD配置
4. 环境变量模板
5. 部署文档

--- ### 模板19：测试策略 **场景**：配置测试方案 ```markdown 为[项目名]配置测试策略，要求： ## 测试类型 | 类型 | 工具 | 覆盖率目标 | 说明 | |------|------|-----------|------| | 单元测试 | [Jest / Vitest / JUnit] | 80% | 工具函数、Service | | 集成测试 | [Supertest / TestContainers] | 60% | API接口 | | E2E测试 | [Playwright / Cypress] | 核心流程 | 页面功能 | ## 测试规范 ### 命名规范

describe(‘[模块名]’, () => {
describe(‘[方法名]’, () => {
it(‘应该[预期行为]当[条件]’, () => {
// 测试代码
});
});
});

### 测试结构 - Arrange（准备） - Act（执行） - Assert（断言） ## Mock策略 - 外部API：Mock - 数据库：Mock或测试数据库 - 文件系统：Mock ## 输出 1. 测试配置 2. 测试工具函数 3. 示例测试用例 4. 测试文档

模板20：技术方案文档

场景：编写技术方案

编写[功能名称]的技术方案，要求： ## 文档结构 ### 1. 需求背景 - 业务需求 - 技术需求 - 约束条件 ### 2. 方案设计 #### 2.1 整体架构 - 架构图（文字描述） - 模块划分 #### 2.2 详细设计 - 接口设计 - 数据模型 - 时序图 #### 2.3 技术选型 - 框架选择 - 中间件选择 - 第三方服务 ### 3. 实现计划 - 阶段划分 - 时间估算 - 依赖关系 ### 4. 风险评估 - 技术风险 - 业务风险 - 应对措施 ### 5. 测试方案 - 单元测试 - 集成测试 - 性能测试 ## 输出格式 - Markdown格式 - 包含代码示例 - 包含架构图（文字描述） - 包含接口表格

5. 模板使用技巧

5.1 如何选择模板

1. 看场景类型 - 前端开发 → 模板1-7 - 后端开发 → 模板8-14 - 全栈通用 → 模板15-20 2. 看功能需求 - 创建新功能 → 模板1、8 - 修复问题 → 模板10 - 性能优化 → 模板7、13 3. 看复杂度 - 简单任务 → 直接用模板 - 复杂任务 → 组合多个模板

5.2 模板组合示例

# 创建一个完整的用户模块# 组合：模板1 + 模板2 + 模板3 + 模板4 + 模板8 + 模板151. 用模板1创建用户卡片组件2. 用模板2创建用户表单3. 用模板3创建用户状态管理4. 用模板4创建用户列表页5. 用模板8创建用户API6. 用模板15实现用户认证

5.3 自定义模板

# 将常用模板保存为自定义命令 # 1. 创建命令文件 touch .claude/commands/component.md # 2. 粘贴模板内容（去掉场景说明） # 3. 使用 /component UserProfile

5.4 模板优化建议

1. 根据项目调整 - 替换技术栈 - 调整命名规范 - 添加项目特定要求 2. 持续更新 - 记录踩坑点 - 补充最佳实践 - 删除过时内容 3. 团队共享 - 提交到Git - 建立模板库 - 定期review

6. 总结

6.1 模板速查表

6.2 使用建议

✅ DO - 先看场景选模板 - 根据项目调整模板 - 组合使用多个模板 - 持续优化模板 ❌ DON'T - 不要生搬硬套 - 不要忽略项目规范 - 不要一次用太多模板 - 不要忘记更新模板

6.3 系列回顾

📚Claude Code提示词系列文章

1. CLAUDE.md编写完全指南
2. 交互式提示词技巧
3. 自定义命令详解
4. 提示词模板库（本文）

📚 参考资料

1. Anthropic官方文档 - Claude Code - 2026年5月
2. Claude Code最佳实践 - 官方指南
3. Prompt Engineering Guide - 提示词工程通用指南

💬你有什么好用的提示词模板？欢迎在评论区分享！

📌 如果这个系列对你有帮助，别忘了点赞收藏，关注我获取更多Claude Code实战技巧！