第三阶段：高级能力

沉淀沉淀再沉淀
7 阅读26分钟

第三阶段：高级能力 ⚡

目标：能构建自动化工作流，大幅提升开发效率

本阶段学习地图

3.1 MCP 服务器（连接外部工具）
    ↓
3.2 Hooks 系统（工作流自动化）
    ↓
3.3 Skills 技能系统（复杂流程封装）
    ↓
3.4 多 Agent 并行工作
    ↓
3.5 实战练习

文件结构

# 第三阶段：高级能力/
├── 本文件（阶段导航）
├── 服务器配置与使用
├── 系统设计
├── 技能调用与理解
├── 多 Agent 并行工作
├── IDE 深度集成（WebStorm）
└── 实战练习题

核心理念

MCP + Hooks + Skills = 超能力组合

  • MCP：让 Claude "看到"和操作外部系统（浏览器、IDE、数据库）
  • Hooks：让重复性工作变成"触发就执行"的自动化
  • Skills：让复杂的多步骤流程变成一个命令

阶段完成标准

  • 成功连接 Chrome DevTools MCP，用它截图验证 UI
  • 成功连接 WebStorm MCP，用它做 Go-to-Definition
  • 配置了至少一个有用的 Hook
  • 成功调用过 /dev-implement 或 /dev-fix-bug
  • 理解多 Agent 的任务分工模式

常见问题 FAQ

Q1：配置了 MCP 但 Claude 说"工具不可用"

排查步骤：

# 1. 确认 MCP 服务器进程在运行
lsof -i :9222    # Chrome DevTools
lsof -i :29173   # WebStorm

# 2. 手动测试 MCP 端点是否响应
curl http://localhost:9222/json
curl http://127.0.0.1:29173/index-mcp/sse

# 3. 重启 Claude 会话（MCP 连接在会话开始时建立）

Chrome DevTools MCP 特别注意：Chrome 必须以远程调试模式启动，普通启动的 Chrome 没有 MCP 端口。

Q2：连接了 WebStorm MCP，但 ide_find_definition 总是返回"未找到"

可能原因：

  1. WebStorm 正在索引（IDE 启动后需要等待索引完成）
  2. 文件路径不对（需要相对于项目根目录的路径）
  3. 光标位置不在符号上

正确用法：

# 提供精确的文件路径和行列号
> 用 ide_find_definition 查找 src/services/UserService.ts
  第 45 行第 12 列的符号定义

Q3：Hook 配置了，每次会话开始都执行，但执行失败了

调试方法：

# 简化 Hook 命令，先验证基础功能
# 把你的 Hook 命令替换为：
"command": "echo 'Hook OK' > /tmp/claude-hook-test.txt"

# 再检查文件是否生成
cat /tmp/claude-hook-test.txt

确认基础 Hook 能工作后，再逐步恢复真实命令，找出失败的具体步骤。

Q4：Skills 的门控感觉很烦，能不能让 Claude 跳过？

强烈不建议跳过门控。门控的作用是防止 Claude 基于错误理解直接动手。

真正花时间的不是门控，而是修复"Claude 理解错了但直接动手"造成的问题。

如果觉得某个门控的内容太简单：

  • 快速确认："确认，继续" 即可
  • 如果门控内容总是显而易见，说明 Skill 设计可以优化（门控放错位置了）

Q5：/dev-implement 执行到一半，Claude 停下来说需要更多信息，怎么办？

这是正常的——Skill 在澄清阶段需要你补充信息。不要绕过它。

提供信息的技巧：

Claude 问：这个功能需要支持哪些用户角色？
你回答：
  - 商家角色：可以查看和编辑
  - 审核员角色：只能查看，不能编辑
  - 管理员：所有权限

Claude 问：接口的分页参数格式是什么？
你回答：参考 src/api/order.ts 里的 getOrderList 接口，格式一致

信息越具体，后续实现越少走弯路。

Q6：多 Agent 模式下，子 Agent 的结果不准确

子 Agent 的结果质量取决于给它的任务描述是否清晰。

提升子 Agent 准确性的方法：

# 不清晰的委派
> 帮我分析这个项目

# 清晰的委派（Claude 内部也应该这样委派）
> 在 src/services/ 目录下搜索所有包含 "calculatePrice" 的文件，
  返回文件路径和对应的行号

Q7：Chrome DevTools MCP 截图了，但图片是空白/全黑的

可能原因：

  1. 截图的页面正在加载中，还没渲染完
  2. 页面需要登录，但截图时未登录状态

解决方法：

# 先确认页面状态
> 检查当前页面的标题和 URL，确认是目标页面

# 等待特定内容出现后再截图
> 等待 ".product-list" 元素出现后，再截一张截图

3.1 MCP 服务器配置与使用

MCP（Model Context Protocol）是让 Claude Code 连接外部工具的标准协议，极大扩展了 Claude 的能力边界。

什么是 MCP

没有 MCP：
Claude ←→ 只能读写本地文件，执行 shell 命令

有 MCP：
Claude ←→ MCP 服务器 ←→ 浏览器
                      ←→ IDE
                      ←→ 数据库
                      ←→ GitHub API
                      ←→ 任意外部系统

MCP 配置方式

在 ~/.claude/settings.json 中添加 mcpServers：

{
  "mcpServers": {
    "服务器名称": {
      "type": "sse 或 stdio",
      "url": "http://...",       // SSE 类型用 url
      "command": "node",         // stdio 类型用 command
      "args": ["server.js"]      // stdio 类型用 args
    }
  }
}

SSE vs stdio：

  • sse：连接已独立运行的服务（如 Chrome 调试端口、IDE 插件启动的服务）
  • stdio：由 Claude Code 启动和管理进程

Chrome DevTools MCP

安装与启动

方式一：通过 npm 包（推荐，stdio 模式）

# 安装 chrome-devtools MCP 包
npm install -g @modelcontextprotocol/server-chrome-devtools

配置（stdio 模式，Claude Code 自动管理进程）：

{
  "mcpServers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "mcp-server-chrome-devtools",
      "args": []
    }
  }
}

方式二：直连调试端口（SSE 模式）

需要先以远程调试模式启动 Chrome：

# macOS：
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222

# Windows：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

# Linux：
google-chrome --remote-debugging-port=9222

配置（SSE 模式）：

{
  "mcpServers": {
    "chrome-devtools": {
      "type": "sse",
      "url": "http://localhost:9222/json/mcp/sse"
    }
  }
}

验证是否生效：

# 确认 Chrome 调试端口开放
curl http://localhost:9222/json
# 应该返回当前打开的标签页列表

# 重启 Claude 会话后
/status
# 应该看到 chrome-devtools 显示为 connected

核心能力

截图（验证 UI 改动）：
> 截一下当前页面的截图

DOM 分析（定位元素问题）：
> 查看页面中 .product-list 元素的样式

性能分析（找性能瓶颈）：
> 录制一次页面加载的性能 trace，分析 LCP 瓶颈

控制台日志（调试问题）：
> 查看页面的控制台报错

网络请求（分析接口）：
> 查看刚才页面加载了哪些接口

JavaScript 执行（动态操作）：
> 在页面中执行 document.title，返回页面标题

典型工作流

1. 修改 CSS 代码
   ↓
2. 让 Claude 导航到目标页面
   > 打开 http://localhost:3000/product-list
   ↓
3. 让 Claude 截图对比效果
   > 截一张截图，确认按钮颜色是否改为了蓝色
   ↓
4. 发现问题继续修改，重复步骤 2-3

IDE MCP（VS Code / WebStorm）

安装 IDE 对应的 Claude Code 插件后，插件会自动启动 MCP 服务器， 配置格式参考 IDE 插件的说明文档获取具体端口。

核心能力

工具用途示例
ide_find_definition跳转到定义"UserService 的 createUser 在哪里定义的？"
ide_find_references查找所有引用"哪些地方调用了 validateToken？"
ide_find_implementations查找接口实现"IUserRepository 有哪些实现类？"
ide_call_hierarchy调用链分析"sendEmail 最终会调用哪些方法？"
ide_refactor_rename全局重命名"把 getUserInfo 重命名为 fetchUserProfile"
ide_diagnostics代码错误检查"当前文件有哪些类型错误？"
ide_type_hierarchy类型层级"BaseService 有哪些子类？"

使用示例

# 安全重构：查找所有引用再修改
> 帮我把 src/api/user.ts 中的 getUserInfo 函数重命名为 fetchUserProfile，
  先用 ide_find_references 确认影响范围，再执行重命名

# 代码导航：理解调用链
> 用 ide_call_hierarchy 分析 processOrder 方法的调用链，
  找出所有可能调用到它的入口点

# 接口探索
> 找到 IPaymentService 接口的所有实现类，
  对比它们的 processPayment 方法实现有什么不同

其他常用 MCP

GitHub MCP

{
  "mcpServers": {
    "github": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_xxxxx"
      }
    }
  }
}

能力：查看 PR、Issue、代码审查评论、合并 PR 等。

Filesystem MCP

{
  "mcpServers": {
    "filesystem": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/tmp", "/home"]
    }
  }
}

能力：访问项目目录以外的文件系统。

PostgreSQL MCP

{
  "mcpServers": {
    "postgres": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres",
               "postgresql://localhost/mydb"]
    }
  }
}

能力：直接查询数据库，辅助调试数据问题。

MCP 故障排查

# 查看 MCP 连接状态
/status

# 检查服务是否运行
lsof -i :9222    # Chrome DevTools

# 手动测试端点
curl http://localhost:9222/json

# 常见问题：
# 1. 服务器未启动 → 检查服务是否运行
# 2. 端口被占用 → 修改端口配置
# 3. MCP 不可用 → 重启 Claude 会话（连接在会话开始时建立）

3.2 Hooks 系统设计

Hooks 是在特定事件发生时自动执行的脚本或提示，让工作流自动化成为可能。

所有 Hook 事件的完整参数说明详见Hooks 完整参考 。

Hook 事件类型

SessionStart   ← 会话开始时
PreToolUse     ← 工具调用前（可拦截）
PostToolUse    ← 工具调用后
Notification   ← Claude 需要通知时
Stop           ← 会话结束/Claude 完成任务时

Hook 配置结构

在 ~/.claude/settings.json 中：

{
  "hooks": {
    "事件名": [
      {
        "type": "command",
        "command": "bash 命令"
      }
    ],
    "PreToolUse": [
      {
        "matcher": "工具名",
        "hooks": [
          {
            "type": "command",
            "command": "命令"
          }
        ]
      }
    ]
  }
}

SessionStart Hook

用途：每次会话开始时自动执行，适合初始化操作。

场景一：同步团队知识库

{
  "hooks": {
    "SessionStart": [
      {
        "type": "command",
        "command": "cd ~/Documents/git/team-knowledge && git pull --quiet 2>&1 || echo '知识库同步失败'"
      }
    ]
  }
}

场景二：打印环境信息

{
  "hooks": {
    "SessionStart": [
      {
        "type": "command",
        "command": "echo '=== 当前环境 ===' && git branch --show-current 2>/dev/null && node --version"
      }
    ]
  }
}

场景三：运行多个初始化步骤

{
  "hooks": {
    "SessionStart": [
      {
        "type": "command",
        "command": "bash ~/scripts/claude-session-start.sh"
      }
    ]
  }
}

# ~/scripts/claude-session-start.sh
#!/bin/bash
echo "=== 会话初始化 ==="

# 同步知识库
cd ~/Documents/git/team-knowledge && git pull --quiet
echo "✓ 知识库已同步"

# 打印当前项目信息
if [ -f "package.json" ]; then
  echo "项目: $(jq -r .name package.json)"
fi

echo "分支: $(git branch --show-current 2>/dev/null || echo '非 git 仓库')"

PreToolUse Hook

用途：在工具执行前介入，可以用于安全检查、日志记录或前置验证。非 0 退出码会阻止工具执行，是最强的安全控制手段。

除了安全检查，还可以用来：

  • 记录所有工具调用到日志（审计）
  • 在 Edit 之前自动备份文件
  • 在 Bash 执行前打印提示，提醒自己注意

场景：拦截危险的 Bash 命令

{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Bash",
        "hooks": [
          {
            "type": "command",
            "command": "bash ~/scripts/check-command.sh"
          }
        ]
      }
    ]
  }
}

# ~/scripts/check-command.sh
#!/bin/bash
# Claude Code 通过环境变量传入工具信息，stdin 作为备用
CMD="${CLAUDE_TOOL_INPUT:-$(cat -)}"

# 检查危险模式
if echo "$CMD" | grep -qE "rm -rf|DROP TABLE|DELETE FROM.*WHERE 1=1"; then
  echo "ERROR: 检测到危险命令，已拦截" >&2
  exit 1
fi

exit 0

PostToolUse Hook

用途：工具执行后触发，适合自动化后续步骤。

场景：文件修改后自动运行 lint

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "hooks": [
          {
            "type": "command",
            "command": "bash ~/scripts/auto-lint.sh"
          }
        ]
      }
    ]
  }
}

Stop Hook

用途：Claude 完成任务或会话结束时触发，适合经验回写。

场景：自动检测是否有可回写的经验

{
  "hooks": {
    "Stop": [
      {
        "type": "command",
        "command": "bash ~/scripts/check-team-learn.sh"
      }
    ]
  }
}

# ~/scripts/check-team-learn.sh
#!/bin/bash
# 检查会话中是否有值得记录的知识
# 如果有，提示用户执行 /team-learn
echo "[EVOLUTION_CHECK] 会话结束，如有新发现建议执行 /team-learn 回写经验"

Hook 执行结果处理

Hook 脚本通过退出码控制行为：

退出码含义
0成功，继续执行
非 0失败，PreToolUse 中会阻止工具执行

脚本输出（stdout）会显示给用户，stderr 会记录到日志。

调试 Hooks

第一步：最小化验证 Hook 框架是否工作

{
  "hooks": {
    "SessionStart": [
      {
        "type": "command",
        "command": "echo 'Hook 测试成功' > /tmp/claude-hook-test.txt"
      }
    ]
  }
}

启动 Claude 后检查：

cat /tmp/claude-hook-test.txt
# 如果输出"Hook 测试成功"，说明框架正常
# 如果文件不存在，说明 settings.json 格式有问题

第二步：验证 settings.json 格式

# JSON 不能有注释、尾逗号、单引号
python3 -m json.tool ~/.claude/settings.json
# 如果有格式错误，会提示具体行数

第三步：手动测试 Hook 脚本

# 确保脚本有执行权限
chmod +x ~/scripts/claude-session-start.sh

# 手动执行，观察输出
bash ~/scripts/claude-session-start.sh

# 如果脚本用了 stdin（PreToolUse），模拟测试
echo '{"command": "rm -rf test"}' | bash ~/scripts/check-command.sh

临时禁用 Hook：

{
  "hooks": {
    "SessionStart": [
      {
        "type": "command",
        "command": "echo 'disabled'"
      }
    ]
  }
}

完整的生产级 Hooks 配置

{
  "hooks": {
    "SessionStart": [
      {
        "type": "command",
        "command": "cd ~/Documents/git/team-knowledge && git pull --quiet 2>&1 | tail -1"
      }
    ],
    "PreToolUse": [
      {
        "matcher": "Bash",
        "hooks": [
          {
            "type": "command",
            "command": "bash ~/scripts/safety-check.sh"
          }
        ]
      }
    ],
    "Stop": [
      {
        "type": "command",
        "command": "echo '[EVOLUTION_CHECK] 会话结束 - 有新发现请执行 /team-learn'"
      }
    ]
  }
}

3.3 Skills 技能系统

Skills 是封装了复杂多步骤工作流的扩展，通过 /skill-name 触发。

什么是 Skills

普通对话：
你 → "帮我修这个 bug" → Claude 随机发挥，质量不稳定

Skills（工作流命令）：
你 → /bug-fix → Claude 按照固定的最佳实践流程执行
                 Step 1: 澄清问题
                 Step 2: 定位根因（门控）
                 Step 3: 修复方案（门控）
                 Step 4: 实施修复
                 Step 5: 验证

门控（Gate）：流程中的暂停点，Claude 必须等你确认后才继续。防止 Claude 基于错误理解直接动手。

典型工作流 Skill 的结构

Bug 修复 Skill

步骤：
1. 你描述 bug 症状和复现步骤
2. Claude 澄清上下文（影响范围、日志等）
3. Claude 定位根因 → [门控] 确认根因正确
4. Claude 提出修复方案 → [门控] 确认方案
5. Claude 实施修复
6. Claude 给出验证命令，你执行确认

适用场景：

  • 难以定位的 bug（需要系统排查）
  • 生产环境紧急修复
  • 想保留完整修复记录

不适用场景：

  • 明显的拼写错误、单行修复 → 直接普通对话更快
  • 已经知道根因，只需要改一行 → 不必走完整流程

需求实现 Skill

步骤：
1. 输入需求（文档/描述）
2. Claude 探索相关代码模块
3. Claude 列出澄清问题，你回答
4. Claude 输出技术方案 → [门控] 确认方案
5. Claude 分阶段实现
6. Claude 自动代码审查
7. Claude 给出自测方案，你验证

适用场景：

  • 新功能开发（> 3 个文件改动）
  • 复杂功能，需要先设计再实现

不适用场景：

  • 给现有函数加一个参数 → 直接说明需求即可
  • 修改样式、文案等不涉及逻辑的改动

代码审查 Skill

并行执行多维度审查：
├── 测试覆盖分析
├── 安全漏洞扫描（XSS、SQL 注入等）
├── TypeScript 类型安全 / 异步问题
├── 代码规范
└── 国际化合规

输出：评分报告 + 具体问题列表 + 修复建议

故障诊断 Skill

步骤：
1. 描述告警/故障现象
2. Claude 确认上下文（服务名、时间范围）
3. 制定数据采集计划 → [门控] 确认
4. 收集日志/监控数据
5. 根因分析 → [门控] 确认根因
6. 输出修复建议

如何高效使用 Skills

原则一：信任门控，不要跳过

# 错误方式
> 直接修复，不需要确认

# 正确方式
> （认真审阅根因分析后）确认，继续下一步

门控的意义：防止 Claude 基于错误理解直接改 10 个文件。

原则二：提供完整输入

Skills 在信息充分时效果最好：

# 信息不足
> 登录失败

# 信息充分
> 问题：用户登录后立即被退出
> 环境：生产环境，发生在今天下午 3 点后
> 错误信息：JWT token validation failed: token expired
> 错误日志：[粘贴具体日志]
> 最近变更：昨天更新了 JWT 密钥轮换逻辑

原则三：完成全流程，不中途放弃

Skill 的每个步骤都有意义，包括最后的验证和总结步骤，不要在"感觉差不多了"时提前退出。

安装 Skills

Skills 是存放在特定位置的 Markdown 文件：

~/.claude/skills/
└── skill-name/
    └── skill.md

目录结构示例：

~/.claude/skills/
├── dev-fix-bug/
│   └── skill.md
├── dev-implement/
│   └── skill.md
└── pre-commit-check/
    └── skill.md

获取方式：

  1. 自己编写（见 phase-4-expert/04-custom-skills.md）
  2. 团队共享（通过 git 同步共享仓库里的 skills/）
  3. 社区开源 Skill（GitHub 搜索 claude-code skills）

验证 Skill 是否安装成功：

# 查看已安装的 Skills
ls ~/.claude/skills/

# 启动 Claude 后查看可用命令
/help
# 已安装的 Skills 会出现在命令列表里

Skill 与普通对话的对比

同一个任务，有没有 Skill 的区别：

没有 Skill（普通对话）：
> 帮我修这个 bug
→ Claude 直接开始猜测和修改
→ 可能没搞清楚根因就动手
→ 修完不一定对，也不一定验证

有 Skill（/dev-fix-bug）：
→ Step 1: 你描述症状（充分的信息）
→ Step 2: Claude 搜索代码定位根因
→ [门控] 你确认根因正确
→ Step 3: Claude 提出修复方案
→ [门控] 你选择方案
→ Step 4: 实施修复
→ Step 5: Claude 给出验证命令，你确认

关键差别：Skill 有固定流程和门控，不允许跳步；普通对话 Claude 自由发挥，质量不稳定。

内置命令（无需安装）

Claude Code 自带的唯一工作流命令：

/commit    # 自动生成 git commit message

其他工作流功能需要通过安装 Skill 获得，或直接用自然语言描述让 Claude 随机应变。

何时用自然语言代替 Skill：

  • 任务很简单，不需要多步骤流程
  • Skill 还没安装，但时间紧迫
  • 想快速试探一个方向，不需要完整流程
# 没有安装 Skill 时，用自然语言模拟流程
> 帮我系统排查这个 bug，
  流程：先分析根因（等我确认），再提方案（等我确认），最后实施修复

3.4 多 Agent 并行工作

多 Agent 是 Claude Code 实现大规模任务的核心架构，通过任务分工和并行执行大幅提升效率。

基本概念

主 Agent（Opus）        ← 推理、编码、架构决策（高质量，高成本）
    ↓ 委派
子 Agent 1（Sonnet）   ← 探索代码结构（省 token）
子 Agent 2（Sonnet）   ← 查询文档知识（并行）
子 Agent 3（Sonnet）   ← 分析相关模块（并行）
    ↓ 汇总结果
主 Agent               ← 基于探索结果做决策

核心原则：

  • 探索类任务 → 子 Agent（Sonnet，省 token）
  • 编码/决策类任务 → 主 Agent（Opus，保质量）

何时需要多 Agent

任务特征建议
需要读取 3+ 个无关联的文件多个子 Agent 并行读取
需要同时分析多个维度每个维度一个子 Agent
需要跨模块代码探索子 Agent 分别探索
单个任务预计 20+ 轮分解为多个子任务

自动委派（无需手动操作）

在 CLAUDE.md 中配置模型策略，Claude Code 会自动委派：

# CLAUDE.md 中的模型策略配置

## 模型选择策略
以下任务自动委派子 Agent（Sonnet）：
- 搜索代码位置
- 批量阅读代码（3+ 文件）
- 查询文档/知识库
- 生成 commit message

以下任务由主会话（Opus）执行：
- 编写业务代码
- 方案设计
- 复杂 bug 分析

Worktree 隔离并行开发

什么是 Worktree：git 的功能，允许同一仓库同时有多个工作目录，各自在不同分支上工作，互不影响。通俗理解：相当于把代码库复制了一份，在副本上工作，完成后再合并回来。

Worktree 让多个 Agent 可以同时在同一仓库的不同分支上工作，互不干扰：

# 告诉 Claude 在 worktree 中工作（隔离修改）
> 在一个独立的 worktree 中实现这个功能，
  完成后告诉我需要合并哪些内容

Claude Code 会自动：

  1. 创建 worktree: .claude/worktrees/feature-xxx/
  2. 在 worktree 中工作，不影响主分支
  3. 完成后报告需要合并的内容

Plan Mode（规划模式）

对于复杂任务，先规划再执行，通过告诉 Claude 创建规划文件来管理任务：

.claude/plans/<分支名>/
├── task_plan.md    ← 任务分解和执行顺序
│   ├── 任务1: 探索现有 auth 模块
│   ├── 任务2: 设计新的 token 刷新方案（依赖任务1）
│   └── 任务3: 实现方案（依赖任务2）
│
├── findings.md     ← 探索发现和关键决策记录
│   ├── 发现：现有 token 验证在 middleware.ts:45
│   └── 决策：使用 Redis 存储 refresh token
│
└── progress.md     ← 实时进度追踪
    ├── ✅ 任务1: 探索完成
    ├── 🔄 任务2: 设计中
    └── ⏳ 任务3: 等待

触发方式：

> 这是一个复杂任务，请先在 .claude/plans/ 下创建规划文件，
  分解任务后再逐步执行

并行代码审查

你可以让 Claude 并行启动多个专项审查：

> 对这个 PR 的改动进行多维度并行审查：
  同时检查：安全漏洞、TypeScript 类型问题、测试覆盖、性能问题
  各维度独立分析，最后汇总报告

多 Agent 的限制

  1. 子 Agent 通常只读取分析，不修改文件
  2. 结果需要汇总到主 Agent 才能使用
  3. 不适合依赖关系强的任务（必须顺序执行的步骤）

什么时候不应该用多 Agent

情况原因替代方案
任务很简单（1-2 个文件）子 Agent 的启动开销反而更慢直接在主会话中处理
任务有强依赖（步骤 A 完成才能做步骤 B）并行没有意义，还增加协调复杂度顺序执行
需要跨子任务保持状态子 Agent 之间无法直接通信主 Agent 协调，中间结果写文件传递
希望精确控制每一步子 Agent 自主执行，细节不可控主会话逐步执行，每步确认

实战示例：并行探索大型项目

# 场景：需要理解一个陌生的大型项目
> 我需要快速了解这个项目的整体架构。
  请并行探索以下几个维度：
  1. 入口文件和路由结构
  2. 主要的服务层（Service）有哪些
  3. 数据库相关的模型定义
  4. 对外暴露的 API 接口
  这四个维度可以并行分析，完成后汇总给我。

Claude 会并行启动子 Agent 分别探索，然后汇总成一份整体架构说明。

实战示例：并行代码审查

# 场景：提交代码前做多维度审查
> 对 src/payment/ 目录的改动进行并行代码审查：
  同时分析以下维度（每个维度独立，完成后汇总）：
  - 维度1：安全漏洞（XSS、SQL 注入、敏感信息硬编码）
  - 维度2：TypeScript 类型安全（any 类型、未处理的 null）
  - 维度3：测试覆盖（哪些分支没有测试）
  - 维度4：业务逻辑（边界情况、异常处理）

与串行审查的对比：串行做 4 个维度可能需要 40 轮对话；并行只需要 10 轮，且每个维度更专注不受干扰。

3.5 IDE 深度集成（VS Code / WebStorm）

连接 IDE MCP 后，Claude 可以直接使用 IDE 的代码智能功能，大幅提升代码理解和重构能力。

连接 IDE

# 在 Claude Code 会话中执行
/ide

# 成功连接后会显示
# Connected to WebStorm.
# 或 Connected to VS Code.

前提：IDE 中需要安装 Claude Code 插件，插件会自动启动 MCP 服务器。

核心能力详解

ide_find_definition - 跳转到定义

最常用的能力，替代手动 Ctrl+Click：

# 找类的定义
> 找一下 UserService 这个类在哪里定义的

# 找接口定义
> IPaymentRepository 接口在哪个文件？

# 找方法的具体实现
> validateToken 方法的完整实现是什么？

何时使用：

  • 看到一个类/方法名，想了解它的定义
  • 追踪第三方库的实现
  • 理解继承链

ide_find_references - 查找所有引用

了解某个函数/变量在哪里被使用：

# 重构前确认影响范围
> 我要删除 formatPrice 函数，先用 ide_find_references 看看有几个地方引用了它

# 理解某个常量的用途
> MAX_RETRY_COUNT 这个常量被哪些地方用到了？

# 追踪数据流
> userId 这个变量从哪里传入，到哪里被使用？

ide_find_implementations - 查找接口实现

对于接口和抽象类特别有用：

> IOrderService 接口有哪些实现类？
> AbstractValidator 抽象类的所有具体子类有哪些？

ide_call_hierarchy - 调用链分析

理解方法的调用关系：

# 向上追溯：谁调用了这个方法？
> 用 ide_call_hierarchy 分析 processPayment 方法，
  找出所有可能触发它的入口

# 向下追溯：这个方法会调用什么？
> createOrder 方法内部会调用哪些其他方法？

ide_refactor_rename - 安全重命名

比全局搜索替换更安全（正确处理作用域、重载等边界情况）：

# 方法重命名
> 把 UserService 中的 getUserInfo 方法重命名为 fetchUserProfile

# 类重命名
> 把 OrderProcessor 类重命名为 OrderExecutor，更新所有引用

重要：重命名前 Claude 会先用 ide_find_references 确认影响范围。

ide_diagnostics - 代码问题检查

获取 IDE 的实时诊断信息：

# 检查整个文件
> src/components/UserForm.tsx 有哪些类型错误？

# 检查特定区域
> 第 80-120 行有没有 ESLint 警告？

# 获取快速修复建议
> 这个错误有哪些可用的快速修复方案？

实战场景组合

场景一：安全重构

目标：重命名一个被多处引用的方法

步骤：
1. ide_find_references → 确认影响范围（10 个文件）
2. 评估：影响范围是否可接受？
3. ide_refactor_rename → 执行重命名
4. ide_diagnostics → 验证没有引入错误

场景二：理解陌生代码

目标：快速理解一个不熟悉的模块

步骤：
1. ide_find_definition → 找到核心类的定义
2. ide_type_hierarchy → 了解类的继承结构
3. ide_find_implementations → 找到所有实现
4. ide_call_hierarchy → 理解调用关系
5. 综合以上信息，Claude 给出模块说明

场景三：接口改动影响面分析

目标：修改一个接口前评估影响

步骤：
1. ide_find_implementations（接口）→ 找到所有实现类
2. 对每个实现类：ide_find_references → 找到调用方
3. 汇总生成影响范围报告

使用技巧

组合使用效果最好：让 Claude 根据任务自动选择工具组合：

> 我要修改 IProductRepository 接口，在 findAll 方法中加一个 filter 参数。
  请帮我分析影响范围，并给出修改所有实现类的方案。

# Claude 会自动：
# 1. ide_find_implementations 找所有实现类
# 2. ide_find_references 找所有调用方
# 3. 给出完整的修改方案

明确要求用哪个工具：Claude 不会自动偏好 MCP 工具，需要你明确指定：

# 效果差（Claude 可能用 Grep）
> 找一下 UserService 在哪里定义的

# 效果好（明确要求用 IDE 工具）
> 用 ide_find_definition 找到 UserService 的定义

IDE MCP vs Grep：什么时候用哪个

场景推荐工具原因
找函数/类的定义ide_find_definition语义跳转，准确率 100%
查找所有引用ide_find_references理解作用域，不会漏掉或误报
搜索关键词/字符串Grep更快，不需要 IDE 索引
查找接口所有实现类ide_find_implementationsGrep 做不到语义级的实现查找
全局重命名ide_refactor_rename安全，处理重载/作用域边界
查看代码错误ide_diagnostics实时 IDE 诊断，比手动运行快
搜索特定文件Glob更快，不需要 IDE

经验规则：涉及代码语义（定义、引用、继承、调用链）用 IDE 工具；涉及文本匹配（关键词、日志、注释）用 Grep。

连接状态检查

# 在 Claude Code 会话中
/status
# 查看 MCP servers 一栏，IDE 应显示 connected

# 如果显示 disconnected
/ide
# 尝试重新连接

# 如果仍然失败，检查 IDE 是否开着且插件已启动

常见问题：IDE 关闭后 MCP 断开，重新打开 IDE 后在 Claude 中执行 /ide 重连即可。

3.6 实战练习

练习一：连接 Chrome DevTools MCP

目标：用 Chrome DevTools MCP 验证 UI 改动

步骤：

  1. 以远程调试模式启动 Chrome： 
    # macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222
  2. 配置 chrome-devtools MCP 到 ~/.claude/settings.json： 
    {
  "mcpServers": {
    "chrome-devtools": {
      "type": "sse",
      "url": "http://localhost:9222/json/mcp/sse"
    }
  }
}
  3. 对一个前端项目做一个 CSS 改动
  4. 让 Claude 截图验证改动效果： 
    > 截一张当前页面的截图，验证按钮颜色是否改为了蓝色

验收：Claude 能截图并分析 UI 状态 ✓

练习二：IDE MCP 代码导航

目标：用 IDE 工具做一次安全的方法重命名

步骤：

  1. 安装 IDE 对应的 Claude Code 插件
  2. 在 Claude Code 会话中执行 /ide 连接
  3. 选择项目中一个方法，先分析影响范围： 
    > 用 ide_find_references 分析 validateUserInput 方法有多少个引用
  4. 确认影响范围后执行重命名： 
    > 把 validateUserInput 重命名为 verifyUserInput
  5. 用 ide_diagnostics 确认没有引入错误

验收：重命名成功，无遗漏，无类型错误 ✓

练习三：配置一个有用的 Hook

目标：配置 SessionStart Hook，在每次会话开始时自动输出有用信息

步骤：

  1. 编辑 ~/.claude/settings.json： 
    {
  "hooks": {
    "SessionStart": [
      {
        "type": "command",
        "command": "echo '=== 会话开始 ===' && git branch --show-current 2>/dev/null && node --version"
      }
    ]
  }
}
  2. 重启 Claude 会话
  3. 观察 SessionStart 时的输出

验收：每次启动 Claude 都能看到 Hook 执行的输出 ✓

练习四：调用工作流 Skill 实现一个小功能

目标：安装一个工作流 Skill，完整走一遍需求实现流程

步骤：

  1. 创建一个简单的需求实现 Skill（参考 phase-4-expert/04-custom-skills.md）
  2. 选择一个小需求（例如：给某个函数添加缓存）
  3. 通过 Skill 触发工作流
  4. 认真看每个门控点，不要跳过
  5. 确认技术方案后再让 Claude 开始编码
  6. 完成后执行验证

验收：

  • 技术方案在编码前得到了你的确认
  • 实现完成且验证通过
  • 没有引入计划外的改动 ✓

练习五：多 Agent 并行任务分工

目标：理解多 Agent 的任务分工，感受并行执行的效率提升

步骤一：串行对比

  1. 选择一个项目模块（5-10 个文件）
  2. 逐一让 Claude 分析每个维度： 
    > 分析 src/payment/ 模块的代码质量问题
（等完成）
> 分析 src/payment/ 模块的安全问题
（等完成）
> 分析 src/payment/ 模块的测试覆盖情况
  3. 记录完成时间

步骤二：并行对比

  1. /clear 重新开始
  2. 用一句话触发并行分析： 
    > 对 src/payment/ 模块进行全面分析，
  请同时并行分析以下四个维度：
  1. 代码质量（命名、复杂度、重复逻辑）
  2. 安全问题（输入验证、敏感数据处理）
  3. 测试覆盖（哪些场景缺少测试）
  4. 外部依赖（是否有过时或不安全的依赖）
  3. 对比完成时间

步骤三：主动设计任务分工

> 我需要重构支付流程，请帮我同时：
  - 探索 src/payment/ 现有的支付实现
  - 探索 src/order/ 中与支付相关的逻辑
  - 查阅 src/api/ 中支付相关的接口定义
  这三个可以并行进行，完成后汇总给我

（等 Claude 完成并行探索后）
> 基于以上探索结果，设计重构方案

验收：

  • 观察到并行 Agent 启动（多个工具调用同时出现）
  • 理解哪类任务适合并行、哪类必须串行
  • 能主动设计任务分工 ✓

综合挑战：构建完整的自动化工作流

目标：配置一套从开发到提交的自动化流程

流程设计：

会话开始 → SessionStart Hook 输出当前环境信息
开发中   → IDE MCP 辅助代码导航
完成功能 → 代码审查 Skill 自查
提交代码 → /commit 生成规范 commit
会话结束 → Stop Hook 提示提交代码

步骤：

  1. 配置 SessionStart 和 Stop Hooks
  2. 连接 IDE MCP
  3. 实现一个小功能，全程使用以上工具
  4. 记录整个流程的体验和发现

反思题：

  • 哪个环节最节省时间？
  • 哪个环节还可以进一步优化？
  • 有什么新的 Hook 使用场景？
avatar
文章
阅读
粉丝