前后端通用开发快速指令模板（适配Claude Code全局规范）

核心用途：复制模板 → 替换占位符 → 直接发给Claude Code，无需多余描述，即可生成符合「前端+Node后端+数据库+设计适配」规范的代码/资源，高效落地需求，避免反复沟通。

适配规范：完全贴合之前完善的CLAUDE.md全栈规范，自动遵循组件分层、接口格式、数据库命名、设计还原等约束，杜绝过度设计、乱改代码。

一、前端开发快速指令模板（Vue/React/TS）

模板1：页面开发（贴合Figma设计）

按照以下要求开发前端页面，严格遵循全局CLAUDE规范：
1. 页面名称：{页面名称，如：用户列表页/登录页/商品详情页}
2. 技术栈：{Vue3+TS+Pinia/Axios / React+TS+Hooks+Redux}
3. 设计要求：严格1:1还原Figma设计稿，色值、尺寸、边距、交互状态（默认/hover/选中/禁用）完全对齐，优先使用项目全局样式变量，不写固定色值/尺寸
4. 功能需求：{简要描述核心功能，如：实现用户列表查询、分页、新增/编辑/删除操作；实现表单验证、提交逻辑；实现路由跳转、弹窗交互}
5. 规范约束：
   - 组件分层：公共组件放入components，业务组件放页面目录，props/事件写TS类型，杜绝any
   - 样式：适配{移动端/PC端/响应式}，避免固定死宽高，优先使用flex/grid布局
   - 请求：使用项目统一Axios封装，处理请求/响应拦截、错误提示，接口字段与后端一致
   - 不额外新增未要求的功能、组件，不过度封装，单次使用逻辑不抽离公共组件

模板2：组件开发（公共/业务组件）

按照以下要求开发前端组件，严格遵循全局CLAUDE规范：
1. 组件名称：{组件名称，如：分页组件/弹窗组件/表单输入组件}
2. 技术栈：{Vue3+TS / React+TS}
3. 组件用途：{简要描述用途，如：用于所有页面分页，支持页码切换、每页条数调整；用于表单提交弹窗，支持确认/取消操作}
4. 核心需求：{描述组件功能，如：接收分页总数、当前页码、每页条数，触发页码切换事件；支持自定义弹窗标题、内容、按钮文本，关闭弹窗清空表单}
5. 规范约束：
   - 单一职责：仅实现组件核心功能，不堆砌无关逻辑
   - TS约束：props、事件、内部状态均需编写TS类型，无any类型
   - 样式：贴合项目全局样式规范，可复用，不硬编码固定值
   - 不依赖多余第三方插件，优先使用原生API或项目已有工具类

模板3：接口请求封装/状态管理

按照以下要求开发前端接口/状态管理，严格遵循全局CLAUDE规范：
1. 开发类型：{接口请求封装 / Pinia/Redux状态管理}
2. 关联业务：{关联页面/功能，如：用户模块接口封装 / 全局用户状态管理}
3. 核心需求：{描述需求，如：封装用户模块所有接口（查询/新增/编辑/删除），统一请求路径、请求方式；管理全局用户信息、登录状态，提供获取/修改/清除方法}
4. 规范约束：
   - 接口封装：统一放入api目录，按业务模块拆分，处理请求参数、响应格式，与后端接口字段一致
   - 状态管理：全局状态仅存放公共数据，页面私有数据不放入全局，避免冗余
   - 错误处理：接口请求失败给出友好提示，状态修改需触发对应更新，不出现数据错乱
   - 不擅自新增未要求的接口、状态字段，不修改项目原有请求/状态逻辑

二、Node.js后端开发快速指令模板（Express/NestJS）

模板1：NestJS接口开发（最常用）

按照以下要求开发NestJS接口，严格遵循全局CLAUDE规范：
1. 接口模块：{模块名称，如：用户模块/user / 商品模块/goods}
2. 接口功能：{接口用途，如：查询用户列表、新增用户、修改用户信息、删除用户}
3. 技术要求：
   - 遵循Nest模块化思想，拆分控制器（Controller）、服务（Service），使用依赖注入
   - 请求参数用DTO校验，接口响应格式统一为{code: 状态码, msg: 提示信息, data: 响应数据}
   - 全局异常拦截、响应拦截统一复用，不重复编写
4. 接口详情：
   - 接口1：{请求方式} {接口路径}，如：GET /api/user/list，功能：查询用户列表，入参：page（页码）、size（每页条数）
   - 接口2：{请求方式} {接口路径}，如：POST /api/user/add，功能：新增用户，入参：username、password、phone（必传，校验规则：xxx）
5. 规范约束：
   - 接口遵循RESTful风格，语义清晰，接口前缀统一配置
   - 敏感数据（如密码）返回时脱敏处理，入参做非空、格式校验
   - 不擅自修改Nest生命周期、全局配置，不新增未要求的接口、字段
   - 接口注释清晰，标注入参、出参、使用场景，方便前端联调

模板2：Express接口开发

按照以下要求开发Express接口，严格遵循全局CLAUDE规范：
1. 接口模块：{模块名称，如：订单模块/order / 日志模块/log}
2. 接口功能：{接口用途，如：查询订单详情、创建订单、取消订单、统计订单数量}
3. 技术要求：
   - 路由按业务模块拆分，不全部堆在入口文件，统一挂载路由
   - 统一封装响应格式：{code: 状态码, msg: 提示信息, data: 响应数据}
   - 全局统一异常捕获，不直接抛出原生错误堆栈，返回友好提示
4. 接口详情：
   - 接口1：{请求方式} {接口路径}，如：GET /api/order/detail，功能：查询订单详情，入参：orderId（必传）
   - 接口2：{请求方式} {接口路径}，如：POST /api/order/create，功能：创建订单，入参：userId、goodsId、num（必传）
5. 规范约束：
   - 中间件按需引入（登录校验、跨域、日志），不滥用中间件
   - 接口入参做校验，避免非法参数请求，防止接口异常
   - 不擅自修改项目目录结构、全局路由，不新增未要求的接口逻辑
   - 代码简洁，不过度封装，单次使用的逻辑不抽离工具类

模板3：后端工具类/中间件开发

按照以下要求开发后端工具类/中间件，严格遵循全局CLAUDE规范：
1. 开发类型：{工具类 / 中间件}，名称：{工具类/中间件名称，如：密码加密工具、登录校验中间件}
2. 核心用途：{描述用途，如：密码加密/解密、生成token、校验用户登录状态、日志记录}
3. 技术要求：
   - 工具类：放入utils目录，按功能拆分，方法单一职责，可复用
   - 中间件：放入middleware目录，适配Nest/Express框架，不影响原有接口逻辑
4. 规范约束：
   - 不依赖多余第三方包，优先使用Node原生API或项目已有依赖
   - 工具类/中间件可复用，不编写一次性代码，不冗余
   - 不擅自修改项目原有中间件、工具类，新增功能不影响现有业务
   - 编写清晰注释，说明用途、参数、返回值，方便后续维护

三、数据库开发快速指令模板（MySQL/MongoDB）

模板1：MySQL数据表/SQL语句开发

按照以下要求开发MySQL数据表/SQL语句，严格遵循全局CLAUDE规范：
1. 开发类型：{新建数据表 / 编写SQL语句（查询/新增/修改/删除）}
2. 关联业务：{关联模块，如：用户模块数据表 / 订单查询SQL}
3. 核心需求：
   - 若新建数据表：表名{表名，如：user}，用途{存储用户信息}，字段包含{id、username、password、createTime、updateTime、isDelete}，补充业务字段{如：phone、avatar}
   - 若编写SQL：{描述SQL用途，如：查询用户列表（带分页）、根据用户ID查询用户信息、批量删除用户}
4. 规范约束：
   - 表名、字段名统一小写+下划线，语义清晰，预留基础通用字段（id、创建时间、更新时间、删除状态）
   - 常用查询字段建立索引，禁止全表无索引大数据查询
   - 禁止直接拼接SQL语句，使用参数化查询防止注入
   - 多表关联查询简化语句，复杂逻辑拆分，避免超长SQL
   - 新增/修改/删除关键业务SQL，考虑事务控制，避免脏数据

模板2：MongoDB集合/操作语句开发

按照以下要求开发MongoDB集合/操作语句，严格遵循全局CLAUDE规范：
1. 开发类型：{新建集合 / 编写操作语句（查询/新增/修改/删除）}
2. 关联业务：{关联模块，如：商品模块集合 / 评论查询操作}
3. 核心需求：
   - 若新建集合：集合名{集合名，如：goods}，用途{存储商品信息}，文档结构{如：_id、name、price、stock、createTime、status}
   - 若编写操作语句：{描述操作用途，如：查询商品列表（带分页、筛选）、新增商品、修改商品库存、删除商品评论}
4. 规范约束：
   - 集合命名语义化，文档结构扁平化，避免多层深度嵌套
   - 分页查询使用游标分页，大数据量避免一次性查询全部数据
   - 统一时间字段存储格式（如：Date类型），状态字段统一枚举值管理
   - 合理设置字段默认值，减少前端空值兼容成本
   - 操作语句简洁，避免冗余查询，不查询无关字段

四、产品设计/图片处理快速指令模板

模板1：Figma设计稿还原（前端页面）

按照以下要求还原Figma设计稿，严格遵循全局CLAUDE规范：
1. 设计稿内容：{页面名称，如：首页banner区域/个人中心页面/表单弹窗}
2. 技术栈：{Vue3+TS / React+TS}
3. 还原要求：
   - 严格1:1还原Figma标注：色值、字体大小、行高、边距、圆角、阴影、图标完全对齐
   - 交互状态：还原设计稿中的所有交互状态（默认、hover、选中、禁用、加载中）
   - 适配要求：{移动端/PC端/响应式}，适配不同屏幕尺寸，不出现布局错乱
4. 规范约束：
   - 优先复用项目已有组件、样式变量，不重复造相同样式的组件
   - 图片资源按规范压缩，优先使用webp格式，大图片做懒加载
   - 不脱离设计稿自由发挥，设计存在歧义的地方，先标注疑问，不擅自定义

模板2：图片处理（格式转换/裁切/压缩）

按照以下要求处理图片，严格遵循全局CLAUDE规范：
1. 处理需求：{描述需求，如：将10张PNG图片转换为webp格式并压缩；将图片裁切为1:1比例，添加文字水印；批量缩放图片至300*300尺寸}
2. 处理标准：
   - 压缩：保证图片清晰度的前提下，最小化体积（压缩率{如：50%-70%}）
   - 格式：{目标格式，如：webp/AVIF/JPG}，适配前端页面使用
   - 尺寸：{目标尺寸，如：300*300、1920*1080}，裁切/缩放不拉伸、不变形
3. 规范约束：
   - 批量处理优先编写简易Node脚本实现自动化，不手动重复操作
   - 处理后的图片命名规范（小写+下划线），统一存放至指定目录
   - 保留原始图片备份，不覆盖原有资源
   - 图片水印位置、样式统一，不影响图片主体内容

五、通用使用说明

1. 所有模板均适配之前的CLAUDE.md全栈规范，复制后直接替换「{}」中的占位符，无需额外补充规范要求，AI会自动遵循；
2. 指令描述越简洁明确，AI输出越精准，避免模糊表述（如“做一个好看的页面”改为“做一个用户列表页，贴合Figma设计，实现分页查询”）；
3. 若需调整输出细节（如前端组件风格、后端接口响应格式），可在模板末尾补充特殊要求，不冲突即可；
4. 所有模板可直接在Cursor、VS Code Claude插件、Claude官网中使用，全局配置生效后，AI会自动匹配项目规范。

（注：文档部分内容可能由 AI 生成）