面向开发团队的 AI 编程助手实战手册
基于 InitWork 项目真实案例
Claude Code 是 Anthropic 官方推出的命令行 AI 编程助手,直接在终端中运行。与 GitHub Copilot 等补全类工具不同,它是一个自主代理 (Agent):你描述需求,它自己规划步骤、读代码、写代码、验证结果。
| 场景 | 传统方式 | Claude Code |
|---|---|---|
| 修复 bug | 看报错 → 搜代码 → 读逻辑 → 改代码 → 测试 | 描述现象,AI 自动定位根因并修复 |
| 新增 CRUD | 手动创建 Entity / Mapper / Service / Controller / 前端 | 一句话生成全套代码 |
| 代码审查 | 逐文件看 diff | AI 分析所有变更,指出潜在问题 |
| 排查问题 | 看日志 → 查数据库 → 读代码 | AI 同时查日志、查库、读代码,交叉分析 |
# 需要 Node.js 18+
npm install -g @anthropic-ai/claude-code
# 在项目根目录启动
cd your-project
claude
首次启动会引导你登录 Anthropic 账号并授权。
在项目根目录创建 CLAUDE.md,作为 AI 的"项目说明书"。每次启动时自动读取。
# 项目名称
## 技术栈
- 后端: Spring Boot 3 + MyBatis-Plus + MySQL 8
- 前端: Vue 3 + TypeScript + Element Plus
## 目录结构
backend/ # Spring Boot 后端
frontend/ # Vue 3 前端
## 命名规范
- 数据库: snake_case (sys_user)
- Java: camelCase (userName)
## 常用命令
cd backend && mvn spring-boot:run
cd frontend && npm run dev
## 数据库连接
mysql -h localhost -u root -p mydb
启动后直接输入自然语言,Claude 会自动判断需要做什么:
你: 帮我看看 UserController 里面有没有参数校验
Claude: [自动读取文件] → [分析代码] → [给出回答和建议]
以下全部来自 InitWork 项目今天的真实使用场景。
问题:异常日志页面点击"详情"按钮,弹窗里所有字段都是空的,"异常信息"却显示"操作成功"。
我的操作:截图 + 一句话
http://localhost:5173/log/exceptionlog 点击详情全部显示空白 这样的不对吧
[粘贴截图]
Claude 的分析过程(约 2 分钟):
exceptionlog/index.vue 并读取handleDetail 调用了详情 API"id":2029023787860660226(数字,不是字符串)我的操作:
ai任务这个菜单没有用 把这个删除了在数据库里面
Claude 自动执行:
-- 1. 先查出相关菜单(不会直接删!)
SELECT id, parent_id, menu_name, path FROM sys_menu
WHERE menu_name LIKE '%AI%' OR path LIKE '%ai-task%';
-- 结果: 100 | AI任务 | /ai-task
-- 101 | 工作台 | work-item (子菜单)
-- 2. 确认后才执行删除
DELETE FROM sys_menu WHERE id IN (100, 101);
提交代码吧
问题:切换分支后前端报错 Failed to resolve import "qiniu-js"
我的操作:粘贴报错信息
"这个页面有 bug"
"http://localhost:5173/log/exceptionlog 点击详情弹窗字段全部空白 [截图]"
AI 能处理的上下文类型:
看看 src/api/request.ts 比"看看请求封装"更精准# 分步引导比一次性说完效果好
第一步: "先帮我看看现有的用户模块是怎么实现的"
第二步: "参照这个模式,新增一个通知模块"
第三步: "再加上前端页面"
Claude Code 集成 Playwright,可以自动打开页面截图、点击按钮、填写表单、抓取网络请求和控制台日志。
看看我这次改动有没有问题
AI 会检查:安全漏洞、逻辑错误、性能问题、规范违反。
| 场景 | 说明 |
|---|---|
| Bug 排查与修复 | 跨文件、跨技术栈的问题定位 |
| CRUD 代码生成 | Entity / Mapper / Service / Controller / 前端页面一条龙 |
| 代码重构 | 批量重命名、模式迁移 |
| 数据库操作 | 查询、建表、数据修复 |
| 配置与环境问题 | 依赖冲突、编译报错、启动失败 |
| 文档生成 | 根据代码生成 API 文档、README |
| Git 操作 | 提交、合并、创建 PR |
/cost 查看npm install -g @anthropic-ai/claude-codecd your-project && claude# 了解项目
帮我梳理一下这个项目的目录结构和技术栈
# 读代码
看看 src/api/request.ts 这个文件是做什么的
# 找代码
项目里哪些地方用到了 WebSocket
# 改代码
把 UserController 里的 getById 方法加上参数校验
# 修 bug
[粘贴报错截图] 这个报错怎么修
# 数据库
帮我查一下 sys_user 表里有多少条数据
# 提交代码
帮我提交一下代码