AI 编程完整工作流程 v2.0

2026-05-20 ai, claude, java, skills, vue, workflow, 全栈开发

AI 编程完整工作流程

版本：v2.0 | 日期：2026-05-20

📋 目录

内容概述
技术栈
项目架构
全局 Skills 使用手册
项目 Skills 使用手册
完整开发流程
质量保证体系
快速开始指南

一、内容概述

1.1 文档目的

本工作流程面向Java 后端 + Vue3 前端的全栈开发团队，基于 RuoYi（后端）+ VBen Admin（前端） 技术栈，结合 Claude Code + Agent Skills 工具链，实现从需求到交付的完整 AI 辅助开发闭环。

1.2 核心工具链

类别	工具	定位
AI 编程框架	Superpowers	强制 TDD + 工程流程
需求规格	OpenSpec	需求澄清 + 规格文档
后端技能	gstack	模块化 API 生成
代码审查	code-review	安全性 + 可维护性审计
文档处理	pdf / word / pptx / excel	办公文档自动化
前端 UI	ui-ux-pro-max	AI 原生 UI 设计
自动化测试	webapp-testing	Playwright UI 测试
自定义构建	skill-creator / mcp-builder	团队技能扩展

1.3 核心理念

好的流程比更强的模型更重要。人类掌舵，智能体执行。

AI 编程的核心不是让 AI 随意生成代码，而是通过结构化的流程约束和强制性的质量门禁，让 AI 的输出可控、可维护、可信赖。

二、技术栈

2.1 后端技术栈

类别	技术	版本	说明
基础框架	Spring Boot	2.5.x	Web 基础框架
持久层	MyBatis-Plus	3.5.x	ORM 框架
数据库	MySQL	5.7 / 8.0	关系型数据库
缓存	Redis	6.x	缓存层
工具库	Hutool / Lombok	最新稳定版	工具类
API 文档	Swagger (Knife4j)	4.x	接口文档
构建工具	Maven	3.8.x	项目构建
JDK	JDK	8	Java 运行时

⚠️ 注意：本项目使用 JDK 8，部分 JDK 17+ 特性（如 record、sealed class）不可使用。

2.2 前端技术栈

类别	技术	版本	说明
基础框架	Vue	3.4+	前端框架
UI 组件库	Ant Design Vue	4.x	企业级 UI
构建工具	Vite	5.x	新一代构建工具
路由	Vue Router	4.x	前端路由
状态管理	Pinia	2.x	状态管理
类型系统	TypeScript	5.x	JavaScript 超集
HTTP 客户端	Axios	1.x	HTTP 请求
图表	ECharts	5.x	数据可视化

2.3 开发工具

类别	工具	说明
AI 编程工具	Claude Code	Anthropic 终端 AI 编程工具
版本控制	Git	代码版本管理
后端 IDE	IDEA / Eclipse	Java 开发 IDE
前端 IDE	VS Code	前端开发 IDE
接口测试	Apifox / Postman	API 测试工具

三、项目架构

3.1 整体架构

┌─────────────────────────────────────────────────────────────┐
│                         用户层                               │
│                   Web Browser / PC Client                    │
└─────────────────────────┬───────────────────────────────────┘
                          │ HTTPS
┌─────────────────────────▼───────────────────────────────────┐
│                        VBen Admin                          │
│                    (Vue3 + Ant Design Vue)                  │
│                                                            │
│   ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐ │
│   │  路由     │  │  状态     │  │  API     │  │  页面    │ │
│   │ Router   │  │  Store   │  │  Service │  │ Views    │ │
│   └──────────┘  └──────────┘  └──────────┘  └──────────┘ │
└─────────────────────────┬───────────────────────────────────┘
                          │ REST API / WebSocket
┌─────────────────────────▼───────────────────────────────────┐
│                       RuoYi 后端                           │
│                   (Spring Boot 2.5 + JDK8)                  │
│                                                            │
│   ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐ │
│   │Controller│  │ Service  │  │  Mapper  │  │  Domain  │ │
│   └──────────┘  └──────────┘  └──────────┘  └──────────┘ │
└─────────────────────────┬───────────────────────────────────┘
                          │ JDBC
┌─────────────────────────▼───────────────────────────────────┐
│                      MySQL + Redis                         │
│                  (数据库 + 缓存双层存储)                     │
└─────────────────────────────────────────────────────────────┘

3.2 后端项目结构（RuoYi）

ruoyi/
├── pom.xml                          # Maven 父 POM
├── sql/                             # SQL 脚本
│   ├── quartz.sql                   # 定时任务表
│   └── ruoyi.sql                    # 核心业务表
├── ruoyi-admin/                     # 管理后台模块
│   └── src/main/java/
│       └── com/ruoyi/
│           ├── RuoYiApplication.java
│           ├── config/              # 配置类
│           │   ├── CorsConfig.java  # 跨域配置
│           │   ├── WebConfig.java   # Web 配置
│           │   └── RedisConfig.java # Redis 配置
│           └── controller/          # 控制器层
├── ruoyi-system/                    # 系统模块
│   └── src/main/java/
│       └── com/ruoyi/
│           ├── entity/              # 实体类
│           ├── service/             # 服务层
│           ├── mapper/              # 持久层
│           └── domain/              # 领域模型
├── ruoyi-common/                   # 通用模块
│   └── src/main/java/
│       └── com/ruoyi/common/
│           ├── core/                # 核心类（Result、AjaxResult）
│           ├── exception/           # 异常处理
│           ├── utils/              # 工具类
│           ├── enums/              # 枚举类
│           └── constant/            # 常量类
├── ruoyi-framework/                 # 框架模块
│   └── src/main/java/
│       └── com/ruoyi/framework/
│           ├── aspectj/             # 切面（日志、事务）
│           ├── interceptor/         # 拦截器
│           ├── security/            # 安全认证
│           └── config/             # 框架配置
└── ruoyi-quartz/                   # 定时任务模块

各模块职责说明：

模块	职责
ruoyi-admin	提供 REST API 接口，接收前端请求
ruoyi-system	实现业务逻辑，包含 entity/mapper/service/controller
ruoyi-common	通用工具类、响应封装、异常处理
ruoyi-framework	框架级能力：认证、授权、日志、事务
ruoyi-quartz	定时任务调度

3.3 前端项目结构（VBen Admin）

vben-admin/
├── src/
│   ├── api/                         # API 接口层
│   │   └── system/                  # 系统模块接口
│   │       ├── user.ts              # 用户接口
│   │       ├── role.ts              # 角色接口
│   │       └── menu.ts               # 菜单接口
│   │
│   ├── components/                  # 组件层
│   │   ├── Table/                   # 通用表格组件
│   │   ├── Form/                    # 通用表单组件
│   │   ├── Modal/                   # 通用弹窗组件
│   │   └── Tree/                   # 通用树形组件
│   │
│   ├── enums/                       # 枚举定义
│   │   └── index.ts
│   │
│   ├── hooks/                       # 业务 Hooks
│   │   ├── useUser.ts              # 用户信息 Hook
│   │   ├── usePermissions.ts       # 权限 Hook
│   │   └── useDict.ts              # 字典 Hook
│   │
│   ├── layouts/                     # 布局组件
│   │   ├── default/index.vue        # 默认布局
│   │   └── blank/index.vue          # 空白布局
│   │
│   ├── locales/                    # 国际化
│   │   ├── zh-CN.ts
│   │   └── en-US.ts
│   │
│   ├── router/                      # 路由
│   │   ├── index.ts                 # 路由入口
│   │   └── routes/                  # 路由配置
│   │       ├── modules/
│   │       │   ├── system.ts       # 系统模块路由
│   │       │   └── monitor.ts      # 监控模块路由
│   │       └── index.ts
│   │
│   ├── store/                       # 状态管理
│   │   └── modules/
│   │       ├── user.ts             # 用户状态
│   │       ├── router.ts           # 路由缓存
│   │       └── lockscreen.ts       # 锁屏状态
│   │
│   ├── utils/                       # 工具函数
│   │   ├── request.ts              # Axios 封装
│   │   ├── dict.ts                # 字典工具
│   │   └── routeHelpers.ts        # 路由助手
│   │
│   ├── views/                       # 页面层
│   │   └── system/                  # 系统模块
│   │       ├── user/
│   │       │   ├── index.vue       # 用户列表页
│   │       │   └── components/    # 用户模块专属组件
│   │       │       ├── UserForm.vue
│   │       │       └── UserDetail.vue
│   │       └── role/
│   │           ├── index.vue
│   │           └── components/
│   │
│   ├── App.vue
│   └── main.ts
│
├── types/                          # 全局类型定义
│   ├── index.d.ts
│   └── shims-vue.d.ts
│
├── vite.config.ts                  # Vite 配置
├── tsconfig.json                   # TypeScript 配置
└── package.json

3.4 前后端协作规范

接口规范

基础路径：http://{host}:{port}/prod-api

响应格式：
{
  "code": 200,        // 业务状态码（200=成功）
  "msg": "操作成功",   // 消息
  "data": { ... }      // 数据体
}

分页响应：
{
  "code": 200,
  "msg": "查询成功",
  "data": {
    "rows": [...],     // 数据列表
    "total": 100,     // 总记录数
    "pageNum": 1,     // 页码
    "pageSize": 10    // 每页条数
  }
}

目录对应关系

前端 views          对应后端 Controller
api/xxx.ts          →    xxxController
                      ↓
components/xxx     对应后端 Service
                      ↓
hooks/useXxx       对应后端 Mapper
                      ↓
utils/xxx          对应后端 Domain/Entity

四、全局 Skills 使用手册

4.1 概述

全局 Skills 安装在 ~/.claude/skills/，所有项目共享。适用于通用流程、团队规范、文档处理等跨项目能力。

安装模式：

模式	命令	说明
市场安装	`claude /plugin marketplace add <marketplace>`	添加市场源
技能安装	`claude /plugin install <skill>@<marketplace>`	从市场安装技能

常用市场源：

# Anthropic 官方市场
claude /plugin marketplace add anthropic/skills

# Superpowers 市场
claude /plugin marketplace add obra/superpowers-marketplace

# Vercel Labs 市场
claude /plugin marketplace add vercel-labs/agent-skills

# daymade 工具集市场
claude /plugin marketplace add daymade/claude-code-skills

# Trail of Bits 安全市场
claude /plugin marketplace add trailofbits/claude-skills

4.2 核心流程类 Skills

4.2.1 superpowers — AI 编程框架（强制 TDD + 工程流程）

来源：obra/superpowers-marketplace

核心定位：将 Claude Code 从”代码生成器”升级为”遵循最佳实践的软件工程伙伴”。

强制流程：Brainstorm → Write Plan → Execute Plan → Review → Archive

TDD 铁律：不写测试不执行。先写 RED（失败测试）→ GREEN（最小代码通过）→ REFACTOR（重构）。

Skills 列表：

Skill	命令	功能
superpower:init	`/superpower:init`	创建 Git Worktree + 新分支
superpower:write-plan	`/superpower:write-plan`	拆解任务为 2-5 分钟粒度
superpower:execute-plan	`/superpower:execute-plan`	强制 TDD 执行
superpower:review	`/superpower:review`	代码审查（安全性/性能/可维护性）
superpower:archive	`/superpower:archive`	合并 Worktree，清理分支

使用示例：

用户：帮我实现用户管理模块的删除功能

/superpower:write-plan

Claude：
  ## 用户删除功能执行计划

  任务分解（每任务 2-5min）：
  1. [x] 创建删除接口 DELETE /api/user/{id} (3min)
  2. [x] 实现逻辑删除（status=2） (3min)
  3. [x] 编写单元测试（正常删除、ID不存在）(5min)
  4. [x] 编写集成测试（关联数据检查）(5min)
  5. [x] Code Review (5min)

  依赖关系：
  - 任务1 → 任务2（依赖接口定义）
  - 任务3 → 任务4（依赖 Service 实现）

  请确认计划，我将按 TDD 流程执行。

/superpower:execute-plan

Claude：
  ❌ 拒绝执行 — 未遵循 TDD

  请按以下顺序执行：
  1. 先写单元测试（RED）
  2. 运行测试确认失败
  3. 我将编写最小实现（GREEN）
  4. 重构代码（REFACTOR）

  请继续，先写测试。

4.2.2 openspec — 需求澄清与规格文档

来源：Anthropic 官方市场

核心定位：在写代码之前先理解”要做什么”。

Skills 列表：

Skill	命令	功能
openspec:brainstorm	`/openspec:brainstorm`	苏格拉底式需求澄清
openspec:write-spec	`/openspec:write-spec`	生成 SPEC.md 规格文档

openspec:brainstorm 使用示例：

用户：实现一个订单模块

/openspec:brainstorm

Claude（提问式澄清）：
  我需要澄清几个问题：

  1. 订单来源：是内部系统下单还是对外开放？
  2. 支付流程：是否需要对接支付网关？支持哪些支付方式？
  3. 库存扣减：下单即扣库存还是付款后扣库存？
  4. 优惠叠加：是否支持优惠券、满减、折扣叠加？
  5. 订单状态：有哪些状态？状态流转规则？
  6. 售后规则：支持多久内退款？是否支持部分退款？
  7. 履约方式：快递配送 / 到店自提 / 同城配送？

  请明确以上需求，我将整理成规格文档。

openspec:write-spec 输出格式：

# 订单模块规格文档

## 1. 需求澄清
- [x] 支持微信/支付宝支付
- [x] 下单即扣库存
- [x] 订单状态：待支付→已支付→已发货→已完成/已取消

## 2. API 接口
| 方法 | 路径                   | 说明         |
| ---- | ---------------------- | ------------ |
| POST | /api/order/create      | 创建订单     |
| GET  | /api/order/{id}        | 查询订单详情 |
| PUT  | /api/order/cancel/{id} | 取消订单     |
| POST | /api/order/pay         | 支付订单     |

## 3. 前端页面
- /views/order/index.vue — 订单列表
- /views/order/detail.vue — 订单详情

## 4. 数据库设计
- 表：ord_order（订单主表）
- 表：ord_order_item（订单明细表）

## 5. 测试用例
- [ ] 正常创建订单
- [ ] 库存不足
- [ ] 订单超时自动取消
- [ ] 支付回调

4.2.3 planning-with-files — 基于项目文件的结构化规划

来源：Anthropic 官方市场

核心定位：读取项目现有代码结构，基于真实上下文规划，避免 AI 凭空生成与现有架构冲突的代码。

命令：/planning-with-files 或 /plan-with-files

使用示例：

用户：帮我规划一个新的商品分类模块

/planning-with-files

Claude（读取项目结构后）：
  检测到现有模块：user, role, menu, order
  检测到现有架构：Controller-Service-Mapper 三层

  ## 商品分类模块规划

  ### 文件结构（遵循现有架构）
  src/main/java/com.ruoyi/product/
  ├── controller/CategoryController.java
  ├── service/ICategoryService.java
  ├── service/impl/CategoryServiceImpl.java
  ├── mapper/CategoryMapper.java
  └── domain/Category.java

  ### 树形结构设计
  - 自关联：parent_id 指向自身
  - 支持无限层级
  - 按层级排序（sort 字段）

  ### 任务分解
  1. 创建分类实体（含树形结构字段）(3min)
  2. 创建 Mapper（支持树形查询）(5min)
  3. 创建 Service（递归查询实现）(5min)
  4. 创建 Controller（CRUD + 树形接口）(5min)
  5. 前端：分类树组件 + API (10min)
  6. 单元测试 (5min)

  ### 注意事项
  - 删除分类需检查是否有子分类或关联商品
  - 树形查询使用 MyBatis-Plus 的 tree 语法

4.3 质量保障类 Skills

4.3.1 code-review — 代码审查

来源：Anthropic 官方市场

命令：/code-review 或 /review-code

审查维度：

## code-review 审查清单

### 安全性（Security）
- [ ] SQL 注入：是否使用 #{} 而非 ${}？
- [ ] XSS：用户输入是否转义？
- [ ] 权限校验：是否有 @RequiresPermissions？
- [ ] 敏感信息：是否硬编码密码/密钥？
- [ ] 越权访问：是否校验数据归属？

### 性能（Performance）
- [ ] N+1 查询：是否使用联表或批量查询？
- [ ] 索引：查询字段是否有索引覆盖？
- [ ] 大数据：是否使用分页？
- [ ] 缓存：热点数据是否缓存？

### 可维护性（Maintainability）
- [ ] 命名规范：是否符合团队命名约定？
- [ ] 方法长度：是否过长（>80行）？
- [ ] 重复代码：是否提取公共方法？
- [ ] 注释完整：复杂逻辑是否注释？

### 可测试性（Testability）
- [ ] 单元测试：是否有覆盖？
- [ ] 依赖注入：是否违反 DI 原则？
- [ ] 硬编码：配置是否外置？

使用示例：

用户：Review 一下这个方法

/code-review

Claude：
  ## 代码审查报告

  文件：OrderServiceImpl.java:45-86

  ⚠️ SQL 注入风险
  [Line 52] 发现 ${status} 直接拼接
  建议：改为 #{status}

  ⚠️ N+1 查询
  [Line 68] 循环内查询用户信息
  建议：批量查询后 Map 缓存

  ⚠️ 方法过长
  [Line 45-86] 方法 86 行，建议拆分为：
  - validateOrder() 校验
  - calculatePrice() 计算价格
  - createOrder() 创建订单

  ⚠️ 缺少日志
  [Line 75] 关键操作未记录日志
  建议：添加 log.info("创建订单: {}", orderId)

  ✅ 优点
  - 使用了 @Transactional 事务控制
  - 异常处理规范

4.3.2 web-design-guidelines — Web 设计规范检查

来源：vercel-labs/agent-skills

命令：/web-design-guidelines 或 /audit-design

功能：根据 Vercel Web Interface Guidelines 检查 HTML/CSS/组件的可用性、可访问性、UI 一致性。

安装：

1	npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

使用示例：

用户：检查登录页面的设计规范

/web-design-guidelines

Claude：
  ## 设计规范审查报告

  ❌ 可访问性
  - [Line 15] 按钮缺少 aria-label
  - [Line 23] 输入框缺少 id/for 关联
  - [Line 45] 图片缺少 alt 属性

  ❌ UI 一致性
  - [Line 30] 输入框高度 40px，设计稿 36px
  - [Line 55] 按钮圆角 8px，其他 4px

  ✅ 符合规范
  - 颜色对比度 4.5:1 ✓
  - 焦点样式可见 ✓
  - 响应式断点正确 ✓

4.4 前端开发类 Skills

4.4.1 ui-ux-pro-max — AI 原生 UI 设计

来源：NextLevelBuilder/ui-ux-pro-max-skill

命令：/ui-ux-pro-max 或 /design-ui

功能：生成 AI 原生风格的 UI 组件设计，支持 Ant Design Vue / Element Plus / Tailwind CSS。

使用示例：

用户：设计一个数据统计仪表盘页面

/ui-ux-pro-max

Claude：
  ## 仪表盘设计方案

  布局结构：
  ┌────────────────────────────────────────┐
  │  标题栏  时间筛选  刷新按钮              │
  ├───────┬───────┬───────┬────────────────┤
  │ 今日订单│ 今日收入│ 新增用户│ 访问量        │
  │ 1,234  │ ¥56,780│  89    │  98%          │
  ├───────┴───────┴───────┴────────────────┤
  │           趋势图表（ECharts）            │
  ├─────────────────────┬──────────────────┤
  │     TOP商品排行      │    用户分布       │
  └─────────────────────┴──────────────────┘

  技术选型：
  - Vue 3 Composition API
  - Ant Design Vue 组件（a-card, a-statistic）
  - ECharts 图表（line + bar）
  - CSS Grid 布局

  是否需要生成代码？

4.4.2 frontend-design — 前端最佳实践

来源：Anthropic 官方市场

命令：/frontend-design 或 /fe-design

功能：Vue/React 前端开发最佳实践指导、组件审查、TypeScript 类型建议。

使用示例：

用户：帮我审查这个 Vue 组件

/frontend-design

Claude：
  ## Vue 组件审查

  ⚠️ 问题
  1. props 缺少 TypeScript 类型定义
  2. 未使用 defineModel（Vue 3.4+）
  3. 存在重复计算未缓存（未用 computed）
  4. 缺少 ErrorBoundary

  ✅ 符合最佳实践
  - 使用了 Composition API ✓
  - 样式 scoped 隔离 ✓
  - 组件单一职责 ✓

  优化建议：
  - 使用 shallowRef 优化大数组性能
  - 添加 defineEmits 替代 $emit
  - 使用 useVirtualList 处理长列表

4.4.3 webapp-testing — Playwright 自动化测试

来源：Anthropic 官方市场

命令：/webapp-testing 或 /test-webapp

功能：基于 Playwright 的 Web 应用 UI 自动化测试，支持截图对比、日志捕获、服务器生命周期管理。

使用示例：

用户：测试登录功能

/webapp-testing

Claude：
  ## 测试计划

  场景1：正常登录
  1. 访问 /login
  2. 输入用户名 admin
  3. 输入密码 admin123
  4. 点击登录
  5. 验证跳转 /dashboard
  6. 截图

  场景2：密码错误
  1. 输入错误密码
  2. 验证错误提示
  3. 截图

  执行中...
  ✅ 场景1 通过
  ✅ 场景2 通过

  报告：/tmp/webapp-testing-report.html

4.5 文档处理类 Skills

4.5.1 pdf — PDF 处理

来源：Anthropic 官方市场

命令：/pdf

功能：读取 PDF 内容、提取文本、生成 PDF。

使用示例：

用户：从需求文档 PDF 中提取第 3-5 章内容

/pdf extract --pages 3-5

Claude：
  已读取 3 页内容：

  ## 第三章 功能需求
  3.1 用户管理模块...
  3.2 订单管理模块...

  是否需要我基于此生成开发文档？

4.5.2 word / docx — Word 文档处理

来源：Anthropic 官方市场

命令：/docx 或 /word

功能：创建、编辑 Word 文档，支持跟踪修订、批注、格式化。

使用示例：

用户：创建一个技术设计文档，包含项目概述、技术架构、接口设计三个章节

/docx create

Claude：
  正在生成文档...
  ✅ 技术设计文档.docx

  结构：
  1. 项目概述
  2. 技术架构
     2.1 系统架构图
     2.2 技术选型
  3. 接口设计
     3.1 REST API 规范
     3.2 接口列表

4.5.3 pptx — PowerPoint 处理

来源：Anthropic 官方市场

命令：/pptx 或 /powerpoint

功能：创建、编辑 PPT，支持布局、母版、图表、动画。

使用示例：

用户：创建项目周报 PPT，包含项目背景、进度、问题、下周计划

/pptx create

Claude：
  正在创建演示文稿...
  ✅ 项目周报.pptx

  幻灯片结构：
  Slide 1：封面（标题 + 日期 + 汇报人）
  Slide 2：项目背景（目标 + 里程碑）
  Slide 3：本周进度（60%，进度条）
  Slide 4：存在问题（问题 1、问题 2）
  Slide 5：下周计划（目标 + 风险提示）

4.5.4 excel / xlsx — Excel 处理

来源：Anthropic 官方市场

命令：/xlsx 或 /excel

功能：创建、编辑 Excel，支持公式、数据透视、图表可视化。

使用示例：

用户：创建 Sprint 燃尽图，跟踪剩余任务点数

/xlsx create

Claude：
  正在生成表格...
  ✅ Sprint燃尽图.xlsx

  包含：
  - 原始数据表
  - 理想曲线 vs 实际曲线
  - 偏差分析
  - 燃尽图图表

4.6 工具扩展类 Skills

4.6.1 mcp-builder — 构建 MCP 服务器

来源：Anthropic 官方市场

命令：/mcp-builder 或 /build-mcp

功能：构建 MCP（Model Context Protocol）服务器，扩展 Claude 的工具能力，对接内部系统 API。

使用示例：

用户：构建一个 MCP 服务器连接内部订单系统

/mcp-builder

Claude：
  第一步：确定用途
  - 连接内部订单 API？✓

  第二步：定义工具
  请列出需要暴露的工具：
  1. getOrder - 查询订单
  2. createOrder - 创建订单
  3. cancelOrder - 取消订单

  正在生成 MCP 服务器...
  ✅ 已生成：
  - src/mcp-server.ts
  - src/tools/order-tools.ts
  - package.json

  启动：npx @anthropic-ai/mcp-server run

4.6.2 skill-creator — 构建自定义 Skills

来源：daymade/claude-code-skills

命令：/skill-creator 或 /create-skill

功能：元技能，引导你完成自定义 Skill 的构建、验证和打包。

使用示例：

用户：创建一个 RuoYi 专用的 gen-crud skill

/skill-creator

Claude：
  欢迎使用 Skill Creator！

  第一步：明确需求
  描述你的 Skill 要解决什么问题？

  用户：根据表结构生成 RuoYi CRUD 代码

  第二步：定义输入输出
  输入：表名 + 字段列表
  输出：Controller + Service + Mapper + XML + 前端 API

  第三步：生成 SKILL.md
  ✅ 已生成

  第四步：验证
  请测试：/ruoyi:gen-crud

  Skill 创建完成！

4.6.3 ralph-loop — 自主迭代循环

来源：社区（ralph 工具集）

命令：/ralph-loop 或 /loop

功能：让 Claude 进入自主迭代循环，自动分解并执行任务，定期汇报，随时可中断。

使用示例：

用户：用 ralph-loop 完成用户模块测试

/ralph-loop

Claude（自主模式）：
  任务分解：
  1. UserService 单元测试
  2. UserService 集成测试
  3. UserController API 测试
  4. 生成测试报告

  [执行中]
  ✅ 任务1 - 15个用例
  ✅ 任务2 - 8个用例
  正在执行任务3...
  [中断 - 等待确认]

  用户：继续
  ✅ 任务3 - 12个用例
  ✅ 任务4 - 覆盖率85%

  总计：35个测试，全部通过

4.6.4 summarize-changes — 代码变更总结

来源：Anthropic 官方市场

命令：/summarize-changes

功能：自动总结 Git 提交/分支/PR 的代码变更。

使用示例：

用户：总结这个 PR 的变更

/summarize-changes

Claude：
  ## PR #123: 用户认证模块重构

  ### 变更概述
  从 Session 迁移到 JWT，优化权限控制逻辑。

  ### 主要变更
  1. 新增 JwtService（Token 生成/验证）
  2. 重构 SecurityFilter
  3. 新增 RefreshToken 机制
  4. 移除旧 Session 代码

  ### 统计
  +486 / -213 行
  新增文件：5 | 修改：12 | 删除：3

  ### 风险
  中等 — 建议回归测试登录流程

4.7 全局 Skills 速查表

Skill	命令	分类	功能
superpowers	`/superpower:xxx`	核心流程	TDD + 工程流程框架
openspec	`/openspec:xxx`	核心流程	需求澄清 + 规格文档
planning-with-files	`/plan-with-files`	核心流程	基于文件的结构化规划
code-review	`/code-review`	质量保障	代码审查
web-design-guidelines	`/web-design-guidelines`	质量保障	UI 规范检查
ui-ux-pro-max	`/ui-ux-pro-max`	前端开发	AI UI 设计
frontend-design	`/frontend-design`	前端开发	前端最佳实践
webapp-testing	`/webapp-testing`	前端开发	Playwright UI 测试
pdf	`/pdf`	文档处理	PDF 读写
word	`/docx`	文档处理	Word 文档
pptx	`/pptx`	文档处理	PowerPoint
excel	`/xlsx`	文档处理	Excel 表格
mcp-builder	`/mcp-builder`	工具扩展	MCP 服务器构建
skill-creator	`/skill-creator`	工具扩展	自定义 Skill
ralph-loop	`/ralph-loop`	工具扩展	自主迭代循环
summarize-changes	`/summarize-changes`	工具扩展	变更总结

五、项目 Skills 使用手册

5.1 概述

项目 Skills 安装在 {项目根目录}/.claude/skills/，仅对当前项目生效。适用于业务定制代码生成、测试辅助、部署脚本等项目特定能力。

目录结构：

.claude/                        # 项目 Claude 配置根目录
├── CLAUDE.md                  # 项目说明文档（重要！）
├── skills/                    # 项目特定 Skills
│   ├── ruoyi-gen-crud/        # RuoYi CRUD 生成
│   ├── api-test-helper/        # API 测试辅助
│   └── custom-workflows/       # 自定义工作流
└── commands/                  # 自定义命令
    └── gen-crud.sh

⚠️ CLAUDE.md 是核心：Claude Code 每次会话开始时会自动读取 CLAUDE.md，这是向 AI 传递项目上下文的关键文件。

5.2 RuoYi CRUD 生成 Skill

5.2.1 ruoyi-gen-crud

安装位置：.claude/skills/ruoyi-gen-crud/SKILL.md

功能：根据数据库表结构，生成完整的 RuoYi 四层架构代码。

输入：表名 + 字段列表

输出：

domain/xxx.java — 实体类
mapper/xxxMapper.java — Mapper 接口
mapper/xxxMapper.xml — MyBatis XML
service/IxxxService.java — Service 接口
service/impl/xxxServiceImpl.java — Service 实现
controller/xxxController.java — Controller
vue/api/xxx.ts — 前端 API 调用
vue/views/xxx/index.vue — 前端列表页
vue/views/xxx/components/xxxForm.vue — 前端表单

SKILL.md 示例：

---
name: ruoyi-gen-crud
description: RuoYi 框架专用 CRUD 代码生成 — 输入表名和字段列表，生成完整四层架构代码
---

# RuoYi CRUD 生成助手

## 规范要求

### 命名规范
- 实体类：{ModuleName}.java（例：SysUser.java）
- Mapper：{ModuleName}Mapper.java
- Service 接口：I{ModuleName}Service.java
- Service 实现：{ModuleName}ServiceImpl.java
- Controller：{ModuleName}Controller.java
- 表名：sys_{module_name}（小写下划线）

### 包结构
- com.ruoyi.{module}.domain
- com.ruoyi.{module}.mapper
- com.ruoyi.{module}.service
- com.ruoyi.{module}.service.impl
- com.ruoyi.{module}.controller

### 注解使用
- @TableName("sys_xxx") — 实体类映射表
- @TableId — 主键（type = IdType.AUTO 自动增长）
- @TableLogic — 逻辑删除
- @RequiresPermissions — 权限校验

### 前端规范
- API：src/api/{module}/xxx.ts
- 页面：src/views/{module}/xxx/index.vue
- 组件：src/views/{module}/xxx/components/xxxForm.vue

## 使用方式

输入格式：

表名：sys_user
模块：system
说明：用户管理

字段：
id, bigint, 主键, 自增
username, varchar(30), 用户名, not null
password, varchar(100), 密码, not null
email, varchar(50), 邮箱, null
phone, varchar(11), 手机号, null
status, char(1), 状态(0正常 2停用), not null
create_time, datetime, 创建时间, not null

1 2	我将生成完整 CRUD 代码。

使用示例：

用户：生成角色管理模块

/ruoyi:gen-crud

输入：
表名：sys_role
模块：system
说明：角色管理

字段：
id, bigint, 主键, 自增
role_name, varchar(30), 角色名称
role_key, varchar(100), 权限字符
role_sort, int, 显示顺序
status, char(1), 状态
create_time, datetime, 创建时间

Claude：
  ✅ 正在生成角色管理模块 CRUD...

  生成文件列表：
  ✅ domain/SysRole.java
  ✅ mapper/SysRoleMapper.java
  ✅ mapper/SysRoleMapper.xml
  ✅ service/ISysRoleService.java
  ✅ service/impl/SysRoleServiceImpl.java
  ✅ controller/SysRoleController.java
  ✅ vue/api/system/role.ts
  ✅ vue/views/system/role/index.vue
  ✅ vue/views/system/role/components/RoleForm.vue

  ⚠️ 注意事项：
  - 角色权限字符 role_key 唯一性已校验
  - 状态使用 char(1)：0=正常，1=停用
  - 删除角色时检查是否关联用户

5.3 API 测试辅助 Skill

5.3.1 api-test-helper

安装位置：.claude/skills/api-test-helper/SKILL.md

功能：帮助编写和执行 API 测试用例，自动生成 JUnit 测试和 cURL 命令。

SKILL.md 示例：

---
name: api-test-helper
description: API 测试辅助 — 生成 JUnit MockMvc 测试用例和 cURL 测试命令
---

# API 测试助手

## 功能
- 根据 Controller 生成 MockMvc 测试用例
- 生成 cURL 测试命令
- 生成 Apifox/Postman 导入 JSON

## 使用方式
输入 Controller 名称或接口路径

示例：
/api-test generate --controller UserController
/api-test curl --path POST /api/user/create
/api-test apifox --module system

使用示例：

用户：为 UserController 生成测试用例

/api-test generate --controller UserController

Claude：
  ✅ 已生成测试用例

  测试文件：test/java/com/ruoyi/system/controller/SysUserControllerTest.java

  包含测试方法：
  - testListUser() — 分页查询
  - testGetUser() — 查询单个
  - testCreateUser() — 创建用户
  - testUpdateUser() — 更新用户
  - testDeleteUser() — 删除用户
  - testResetPassword() — 重置密码
  - testChangeStatus() — 修改状态

  cURL 命令示例：
  curl -X POST 'http://localhost:8080/api/user/create' \
    -H 'Content-Type: application/json' \
    -d '{"username":"test","password":"123456"}'

5.4 自定义工作流 Skill

5.4.1 工作流封装示例

根据团队实践，可将常用工作流封装为项目级 Skill：

示例：bugfix-workflow（Bug 修复工作流）

---
name: bugfix-workflow
description: 标准化 Bug 修复工作流 — 重现→定位→修复→验证→CodeReview
---

# Bug 修复工作流

## 标准化流程

### 第一步：复现 Bug
1. 获取 Bug 复现步骤
2. 在本地环境复现
3. 记录错误日志和堆栈

### 第二步：定位问题
1. 分析错误日志
2. 查找相关代码
3. 确定根本原因

### 第三步：修复代码
1. 创建修复分支：fix/bug-{id}
2. 编写失败的单元测试（RED）
3. 编写最小修复代码（GREEN）
4. 重构优化（REFACTOR）
5. 运行测试确认通过

### 第四步：验证
1. 单元测试全部通过
2. 集成测试通过
3. 本地功能验证通过

### 第五步：Code Review
1. 提交代码
2. 发起 Code Review
3. 根据反馈修复
4. 合并到主分支

5.5 CLAUDE.md 项目说明模板

# {项目名称} — Claude Code 项目说明

## 项目概述
{description}

## 技术栈
- **后端**：Spring Boot 2.5 + JDK8 + MyBatis-Plus + MySQL + Redis
- **前端**：Vue 3.4 + Ant Design Vue 4.x + Vite 5 + TypeScript
- **框架**：RuoYi（后端）+ VBen Admin（前端）

## 项目结构
{项目目录结构说明}

## 团队规范

### 代码规范
- 分支命名：`feature/功能名` / `fix/bug编号` / `chore/任务名`
- Commit 格式：`[模块] 描述 (#issue)`
- Code Review 通过后才能合并

### API 规范
- RESTful 风格
- 统一响应：`{ code: 200, msg: string, data: any }`
- 分页响应：`{ code: 200, data: { rows: [], total: number } }`
- 错误码规范：见 `docs/api/error-codes.md`

### 前端规范
- 组件：PascalCase（例：UserList.vue）
- 工具函数：camelCase（例：formatDate.ts）
- API 调用：统一使用 `src/api/` 下的封装

## 常用命令
```bash
# 后端启动
mvn spring-boot:run -pl ruoyi-admin

# 前端启动
cd ruoyi-ui && npm run dev

# 代码生成
./scripts/gen-crud.sh --module user

# 运行测试
mvn test / npm run test
```

## 注意事项
- 禁止硬编码敏感信息（使用配置文件或环境变量）
- 数据库变更记录在 `docs/database/changelog.md`
- 所有新增接口必须更新 Swagger 文档

5.6 项目 Skills 速查表

Skill	用途	安装位置
ruoyi-gen-crud	根据表结构生成 RuoYi CRUD	`.claude/skills/ruoyi-gen-crud/`
api-test-helper	API 测试用例生成	`.claude/skills/api-test-helper/`
bugfix-workflow	Bug 修复标准化流程	`.claude/skills/bugfix-workflow/`

六、完整开发流程

6.1 阶段总览

┌─────────────────────────────────────────────────────────────────┐
│                        完整开发流程                               │
├──────────┬──────────┬──────────┬──────────┬──────────┬──────────┤
│ 需求阶段  │ 规划阶段  │ 开发阶段  │ 测试阶段  │ 审查阶段  │ 交付阶段  │
└──────────┴──────────┴──────────┴──────────┴──────────┴──────────┘
     │           │           │           │           │           │
     ▼           ▼           ▼           ▼           ▼           ▼
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│需求澄清   │ │Git初始化  │ │TDD循环    │ │API自动化  │ │Code Review│ │功能验证  │
│规格生成   │ │任务分解   │ │代码生成   │ │UI测试    │ │人工确认   │ │合并发布  │
│           │ │          │ │联调自测   │ │报告生成   │ │归档      │ │文档更新  │
└──────────┘ └──────────┘ └──────────┘ └──────────┘ └──────────┘ └──────────┘

6.2 阶段一：需求阶段

目标：将模糊需求转化为清晰的规格文档

输入：

项目需求说明书（PRD）
详细设计文档
原型文件（Axure / Figma 导出）

流程：

1. 输入需求文档
   ↓
2. AI 读取并理解（/openspec:brainstorm）
   ↓
3. 苏格拉底式提问澄清模糊点
   ↓
4. 生成 SPEC.md 规格文档（/openspec:write-spec）
   ↓
5. 评审确认（产品 + 架构）

输出：SPEC.md — 规格文档

规格文档内容：

# {功能名称} 规格文档

## 1. 需求澄清结果
- [x] 明确的需求点1
- [x] 明确的需求点2

## 2. API 接口定义
| 方法   | 路径            | 说明 | 权限       |
| ------ | --------------- | ---- | ---------- |
| POST   | /api/xxx/create | 创建 | xxx:add    |
| GET    | /api/xxx/{id}   | 详情 | xxx:query  |
| PUT    | /api/xxx/update | 修改 | xxx:edit   |
| DELETE | /api/xxx/{id}   | 删除 | xxx:remove |

## 3. 数据模型
- 表名：sys_xxx
- 字段定义
- 索引设计

## 4. 前端页面
- 路由：/views/xxx/index.vue
- 组件：/views/xxx/components/xxxForm.vue

## 5. 测试用例清单
- [ ] 正常创建
- [ ] 参数校验失败
- [ ] 权限不足
- [ ] 重复数据

6.3 阶段二：规划阶段

目标：将规格文档拆解为可执行的任务计划

输入：SPEC.md 规格文档

流程：

1. 初始化 Git Worktree（/superpower:init）
   ↓
2. 分析功能依赖关系（/planning-with-files）
   ↓
3. 拆解任务为 2-5 分钟粒度（/superpower:write-plan）
   ↓
4. 识别前后端并行任务
   ↓
5. 确定任务依赖顺序
   ↓
6. 输出 PLAN.md 执行计划

输出：PLAN.md — 执行计划

执行计划格式：

# {功能名称} 执行计划

## 任务分解

| #   | 任务               | 负责   | 预计时间 | 依赖 |
| --- | ------------------ | ------ | -------- | ---- |
| 1   | 创建数据库表       | 后端   | 3min     | -    |
| 2   | 生成后端 CRUD 代码 | 后端   | 5min     | 1    |
| 3   | 后端单元测试       | 后端   | 5min     | 2    |
| 4   | 前端 API 接口      | 前端   | 3min     | 2    |
| 5   | 前端列表页面       | 前端   | 5min     | 4    |
| 6   | 前端表单弹窗       | 前端   | 5min     | 5    |
| 7   | 前后端联调         | 前后端 | 5min     | 3,6  |
| 8   | Code Review        | 后端   | 5min     | 7    |

## 前后端并行分析
- 后端任务：1, 2, 3, 7, 8
- 前端任务：4, 5, 6, 7
- 可并行阶段：后端2完成后前端4可开始

## 风险提示
- 关联表需要处理外键约束
- 前端表单需要联动校验

6.4 阶段三：开发阶段

目标：按照 TDD 流程完成代码实现

输入：PLAN.md + SPEC.md

流程：

后端开发流程（RuoYi）

1. 生成 CRUD 代码（/ruoyi:gen-crud）
   ↓
2. TDD 循环：
   ├─ RED：编写单元测试（Assert 失败）
   ├─ GREEN：编写最小实现（Assert 通过）
   └─ REFACTOR：重构优化代码
   ↓
3. 编写业务逻辑（补充 CRUD 之外的逻辑）
   ↓
4. 自测验证（Postman/Apifox）
   ↓
5. 提交代码

前端开发流程（Vue3 + VBen Admin + Ant Design Vue）

1. 创建 API 接口文件（src/api/xxx.ts）
   ↓
2. 创建页面（src/views/xxx/index.vue）
   ├─ 使用 VBen 表格组件（VbenTable）
   ├─ 使用 Ant Design Vue 组件
   └─ 编写查询表单
   ↓
3. 创建表单弹窗（src/views/xxx/components/xxxForm.vue）
   ├─ 新增表单
   └─ 编辑表单（回显数据）
   ↓
4. 前后端联调
   ↓
5. 自测验证
   ↓
6. 提交代码

使用示例：

用户：按 TDD 流程实现用户模块的更新功能

/superpower:execute-plan

Claude（TDD 模式）：

  【RED 阶段】编写失败的测试

  正在生成测试：UserServiceUpdateTest.java

  @Test
  public void testUpdateUser_Success() {
      SysUser user = new SysUser();
      user.setUserId(1L);
      user.setUsername("updated");
      user.setEmail("updated@test.com");

      when(userMapper.updateById(user)).thenReturn(1);

      boolean result = userService.updateUser(user);

      assertTrue(result);
      verify(userMapper).updateById(user);
  }

  运行测试... ❌ FAIL（Entity 缺少 setter）

  【GREEN 阶段】编写最小实现

  正在生成 UserServiceImpl.java
  @Override
  public boolean updateUser(SysUser user) {
      return userMapper.updateById(user) > 0;
  }

  运行测试... ✅ PASS

  【REFACTOR 阶段】优化代码

  优化内容：
  - 添加参数校验
  - 添加日志记录
  - 添加更新前后数据对比

  运行测试... ✅ PASS

  ✅ TDD 循环完成

6.5 阶段四：测试阶段

目标：自动化测试 + UI 验证

输入：代码实现 + SPEC.md

流程：

1. API 自动化测试（JUnit MockMvc）
   ↓
2. UI 自动化测试（/webapp-testing）
   ↓
3. 边界条件测试
   ↓
4. 异常场景测试
   ↓
5. 生成测试报告

测试用例清单：

## 测试用例

### API 测试
| 用例       | 方法   | 路径            | 预期结果 |
| ---------- | ------ | --------------- | -------- |
| 正常创建   | POST   | /api/xxx/create | code=200 |
| 参数缺失   | POST   | /api/xxx/create | code=500 |
| 重复数据   | POST   | /api/xxx/create | code=500 |
| 查询存在   | GET    | /api/xxx/1      | code=200 |
| 查询不存在 | GET    | /api/xxx/999    | code=404 |
| 修改成功   | PUT    | /api/xxx/update | code=200 |
| 删除成功   | DELETE | /api/xxx/1      | code=200 |

### UI 测试
| 用例     | 操作                       | 预期结果               |
| -------- | -------------------------- | ---------------------- |
| 列表加载 | 访问页面                   | 表格正常显示数据       |
| 新增     | 点击新增 → 填写表单 → 提交 | 弹窗关闭，列表刷新     |
| 编辑     | 点击编辑 → 修改 → 保存     | 数据更新，列表同步     |
| 删除     | 点击删除 → 确认            | 弹窗关闭，行从列表移除 |
| 查询     | 输入条件 → 搜索            | 列表按条件过滤         |

6.6 阶段五：审查阶段

目标：代码审查 + 质量门禁

输入：代码实现 + 测试报告

流程：

1. AI 自动 Code Review（/code-review）
   ↓
2. 审查清单逐项检查
   ↓
3. 人工最终确认
   ↓
4. 修复审查问题（如有）
   ↓
5. 归档任务（/superpower:archive）

审查检查项：

## 审查清单

### 代码规范
- [ ] 命名符合 RuoYi 规范
- [ ] 方法行数 < 80 行
- [ ] 注释完整（关键逻辑）
- [ ] 无硬编码配置

### 安全性
- [ ] SQL 参数化查询（#{}）
- [ ] @RequiresPermissions 权限注解
- [ ] 无敏感信息硬编码
- [ ] 输入参数校验

### 性能
- [ ] 查询使用索引
- [ ] 无 N+1 查询
- [ ] 大数据分页
- [ ] 必要时有缓存

### 可维护性
- [ ] 异常处理规范
- [ ] 日志记录
- [ ] 事务边界正确

### 测试覆盖
- [ ] 单元测试覆盖率 > 70%
- [ ] 边界条件覆盖
- [ ] 异常场景覆盖

6.7 阶段六：交付阶段

目标：功能验证 + 合并发布 + 文档更新

输入：审查通过的代码

流程：

1. 功能验证（本地完整流程测试）
   ↓
2. 提交 Pull Request
   ↓
3. CI 检查（编译 + 测试）
   ↓
4. Code Review 审批
   ↓
5. 合并到主分支
   ↓
6. 更新相关文档
   ↓
7. 通知相关人员

6.8 前后端协作时序

前端                        后端                      数据库
 │                           │                          │
 │  1. 打开页面              │                          │
 │──────────────────────────►│                          │
 │                           │  2. GET /api/xxx/list   │
 │                           │─────────────────────────►│
 │                           │  3. 查询数据            │
 │                           │◄─────────────────────────│
 │  4. 渲染列表              │  5. 返回JSON             │
 │◄──────────────────────────│                          │
 │                           │                          │
 │  6. 点击新增              │                          │
 │  7. 填写表单              │                          │
 │──────────────────────────►│                          │
 │                           │  8. POST /api/xxx/create│
 │                           │─────────────────────────►│
 │                           │  9. 插入数据             │
 │                           │◄─────────────────────────│
 │ 10. 关闭弹窗，刷新列表    │ 10. 返回成功            │
 │◄──────────────────────────│                          │

七、质量保证体系

7.1 质量保障总览

维度	工具/方法	目标
需求质量	OpenSpec 需求澄清	需求澄清率 100%
代码质量	Superpowers TDD	测试覆盖率 > 70%
架构质量	Superpowers Review	重大缺陷拦截率 100%
UI 质量	web-design-guidelines	设计规范符合率 > 90%

7.2 各阶段质量检查点

需求阶段检查点

□ 需求文档已完整输入
□ 模糊需求已通过 Brainstorm 澄清
□ 规格文档（SPEC.md）已生成
□ 技术选型已确认
□ 风险点已识别
□ 评审已通过（产品 + 架构）

规划阶段检查点

□ Git Worktree 已创建
□ 任务已拆解为 2-5 分钟粒度
□ 前后端并行任务已识别
□ 依赖关系已梳理
□ 计划文档（PLAN.md）已生成
□ 评审已通过（技术 + 产品）

开发阶段检查点

□ TDD 循环已执行（RED → GREEN → REFACTOR）
□ 单元测试已编写且通过
□ 代码符合 RuoYi/VBen Admin 规范
□ 前后端 API 接口已对齐
□ 自测已通过
□ Code Review 已提交

测试阶段检查点

□ API 自动化测试用例 > 20/接口
□ 边界条件测试已覆盖
□ 异常场景测试已覆盖
□ UI 测试已通过（/webapp-testing）
□ 集成测试已通过

审查阶段检查点

□ 安全性检查已通过（/code-review）
□ 可维护性检查已通过
□ 性能检查已通过
□ 测试覆盖率检查已通过
□ 代码规范检查已通过
□ 人工确认已通过

7.3 RuoYi 专项代码规范

后端代码规范

// 命名规范
public class SysUser {}           // 实体类：模块+实体名
public interface ISysUserService {} // 业务接口：I+模块+实体名+Service
public class SysUserServiceImpl {}  // 业务实现：模块+实体名+ServiceImpl
public class SysUserMapper {}       // Mapper：模块+实体名+Mapper
public class SysUserController {}    // Controller：模块+实体名+Controller

// 包结构
com.ruoyi.{module}.domain       // 实体和领域模型
com.ruoyi.{module}.mapper       // 数据访问层
com.ruoyi.{module}.service      // 业务接口
com.ruoyi.{module}.service.impl // 业务实现
com.ruoyi.{module}.controller   // 控制层

// 注解使用
@RestController                  // REST 控制器
@RequestMapping("/api/xxx")      // 请求映射
@RequiresPermissions("xxx:xxx")  // 权限校验
@Service                         // 业务层
@TableName("sys_xxx")           // 表映射
@TableId(type = IdType.AUTO)    // 主键策略
@TableLogic                     // 逻辑删除

前端代码规范（VBen Admin + Ant Design Vue）

// 命名规范
// 文件：kebab-case
userList.vue        // 页面组件
useUserInfo.ts      // Hook 函数
formatDate.ts       // 工具函数

// 组件：PascalCase
UserList.vue        // 页面组件
UserForm.vue        // 表单组件
TableColumn.vue     // 表格列配置

// 常量：UPPER_SNAKE_CASE
const API_BASE_URL = '/prod-api'
const PAGE_SIZE = 10

// API 封装
// src/api/system/user.ts
import { request } from '@/utils/request'
import { AxiosRequestConfig } from 'axios'

export const getUserList = (params: any) =>
  request.get('/system/user/list', { params })

export const createUser = (data: any) =>
  request.post('/system/user/create', data)

// 组件使用 Ant Design Vue
// <a-table>, <a-form>, <a-modal>, <a-input>, <a-select>

7.4 安全质量保障

安全检查清单

## 安全检查清单

### SQL 注入
- [ ] 所有 SQL 使用 #{} 参数化查询
- [ ] 禁止使用 ${} 字符串拼接
- [ ] LIKE 查询使用 ${_parameter}%（需手动处理）

### XSS 防护
- [ ] 用户输入内容在后端转义
- [ ] 富文本内容使用白名单过滤
- [ ] 前端使用 {{ }} 而非 v-html

### 权限控制
- [ ] 每个接口都有 @RequiresPermissions
- [ ] 数据级别权限校验（只能操作自己的数据）
- [ ] 敏感操作有日志记录

### 敏感信息
- [ ] 密码使用 BCrypt 加密存储
- [ ] 数据库密码不在代码中硬编码
- [ ] Token/Key 不打印在日志中
- [ ] 错误信息不泄露系统路径

### 接口安全
- [ ] 接口有请求频率限制
- [ ] 重要接口有验证码/Token 校验
- [ ] CORS 配置正确

7.5 性能质量保障

性能检查清单

## 性能检查清单

### 数据库
- [ ] WHERE 条件字段有索引
- [ ] 避免 SELECT *，只查需要的字段
- [ ] 大数据量查询使用分页（PageHelper）
- [ ] 批量操作使用 batch
- [ ] 避免 N+1 查询（使用 JOIN 或批量查询）

### 缓存
- [ ] 热点数据使用 Redis 缓存
- [ ] 缓存设置过期时间
- [ ] 更新时清除缓存（CacheEvict）

### 前端
- [ ] 图片懒加载
- [ ] 路由懒加载（defineAsyncComponent）
- [ ] 大列表虚拟滚动
- [ ] 避免不必要的重渲染（computed + shallowRef）
- [ ] 打包优化（Tree Shaking, 代码分割）

八、快速开始指南

8.1 环境准备

必需环境

软件	版本	说明
Node.js	>= 18.x	前端运行
JDK	8	后端运行
Maven	3.8.x	后端构建
Git	2.30+	版本控制
MySQL	5.7 / 8.0	数据库
Redis	6.x	缓存

Claude Code 安装

# macOS
brew install anthropic/claude-code/claude

# Linux
curl -s https://claudecode.com/install.sh | sh

# 验证安装
claude --version

8.2 全局 Skills 一键安装

#!/bin/bash
# setup-global-skills.sh
# 全局 Skills 一键安装脚本

echo "开始安装全局 Skills..."

# 添加市场
claude plugin marketplace add anthropic/skills 2>/dev/null || true
claude plugin marketplace add obra/superpowers-marketplace 2>/dev/null || true
claude plugin marketplace add daymade/claude-code-skills 2>/dev/null || true
claude plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill 2>/dev/null || true

# 安装核心流程
claude plugin install superpowers@superpowers-marketplace 2>/dev/null || true

claude plugin install code-review 2>/dev/null || true
claude plugin install ui-ux-pro-max@ui-ux-pro-max-skill 2>/dev/null || true
claude plugin install frontend-design 2>/dev/null || true
claude plugin install example-skills@anthropic-agent-skills 2>/dev/null || true
claude plugin install document-skills@anthropic-agent-skills 2>/dev/null || true
claude plugin install skill-creator 2>/dev/null || true
claude plugin install ralph-loop@claude-plugins-official 2>/dev/null || true

# 安装 ummarize-changes（Node.js）
npx skills add https://github.com/oimiragieo/agent-studio --skill summarize-changes 2>/dev/null || true

# 安装 planning-with-files（Node.js）
npx skills add OthmanAdi/planning-with-files --skill planning-with-files 2>/dev/null || true

# 安装 web-design-guidelines（Node.js）
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines 2>/dev/null || true

# 安装 gstack（Node.js）
npx skills add https://github.com/garrytan/gstack --skill gstack 2>/dev/null || true

echo "✅ 全局 Skills 安装完成！"
echo "使用 /help 或 / 查看所有可用命令"

8.3 项目初始化

后端初始化（RuoYi）

# 克隆 RuoYi
git clone https://gitee.com/y_project/RuoYi-Vue.git
cd RuoYi-Vue

# 导入数据库
mysql -u root -p < sql/quartz.sql
mysql -u root -p < sql/ruoyi.sql

# 修改配置文件
vim ruoyi-admin/src/main/resources/application-druid.yml
# 修改数据库连接信息
# 修改 Redis 连接信息

# 启动后端
mvn spring-boot:run -pl ruoyi-admin

# 访问 Swagger UI
# http://localhost:8080/swagger-ui/index.html
# 默认账号：admin / admin123

前端初始化（VBen Admin）

# 克隆 VBen Admin
git clone https://github.com/vbenjs/vue-vben-admin.git
cd vue-vben-admin

# 安装依赖
npm install

# 修改接口配置
# .env.development — 开发环境 API 地址
VITE_APP_API_URL=http://localhost:8080/prod-api

# 启动前端
npm run dev

# 访问
# http://localhost:5173

项目 Claude Code 初始化

#!/bin/bash
# setup-project.sh
# 项目 Claude Code 环境初始化

set -e

echo "初始化项目 Claude Code 环境..."

# 创建目录结构
mkdir -p .claude/{skills,commands,hooks}

# 生成 CLAUDE.md
cat > .claude/CLAUDE.md << 'EOF'
# {项目名称} — Claude Code 项目说明

## 项目概述
基于 RuoYi + VBen Admin 的企业级后台管理系统。

## 技术栈
- 后端：Spring Boot 2.5 + JDK8 + MyBatis-Plus + MySQL + Redis
- 前端：Vue 3.4 + Ant Design Vue 4.x + Vite 5 + TypeScript

## 团队规范
- 分支命名：feature/ | fix/ | chore/
- Commit 格式：[模块] 描述
- 所有接口必须更新 Swagger 文档

## 常用命令
# 后端启动
mvn spring-boot:run -pl ruoyi-admin

# 前端启动
cd ruoyi-ui && npm run dev
EOF

# 安装项目级 Skills
mkdir -p .claude/skills/ruoyi-gen-crud
cat > .claude/skills/ruoyi-gen-crud/SKILL.md << 'SKILL_EOF'
---
name: ruoyi-gen-crud
description: RuoYi 框架专用 CRUD 代码生成
---
# RuoYi CRUD 生成助手
...

SKILL_EOF

echo "✅ 项目初始化完成！"
echo ""
echo "下一步："
echo "1. 编辑 .claude/CLAUDE.md 添加项目说明"
echo "2. 运行全局安装脚本"
echo "3. 开始开发！"

8.4 第一个功能开发示例

场景：实现商品管理模块的 CRUD

步骤 1：需求澄清

/openspec:brainstorm

# 描述需求
实现商品管理模块，包括：
- 商品列表查询（分页、名称搜索、分类筛选）
- 商品新增
- 商品编辑
- 商品删除（支持批量删除）
- 商品详情查看

步骤 2：生成规格文档

1
2
3

/openspec:write-spec

# AI 生成 SPEC.md

步骤 3：初始化 + 规划

/superpower:init
# 输入：product-management
# AI 创建 Git Worktree 和新分支

/superpower:write-plan
# AI 生成 PLAN.md

步骤 4：开发（TDD 强制）

# 后端：生成 CRUD 代码
/ruoyi:gen-crud
# 输入：表名 sys_product，字段列表

# TDD 开发
/superpower:execute-plan
# RED → GREEN → REFACTOR

步骤 5：测试

# API 测试
/api-test generate --controller ProductController

# UI 测试
/webapp-testing
# 测试商品列表、新增、编辑、删除流程

步骤 6：审查

1
2
3

/code-review
# AI 输出审查报告
# 修复问题

步骤 7：交付

1
2
3

/superpower:archive
# 合并 Worktree，清理分支
# 提交 PR，更新文档

8.5 常用命令速查

命令	功能	场景
`/openspec:brainstorm`	需求澄清	需求模糊时
`/openspec:write-spec`	生成规格文档	需求确定后
`/planning-with-files`	基于文件规划	规划任务时
`/superpower:init`	Git 初始化	开始新功能前
`/superpower:write-plan`	编写计划	需求明确后
`/superpower:execute-plan`	执行（TDD）	开发阶段
`/superpower:review`	代码审查	开发完成后
`/superpower:archive`	归档	功能完成确认后
`/ruoyi:gen-crud`	生成 CRUD	后端开发
`/api-test generate`	生成 API 测试	测试阶段
`/webapp-testing`	UI 测试	测试阶段
`/code-review`	代码审查	审查阶段
`/frontend-design`	前端最佳实践	前端开发
`/ui-ux-pro-max`	UI 设计	页面设计
`/pdf` / `/word` / `/pptx` / `/xlsx`	文档处理	文档生成

附录

A. 相关资源

资源	链接
Superpowers	github.com/obra/superpowers
RuoYi	ruoyi.vip
VBen Admin	github.com/vbenjs/vue-vben-admin
Ant Design Vue	antdv.com
Claude Code 官方文档	code.claude.com/docs

B. 版本历史

版本	日期	更新内容
v1.0	2026-05-20	初始版本
v2.0	2026-05-20	结构重组，技术栈调整为 JDK8+RuoYi+VBen，移除 Docker 和部署内容

文档版本：v2.0
最后更新：2026-05-20

本文链接： https://www.geniux.top/article/2342e29fe2d5/

版权声明： 本博客所有文章除特别声明外，均采用 CC BY 4.0 CN协议许可协议。转载请注明出处！

CaoZHProgrammer

学习使我快乐。