1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

传统方式：Claude 只能看到你发给它的文本
MCP方式：Claude 可以主动调用工具获取信息

┌─────────────┐     MCP协议      ┌─────────────┐
│  Claude Code │ ◄────────────► │  外部服务    │
└─────────────┘                 └─────────────┘
                                    ├── 文件系统
                                    ├── 数据库
                                    ├── GitHub
                                    ├── Slack
                                    ├── Google Drive
                                    └── 自定义工具

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# 添加文件系统访问
claude mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem ~/Documents ~/Projects

# 添加 GitHub 集成
claude mcp add github -e GITHUB_TOKEN=your_token -- npx -y @modelcontextprotocol/server-github

# 添加内存服务（持久化记忆）
claude mcp add memory -- npx -y @modelcontextprotocol/server-memory

# 查看已配置的服务器
claude mcp list

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/me/Projects"],
      "env": {}
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "ghp_xxxxxxxxxxxx"
      }
    },
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "DATABASE_URL": "postgresql://user:pass@localhost:5432/mydb"
      }
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

You: 帮我查一下最近7天注册的用户数量，按天分组

Claude: 我来查询数据库...
[调用 postgres MCP 服务器]

查询结果：
| 日期 | 新增用户数 |
|------|-----------|
| 12-20 | 156 |
| 12-21 | 189 |
| 12-22 | 203 |
| 12-23 | 178 |
| 12-24 | 245 |
| 12-25 | 312 |
| 12-26 | 198 |

总计：1,481 位新用户
可以看出 12-25（圣诞节）有明显的注册高峰。

1
2
3
4
5
6
7

用户输入 → [UserPromptSubmit Hook] → Claude 思考
                                          ↓
                              [PreToolUse Hook] → 工具执行
                                                      ↓
                                          [PostToolUse Hook] → 返回结果
                                                                   ↓
                                                          [Stop Hook] → 会话结束

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Bash",
        "hooks": [
          {
            "type": "command",
            "command": "echo '[AUDIT] Bash command: $TOOL_INPUT' >> ~/.claude/audit.log"
          }
        ]
      }
    ],
    "PostToolUse": [
      {
        "matcher": "Write",
        "hooks": [
          {
            "type": "command", 
            "command": "npx prettier --write $FILE_PATH 2>/dev/null || true"
          }
        ]
      }
    ],
    "UserPromptSubmit": [
      {
        "hooks": [
          {
            "type": "command",
            "command": "/path/to/validate-prompt.sh"
          }
        ]
      }
    ]
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write",
        "hooks": [
          {
            "type": "command",
            "command": "npm run lint:fix -- $FILE_PATH"
          }
        ]
      }
    ]
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit|MultiEdit",
        "hooks": [
          {
            "type": "command",
            "command": "npx prettier --write \"$TOOL_INPUT\" 2>/dev/null || true"
          }
        ]
      }
    ]
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

#!/bin/bash
# ~/.claude/scripts/validate-bash.sh

DANGEROUS_PATTERNS="rm -rf|DROP TABLE|DELETE FROM|format|mkfs"

if echo "$TOOL_INPUT" | grep -qE "$DANGEROUS_PATTERNS"; then
    echo "BLOCKED: 检测到危险命令"
    exit 1
fi

exit 0

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

{
  "hooks": {
    "Stop": [
      {
        "hooks": [
          {
            "type": "command",
            "command": "curl -X POST -H 'Content-type: application/json' --data '{\"text\":\"Claude Code 任务完成!\"}' $SLACK_WEBHOOK_URL"
          }
        ]
      }
    ]
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

用户请求
    ↓
主 Agent (nO 函数)
    ↓
是否调用 Task 工具？
    ├── 否 → 直接处理 → 返回结果
    └── 是 → 创建 SubAgent
              ↓
         并发执行调度器 (UH1)
              ↓
         多个 SubAgent 并行执行
              ↓
         结果合成器 (KN5)
              ↓
         返回合成结果

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

You: 分析这个项目的代码质量，包括：
1. 代码结构是否合理
2. 是否有潜在的性能问题
3. 测试覆盖率如何
4. 安全漏洞检查

Claude: 这是一个复杂的分析任务，我会启动多个 SubAgent 并行处理：

[启动 SubAgent 1] 分析代码结构...
[启动 SubAgent 2] 检查性能问题...
[启动 SubAgent 3] 分析测试覆盖率...
[启动 SubAgent 4] 扫描安全漏洞...

[等待所有 SubAgent 完成...]

[合成结果] 综合所有 Agent 的分析：
...

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

const SUBAGENT_ALLOWED_TOOLS = [
    'Read',       // 读取文件
    'Write',      // 写入文件
    'Edit',       // 编辑文件
    'MultiEdit',  // 多处编辑
    'Glob',       // 文件搜索
    'Grep',       // 内容搜索
    'Bash',       // 执行命令
    'WebFetch',   // 网页获取
    'WebSearch',  // 网络搜索
    'TodoRead',   // 读取任务
    'TodoWrite',  // 写入任务
];

// 被禁用的工具（防止递归）
const BLOCKED_TOOLS = ['Task'];

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

You: 帮我同时搜索项目中所有的 TODO 注释、FIXME 标记和废弃的 API 调用

Claude: 我会并行启动 3 个搜索任务：

[SubAgent 1] 搜索 TODO 注释...
[SubAgent 2] 搜索 FIXME 标记...
[SubAgent 3] 搜索废弃 API 调用...

--- 3 秒后 ---

[SubAgent 1 完成] 找到 23 个 TODO
[SubAgent 2 完成] 找到 8 个 FIXME
[SubAgent 3 完成] 找到 5 个废弃 API

[合成结果]
## 代码待办事项汇总

### TODO (23处)
- src/api/user.ts:45 - TODO: 添加缓存
- src/components/Table.tsx:123 - TODO: 优化渲染性能
...

### FIXME (8处)
- src/utils/date.ts:67 - FIXME: 时区处理有问题
...

### 废弃 API (5处)
- src/legacy/auth.ts:12 - 使用了已废弃的 crypto.createCipher
...

1
2

claude
> /init

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

# 项目配置

## 项目概述
这是一个 Next.js 14 电商平台，使用 TypeScript + Prisma + PostgreSQL。

## 技术栈
- 框架：Next.js 14 (App Router)
- 语言：TypeScript 5.x (严格模式)
- 数据库：PostgreSQL + Prisma ORM
- 样式：Tailwind CSS
- 状态管理：Zustand
- 测试：Vitest + Testing Library

## 代码规范
- 使用 ESLint + Prettier 格式化
- 组件使用函数式写法
- 所有函数必须有 JSDoc 注释
- 禁止使用 any 类型
- 错误处理使用自定义 Error 类

## 目录结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

## 常用命令
- `npm run dev` - 启动开发服务器
- `npm run build` - 构建生产版本
- `npm run test` - 运行测试
- `npm run lint` - 代码检查
- `npx prisma studio` - 打开数据库管理界面

## Git 提交规范
- feat: 新功能
- fix: 修复 Bug
- refactor: 重构
- docs: 文档
- test: 测试
- chore: 构建/工具

## 注意事项
- 数据库敏感操作需要人工确认
- 不要直接修改 prisma/migrations 目录
- API 路由必须有权限验证

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

# 本地配置

## 个人偏好
- 我喜欢详细的注释
- 代码示例要完整可运行
- 解释时使用中文

## 本地环境
- Node.js: v20.10.0
- 数据库：本地 Docker 容器
- 端口：3000 (开发), 5432 (PostgreSQL)

## 调试配置
- 使用 VS Code 调试
- 断点调试端口: 9229

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

# 全局配置

## 通用规范
- 使用 2 空格缩进
- 变量命名使用 camelCase
- 常量使用 UPPER_SNAKE_CASE
- 组件使用 PascalCase

## 默认工具
- 包管理器：pnpm
- 版本控制：Git
- 编辑器：VS Code

## 安全规则
- 不要在代码中硬编码密钥
- 敏感文件（.env）不要提交
- API 调用必须有超时设置

1
2
3
4
5

.claude/
└── commands/
    ├── review.md      # /review 命令
    ├── test.md        # /test 命令
    └── deploy.md      # /deploy 命令

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

请对当前项目进行代码审查：

1. 检查代码质量
   - 是否有重复代码
   - 函数是否过长
   - 命名是否清晰

2. 检查潜在问题
   - 是否有未处理的错误
   - 是否有性能问题
   - 是否有安全漏洞

3. 检查最佳实践
   - 是否遵循项目规范
   - 是否有充分的测试
   - 是否有必要的注释

请提供详细的改进建议。

1

> /review

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "~/Projects"],
      "env": {}
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "${GITHUB_TOKEN}"
      }
    }
  },
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "hooks": [
          {
            "type": "command",
            "command": "npx prettier --write \"$FILE_PATH\" 2>/dev/null || true"
          }
        ]
      }
    ],
    "Stop": [
      {
        "hooks": [
          {
            "type": "command",
            "command": "echo \"[$(date)] Task completed\" >> ~/.claude/activity.log"
          }
        ]
      }
    ]
  },
  "permissions": {
    "allow": [
      "Bash(npm run *)",
      "Bash(git *)",
      "Bash(npx prettier *)"
    ],
    "deny": [
      "Bash(rm -rf *)",
      "Bash(sudo *)"
    ]
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

1. 启动项目
   > claude
   > /init  # 生成 CLAUDE.md

2. 查看项目状态
   > /review  # 运行自定义代码审查命令

3. 开发新功能
   > 帮我实现用户头像上传功能，要支持裁剪和压缩
   
   [Claude 自动]:
   - 分析项目结构
   - 创建组件文件（自动格式化）
   - 编写测试用例
   - 更新文档

4. 提交代码
   > 提交这些改动，写一个清晰的 commit message
   
   [Claude 使用 GitHub MCP]:
   - 生成 commit message
   - 创建 commit
   - 可选：创建 PR

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

# 手动实现一个用户登录功能
def login(username: str, password: str) -> dict:
    # 验证输入
    if not username or not password:
        raise ValueError("用户名和密码不能为空")
    
    # 查询数据库
    user = db.query(User).filter(User.username == username).first()
    if not user:
        raise AuthError("用户不存在")
    
    # 验证密码
    if not verify_password(password, user.hashed_password):
        raise AuthError("密码错误")
    
    # 生成token
    token = create_access_token(user.id)
    
    return {"token": token, "user": user.to_dict()}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

You: 实现用户登录功能，要验证输入、查数据库、验密码、返回JWT token

AI: [生成完整代码]

You: 跑一下

AI: [执行测试] 测试通过

You: 加个登录失败次数限制，超过5次锁定账号

AI: [修改代码] 已添加

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

第1轮对话：

You: 我要做一个个人博客系统，技术栈用 Next.js 14 + Prisma + PostgreSQL。
功能需要：
- Markdown 文章编辑
- 文章分类和标签
- 评论系统
- 暗黑模式
帮我搭建项目框架。

AI: 好的，我来创建项目...
[执行 npx create-next-app@14 ...]
[创建 prisma/schema.prisma]
[创建数据库模型]
[创建基础组件]
...
框架搭建完成，运行 npm run dev 查看效果。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

第2轮对话：

You: 首页看起来太丑了，参考 Vercel 官网的设计风格美化一下

AI: 明白，我来调整样式...
[修改 globals.css]
[修改 components/Header.tsx]
[添加渐变背景和动画效果]
...
已更新，刷新页面查看。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

第3轮对话：

You: 文章编辑器需要支持实时预览，左边写 Markdown 右边显示效果

AI: 
[安装 react-markdown]
[创建 SplitEditor 组件]
[添加语法高亮支持]
...
编辑器已完成。

1
2
3
4

传统：需求 → 设计 → 编码 → 测试 → 部署

Vibe：需求 → 描述 → AI编码 → 审查 → 迭代 → 部署
          ↑_________←_________|

1
2
3
4
5
6
7

❌ 不好的描述：
"写一个函数处理用户数据"

✅ 好的描述：
"写一个函数，接收用户注册表单数据（name, email, password），
验证邮箱格式和密码强度（至少8位，包含大小写和数字），
验证通过返回处理后的数据，失败抛出具体错误信息"

1
2
3
4
5

第1步：搭建基础框架
第2步：实现核心功能
第3步：添加边界处理
第4步：优化性能
第5步：完善样式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

# 项目规范

## 技术栈
- Next.js 14 (App Router)
- TypeScript 严格模式
- Tailwind CSS
- Prisma ORM

## 代码风格
- 使用函数式组件
- 所有函数必须有 JSDoc 注释
- 错误处理使用自定义 Error 类

## 禁止
- 使用 any 类型
- 直接操作 DOM
- 在组件中写内联样式

1
2
3
4
5
6
7
8

# 全局安装
npm install -g @anthropic-ai/claude-code

# 进入项目目录
cd your-project

# 启动
claude

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

You: 帮我看看 src/api/user.ts 里有什么问题

Claude: 我来读取这个文件...
[读取 src/api/user.ts]

发现了几个问题：
1. 第23行：缺少错误处理
2. 第45行：类型定义不完整
3. 第67行：存在潜在的内存泄漏

要我修复吗？

You: 修

Claude: 
[编辑 src/api/user.ts]
已完成修复，主要改动：
- 添加了 try-catch 包装
- 补充了 UserResponse 类型定义
- 在 useEffect 中添加了 cleanup 函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

You: 跑一下测试，看看有没有挂的

Claude:
[执行 npm test]

测试结果：
✓ 45 passed
✗ 2 failed
  - user.test.ts: "should handle empty input"
  - auth.test.ts: "should refresh token"

要我修复这两个失败的测试吗？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

You: 把今天的改动提交一下，写个清晰的commit message

Claude:
[执行 git status]
[执行 git diff]

我看到你改了这些文件：
- src/api/user.ts (修复类型问题)
- src/components/Login.tsx (添加loading状态)
- tests/user.test.ts (补充测试用例)

建议的 commit message:

[执行 git add . && git commit -m "fix: 修复用户API类型问题并完善登录组件

- 修复 user.ts 中的类型定义不完整问题
- 为 Login 组件添加 loading 状态处理
- 补充用户模块的单元测试"]

已提交。需要我 push 吗？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

You: 用户反馈说登录后会闪退，帮我查一下

Claude: 让我先看看相关代码...

[读取 src/pages/Login.tsx]
[读取 src/hooks/useAuth.ts]
[读取 src/store/authSlice.ts]

我需要看看错误日志：
[执行 npm run dev]
[执行 打开浏览器开发者工具 - 等待错误]

找到问题了！

在 useAuth.ts 第34行：
auth.user.name.toLowerCase()

当 user 对象存在但 name 为 null 时会崩溃。

修复方案：
auth.user?.name?.toLowerCase() ?? ''

要我修复吗？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

You: 把 src/utils 下的所有 JavaScript 文件迁移到 TypeScript

Claude: 收到，我来处理这个迁移任务。

[扫描 src/utils 目录]
发现 12 个 JS 文件需要迁移。

开始迁移...

[1/12] helpers.js → helpers.ts
- 添加参数类型注解
- 添加返回值类型
- 导出类型定义

[2/12] formatters.js → formatters.ts
...

[12/12] 完成！

[执行 npx tsc --noEmit]
类型检查通过，无错误。

[执行 npm test]
所有测试通过。

迁移完成！共修改 12 个文件，添加了 45 个类型定义。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

You: 帮我实现一个用户头像上传功能，要支持裁剪和压缩

Claude: 好的，我来实现这个功能。

首先分析一下需求：
1. 前端：选择图片 → 裁剪 → 预览 → 上传
2. 后端：接收文件 → 压缩 → 存储 → 返回URL

让我先看看现有的项目结构...

[读取 package.json]
[读取 src/components 目录结构]

我建议使用 react-image-crop 做裁剪，browser-image-compression 做压缩。

[执行 npm install react-image-crop browser-image-compression]

现在创建组件...

[创建 src/components/AvatarUploader/index.tsx]
[创建 src/components/AvatarUploader/ImageCropper.tsx]
[创建 src/components/AvatarUploader/styles.module.css]
[创建 src/api/upload.ts]

组件已创建完成。使用方式：

import { AvatarUploader } from '@/components/AvatarUploader'

<AvatarUploader 
  onUpload={(url) => updateUserAvatar(url)}
  maxSize={5} // MB
  aspectRatio={1}
/>

要我写个使用示例吗？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

# 项目规范

## 代码风格
- 使用 TypeScript 严格模式
- 组件使用函数式写法
- 状态管理使用 Zustand

## 命名规范
- 组件：PascalCase
- 函数：camelCase
- 常量：UPPER_SNAKE_CASE

## 提交规范
- feat: 新功能
- fix: 修复
- refactor: 重构
- docs: 文档

1

You: /parallel 同时帮我：1. 升级所有过期依赖 2. 修复 ESLint 警告 3. 补充缺失的测试

1
2
3
4
5
6
7
8

You: 还记得上周我们讨论的那个性能优化方案吗？执行它

Claude: 记得，上周我们讨论了：
1. 将大型列表改为虚拟滚动
2. 添加 React.memo 包装
3. 使用 useMemo 缓存计算结果

我现在开始实施...

1
2

Claude: 我需要执行 rm -rf node_modules，允许吗？
[Allow] [Deny] [Allow All npm commands]