把前六章的技术融会贯通，打造一流的 AI 辅助开发工作流
假设你负责一个名为 「TaskFlow」的全栈项目：
让 Claude 了解你的项目：
/init这会在项目根目录生成 CLAUDE.md，Claude 之后每次运行都会自动读取它来了解项目。
编辑 .claude/settings.json，让 Claude 能直接操作数据库和 GitHub：
{
"mcpServers": {
"postgres": {
"command": "npx",
"args": ["@anthropic-ai/mcp-server-postgres"],
"env": {
"DATABASE_URL": "postgresql://localhost:5432/taskflow_dev"
}
},
"github": {
"command": "npx",
"args": ["@anthropic-ai/mcp-server-github"],
"env": {
"GITHUB_TOKEN": "${GITHUB_TOKEN}"
}
}
}
}在 ~/.claude/settings.json 中添加自动化：
{
"hooks": {
"PostToolUse": [
{
"command": "if echo \"$CLAUDE_TOOL_INPUT\" | grep -q '\\.tsx\\|\\.ts'; then npx prettier --write \"$(echo $CLAUDE_TOOL_INPUT | jq -r '.file_path')\" 2>/dev/null; fi",
"matcher": "Edit|Write",
"description": "修改 TS/TSX 文件后自动格式化"
}
],
"Stop": [
{
"command": "npx tsc --noEmit 2>&1 | head -5",
"matcher": "",
"description": "完成后检查 TypeScript 类型"
}
]
}
}下面是一步步的实际操作，你可以跟着做。每条 "你：" 后面的内容就是你在 Claude Code 中输入的话。
你打开终端，进入 TaskFlow 项目目录，启动 Claude Code，然后输入：
你：我要给 TaskFlow 添加用户头像上传功能。请先帮我设计实现方案，
包括：前端用什么组件、后端 API 怎么设计、数据库要不要加字段、
文件存在哪里。输出一个清晰的实现计划。Claude 会分析你的项目结构（读取现有代码），然后输出一份详细的实现计划，包括文件清单和步骤。
Claude 会自动派出 Explore 子代理同时搜索：
Claude 内部自动执行：
→ Explore 子代理 A：搜索项目中是否有现成的文件上传逻辑
→ Explore 子代理 B：搜索 users 表结构和用户相关的 API 路由几秒钟后，Claude 汇总结果告诉你：「项目中尚无文件上传逻辑，users 表有 avatar_url 字段但未使用，用户 API 在 src/api/users.ts。」
你继续输入：
你：创建一个 worktree，在隔离环境中帮我实现头像上传功能Claude 会调用 EnterWorktree，创建一个类似 .claude/worktrees/avatar-upload/ 的独立目录。之后的所有改动都在这个隔离环境中，不影响你的主工作区。
在 worktree 中，你逐段告诉 Claude 要做什么：
你：先创建数据库迁移文件，给 users 表加 avatar_url 字段
你：在 src/api/users.ts 中添加 POST /api/users/avatar 端点，
接收文件上传，校验类型和大小，保存到 uploads/avatars/ 目录，
返回文件 URL
你：前端在 src/components/UserProfile.tsx 中添加头像上传组件，
包括拖拽上传区域、预览、上传进度条每发一条，Claude 就写对应的代码。中间的 PostToolUse Hook 会自动运行 prettier 格式化、TypeScript 类型检查。
你：/reviewClaude 自动检查所有改动，输出结构化审查报告。重点关注：文件类型校验是否严格、大小限制是否合理、有没有路径遍历风险。
你：/security-reviewClaude 对文件上传功能做深度安全扫描。如果发现「未限制文件类型可能导致上传恶意脚本」，会直接告诉你并给出修复建议。
你：帮我在浏览器中测试头像上传功能：
1. 打开 http://localhost:3000/profile
2. 截图看看页面长什么样
3. 点击头像上传按钮
4. 选择一个测试图片
5. 截图确认预览是否正常
6. 点击保存
7. 截图确认头像是否更新成功Claude 通过 Puppeteer MCP 自动打开 Chrome，一步步操作，每步截图给你看。
你：功能没问题，退出 worktree，保留改动
Claude 退出 worktree 后：
你：帮我把 worktree 分支的改动合并到 main 分支，然后推送到 GitHub，
并创建一个 PR，标题是「feat: 添加用户头像上传功能」Claude 用 GitHub MCP 自动创建 PR，写好描述，关联相关 Issue。
你：/loop 15m "检查刚创建的 PR，看 CI 是否通过、有没有人 review"Claude 每 15 分钟自动检查一次，CI 失败或有人评论时主动通知你。
下面演示从收到 bug 报告到修复上线的完整操作。
你：有用户反馈登录页面偶尔会白屏。帮我排查可能的原因。
先找出所有与登录相关的代码，包括：
- 登录页面组件
- 登录 API 调用
- token 存储和刷新逻辑
- 错误处理和异常边界Claude 派出 Explore 子代理并行搜索，找到 src/pages/Login.tsx、src/api/auth.ts、src/utils/token.ts 等关键文件。
Claude 读取代码后自动分析：
Claude：我发现了问题。在 src/api/auth.ts 第 42 行，当 token 过期
时 API 返回 401，但 try-catch 只处理了网络错误，没有处理 401 响应。
组件在收到异常后 state 变成了 undefined，导致白屏。
根本原因：缺少 token 过期处理 + 组件没有错误边界保护。你：创建一个 worktree，在其中修复这个问题：
1. src/api/auth.ts 中处理 401，自动刷新 token 或跳转登录页
2. src/pages/Login.tsx 外包一个错误边界组件
3. 加一个优雅的降级 UI（而不是白屏）Claude 在隔离环境中依次修改这些文件。
PostToolUse Hook 自动运行了 npm test 和 prettier。然后你手动审查：
你：/review
# Claude 输出审查报告，确认修复逻辑正确...
# 你确认无误后：
你：/security-review
# 安全审查通过你：帮我用浏览器自动化测试登录页面，覆盖以下场景：
1. 正常用户名密码登录 → 截图确认进入首页
2. 错误的密码 → 截图确认有错误提示（不是白屏）
3. 使用过期的 token 访问 → 截图确认自动跳转登录页
4. 什么都不填直接提交 → 截图确认有表单校验提示Claude 通过 Puppeteer MCP 逐一测试，每步截图确认。所有场景通过。
你：测试全部通过。退出 worktree 保留改动，合并到 main，
创建 PR 标题「fix: 修复 token 过期导致登录页白屏」，
描述里关联 bug issue #567。假设你已经配置好了 PostgreSQL MCP。看看有多简单。
你：帮我查一下 users 表的结构，看看有哪些字段和索引Claude 自动调用 PostgreSQL MCP，执行 \d users，列出表结构：
Claude：users 表有如下字段：
- id (uuid, PK)
- email (varchar, unique)
- created_at (timestamp)
- last_login_at (timestamp)
- ...共 8 个字段你：帮我写 SQL 计算最近 30 天注册用户的 7 日留存率。
先写查询，然后直接执行。Claude 写出 SQL，调用 MCP 执行，直接展示结果：
Claude：查询结果：
| 注册日期 | 注册数 | 7日后活跃 | 留存率 |
|-----------|-------|----------|--------|
| 2026-05-15| 1,240 | 312 | 25.2% |
| 2026-05-16| 1,189 | 289 | 24.3% |
| ... | ... | ... | ... |
| 最近一周平均留存率：23.8%你：留存率 23.8% 算正常吗？帮我对比上个月的数据。
再按注册渠道（来源）分组看看留存率差异。Claude 继续查询、分析：
Claude：上月平均留存率 28.1%，本月下降了 4.3 个百分点。
按渠道分组：
- 自然搜索：31.2%（正常）
- 付费广告：18.5%（偏低！）
- 邀请链接：35.7%（最好）
问题可能出在付费广告渠道的用户质量上。
建议：检查广告投放的目标人群定位。你：把刚才的分析结果整理成报告，用 GitHub MCP 创建一个 issue，
标题是「6月用户留存率分析报告」，把数据和你的分析建议写进去，
assign 给我，打上 analytics 标签。Claude 写好 Markdown 格式的分析报告，调用 GitHub MCP 创建 issue。
以下是打造完整工作流需要配置的内容：
养成习惯后，你的日常开发节奏会变成：
上午 9:00 — Claude："昨晚的 CI 跑完了，3 个通过，1 个失败。失败原因是..."
上午 9:30 — 你："帮我在 worktree 中修复这个 CI 失败的测试"
上午 10:00 — Claude："修复完成，测试通过，要我创建 PR 吗？"
上午 10:05 — 你："创建 PR，然后 /security-review"
上午 10:30 — 你："开始实现新功能，/review 一下上次的代码"
下午 2:00 — 你："帮我并行研究三个状态管理方案，分别评估"
下午 3:00 — 你："选方案 A，在 worktree 中开始实现"
┌──────────────────────┐
│ Claude Code CLI │
│ （主控中心） │
└──────┬───────────────┘
│
┌─────────┬───────────┼───────────┬──────────┐
│ │ │ │ │
▼ ▼ ▼ ▼ ▼
┌─────────┐ ┌──────┐ ┌─────────┐ ┌────────┐ ┌──────────┐
│子代理 │ │技能 │ │ MCP │ │ Hooks │ │Computer │
│（并行） │ │（专家）│ │（工具） │ │（自动）│ │Use（视觉）│
└────┬────┘ └──┬───┘ └────┬────┘ └───┬────┘ └────┬─────┘
│ │ │ │ │
└─────────┴──────────┴──────────┴───────────┘
│
▼
┌───────────────────────┐
│ Worktree 隔离环境 │
│ （所有改动安全隔离） │
└───────────────────────┘
回顾一下你学到了什么：
下一步：在你的真实项目中应用这些技术。从配置 MCP 和 Hooks 开始，逐步建立属于你的 AI 辅助开发工作流。