内容来源：The Claude Codex。https://claude-codex.fr/en/prompting/templates/
原题：Prompt templates
原发布时间：2026-03-10
可直接用于 Claude Code 的提示词模板，涵盖代码生成、调试、重构、测试、文档等场景。
兼容性说明（核对日期：2026-07-20）：来源页面的 Skills 提示使用旧版
.claude/commands/布局和/project:my-template调用方式。当前 Claude Code 文档已经把自定义命令合并到 Skills，新的可复用工作流使用.claude/skills/<name>/SKILL.md。
来源质量说明：后端提示词中的 “Don't use any TypeScript” 按原样保留；其原意看起来是禁止使用 TypeScript 的
any类型。框架和运行时版本也按发布内容保留，实际使用之前可能需要更新。
编辑说明：这些模板是来源作者提供的起点，并非经过独立验证的生产配置。
可直接使用的提示词
下面的每个模板都旨在让 Claude Code 产出专业质量的结果。它们遵循五项提示原则，并加入高级指令，以有效限定回答。
如何使用这些模板
1、复制符合需求的模板
2、用自己的值替换[方括号]中的内容
3、根据上下文添加或删除章节
4、通过多轮迭代改进结果
Web 前端开发者
创建 React 组件
你是一名精通 React、Next.js 和 TypeScript 的资深前端开发者。
为[组件说明]创建一个 React 组件。
技术背景：
- 框架：Next.js 14（App Router）
- 语言：严格模式 TypeScript（禁止 any）
- 样式：Tailwind CSS（只使用 Utility Classes）
- 状态：[zustand / React state / none]
功能规格：
- [功能 1 及详细说明]
- [功能 2 及详细说明]
- [功能 3 及详细说明]
约束：
- 移动优先的响应式设计
- 符合 WCAG 2.1 AA 无障碍标准（aria-label、可见焦点、对比度）
- 优化性能（适当时使用 React.memo、懒加载）
- 处理加载、错误、空状态和成功状态
- 支持深色模式
生成：
1. src/components/[Name].tsx 中的主组件
2. src/types/[name].types.ts 中的类型/接口
3. 一份使用示例
4. 单元测试（Vitest + Testing Library）
预期结果：一个可以投入生产的组件，带有类型、无障碍支持、响应式设计和测试。
集成设计稿
你是一名精通 Tailwind CSS 和 React 的 Web 界面实现专家。
把以下设计稿实现为 React/TypeScript 组件：
[描述设计稿，或者粘贴截图链接]
规格：
- 忠实还原设计（间距、颜色、字体）
- 移动端：[移动端布局说明]
- 平板端：[平板端布局说明]
- 桌面端：[桌面端布局说明]
色板：
- 主色：[十六进制代码]
- 辅色：[十六进制代码]
- 背景：[十六进制代码]
- 文本：[十六进制代码]
始终：
- 使用设计系统中已有的 Tailwind Classes
- 使用 next/image 优化图片（WebP、懒加载）
- 使用 framer-motion 添加滚动触发的入场动画
移动端开发者
React Native 组件
你是一名精通 React Native 和 TypeScript 的资深移动端开发者。
为一款[应用类型]应用创建[页面名称]页面。
技术背景：
- React Native 0.74+ 与 Expo
- 导航：expo-router（基于文件的路由）
- 样式：NativeWind（React Native 版 Tailwind）
- 状态：[Zustand / React Query / Context]
页面规格：
- 布局：[布局说明]
- 交互：[手势、动画、过渡]
- 数据：[数据源、格式]
移动端约束：
- 支持 iOS 与 Android
- 处理键盘（KeyboardAvoidingView）
- 支持刘海屏（SafeAreaView）
- 性能：列表使用 FlatList，而非 ScrollView
- 无障碍：accessibilityLabel、accessibilityRole
生成：
1. app/[name].tsx 中的页面组件
2. 必要的自定义 Hooks
3. types/[name].types.ts 中的类型
4. 用于开发的模拟数据
后端开发者
REST API 端点
你是一名精通 Node.js、Express 和 TypeScript 的资深后端开发者。
为[说明]创建一个 [METHOD] [ROUTE] 端点。
技术背景：
- 运行时：Node.js 20 与 Express 4
- ORM：Prisma 与 PostgreSQL
- 验证：Zod
- 身份验证：JWT（中间件已经就位）
- 日志：Winston
数据 Schema：
- 输入（Body/Params/Query）：[字段说明]
- 输出：[预期响应说明]
业务规则：
- [规则 1]
- [规则 2]
- [规则 3]
始终：
- 使用 Zod Schema 验证所有输入
- 返回 { success, data, error, meta } 格式
- 使用 try/catch 和语义化 HTTP 状态码处理错误
- 记录每个请求（成功与失败）
- 使用参数化查询（绝不拼接字符串）
绝不：
- 绝不返回敏感数据（密码、内部 Token）
- 绝不向客户端暴露原始 Prisma 错误
- 不使用任何 TypeScript
生成：
1. src/controllers/[name].controller.ts 中的 Controller
2. src/services/[name].service.ts 中的 Service
3. src/schemas/[name].schema.ts 中的 Zod Schema
4. Service 的单元测试
5. 一条 Curl 请求示例
数据库迁移
你是一名精通 PostgreSQL 和 Prisma 的 DBA/后端开发者。
为[变更说明]创建迁移。
当前 Schema 状态：
[粘贴相关 schema.prisma，或者描述现有数据表]
要求的变更：
- [添加/修改/删除数据表或列]
- [要创建或修改的关系]
- [要添加的索引]
约束：
- 迁移必须可逆（Up 与 Down）
- 不能丢失现有数据表中的数据
- 为新的 NOT NULL 列处理默认值
- 性能：添加相关索引
生成：
1. schema.prisma 更新内容
2. 要运行的 Prisma 命令
3. 测试数据的 Seed 脚本
4. 迁移后验证步骤
DevOps / SRE
CI/CD 流水线
你是一名资深 DevOps 工程师。
使用 [GitHub Actions / GitLab CI] 为[项目类型]创建 CI/CD 流水线。
背景：
- 仓库：[Monorepo / 单一应用]
- 语言：[Node.js / Python / Go / 等]
- 部署目标：[Vercel / AWS / GCP / Docker]
- 环境：[开发、预发布、生产]
必需的流水线：
1. 对每个 PR 运行 Lint 和类型检查
2. 单元测试与集成测试
3. 构建应用
4. 自动部署到[目标]
约束：
- 缓存依赖，以加快构建
- 通过 Secrets 提供环境变量（绝不硬编码）
- 失败时发送 Slack 通知
- 健康检查失败时自动回滚
- 目标构建时间：少于 5 分钟
生成：
1. 完整工作流文件（.github/workflows/ci-cd.yml）
2. 优化后的 Dockerfile（多阶段）
3. 用于本地开发的 docker-compose.yml
4. 部署文档
自动化脚本
你是一名资深 DevOps/SRE 工程师。
创建一个用于自动化[任务说明]的 [Bash/Python] 脚本。
环境：
- 操作系统：[Linux Ubuntu 22.04 / macOS]
- 前置条件：[所需工具]
- 执行频率：[手动 / Cron / CI]
工作方式：
1. [步骤 1]
2. [步骤 2]
3. [步骤 3]
要求：
- 健壮的错误处理（退出码、Trap）
- 带级别的日志（INFO、WARN、ERROR）
- 用于测试但不实际执行的 Dry-run 模式
- 通过 .env 或参数配置变量
- 幂等（可以重复运行且不会产生副作用）
生成：
1. 完整且带注释的脚本
2. .env.example 文件
3. 使用说明
设计师 / 界面实现开发者
设计系统
你是一名精通设计系统的设计师/前端开发者。
为[项目类型]创建设计系统的基础组件。
技术栈：
- React/TypeScript
- Tailwind CSS
- 使用 Storybook 编写文档
- 使用 CVA（class-variance-authority）处理变体
要创建的组件：
1. Button（primary、secondary、ghost、danger | sm、md、lg | 带图标）
2. Input（text、email、password、number | 带 Label、Error、Helper）
3. Card（default、elevated、outlined | 带 Header、Body、Footer）
4. Badge（info、success、warning、error | sm、md）
5. Modal（带 Overlay、动画、Focus Trap）
每个组件都要：
- 包含所有变体的 TypeScript 代码
- 使用联合类型定义 Props（不使用 Enum）
- 支持深色模式
- 完整支持无障碍
- 包含展示所有状态的 Storybook Story
- 包含单元测试
技术写作者
API 文档
你是一名专门编写 API 文档的资深技术写作者。
为 [API 名称] API 编写文档。
目标读者：[初级开发者 / 内部团队 / 第三方开发者]
结构：
1. 概览（说明、Base URL、身份验证）
2. 身份验证（方式、如何获取 Key、示例）
3. 按资源分类的端点：
- Method + URL
- 说明
- 参数（Path、Query、Body），包含类型与是否必需
- 响应（成功 + 错误），包含 JSON 示例
- 请求示例（Curl、JavaScript、Python）
4. 错误码（包含代码、消息、解决办法的表格）
5. 速率限制（上限、Header、最佳实践）
6. Changelog 与版本控制
约定：
- 提供可以实际运行、直接复制粘贴的代码示例
- 使用提示块（Note、Warning、Tip）
- 包含可导航目录
- 所有 JSON 示例必须有效
如何根据项目调整模板
确认需求
选择最接近当前任务的模板。不要寻找完美匹配；相关度达到 70% 的模板，也比从零编写提示词更好。
定制上下文
用项目的具体情况替换 [方括号] 中的值：技术栈、约定、业务约束。
加入自己的约束
在 ALWAYS/NEVER 区块中加入项目专用规则。如果已经拥有 CLAUDE.md，可以引用它。
迭代改进结果
第一次结果会不错，但不会完美。使用后续提示词继续改进：“添加错误处理”“让它支持无障碍”“优化性能”。
把模板转化为 Skills
如果经常使用某个模板，可以把它转化为 Claude Code Skill。创建
.claude/commands/my-template.md文件，之后每次都能通过/project:my-template调用。无需再复制粘贴，也不会再忘记。
后续步骤
现在，你已经拥有一套可以直接使用的模板库。想继续深入，可以阅读：
• 应该避免的常见错误：足以毁掉最优秀模板的陷阱
• 完整 CLAUDE.md 指南：把模板集成到项目的持久上下文中
• 高级提示与多智能体：串联技术与智能体编排
• 最值得推荐的 Skills：自动化重复任务的 Skills
