Claude Code 全栈提示词前端/Java/UI/测试一册通很多开发者刚用 Claude Code 时都会遇到同一个痛点明明心里想要一个生产级的分页表格写出来的提示词却只有“帮我写个表格组件”结果得到一段简陋的 HTML还得来回改。问题不在 AI 能力而在于我们是否给了它正确的角色设定、上下文和输出约束。下面我分别以前端、Java 后端、UI 设计、测试四个高频场景为例给你一套可以直接复制使用的标准提示词模板。每次开发时你只需要在模板里填上具体变量效率立刻翻倍。1. 前端开发像带高级工程师一样写提示词前端场景多、框架杂最有效的办法是显式指定技术栈 组件契约。组件开发你是一名资深 React 前端工程师精通 TypeScript 和 Tailwind CSS。 请实现一个可复用的 DataTable 组件要求 1. 支持前端排序点击列头升/降序 2. 支持前端分页每页可配置条数页码控件完整 3. 支持通过 columns prop 自定义列渲染函数 4. 所有 props 有完整的 TypeScript 类型定义 5. 代码包含完整的错误边界处理 输出组件代码 一个使用示例 简要的 props 文档。页面布局你是 UI 工程师请用纯 HTML CSS不引入任何框架实现一个响应式后台仪表盘布局。 要求 - 左侧固定宽度侧边栏顶部固定导航栏右侧主内容区自适应 - 使用 CSS Grid 或 Flexbox - 移动端侧边栏自动收起为汉堡菜单用 CSS 实现交互即可 - 代码结构清晰class 命名遵循 BEM 规范 输出完整可运行的 html 文件。问题排查你是前端调试专家。下面这段 React 代码导致页面在离开后仍频繁调用接口疑似内存泄漏或未清理副作用。 请 1. 指出具体问题所在并解释原理 2. 给出修复后的完整代码 3. 说明如何用浏览器 DevTools 验证修复有效 [此处粘贴代码]2. Java 后端开发把架构、分层与规范说清楚Java 后端开发强调分层和规范提示词若不指定层级结构AI 常常把所有代码堆在一个类里。一定要给出分层指令。RESTful API 生成你是 Spring Boot 后端专家技术栈Spring Boot 3、Spring Data JPA、MySQL、Lombok、Swagger。 请为“用户管理”模块生成标准 RESTful API。 要求 - 包含 UserController、UserService、UserRepository、User 实体类、DTO 类 - 实现用户增删改查其中查询支持分页和按用户名模糊搜索 - 所有接口添加 Swagger/OpenAPI 注解说明请求参数和返回示例 - 全局异常处理使用 RestControllerAdvice - 代码结构清晰方法单一职责 请按文件分层输出完整代码。数据库设计你是数据库架构师。请为“订单系统”设计 MySQL 8.0 表结构。 业务包含用户、产品、订单、订单明细。 输出 1. 完整 DDL包含主键、外键、索引和字段注释 2. 索引设计策略说明为什么建这些索引什么查询场景会被覆盖 3. 如果未来订单表超千万分库分表方案建议简要代码审查你是 Java 代码审查专家专注于性能和安全。 请审查以下业务代码 1. 找出所有 O(n²) 以上的慢操作或潜在 N1 查询 2. 指出 SQL 注入、敏感信息泄漏等安全风险 3. 给出重构后的代码使用 Stream API 和 Optional 优化可读性 [此处粘贴代码]3. UI 设计让 AI 产出“有设计感”的界面如果只说“做一个漂亮的登录页”Claude Code 大概率会给出很普通的样式。关键在于给出风格、色彩、排版、间距等设计约束。完整页面设计你是 UI/UX 设计师为一个小型 SaaS 项目管理工具设计首页。 要求 - 风格现代简约轻量感大量留白圆角柔和阴影 - 主色调蓝色 #2563EB辅色暖灰 - 结构顶部导航Logo 菜单 CTA 按钮、Hero 区域主标题、副标题、CTA、三列特性介绍、Footer - 使用 HTML Tailwind CSS 实现 - 附带 100 字设计理念说明组件样式规范你是 UI 设计师请设计一套按钮组件。 要求 - 类型主按钮filled、次要按钮outlined、危险按钮danger - 尺寸small、medium、large - 状态默认、hover、active、disabled、loading - 用 HTML CSS 展示所有状态组合 - 输出设计 Token 说明颜色、字号、圆角、间距交互体验优化你是交互设计师。当前表单流程用户填写 12 个字段后点击提交遇到错误全部字段置空需重填。 请 1. 分析流程中的体验问题 2. 给出优化后的交互方案分步、校验时机、错误定位等 3. 用 HTML/CSS/少量 JS 实现优化后的表单原型4. 测试从单元测试到性能脚本一招搞定测试提示词最容易出问题的地方是范围模糊。永远要指出你需要的覆盖范围、模拟对象和输出格式。单元测试你是 Java 测试工程师。请为上面的 UserService 类编写 JUnit 5 单元测试使用 Mockito。 要求 - 覆盖所有 public 方法 - 每个方法覆盖正常输入、边界值null、空字符串、超长字符串、业务异常 - 使用 Mock 模拟 UserRepository - 目标分支覆盖率达到 100% 输出完整测试类代码带注释说明每个测试的目的。端到端测试你是 QA 自动化工程师使用 Playwright (TypeScript) 编写登录功能的 E2E 测试。 场景 1. 正确的用户名密码 → 跳转到首页验证欢迎语存在 2. 错误密码 → 提示“用户名或密码错误”停留在登录页 3. 勾选“记住我” → 关闭浏览器后重新打开仍保持登录状态 输出可直接运行的 spec 文件。性能测试你是性能测试专家。请为以下接口编写 JMeter 测试计划 - POST /api/order/create - 模拟 500 并发用户在 60 秒内匀速启动持续运行 5 分钟后逐步退出 - 关注指标平均响应时间 500ms错误率 0.1%TPS 峰值 输出 JMeter 线程组、HTTP 请求、监听器的主要配置说明或 JMX 结构。5. 万能提示词公式把这四个场景的模板抽象一下其实所有提示词都可以套用一套公式角色你是谁 上下文项目背景/技术栈 任务做什么分几个步骤 约束必须满足的质量要求 输出格式代码/文档/列表下次再写提示词时花 30 秒把这几项过一遍你会发现 Claude Code 的产出质量立刻提升一个档次。记住你描述得越清楚AI 写得越贴近你心中那个“标准答案”。
Claude Code 全栈提示词：前端/Java/UI/测试一册通
Claude Code 全栈提示词前端/Java/UI/测试一册通很多开发者刚用 Claude Code 时都会遇到同一个痛点明明心里想要一个生产级的分页表格写出来的提示词却只有“帮我写个表格组件”结果得到一段简陋的 HTML还得来回改。问题不在 AI 能力而在于我们是否给了它正确的角色设定、上下文和输出约束。下面我分别以前端、Java 后端、UI 设计、测试四个高频场景为例给你一套可以直接复制使用的标准提示词模板。每次开发时你只需要在模板里填上具体变量效率立刻翻倍。1. 前端开发像带高级工程师一样写提示词前端场景多、框架杂最有效的办法是显式指定技术栈 组件契约。组件开发你是一名资深 React 前端工程师精通 TypeScript 和 Tailwind CSS。 请实现一个可复用的 DataTable 组件要求 1. 支持前端排序点击列头升/降序 2. 支持前端分页每页可配置条数页码控件完整 3. 支持通过 columns prop 自定义列渲染函数 4. 所有 props 有完整的 TypeScript 类型定义 5. 代码包含完整的错误边界处理 输出组件代码 一个使用示例 简要的 props 文档。页面布局你是 UI 工程师请用纯 HTML CSS不引入任何框架实现一个响应式后台仪表盘布局。 要求 - 左侧固定宽度侧边栏顶部固定导航栏右侧主内容区自适应 - 使用 CSS Grid 或 Flexbox - 移动端侧边栏自动收起为汉堡菜单用 CSS 实现交互即可 - 代码结构清晰class 命名遵循 BEM 规范 输出完整可运行的 html 文件。问题排查你是前端调试专家。下面这段 React 代码导致页面在离开后仍频繁调用接口疑似内存泄漏或未清理副作用。 请 1. 指出具体问题所在并解释原理 2. 给出修复后的完整代码 3. 说明如何用浏览器 DevTools 验证修复有效 [此处粘贴代码]2. Java 后端开发把架构、分层与规范说清楚Java 后端开发强调分层和规范提示词若不指定层级结构AI 常常把所有代码堆在一个类里。一定要给出分层指令。RESTful API 生成你是 Spring Boot 后端专家技术栈Spring Boot 3、Spring Data JPA、MySQL、Lombok、Swagger。 请为“用户管理”模块生成标准 RESTful API。 要求 - 包含 UserController、UserService、UserRepository、User 实体类、DTO 类 - 实现用户增删改查其中查询支持分页和按用户名模糊搜索 - 所有接口添加 Swagger/OpenAPI 注解说明请求参数和返回示例 - 全局异常处理使用 RestControllerAdvice - 代码结构清晰方法单一职责 请按文件分层输出完整代码。数据库设计你是数据库架构师。请为“订单系统”设计 MySQL 8.0 表结构。 业务包含用户、产品、订单、订单明细。 输出 1. 完整 DDL包含主键、外键、索引和字段注释 2. 索引设计策略说明为什么建这些索引什么查询场景会被覆盖 3. 如果未来订单表超千万分库分表方案建议简要代码审查你是 Java 代码审查专家专注于性能和安全。 请审查以下业务代码 1. 找出所有 O(n²) 以上的慢操作或潜在 N1 查询 2. 指出 SQL 注入、敏感信息泄漏等安全风险 3. 给出重构后的代码使用 Stream API 和 Optional 优化可读性 [此处粘贴代码]3. UI 设计让 AI 产出“有设计感”的界面如果只说“做一个漂亮的登录页”Claude Code 大概率会给出很普通的样式。关键在于给出风格、色彩、排版、间距等设计约束。完整页面设计你是 UI/UX 设计师为一个小型 SaaS 项目管理工具设计首页。 要求 - 风格现代简约轻量感大量留白圆角柔和阴影 - 主色调蓝色 #2563EB辅色暖灰 - 结构顶部导航Logo 菜单 CTA 按钮、Hero 区域主标题、副标题、CTA、三列特性介绍、Footer - 使用 HTML Tailwind CSS 实现 - 附带 100 字设计理念说明组件样式规范你是 UI 设计师请设计一套按钮组件。 要求 - 类型主按钮filled、次要按钮outlined、危险按钮danger - 尺寸small、medium、large - 状态默认、hover、active、disabled、loading - 用 HTML CSS 展示所有状态组合 - 输出设计 Token 说明颜色、字号、圆角、间距交互体验优化你是交互设计师。当前表单流程用户填写 12 个字段后点击提交遇到错误全部字段置空需重填。 请 1. 分析流程中的体验问题 2. 给出优化后的交互方案分步、校验时机、错误定位等 3. 用 HTML/CSS/少量 JS 实现优化后的表单原型4. 测试从单元测试到性能脚本一招搞定测试提示词最容易出问题的地方是范围模糊。永远要指出你需要的覆盖范围、模拟对象和输出格式。单元测试你是 Java 测试工程师。请为上面的 UserService 类编写 JUnit 5 单元测试使用 Mockito。 要求 - 覆盖所有 public 方法 - 每个方法覆盖正常输入、边界值null、空字符串、超长字符串、业务异常 - 使用 Mock 模拟 UserRepository - 目标分支覆盖率达到 100% 输出完整测试类代码带注释说明每个测试的目的。端到端测试你是 QA 自动化工程师使用 Playwright (TypeScript) 编写登录功能的 E2E 测试。 场景 1. 正确的用户名密码 → 跳转到首页验证欢迎语存在 2. 错误密码 → 提示“用户名或密码错误”停留在登录页 3. 勾选“记住我” → 关闭浏览器后重新打开仍保持登录状态 输出可直接运行的 spec 文件。性能测试你是性能测试专家。请为以下接口编写 JMeter 测试计划 - POST /api/order/create - 模拟 500 并发用户在 60 秒内匀速启动持续运行 5 分钟后逐步退出 - 关注指标平均响应时间 500ms错误率 0.1%TPS 峰值 输出 JMeter 线程组、HTTP 请求、监听器的主要配置说明或 JMX 结构。5. 万能提示词公式把这四个场景的模板抽象一下其实所有提示词都可以套用一套公式角色你是谁 上下文项目背景/技术栈 任务做什么分几个步骤 约束必须满足的质量要求 输出格式代码/文档/列表下次再写提示词时花 30 秒把这几项过一遍你会发现 Claude Code 的产出质量立刻提升一个档次。记住你描述得越清楚AI 写得越贴近你心中那个“标准答案”。
