AI驱动全栈开发工具链使用指南

第一部分：工具介绍与基础用法

1. AI编程核心：ClaudeCode

是什么：Anthropic 推出的命令行AI工具（类似Cursor的终端版），能够理解整个代码库，执行读写文件、运行命令、提出修改建议等操作。它是你的“副驾驶”。
怎么用：
- 初始化：在项目根目录终端输入 claude 或 claude-code 启动。
- 交互：直接用自然语言描述需求，例如：“帮我创建一个React组件，功能是...” 或 “解释一下这个函数的作用”。
- 执行：它会生成代码并询问你是否应用更改，你可以直接回复“应用”或提出修改意见。

2. 轻量设计稿工具：Pencil

是什么：一个开源的原型设计工具，用于快速绘制线框图和高保真UI设计。相比Figma，它更轻量，且文件基于本地。
怎么用：
- 绘制草图：拖拽控件（按钮、输入框、容器）到画布，快速构建页面布局。
- 导出规范：在设计完成后，可以导出为图片或嵌入到文档中，作为OpenSpec的视觉输入。

3. 规范与文档驱动：OpenSpec

是什么：一个基于Markdown的规范管理工具（或指一种“规范即代码”的理念）。它帮助你将需求、API设计、数据结构写成结构化的文档，并能被AI理解。
怎么用：
- 编写需求：在VS Code中创建 .md 文件，使用特定的模板（如用户故事、验收标准）编写。
- 生成代码：将写好的 OpenSpec 文档提供给 ClaudeCode，它会严格按照规范生成对应的后端API路由或前端数据模型。

4. 智能调试助手：Chrome-devtools MCP

是什么：MCP（Model Context Protocol）是一种让AI与外部工具交互的协议。Chrome-devtools MCP 允许AI（如ClaudeCode）直接连接到你的浏览器，查看控制台日志、网络请求、DOM元素状态。
怎么用：
- 连接：启动调试模式，MCP服务器会与Chrome建立连接。
- 自动化调试：当程序报错时，你可以对ClaudeCode说：“捕获刚才的Chrome报错，分析原因并给出修复方案。” AI会自动读取Console错误栈和Network面板信息。

5. 开发大本营：VS Code

是什么：集成开发环境。
怎么用：作为所有工具的“收纳盒”。你将在这里打开终端运行ClaudeCode，打开Markdown编写OpenSpec，打开项目文件夹，并安装各类插件来预览Pencil导出的图片或运行调试任务。

第二部分：VS Code 环境整合配置

为了让上述工具在 VS Code 中协同工作，需进行以下配置：

1. 终端配置 (用于 ClaudeCode)

VS Code 的内置终端是运行 ClaudeCode 的最佳场所。

打开 VS Code 终端 (Ctrl + ~)。
确保终端 Shell 为 zsh 或 bash。
在 .zshrc 或 .bashrc 中配置 Anthropic API Key：

export ANTHROPIC_API_KEY="your_api_key_here"

2. MCP 服务器配置 (用于 Chrome-devtools)

为了让 ClaudeCode 能调用 Chrome 调试功能，需配置 MCP。

在项目根目录或全局配置中创建 claude_mcp.json (或根据 ClaudeCode 最新文档配置 ~/.config/claude-code/settings.json)：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-chrome-devtools"]
    }
  }
}

注意：运行 Chrome 时需开启远程调试端口：

# Mac 示例
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

3. 规范与插件支持 (用于 OpenSpec & Pencil)

在 VS Code 扩展商店安装以下插件：

Swagger Viewer：用于预览 OpenSpec 定义的 API 文档。
Pencil Project (如有插件) 或 Image Preview：用于查看 Pencil 导出的设计图。
YAML：支持 OpenAPI 规范的高亮和校验。

第三部分：端到端开发工作流 (从需求到测试)

本流程展示了如何利用工具链，将一句粗略的想法转化为可运行的软件。

阶段 1：需求分析与文档 (Requirement)

目标：将模糊想法转化为结构化 PRD。

操作：在 VS Code 终端启动 claude。
提示词："我有一个想法：做一个个人任务管理看板，支持拖拽、标签和截止日期。请帮我生成一份详细的产品需求文档 (PRD)，包含用户故事、功能列表和非功能需求。输出为 docs/PRD.md。"
结果：ClaudeCode 分析后创建 docs/PRD.md。
人工审核：在 VS Code 中打开文档，修改不合理处，保存。

阶段 2：架构与 API 规范 (Architecture & OpenSpec)

目标：定义系统骨架和数据契约。

操作：继续与 ClaudeCode 对话。
提示词："基于 PRD.md，请设计系统架构。推荐使用 Next.js + Node.js + PostgreSQL。请生成 OpenAPI 3.0 规范文件 openapi.yaml，定义所有 RESTful 接口。"
工具联动：
- ClaudeCode 生成 openapi.yaml。
- 在 VS Code 中使用 Swagger Viewer 预览接口文档，确认字段无误。
- 若有修改，直接编辑 YAML 或让 Claude 修改。
产出：docs/Architecture.md, specs/openapi.yaml。

第三部分：端到端开发工作流 (Java + Vue)

本流程展示如何从需求到交付， specifically 针对 Spring Boot + Vue 3 架构。

阶段 1：需求分析与文档 (Requirement)

目标：明确业务逻辑。

操作：VS Code 终端启动 claude。
提示词："我要开发一个企业员工管理系统。后端使用 Java Spring Boot，前端使用 Vue 3 + TypeScript。请生成 PRD 文档，包含员工增删改查、部门管理、权限控制。输出为 docs/PRD.md。"
结果：ClaudeCode 创建需求文档。

阶段 2：架构与 API 规范 (Architecture & OpenSpec)

目标：定义 Java DTO 和 Vue API 类型。

操作：继续与 ClaudeCode 对话。
提示词："基于 PRD，设计 RESTful API。生成 openapi.yaml 文件。要求：
1. 定义所有接口路径、方法、请求/响应 schema。
2. 响应格式统一为 { code, message, data }。
3. 包含分页参数定义。"
工具联动：
- 在 VS Code 中用 Swagger Viewer 检查接口定义。
- 关键步骤：让 ClaudeCode 根据 openapi.yaml 生成 Java DTO 类骨架和 Vue 的 TypeScript 接口定义。"根据 openapi.yaml，生成 Java DTO 类到 backend/src/main/java/com/example/dto，生成 TypeScript 类型定义到 frontend/src/types/api.ts。"
产出：specs/openapi.yaml, Java DTOs, Vue Types。

阶段 3：UI 原型设计 (UI Design)

目标：确定 Vue 页面布局。

操作：打开 Pencil。
动作：
- 绘制“员工列表页”（表格、搜索框、分页）和“新增员工弹窗”。
- 导出截图到 frontend/designs/。
AI 转换：
- 提示词："参考 frontend/designs/employee_list.png，使用 Vue 3 + Element Plus (或 Ant Design Vue) 生成页面组件 EmployeeList.vue。包含表格、搜索表单和分页逻辑。"
产出：frontend/src/views/EmployeeList.vue (UI 结构)。

阶段 4：功能详细设计与代码生成 (Implementation)

目标：实现业务逻辑。

后端生成 (Java)：
- 提示词："基于 openapi.yaml 中的 /api/employees 接口，生成 Spring Boot Controller、Service 和 MyBatis/JPA Repository 代码。包含参数校验 (@Valid) 和全局异常处理。"
- ClaudeCode 自动创建 .java 文件，并修改 pom.xml 添加依赖。
前端生成 (Vue)：
- 提示词："生成 API 调用服务 frontend/src/api/employee.ts，使用 Axios 封装。然后在 EmployeeList.vue 中调用该接口，实现数据加载和搜索功能。"
跨域配置：
- 提示词："配置 Spring Boot 允许前端 localhost:5173 的 CORS 请求。"
产出：完整的后端逻辑与前端交互代码。

阶段 5：调试与自动化测试 (Debug & Test)

目标：联调与修复。

启动服务：
- 让 ClaudeCode 运行：mvn spring-boot:run (后端) 和 npm run dev (前端)。
Chrome MCP 调试：
- 场景：前端点击“保存”按钮无反应。
- 提示词："连接 Chrome MCP，检查控制台错误。查看网络请求是否发送，响应状态码是多少。如果是 500 错误，读取后端日志文件 logs/application.log 分析原因。"
- 机制：
  1. MCP 读取浏览器 Console/Network。
  2. 发现 500 错误。
  3. ClaudeCode 读取后端日志文件。
  4. 发现 Java 空指针异常。
  5. ClaudeCode 修改 Java 代码并重启服务。
生成测试用例：
- 后端：生成 JUnit + Mockito 测试类 (src/test/java/...)。
- 前端：生成 Vitest 单元测试或 Playwright 端到端测试。"为 EmployeeService 生成 JUnit 测试用例。为 EmployeeList.vue 生成 Vitest 测试用例。"

阶段 6：交付与构建 (Delivery)

构建检查：
- 后端：mvn clean package
- 前端：npm run build
Docker 化：
- 提示词："生成 Dockerfile 用于后端 Java 应用，生成 docker-compose.yml 编排 Java 应用、Vue nginx 服务和 MySQL 数据库。"

第四部分：Java + Vue 特定最佳实践

类型安全闭环：
- 利用 OpenSpec 确保 Java DTO 字段与 Vue TypeScript 接口完全一致。如果修改了数据库字段，先改 OpenAPI 规范，再让 AI 同步两端代码，避免 Property 'xxx' does not exist on type 错误。
Vue 响应式陷阱：
- 在让 ClaudeCode 生成 Vue 代码时，明确要求使用 Composition API (<script setup>) 和 ref/reactive，避免它生成过时的 Options API 代码。
- 提示词示例："请使用 Vue 3 Composition API 风格，避免使用 this。"
Java 异常处理：
- 要求 AI 生成全局异常处理器 (@ControllerAdvice)，确保后端错误能以统一的 JSON 格式返回给前端，方便 Vue 的 Axios 拦截器处理。
MCP 调试局限：
- Chrome-devtools MCP 只能调试前端和网络。对于 Java 后端逻辑错误（如事务回滚失败、SQL 逻辑错误），需引导 ClaudeCode 读取 后端日志文件 或使用 Java Debug Adapter (VS Code 自带) 配合。
依赖管理：
- Java 的 pom.xml 或 build.gradle 修改后，记得让 ClaudeCode 执行 mvn dependency:resolve 或 IDE 刷新，确保包下载成功。
代码审查：
- Java：重点审查 SQL 注入风险、事务注解 (@Transactional) 位置、空指针处理。
- Vue：重点审查内存泄漏（定时器未清除）、大列表渲染性能（虚拟滚动）、敏感信息泄露。