当前位置：首页 > news >正文

Claude Code 全栈提示词：前端/Java/UI/测试一册通

news 2026/5/26 4:04:53

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²) 以上的慢操作或潜在 N+1 查询 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 结构）。