refactor(docs): restructure stage-3 core-skills directory

- Rename numbered directories to descriptive names
- Add new basics and workflow sections
- Improve content organization for better readability
This commit is contained in:
sanbuphy
2026-03-01 12:26:02 +08:00
parent 5360b34531
commit d8eb93663d
8 changed files with 3344 additions and 1668 deletions
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
@@ -1,4 +1,4 @@
# 高级二:如何让 Claude Code 长时间工作
# 如何让 Claude Code 长时间工作
## 引言
@@ -6,6 +6,10 @@
想象一下这些场景:你想让 Claude 帮你重构整个项目,但它写完几个文件就说"我完成了";你想让 Claude 持续修复 bug 直到测试全部通过,但它跑一次就停下来;你想让 Claude "过夜干活",但第二天发现它早就停了。
2025 年夏天,一位名叫 Geoffrey Huntley 的澳大利亚开发者(他也是个牧羊人)写了一个只有 5 行的 bash 脚本。这个脚本很简单,就是不断重启 Claude Code 并喂给它同样的任务。他把它命名为 "Ralph Wiggum"——取自《辛普森一家》中那个不断尝试、从不放弃的角色。
这个简单的脚本震惊了整个硅谷。在短短两周内,相关项目在 GitHub 上获得了 7,000+ 星标。人们用它一晚上生成了 6 个完整项目,用 $297 的 API 成本完成了 $50,000 的合同工作。甚至有人用它在 3 个月内构建了一门完整的编程语言。
本章要解决的核心问题是:如何让 Claude Code 像真正的开发者一样,持续工作直到任务真正完成。
---
@@ -117,12 +121,40 @@ Ralph 的核心机制是 Stop Hook。当 Claude 想要退出时,Stop Hook 会
### 安装
安装很简单,只需要在 Claude Code 中运行:
Ralph Wiggum 是 Claude Code 的官方插件,有两种安装方式。
**方式一:通过官方插件市场安装(推荐)**
```bash
claude /plugins:add ralph-wiggum
# 在 Claude Code 中运行
claude
# 添加官方插件市场
/plugin marketplace add anthropics/claude-code
# 安装 Ralph Wiggum
/plugin install ralph-wiggum@claude-code-plugins
# 验证安装
/plugin
```
**方式二:直接从 GitHub 安装**
```bash
# 进入插件目录
cd ~/.claude/plugins/
# 克隆插件仓库
git clone https://github.com/anthropics/ralph-wiggum-plugin.git
```
安装完成后,你可以使用以下命令:
- `/ralph-wiggum:ralph-loop` - 启动循环
- `/ralph-wiggum:cancel-ralph` - 取消循环
- `/ralph-wiggum:help` - 查看帮助
### 基本使用
基本使用方式是通过 `/ralph-loop` 命令:
@@ -158,6 +190,115 @@ claude /plugins:add ralph-wiggum
这样 Claude 就知道确切要做什么,什么时候才算真正完成。
### 更多 Prompt 模板示例
这里有一些常见任务的 Prompt 模板,你可以直接使用或根据需要修改。
**模板 1:测试迁移(Jest → Vitest**
```
/ralph-loop "
将项目中所有测试从 Jest 迁移到 Vitest
- 保持所有测试逻辑不变
- 更新配置文件(vite.config.js、vitest.config.js
- 替换 Jest 特有的 API(如 jest.mock → vi.mock
- 确保所有测试通过
- 移除 Jest 相关依赖
验收标准:
- npm test 全部通过
- package.json 中无 jest 依赖
- 项目能正常构建
完成后输出:<promise>VITEST_MIGRATION_COMPLETE</promise>
" --max-iterations 40 --completion-promise "VITEST_MIGRATION_COMPLETE"
```
**模板 2:UI/UX 优化(移动端优先)**
```
/ralph-loop "
把这个项目的 UI/UX 做得更像一款精致的、移动端优先的语言学习 App:
- 统一间距与留白(使用 4px 基础单位)
- 建立清晰的字体层级(标题/正文/辅助信息)
- 统一卡片、列表等组件样式
- 添加底部导航(Home/Learn/Quiz/Progress/Settings
- 确保在移动设备上显示良好
验收标准:
- npm run build 成功
- 无 TypeScript 错误
- 主要页面在移动端预览正常
完成后输出:<promise>UI_UX_COMPLETE</promise>
" --max-iterations 25 --completion-promise "UI_UX_COMPLETE"
```
**模板 3:批量添加 TypeScript 类型**
```
/ralph-loop "
给项目中所有函数添加 TypeScript 类型注解:
- 优先处理 src/ 目录
- 为函数参数和返回值添加类型
- 避免使用 any,使用具体类型或 unknown
- 添加必要的类型定义
验收标准:
- npm run typecheck 通过
- 无 @ts-ignore 或 @ts-any 注释
- 代码能正常运行
完成后输出:<promise>TYPES_ADDED</promise>
" --max-iterations 30 --completion-promise "TYPES_ADDED"
```
**模板 4TDD 驱动功能开发**
```
/ralph-loop "
使用 TDD 方式实现用户结账功能:
1. 先写测试(checkout.test.ts
2. 运行测试(会失败)
3. 编写最小代码使测试通过
4. 重构优化
5. 重复直到所有测试通过
功能要求:
- 购物车商品列表
- 运费计算
- 优惠券应用
- 支付表单验证
验收标准:
- 所有测试通过(npm test checkout.test.ts
- 代码覆盖率 > 80%
- ESLint 无错误
完成后输出:<promise>CHECKOUT_COMPLETE</promise>
" --max-iterations 25 --completion-promise "CHECKOUT_COMPLETE"
```
**模板 5:代码风格统一**
```
/ralph-loop "
统一项目代码风格:
- 使用 Prettier 格式化所有文件
- 统一命名规范(变量 camelCase,组件 PascalCase
- 移除未使用的导入和变量
- 统一字符串引号(单引号)
- 统一分号使用(不使用)
验收标准:
- npm run lint 通过
- 代码风格一致
- 构建成功
完成后输出:<promise>STYLE_UNIFIED</promise>
" --max-iterations 20 --completion-promise "STYLE_UNIFIED"
```
### 实战案例
有一个著名的案例是在 Y Combinator 黑客松上,一个团队使用 Ralph Loop。晚上 11 点他们设置任务:根据 specs 目录下的 6 个产品需求,依次实现每个项目的 MVP,每完成一个输出特定的完成标记。设置最大迭代次数 200 次,然后就去睡觉了。
@@ -166,6 +307,26 @@ claude /plugins:add ralph-wiggum
另一个案例来自 Boris ChernyClaude Code 负责人)。他使用 Ralph 加上 Opus 4.5 模型,在 30 天内提交了 259 个 PR,包含 497 次提交,新增 40,000 行代码、删除 38,000 行代码。最惊人的是,这 100% 都是由 Claude Code 完成的,没有人工编写一行代码。
还有一个更疯狂的案例:CURSED 编程语言。这是 Ralph 的创作者 Geoffrey Huntley 用 Ralph Loop 在 3 个月内自主构建的一门完整编程语言。这门语言的特点是使用 Gen Z 俚语作为关键字(比如 `slay``sus``based`),但更重要的是它包含了一个完整的 LLVM 编译器实现、标准库和部分编辑器支持。这个项目展示了 Ralph Loop 的真正潜力——你给它一个清晰的目标,它就能持续工作几个月,直到把复杂的项目真正完成。
### 更多真实案例
**一夜完成 $50,000 合同项目**
有一个开发团队接到了一个价值 $50,000 的外包合同。他们在晚上设置好 Ralph Loop,详细描述了项目需求,设置了最大迭代次数,然后就去睡觉了。
第二天早上醒来,项目已经完成了——包括所有功能、测试、文档。而 API 调用成本只有 $297。这个案例展示了 Ralph 的经济价值:你花费的是 API 费用,节省的是几周的人工时间。
**自动重构项目**
另一个开发者用 Ralph 重构一个遗留项目。项目代码混乱,没有测试,文档缺失。他给 Ralph 的任务是:
1. 为现有代码添加测试
2. 逐步重构,每次重构后确保测试通过
3. 更新文档
设置好后让 Ralph 运行了一整个周末。周一回来,发现项目已经发生了 47 次提交,代码结构清晰,测试覆盖率达到 75%,并且有完整的 API 文档。成本约 $12。
### Ralph 的哲学
Ralph 体现了三个核心哲学思想。
@@ -176,6 +337,47 @@ Ralph 体现了三个核心哲学思想。
第三是持续尝试。Keep trying until it works——这就是 Ralph 的精神。
### 什么时候适合/不适合使用 Ralph
了解 Ralph 的适用场景很重要,这能帮你节省时间和成本。
**✅ 适合使用 Ralph 的场景**
这些任务有明确的完成标准,适合 Ralph 自动迭代:
| 场景 | 原因 |
|------|------|
| 测试迁移 | 有明确目标(新框架),测试通过即可验证 |
| 大规模重构 | 可以定义具体的重构规则 |
| 框架迁移 | 迁移完成后代码能正常运行 |
| 批量添加类型 | typecheck 通过即完成 |
| 测试覆盖率提升 | 覆盖率百分比是客观指标 |
| 文档生成 | API 文档可以自动验证 |
| UI/UX 统一改进 | 可以定义具体的设计规范 |
| Bug 修复(有复现步骤) | 测试通过即修复成功 |
**❌ 不适合使用 Ralph 的场景**
这些任务需要人类判断或探索,不适合 Ralph:
| 场景 | 原因 |
|------|------|
| 架构设计决策 | 微服务 vs 单体需要权衡 |
| 安全相关代码 | 安全漏洞可能很隐蔽 |
| 需求模糊的任务 | 没有明确完成标准 |
| 探索性工作 | 需要不断调整方向 |
| 创意性设计 | 需要人类审美判断 |
| 简单一次性任务 | 使用 Ralph 是浪费 |
**💡 判断标准**
问自己三个问题:
1. **我能定义明确的完成标准吗?** 如果不能,不适合
2. **有客观的验证方法吗?**(测试、构建、类型检查)如果没有,不适合
3. **这个任务需要我持续反馈吗?** 如果是,不适合
如果三个答案都是"否",那就放手让 Ralph 去做吧!
---
## 方法三:增强版 Ralph
@@ -549,29 +751,32 @@ Ralph Wiggum 是通用推荐,适合大部分场景。它有完整的 Stop Hook
### 社区项目
- [frankbria/ralph-claude-code](https://github.com/frankbria/ralph-claude-code) - 增强版 Ralph 实现,包含额外的安全机制
- [win4r/claude-code-hooks](https://github.com/win4r/claude-code-hooks) - Hook 示例和工具集合
- [frankbria/ralph-claude-code](https://github.com/frankbria/ralph-claude-code) (2.1k⭐) - 增强版 Ralph 实现,包含额外的安全机制
- [Awesome Ralph](https://github.com/snwfdhmp/awesome-ralph) - Ralph 资源和示例精选列表
- [Ralph Ryan](https://github.com/wquguru/ralph-ryan) - 结合 PRD 生成和 Ralph 循环的实现
- [snarktank/ralph](https://github.com/snarktank/ralph) - 原始 Ralph 实现
- [affaan-m/everything-claude-code](https://github.com/affaan-m/everything-claude-code) - 生产级配置模板
- [claude-flow](https://github.com/ruvnet/claude-flow) - 企业级编排平台
### 文章与教程
**英文资源**
- [Geoffrey Huntley - Ralph Technique](https://ghuntley.com/ralph/) - Ralph 技术的原创者
- [O'Reilly - Conductors to Orchestrators](https://www.oreilly.com/radar/conductors-to-orchestrators-the-future-of-agentic-coding/) - AI 编程从指挥到编排的演进
- [构建可靠长时运行AI代理的有效框架实践](https://m.blog.csdn.net/weixin_48708052/article/details/158044721) - Anthropic 工程博客精读
- [Claude Code 最佳实践(作者亲授)](https://juejin.cn/post/7366666666666666666) - 官方最佳实践分享
- [Claude Code 全攻略](https://developer.aliyun.com/article/1705912) - 完整的使用指南
- [Reverse Engineering Analysis](https://m.blog.csdn.net/qq_33778762/article/details/149490953) - Claude Code 的逆向工程分析
**中文教程**
- [保姆级教程 - CSDN](https://m.blog.csdn.net/zsr154278963/article/details/156637281) - 详细的安装指南和使用教程
- [深度解析 - 头条](https://m.toutiao.com/a7585579989207188006/) - 工作机制和核心原理
- [全栈式白话指南](https://www.jdon.com/90167-ralph-wigum-loop-explained-for-teens.html) - 从原理到实战完整讲解
- [入门和实战教程 - 博客园](https://www.cnblogs.com/buwai/p/19625356) - 基础知识与实践案例
- [Ralph Loop 深度解析 - CSDN](https://m.blog.csdn.net/roamingcode/article/details/156732443) - Stop Hook 机制详解
- [Claude Code 永动机 - CSDN](https://m.blog.csdn.net/qq_44866828/article/details/156736656) - 无限循环迭代插件详解
- [Ralph Loop 新手入门 - CNblogs](https://www.cnblogs.com/gyc567/p/19495639) - 最佳实践和提示词汇总
### 实战案例
- [16 Agents Build C Compiler](https://arxiv.org/abs/2408.01342) - Nicholas Carlini 的实验论文
- [CURSED 编程语言](https://github.com/geoffreyhuntley/cursed) - 用 Ralph 在 3 个月内构建的完整编程语言
- [Boris Cherny's 30 Days](https://twitter.com/boriskirov/status/1756002385683786616) - 259 PRs 案例分享
- [Y Combinator Hackathon](https://github.com/geoffreyhuntley/ralph) - 6 个项目过夜生成的案例
### 工具文档
- [Tmux 官方文档](https://github.com/tmux/tmux/wiki) - Tmux 的完整文档
- [GitHub Actions 文档](https://docs.github.com/en/actions) - GitHub Actions 的官方文档
- [Agent SDK](https://docs.anthropic.com/en/docs/agents) - 构建自定义代理的 SDK
- [Geoffrey Huntley's Blog](https://ghuntley.com/) - Ralph 创始人的技术博客
+568
View File
@@ -0,0 +1,568 @@
# Claude Code MCP 完全指南
## 什么是 Claude Code MCP
**Claude Code** 是 Anthropic 官方推出的 AI 命令行工具,而 **MCPModel Context Protocol** 则是让 Claude Code 能够连接外部工具和服务的协议。
简单来说,MCP 让 Claude Code 从一个「只能读写本地文件」的 AI 助手,变成一个「能访问 GitHub、数据库、API、云服务」的超级助手!
## 为什么需要在 Claude Code 中使用 MCP
### 没有 MCP 的 Claude Code
```
你能做的:
✓ 读取本地文件
✓ 编辑代码
✓ 运行命令
✓ 使用 Bash 工具
你不能做的:
✗ 查看你的 GitHub Issues
✗ 访问云数据库
✗ 调用外部 API
✗ 获取实时天气
```
### 有了 MCP 的 Claude Code
```
你能做的:
✓ 所有原来的功能
✓ 查看/创建 GitHub Issues 和 PR
✓ 查询 SQLite、PostgreSQL 数据库
✓ 访问 Notion、Slack 等外部服务
✓ 获取实时天气、地图数据
✓ 浏览器自动化
✓ ...以及更多!
```
## 快速开始
### 步骤 1:了解配置文件位置
Claude Code 的 MCP 配置文件位于:
| 级别 | 配置文件路径 | 作用范围 |
|-----|-------------|----------|
| **用户级** | `~/.claude.json` | 所有项目 |
| **项目级** | `.claude/mcp.json` | 当前项目 |
推荐优先使用**项目级配置**,让不同项目使用不同的 MCP 服务。
### 步骤 2:用自然语言添加 MCP 服务器
在 Claude Code 中,你不需要手动编辑配置文件或记忆命令,直接用自然语言描述即可:
```
你:帮我添加 GitHub MCP 服务器,我的 token 是 ghp_xxx
Claude:我来帮你配置 GitHub MCP 服务器...
[自动更新 .claude/mcp.json]
```
```
你:添加一个 SQLite 数据库服务器,数据库文件在 ./data/app.db
Claude:好的,我来配置 SQLite MCP 服务器...
```
```
你:添加一个 HTTP 类型的 MCP 服务器,地址是 https://api.example.com/mcp
Claude:我来添加这个远程 MCP 服务器...
```
### 步骤 3:验证配置
直接询问 Claude Code
```
你:现在有哪些可用的 MCP 服务器?
Claude:当前已配置的 MCP 服务器:
• github - GitHub 集成
• sqlite - SQLite 数据库
• filesystem - 文件系统访问
```
或使用诊断命令:
```
/doctor
```
### 步骤 4:开始使用
配置成功后,直接用自然语言调用 MCP 功能:
```
你:帮我在 GitHub 上创建一个 Issue
Claude:我可以帮你创建 GitHub Issue。请告诉我:
- 仓库地址(如 owner/repo
- Issue 标题
- Issue 描述
```
## Claude Code 的自然语言管理
### 查看和管理 MCP 服务器
你可以完全用自然语言与 Claude Code 交互:
```
你:列出所有已配置的 MCP 服务器
你:检查一下 MCP 服务器的连接状态
你:删除 notion 这个 MCP 服务器
你:更新 github 服务器的 token
```
### 诊断问题
当遇到问题时:
```
你:检查一下 MCP 连接有什么问题
Claude:[会自动运行诊断,分析配置文件,检查服务器状态]
```
## 配置方式详解
### 用户级配置(全局)
编辑 `~/.claude.json`
```json
{
"mcpServers": {
"filesystem": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/yourname/Documents"]
},
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "your-token"
}
}
}
}
```
### 项目级配置(推荐)
编辑项目根目录的 `.claude/mcp.json`
```json
{
"mcpServers": {
"project-db": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-sqlite", "--db-path", "./data/app.db"]
}
}
}
```
**项目级配置优势:**
- 团队成员可以共享配置(提交到 Git)
- 不同项目使用不同的 MCP 服务
- 配置更灵活,不会污染全局设置
### 传输方式配置
Claude Code 支持三种传输方式:
#### STDIO(本地进程)
```json
{
"mcpServers": {
"local-tool": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-filesystem", "/path"]
}
}
}
```
#### HTTP(远程服务)
```json
{
"mcpServers": {
"remote-api": {
"url": "https://api.example.com/mcp",
"transport": "http",
"headers": {
"Authorization": "Bearer your-token"
}
}
}
}
```
#### SSE(服务器推送)
```json
{
"mcpServers": {
"streaming": {
"url": "https://api.example.com/sse",
"transport": "sse"
}
}
}
```
## 实战示例
### 示例 1GitHub 工作流自动化
```
你:帮我把当前的修改推送到 GitHub,然后创建一个 PR,标题是"添加新功能"
Claude
1. 检查当前 git 状态...
2. 创建新分支 feature/new-feature...
3. 提交更改...
4. 推送到远程...
5. 调用 github_create_pull_request 创建 PR...
6. PR 已创建:https://github.com/owner/repo/pull/123
```
### 示例 2:数据库查询
```
你:查询数据库中最近注册的 10 个用户
Claude
1. 连接到 SQLite 数据库...
2. 执行查询:SELECT * FROM users ORDER BY created_at DESC LIMIT 10
3. 返回结果:
- 张三 (zhang@example.com) - 2025-02-28
- 李四 (li@example.com) - 2025-02-27
...
```
### 示例 3:网页截图分析
```
你:打开 https://example.com 并截图,分析一下页面设计
Claude
1. 启动浏览器...
2. 导航到 https://example.com...
3. 截取屏幕...
4. [返回截图]
5. 页面设计分析:
- 布局采用居中设计,最大宽度 1200px
- 主色调为蓝色 (#3b82f6)
- 导航栏固定在顶部
...
```
### 示例 4:与 Notion 集成
```
你:把我刚才的笔记保存到 Notion
Claude
1. 使用 Notion MCP 服务器...
2. 创建新页面...
3. 已保存:https://notion.so/page/xxx
```
## 调试技巧
### 使用自然语言诊断
遇到问题时,直接告诉 Claude Code
```
你:我的 MCP 服务器连接不上了,帮我检查一下
你:GitHub MCP 工具调用失败,是什么原因?
你:为什么 sqlite 服务器一直显示连接中?
```
Claude Code 会自动:
1. 检查配置文件格式
2. 验证环境变量
3. 测试服务器连接
4. 提供具体的修复建议
### 常见问题排查
| 问题 | 可能原因 | 解决方案 |
|-----|---------|----------|
| 服务器未连接 | 配置文件格式错误 | 检查 JSON 语法 |
| 工具无法调用 | 权限不足 | 检查环境变量 |
| 连接超时 | 网络问题 | 检查 URL 或网络 |
| 进程崩溃 | 服务器代码错误 | 查看服务器日志 |
### 手动诊断命令
```
/doctor
```
输出示例:
```
系统诊断报告:
===============
Claude Code: v2.5.0 ✓
Node.js: v20.0.0 ✓
MCP 服务器状态:
• github: ✓ 已连接 (12 tools)
• sqlite: ✗ 连接失败 - Database file not found
• puppeteer: ✓ 已连接 (8 tools)
建议:
1. 检查 sqlite 数据库路径是否正确
2. 确保 .claude/mcp.json 格式正确
```
## 最佳实践
### 1. 项目级配置优先
**为什么推荐项目级配置?**
不同的项目往往需要不同的 MCP 服务。例如,前端项目可能需要浏览器测试工具,而后端项目则需要数据库连接。使用项目级配置可以让每个项目拥有自己专属的 MCP 服务器集合,避免全局配置的混乱。
更重要的是,项目级配置可以提交到 Git 仓库,团队成员克隆项目后就能直接使用相同的 MCP 服务,无需重复配置。
```
项目 A(前端项目)→ .claude/mcp.json 包含浏览器测试 MCP
项目 B(后端项目)→ .claude/mcp.json 包含数据库 MCP
```
### 2. 敏感信息环境变量化
**永远不要在配置文件中硬编码密钥!**
配置文件可能会被意外提交到 Git 仓库,导致密钥泄露。正确的做法是将敏感信息存储在环境变量中,配置文件只引用变量名。这样即使配置文件被公开,也不会暴露实际的密钥。
```json
{
"env": {
"GITHUB_TOKEN": "$GITHUB_TOKEN", // ✓ 好 - 从环境变量读取
"GITHUB_TOKEN": "ghp_abc123" // ✗ 不好 - 硬编码密钥
}
}
```
### 3. 版本锁定
**为什么需要锁定版本?**
默认情况下,`npx -y` 会总是使用最新版本的 MCP 服务器。这可能导致问题:新版本可能引入不兼容的更改,或者某个服务器突然被下架/改名。
通过在包名后添加 `@版本号`,可以确保始终使用经过验证的特定版本,避免因自动更新导致的意外问题。
```json
{
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github@1.2.3"] // 固定版本
}
```
### 4. 文档化你的 MCP 配置
**让团队成员快速理解 MCP 配置**
当项目中有多个 MCP 服务器时,新成员可能不清楚每个服务器的用途和配置要求。在 `.claude/` 目录下创建一个 `README.md` 文件,说明每个服务器的用途、所需的配置项以及获取方式,可以大大降低团队的沟通成本。
在项目中创建 `.claude/README.md`
在项目中创建 `.claude/README.md`
```markdown
# MCP 配置说明
本项目使用的 MCP 服务器:
## github
用于自动化 GitHub 操作,需要配置 GITHUB_TOKEN。
## sqlite
连接到 ./data/app.db,用于查询和修改数据。
## puppeteer
用于 E2E 测试。
```
## Claude Code vs Claude Desktop
| 特性 | Claude Code | Claude Desktop |
|-----|-------------|----------------|
| **配置文件** | `~/.claude.json``.claude/mcp.json` | `claude_desktop_config.json` |
| **项目级配置** | ✓ 支持 | ✗ 不支持 |
| **自然语言管理** | ✓ 支持 | ✗ 需手动编辑 |
| **诊断工具** | ✓ `/doctor` | ✗ 无 |
| **热重载** | ✓ 自动重载 | ✗ 需重启应用 |
| **适用场景** | 开发工作流、CI/CD | 日常使用、办公 |
## 常用 MCP 服务器
> 💡 完整的 MCP 服务器列表请参考附录 [MCP 服务器大全](/zh-cn/appendix/mcp-servers/)
### GitHub 服务器
**功能:** Issues、PR、仓库管理
```json
{
"mcpServers": {
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "your-token"
}
}
}
}
```
**获取 Token** https://github.com/settings/tokens
### SQLite 服务器
**功能:** 查询和管理 SQLite 数据库
```json
{
"mcpServers": {
"sqlite": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-sqlite", "--db-path", "./data/database.db"]
}
}
}
```
### 文件系统服务器
**功能:** 访问指定目录的文件
```json
{
"mcpServers": {
"filesystem": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/yourname/Documents"]
}
}
}
```
### Puppeteer 浏览器自动化
**功能:** 浏览器控制、截图、自动化测试
```json
{
"mcpServers": {
"puppeteer": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-puppeteer"]
}
}
}
```
### Brave 搜索服务器
**功能:** 网络搜索
```json
{
"mcpServers": {
"brave-search": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-brave-search"],
"env": {
"BRAVE_API_KEY": "your-brave-api-key"
}
}
}
}
```
## 参考资源
### 官方文档
- [Claude Code 官方文档 - MCP](https://docs.anthropic.com/zh-CN/docs/claude-code/mcp)
- [MCP 官方网站](https://modelcontextprotocol.io/)
- [MCP 规范文档](https://modelcontextprotocol.io/specification/)
- [MCP GitHub 仓库](https://github.com/modelcontextprotocol)
### 官方服务器
- [@modelcontextprotocol/server-github](https://github.com/modelcontextprotocol/servers/tree/main/src/github) - GitHub 集成
- [@modelcontextprotocol/server-sqlite](https://github.com/modelcontextprotocol/servers/tree/main/src/sqlite) - SQLite 数据库
- [@modelcontextprotocol/server-postgres](https://github.com/modelcontextprotocol/servers/tree/main/src/postgres) - PostgreSQL 数据库
- [@modelcontextprotocol/server-filesystem](https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem) - 文件系统访问
- [@modelcontextprotocol/server-puppeteer](https://github.com/modelcontextprotocol/servers/tree/main/src/puppeteer) - 浏览器自动化
- [@modelcontextprotocol/server-fetch](https://github.com/modelcontextprotocol/servers/tree/main/src/fetch) - 网页抓取
- [@modelcontextprotocol/server-brave-search](https://github.com/modelcontextprotocol/servers/tree/main/src/brave-search) - Brave 搜索
- [@modelcontextprotocol/server-git](https://github.com/modelcontextprotocol/servers/tree/main/src/git) - Git 操作
### 教程文章
- [一文讲透 MCP 的原理及实践](https://view.inews.qq.com/a/20250414A023WV00)
- [MCPModel Context Protocol)架构与工作原理](https://m.toutiao.com/w/1826385835060307/)
- [2025 大模型最新教程:MCP 协议从入门到精通](https://m.blog.csdn.net/weixin_45653328/article/details/150916706)
- [从零开始学 MCP(八)- 构建一个 MCP server](https://juejin.cn/post/7582510291667419187)
### 配置指南
- [Claude Code 最佳实践](https://www.anthropic.com/engineering/claude-code-best-practices)
- [Claude Code 完全配置指南](https://juejin.cn/post/7576838552472043563)
### 开发教程
- [零基础构建 MCP 服务器 TypeScript/Python 双语言实战指南](https://m.blog.csdn.net/ztt123654/article/details/150844207)
- [终极 MCP 服务器构建指南:TypeScript 与 Python 双版本完整教程](https://m.blog.csdn.net/gitblog_00703/article/details/154862128)
- [使用 TypeScript 构建一个最简单的 MCP 服务器](https://m.blog.csdn.net/weixin_45653525/article/details/148433757)
- [使用 Azure 容器应用生成 TypeScript MCP 服务器](https://learn.microsoft.com/zh-cn/azure/developer/ai/build-mcp-server-ts)
### MCP 服务器资源
- [Awesome MCP Servers](https://github.com/punkpeye/awesome-mcp-servers) - 最全面的 MCP 服务器列表
- [Official MCP Registry](https://registry.modelcontextprotocol.io) - Anthropic 官方「应用商店」
- [MCP.so](https://mcp.so) - 社区 MCP 服务器中心
- [Glama.ai MCP](https://glama.ai/mcp/servers) - 带评分评论的 MCP 目录
- [Smithery](https://smithery.ai) - MCP 服务器市场
- [MCPHub](https://mcphub.io/registry) - 界面简洁的目录
- [LobeHub MCP](https://lobehub.com/zh/mcp) - 中文 MCP 目录
### 地图和天气服务
- [高德地图 MCP Server](https://lobehub.com/zh/mcp/luozengchang-mcp-amap)
- [腾讯位置服务 MCP 文档](https://lbs.qq.com/service/MCPServer/MCPServerGuide/overview)
- [彩云天气 MCP Server](https://github.com/caiyunapp/mcp-caiyun-weather)
- [OpenWeatherMap MCP Server](https://github.com/CodeByWaqas/weather-mcp-server)
### 社区资源
- [Everything Claude Code Config](https://github.com/affaan-m/everything-claude-code) - 生产级 Claude Code 配置集合
- [AI Coding Guide](https://github.com/hacket/AICodingGuide) - Claude Code 中文学习路径
### 实际应用案例
- [BlenderMCP - AI 驱动的 3D 建模](https://github.com/Belthur/blender-mcp) - 4,100+ ⭐
- [MCP 生产环境 15 条最佳实践](https://learn.microsoft.com/zh-cn/azure/azure-functions/scenario-mcp-apps)
@@ -307,6 +307,140 @@ Claude 会根据这个技能的规范,帮你设计出:
---
### 第三个 Skill:用 frontend-slides 快速制作精美 PPT
#### 简介
**frontend-slides** 是一个让你用自然语言创建精美 HTML 演示文稿的 Skill —— 即使你不懂任何 CSS 或 JavaScript
它的核心特点是"**展示而非讲述**":当你描述不出想要的设计风格时,它会生成 3 个视觉预览让你选择,而不是让你用语言描述"蓝色背景、大字体"这种抽象需求。
#### 安装 frontend-slides
**方式一:手动安装**
```bash
# 创建 skill 目录
mkdir -p ~/.claude/skills/frontend-slides
# 下载文件(或从 GitHub 复制)
# 1. 访问 https://github.com/zarazhangrui/frontend-slides
# 2. 下载 SKILL.md 和 STYLE_PRESETS.md
# 3. 放到 ~/.claude/skills/frontend-slides/ 目录
```
**方式二:使用 find-skills 安装**
```
帮我找找做 PPT 演示文稿相关的技能
```
Claude 会通过 find-skills 搜索并推荐 frontend-slides。
#### 使用场景
**场景 1:从零创建演示文稿**
```
/frontend-slides
我想创建一个 AI 创业项目的融资路演 PPT,大概 10 页
```
Claude 会引导你:
1. 询问每页内容(标题、要点、图片)
2. 询问你想要的感觉(惊艳?专业?温馨?)
3. 生成 3 个视觉风格预览供你选择
4. 创建完整的 HTML 演示文稿
5. 在浏览器中打开预览
**场景 2:转换 PowerPoint 文件**
```
/frontend-slides
把我的 presentation.pptx 转成网页版演示
```
Claude 会:
1. 提取 PPT 中的所有文本、图片和备注
2. 显示提取的内容供你确认
3. 让你选择视觉风格
4. 生成保留所有原始内容的 HTML 演示文稿
**场景 3:快速生成风格预览**
```
/frontend-slides
我想做一个技术分享的 PPT,先给我看看可选的视觉风格
```
Claude 会直接生成 3 个不同风格的预览页面:
- **暗色主题**Neon Cyber、Terminal Green、Deep Space
- **亮色主题**Paper & Ink、Swiss Modern、Soft Pastel
- **特殊风格**Brutalist、Gradient Wave
#### 内置的视觉风格
| 风格名称 | 特点 | 适用场景 |
|---------|------|---------|
| **Neon Cyber** | 未来科技感、粒子效果 | 技术分享、AI 产品 |
| **Midnight Executive** | 高端商务、值得信赖 | 商务汇报、融资路演 |
| **Paper & Ink** | 编辑风格、文学气息 | 内容创作、教育分享 |
| **Swiss Modern** | 简洁几何、包豪斯风格 | 设计作品、极简主义 |
| **Brutalist** | 原始大胆、抓人眼球 | 艺术展示、个性表达 |
#### 输出效果
生成的演示文稿是一个**单文件 HTML**,包含:
- 完整的样式和交互代码
- 键盘导航(方向键、空格)
- 触摸/滑动支持
- 鼠标滚轮翻页
- 进度条和导航点
- 滚动触发动画
- 响应式设计
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 所有样式内联,零依赖 -->
</head>
<body>
<section class="slide title-slide">
<h1 class="reveal">你的标题</h1>
</section>
<!-- 更多幻灯片... -->
</body>
</html>
```
#### 为什么推荐?
1. **零依赖**:单个 HTML 文件,10 年后还能打开
2. **视觉发现**:不用描述设计,直接选择喜欢的
3. **PPT 转换**:保留现有内容,换上更好的皮肤
4. **生产级代码**:可访问性好、注释清晰、易于定制
**相关链接**
- [frontend-slides GitHub 仓库](https://github.com/zarazhangrui/frontend-slides) - 6.1k+ Star
- [在线预览示例](https://github.com/zarazhangrui/frontend-slides#output-example)
---
### 三个 Skills 的对比
| Skills | 解决什么问题 | 好玩程度 | 实用程度 |
|--------|-------------|---------|---------|
| **remotion-dev/skills** | 用代码做视频 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| **anthropics/skills/frontend-design** | 让前端变好看 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| **frontend-slides** | 快速制作精美 PPT | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
---
### 安装后如何使用
安装完成后,你不需要做任何额外配置。当你向 Claude 提出相关任务时,它会自动调用对应的 Skill。
@@ -967,6 +1101,10 @@ description: 审查 Pull Request 的代码。当用户提到 PR、review、代
- [Vibe Coding - CLAUDE.md、Skills、Subagents 全链路实战](https://blog.csdn.net/yangshangwei/article/details/158319117)
- [手把手教你自定义 Claude Code Skills](https://m.blog.csdn.net/u010028049/article/details/157979705)
### 深入阅读
- [Claude Skills 内部核心机制](/easy-vibe/zh-cn/appendix/8-artificial-intelligence/skills-internal-mechanism) - 深入理解 Skills 的工作原理、三层加载架构、双上下文注入机制
---
## 总结
@@ -1,4 +1,4 @@
# 高级五:Claude Code Superpowers 工程级开发
# Claude Code Superpowers 工程级开发
## Superpowers 简介
@@ -0,0 +1,684 @@
# Claude Code 工作流最佳实践
## 前言
Claude Code 不仅仅是一个 AI 编程助手,更是一种全新的开发方式。它改变了开发者与代码、与工具、与团队的交互模式。掌握正确的工作流,可以让你的开发效率提升 10 倍,代码质量显著提高,同时减少重复性工作带来的疲惫感。
### 为什么需要专门的工作流?
传统的开发工作流是基于人类开发者设计的:阅读文档、理解代码、编写实现、手动测试、代码审查。而 AI 辅助开发需要一种全新的协作模式:
- **上下文管理**:AI 有上下文窗口限制,需要策略性地传递信息
- **任务分解**:复杂任务需要拆分成 AI 可以理解和执行的小步骤
- **验证机制**:AI 生成的代码需要系统化的验证流程
- **知识沉淀**:团队需要共享 AI 的配置和项目知识
### 本文涵盖的内容
本文将系统介绍 Claude Code 在不同场景下的最佳实践,包括:
1. **日常开发工作流** - 新功能开发、Bug 修复的标准流程
2. **代码重构工作流** - 安全、高效地进行大规模重构
3. **Code Review 工作流** - 利用 AI 提升代码审查质量
4. **团队协作配置** - 共享配置、统一规范、知识管理
5. **CI/CD 集成** - 将 Claude Code 融入自动化流程
### 核心原则
使用 Claude Code 需要建立正确的工作方式。它能力强大,但并非万能,需要合理的分工和有效的协作。
**合理的分工**
Claude 适合处理重复性工作,例如阅读代码、生成样板、查找 Bug、统一代码格式等。但架构设计、业务理解、关键决策等需要由人来把控。
**建立信任**
初次使用时,建议从简单任务开始(如变量重命名、简单函数重构),观察 Claude 的理解能力和执行效果。随着对其能力边界的了解,再逐步增加任务复杂度。
**清晰的上下文传递**
项目背景应通过 CLAUDE.md 文档提供,具体修改目标需使用 `@文件名` 明确指向,预期结果也要描述清楚。模糊的指令会导致偏离预期的输出。
**验证环节不可省略**
Claude 生成的代码需要经过测试验证、类型检查和风格审查。最终的代码质量责任仍在于开发者,AI 是辅助工具而非替代品。
## 日常开发工作流
日常开发占据了程序员大部分的工作时间。建立标准化的日常开发工作流,可以让你更高效地完成新功能开发和 Bug 修复,同时保持代码质量。
### 新功能开发流程
新功能开发是最常见的开发任务。一个完整的 AI 辅助开发流程包含以下步骤:
```
1. 理解需求 → 2. 分析现有代码 → 3. 设计实现方案
→ 4. 编写代码 → 5. 测试与调试 → 6. 代码审查 → 7. 提交代码
```
#### 快速开始
**1. 了解项目结构**
```text
@directory src/
```
让 Claude 快速浏览项目目录结构,了解:
- 代码组织方式(是否分层、模块如何划分)
- 使用的技术栈(框架、库类型)
- 现有的命名和文件组织规范
> **为什么?** 在不熟悉的项目中开发,盲目动手容易写出不符合项目风格的代码。让 Claude 先"看"一遍项目,生成的代码会更契合现有架构。
---
**2. 查找相关代码**
```text
@grep "关键词" --glob "*.ts"
```
查找与当前任务相关的现有代码:
- 是否已有类似功能可以复用
- 其他人是如何处理类似场景的
- 需要修改或关联哪些文件
> **为什么?** 避免"重复造轮子",同时确保新代码与现有代码风格一致。
---
**3. 制定计划**
```text
使用 /plan 或直接描述需求
```
让 Claude 制定详细的实施计划:
- 涉及哪些文件的修改
- 实现的先后顺序
- 可能遇到的技术难点
> **为什么?** 复杂任务拆分成小步骤后,执行更可控,出错也更容易定位。
---
**4. 生成代码**
```text
让 Claude 根据计划生成代码框架
```
按计划逐步生成代码,从基础框架开始:
- 先生成类型定义和接口
- 再生成核心逻辑
- 最后处理边界情况和错误处理
> **为什么?** 框架先行可以确保结构合理,细节后填可以边写边验证。
---
**5. 运行测试**
```text
!npm test
```
每次代码修改后立即运行测试:
- 单元测试验证函数逻辑
- 集成测试验证模块交互
- 手动测试验证用户交互
> **为什么?** 及早发现问题,避免错误累积到最后难以定位。
---
**6. 代码审查**
```text
使用 /review 或让 Claude 审查变更
```
让 Claude 从多个维度审查代码:
- 安全问题(SQL 注入、XSS 等)
- 性能问题(N+1 查询、内存泄漏等)
- 代码风格(是否符合项目规范)
> **为什么?** AI 能发现人眼容易遗漏的问题,提高代码质量。
---
**7. 提交代码**
```text
/commit
```
生成符合规范的提交信息:
- 自动分析代码变更
- 生成 conventional commit 格式的提交信息
- 包含变更摘要和关键细节
> **为什么?** 清晰的提交信息让代码历史更易读,后续回溯问题更方便。
### Bug 修复流程
Bug 修复需要快速定位问题、理解根因、实施修复并验证。
**标准流程:**
1. **收集错误信息** - 错误消息、复现步骤、环境信息
2. **定位问题代码** - 搜索相关代码、分析调用链
3. **分析根因** - 理解为什么会出错、评估影响范围
4. **实施修复** - 编写修复代码、添加回归测试
5. **提交修复** - 生成提交信息、记录 Bug 原因
**实用命令:**
```bash
# 搜索错误信息
@grep "错误消息" --glob "*.ts"
# 查看函数调用链
@grep "functionName" --context 5
# 运行相关测试
!npm test -- 文件名.test.ts
# 查看最近改动
!git diff
```
### 日常开发 Checklist
| 阶段 | 检查项 | 操作命令/方法 |
|-----|--------|--------------|
| **开始前** | 了解项目结构 | `@directory src/` |
| | 查看相关代码 | `@grep "keyword" --glob "*.ts"` |
| **编码中** | 制定实施计划 | `/plan` |
| | 生成代码框架 | 直接描述需求 |
| **测试阶段** | 运行单元测试 | `!npm test` |
| | 检查测试覆盖率 | `!npm run test:coverage` |
| **审查阶段** | 自动代码审查 | `/review` |
| | 类型检查 | `!npm run typecheck` |
| **提交阶段** | 生成提交信息 | `/commit` |
### 常见陷阱
**陷阱 1:一次性给太多任务**
```
❌ "帮我实现一个完整的电商系统"
✅ "先实现用户注册功能"
```
**陷阱 2:不提供足够的上下文**
```
❌ "修复这个 bug"
✅ "登录功能报错'Invalid token',错误在 src/middleware/auth.ts"
```
**陷阱 3:不验证 AI 生成的代码**
```
❌ 直接接受所有修改
✅ 每次修改后运行测试,手动验证关键功能
```
## 代码重构工作流
重构就是"在不改变功能的前提下,改善代码结构"。听起来简单,但实际操作中很容易出问题。
### 重构前:先看清楚再动手
动手之前,先搞清楚两件事:要改哪些文件?这些文件被谁引用?
```bash
# 找出需要重构的文件
@grep "旧模式代码" --glob "*.ts"
# 看看这些文件被哪些地方引用
@grep "import.*ModuleName" --glob "*.ts"
```
### 创建安全网
重构就像走钢丝,需要安全网。
```bash
# 第一步:创建新分支,别在主分支上搞
!git checkout -b refactor/描述你的重构
# 第二步:确认现有测试都能通过
!npm test
```
如果测试本来就不过,先修测试再重构。否则你根本不知道重构是不是搞坏了东西。
### 自动验证配置
让 Claude 每次改代码后自动跑测试,省心又安全:
::: details 点击查看配置
```json
// .claude/settings.json
{
"hooks": {
"afterEdit": ["npm run test:related"],
"beforeCommit": ["npm run test"]
}
}
```
:::
这样配置后,每次 Claude 修改代码都会自动运行测试,失败了会提醒你。
### 重构的核心原则
记住三句话:
1. **小步走** - 别想着一次改完,改一点验证一点
2. **有测试才动** - 没测试的代码先补测试,再重构
3. **重构别改功能** - 只改结构,不改行为。想优化性能?另开一个 PR
### 重构检查清单
每改完一批代码,跑一遍这些检查:
| 检查项 | 命令 | 通过标准 |
|--------|------|----------|
| 类型检查 | `npm run type-check` | 无类型错误 |
| 相关测试 | `npm run test:related` | 相关测试通过 |
| 全部测试 | `npm test` | 所有测试通过 |
| 代码风格 | `npm run lint` | 无 lint 错误 |
| 构建测试 | `npm run build` | 构建成功 |
只要有一项不过,别继续改,先修复。
## Code Review 工作流
代码审查就是让同事检查你的代码,帮你发现问题和改进点。但这事儿挺累人的——看代码费眼,还容易漏掉问题。
Claude 可以帮你做第一轮审查,把明显的问题先筛出来,人只要关注重要的东西就行。
### 审查要看什么?
按优先级排个序:
| 优先级 | 检查项 | 说明 |
| :--- | :--- | :--- |
| 🔴 最高 | 安全问题 | SQL 注入、密码硬编码、权限漏洞 |
| 🟡 高 | 性能问题 | N+1 查询、内存泄漏 |
| 🟢 中 | 代码质量 | 命名不规范、重复代码 |
| ⚪ 低 | 风格问题 | 缺少空格、注释不完整 |
### 提交 PR 前:先自己审一遍
```text
@file src/你改的文件.ts 审查这段代码,看看有没有安全问题
```
让 Claude 帮你检查:
- 有没有安全漏洞
- 有没有性能问题
- 逻辑有没有明显错误
### 写好 PR 描述
好的 PR 描述能让审查者快速理解你在做什么。
::: details 标准模板
```markdown
## 做了什么
用一句话说清楚改了啥
## 为什么改
说明改动的背景和原因
## 改了哪些地方
- 改动点 1
- 改动点 2
## 测试情况
- [ ] 单元测试通过
- [ ] 手动验证通过
## 注意事项
如果会影响其他功能,在这里说明
```
:::
### 审查别人的 PR
用 Claude 帮你快速了解 PR 的内容:
```text
帮我审查这个 PR,重点检查安全问题和性能问题
```
Claude 会列出发现的问题,你再重点看这些问题是否属实。
### 本地预提交检查
在提交前自动跑一遍快速检查:
::: details 点击查看配置
```bash
#!/bin/bash
# .git/hooks/pre-commit
echo "检查代码..."
claude "快速检查暂存的代码:
1. 有没有明显的安全问题
2. 有没有明显的 bug" --strict || exit 1
```
:::
配置后,每次提交都会自动检查,发现问题会阻止提交。
## 团队协作配置共享
在团队中使用 Claude Code,需要建立共享的配置和知识库,确保所有成员都能获得一致的 AI 辅助体验。
### 项目级配置
将 Claude Code 配置提交到仓库,实现团队共享:
**配置结构:**
```text
.claude/
├── settings.json # 团队共享配置
├── settings.local.json # 个人本地配置(不提交)
├── CLAUDE.md # 项目主文档
├── .claudeignore # 忽略文件配置
└── memory/ # 项目记忆
├── project-context.md
├── conventions.md
├── architecture.md
└── common-pitfalls.md
```
**团队共享配置示例:**
::: details 点击查看 settings.json
```json
{
"hooks": {
"beforeEdit": ["npm run type-check"],
"afterEdit": ["npm run lint"],
"beforeCommit": ["npm run test"]
},
"permissions": {
"allow": [
"Bash(git status)",
"Bash(git log:*)",
"Bash(npm test:*)",
"Edit(src/**/*.{ts,tsx})"
],
"ask": [
"Bash(git commit:*)",
"Bash(git push:*)"
]
}
}
```
:::
### 项目记忆系统
**记忆系统结构:**
- **project-context.md** - 项目整体上下文
- **conventions.md** - 代码规范和约定
- **architecture.md** - 架构设计说明
- **common-pitfalls.md** - 常见陷阱和解决方案
### 团队协作最佳实践
| 实践 | 说明 | 实施方法 |
| :--- | :--- | :--- |
| **共享配置** | 将 .claude/ 加入版本控制 | `git add .claude/` |
| **文档规范** | 在 memory/ 中记录项目约定 | 每次架构决策更新文档 |
| **代码审查** | 用 Claude 辅助 Code Review | 提交前运行审查 |
| **统一 Hooks** | 团队使用相同的 pre-commit hooks | 配置在 settings.json |
| **知识同步** | 定期更新项目记忆 | 每迭代更新一次 |
## CI/CD 集成
将 Claude Code 集成到 CI/CD 流程中,可以实现自动化的代码审查、测试生成、安全检查等。
### GitHub Actions 集成
#### 场景 1PR 自动审查
::: details 点击查看配置
```yaml
# .github/workflows/claude-review.yml
name: Claude Code Review
on:
pull_request:
types: [opened, synchronize]
jobs:
claude-review:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
- name: Install Claude Code
run: npm install -g @anthropic-ai/claude-code
- name: Run Claude Review
env:
ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
run: |
CHANGED_FILES=$(git diff --name-only origin/${{ github.base_ref }}...HEAD | grep -E '\.(ts|tsx|js|jsx)$' || true)
if [ -z "$CHANGED_FILES" ]; then
echo "No relevant files changed"
exit 0
fi
claude "审查以下文件的变更:
$CHANGED_FILES
检查维度:
1. 安全漏洞
2. 性能问题
3. 代码质量
输出格式:
- 🔴 严重问题(阻塞)
- 🟡 警告(建议修复)
- 🟢 建议(可选)" \
--output pr-review.md
- name: Comment PR
uses: actions/github-script@v7
with:
script: |
const fs = require('fs');
const review = fs.readFileSync('pr-review.md', 'utf8');
const hasBlockingIssues = review.includes('🔴');
const header = hasBlockingIssues
? '## ❌ Code Review 未通过\n\n'
: '## ✅ Code Review 通过\n\n';
github.rest.issues.createComment({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
body: header + review
});
if (hasBlockingIssues) {
core.setFailed('发现严重问题');
}
```
:::
#### 场景 2:部署前安全检查
::: details 点击查看配置
```yaml
# .github/workflows/pre-deploy-security.yml
name: Pre-deploy Security Check
on:
push:
branches: [main]
jobs:
security-check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
- name: Install Claude Code
run: npm install -g @anthropic-ai/claude-code
- name: Security Scan
env:
ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
run: |
claude "对代码进行全面的安全扫描:
检查以下安全问题:
1. SQL 注入漏洞
2. XSS(跨站脚本攻击)
3. CSRF(跨站请求伪造)
4. 敏感信息泄露
5. 不安全的依赖项
输出格式:
- 🔴 高危漏洞(立即修复)
- 🟡 中危漏洞(建议修复)
- 🟢 低危漏洞(可选修复)" \
--output security-report.md
- name: Check for critical issues
run: |
if grep -q "🔴" security-report.md; then
echo "发现高危安全漏洞!"
cat security-report.md
exit 1
fi
```
:::
### 本地 Pre-commit Hook
::: details 点击查看配置
```bash
#!/bin/bash
# .git/hooks/pre-commit
set -e
echo "🔍 运行 Claude Code 预提交检查..."
STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(ts|tsx|js|jsx)$' || true)
if [ -z "$STAGED_FILES" ]; then
echo "✅ 没有需要检查的代码文件"
exit 0
fi
claude "对以下文件进行快速检查:
$STAGED_FILES
检查项目:
1. 明显的语法错误
2. 类型错误
3. 明显的安全问题
4. 代码风格问题
如果发现严重问题,返回非零退出码。" \
--strict || {
echo "❌ 预提交检查失败"
exit 1
}
echo "✅ 预提交检查通过!"
```
:::
### CI/CD 集成最佳实践
**分层检查策略:**
```text
本地开发 → Pre-commit → PR 审查 → 合并前检查 → 部署前检查
↓ ↓ ↓ ↓ ↓
快速检查 基础检查 深度审查 全面检查 安全检查
(1-2秒) (10-30秒) (1-2分钟) (3-5分钟) (5-10分钟)
```
**成本控制:** 只在必要时运行 Claude 检查,通过条件判断避免不必要的 API 调用。
## 工作流速查表
| 场景 | 命令/操作 |
| :--- | :--- |
| **开始新功能** | `@directory src/` 了解项目结构 |
| **查找代码** | `@grep "functionName"` |
| **理解代码** | 直接描述代码文件让 Claude 解释 |
| **重构代码** | 描述重构需求,让 Claude 制定计划 |
| **修复 Bug** | 提供错误信息和复现步骤 |
| **代码审查** | 让 Claude 审查指定文件或目录 |
| **生成测试** | "为 xxx 文件生成单元测试" |
| **提交代码** | `/commit` |
## 总结
掌握这些工作流后,你会发现:
1. **日常开发**:用 @语法快速理解代码,让 Claude 处理重复工作
2. **代码重构**:让 Claude 制定计划,逐步验证
3. **Code Review**:自动发现潜在问题,提高代码质量
4. **团队协作**:共享配置和记忆,保持团队一致性
5. **CI/CD**:将 Claude 集成到自动化流程中
**核心原则:**
- 让 Claude 做它擅长的事:理解代码、生成代码、发现问题
- 你做决策:审查结果、做架构选择、把控方向
- 逐步信任:从简单任务开始,建立对 Claude 的信任
- 持续优化:根据项目特点调整工作流