Claude Code 通关手册（七）：打造 AI 自动化流水线，Hooks、Skills、Plugins 实战

前端达人

发布于 2026-03-12 12:48:59

390

文章被收录于专栏：前端达人前端达人

这是「Claude Code 通关手册」系列的第 7 篇，共 10 篇。Level 3（扩展篇）收官之作。这篇讲完，你就拥有了一套完整的 Claude Code 自动化体系。

Claude Code 通关手册（一）：Cursor 用户转 Claude Code，第一天我就后悔了——后悔没早点用

Claude Code 通关手册（二）：权限系统搞明白，效率直接翻倍

Claude Code 通关手册（三）：99%的人不知道的效率秘诀，CLAUDE.md 深度实战

Claude Code 通关手册（四）：3 个自定义命令，让你的 Claude Code 快到飞起

Claude Code 通关手册（五）：子代理系统——给你的 AI 配一个"专家团队"

Claude Code 通关手册（六）：MCP 协议完全指南，Claude Code 最被低估的能力

到目前为止，你已经有了一个相当强的 Claude Code 配置：

子代理（第 5 篇）= 你的"AI 专家团"
MCP（第 6 篇）= 专家团的"信息通道"

但有一个问题——所有操作都需要你主动触发。你说一句，Claude 做一步。你忘了说"跑一下 lint"，它就不跑。你忘了说"查一下类型"，它就不查。

今天要解决的就是这个问题。

Hooks = 流水线上的自动触发器。Claude 每次写完代码自动跑 Prettier，每次执行危险命令前自动拦截，每次会话结束自动记录日志——你设定好规则，剩下的全自动。

Skills = 可复用的专业知识包。Claude 根据任务自动加载对应的技能——写组件时加载前端规范，写 API 时加载后端规范，不需要你手动指定。

Plugins = 一键分发的工具箱。把 Commands + Agents + Skills + Hooks + MCP 打包成一个可安装的插件，团队里的每个人 /plugin install 一秒搞定。

三个系统各解决一个问题，组合起来就是一条全自动的 AI 开发流水线。

一、Hooks 系统——在 Claude 的每一步插入自动化

什么是 Hooks？

一句话：Hooks 是你预先定义的脚本，在 Claude 操作的特定时刻自动执行。

打个比方：工厂流水线上有很多"质检工位"——产品经过某个环节后自动进行质检，不合格的自动拦下。Hooks 就是 Claude Code 流水线上的质检工位。

关键词是确定性。你在 CLAUDE.md 里写"每次修改文件后请跑 lint"，这是一个"请求"——Claude 可能执行，也可能忘了。但 Hook 是保证执行——只要事件触发，脚本一定跑，没有例外。

生命周期事件全景

Claude Code 目前支持 14 个生命周期事件。日常最常用的是这几个：

┌──────────────────────────────────────────────────────────┐
│         Hooks 生命周期（精选高频事件）                      │
├──────────────────────────────────────────────────────────┤
│                                                          │
│  SessionStart                                            │
│  → 会话启动时触发                                         │
│  → 适合：加载环境变量、注入开发上下文                      │
│       ↓                                                  │
│  UserPromptSubmit                                        │
│  → 用户提交提示词时触发                                   │
│  → 适合：校验输入、注入额外上下文                          │
│       ↓                                                  │
│  PreToolUse                                              │
│  → Claude 准备执行操作前触发                               │
│  → 适合：拦截危险命令、修改操作参数                        │
│  → matcher 过滤：Bash / Edit / Write / Read 等            │
│       ↓                                                  │
│  [Claude 执行操作]                                        │
│       ↓                                                  │
│  PostToolUse                                             │
│  → 操作完成后触发                                         │
│  → 适合：自动格式化、运行 lint、记录日志                   │
│  → matcher 过滤：同上                                     │
│       ↓                                                  │
│  Stop                                                    │
│  → Claude 完成回答时触发                                   │
│  → 适合：收尾操作、发送通知                                │
│                                                          │
│  其他事件：                                                │
│  PermissionRequest — 权限弹窗时触发（可自动放行/拦截）     │
│  SubagentStop — 子代理完成时触发                          │
│  PostToolUseFailure — 工具执行失败时触发                   │
│  Notification — 通知事件（适合发桌面提醒）                  │
│                                                          │
└──────────────────────────────────────────────────────────┘

三种 Hook 类型

┌──────────────────────────────────────────────────────────┐
│          三种 Hook 处理器                                   │
├──────────┬──────────────────┬────────────────────────────┤
│ 类型      │ 工作方式          │ 适合场景                    │
├──────────┼──────────────────┼────────────────────────────┤
│ command  │ 执行 bash 命令    │ 确定性操作：格式化、lint、   │
│          │ （最常用）        │ 日志记录、文件校验           │
├──────────┼──────────────────┼────────────────────────────┤
│ prompt   │ 调用 LLM 评估    │ 需要智能判断：代码质量评估、 │
│          │                  │ 安全风险分析                 │
├──────────┼──────────────────┼────────────────────────────┤
│ agent    │ 启动子代理处理    │ 复杂任务：全面审查、         │
│          │                  │ 多维度分析                   │
└──────────┴──────────────────┴────────────────────────────┘

日常开发 90% 的场景用 command 类型就够了——执行一个 bash 命令，简单、快速、确定性强。

配置位置

Hooks 配置在 settings.json 中（跟第 2 篇的权限配置是同一个文件体系）：

~/.claude/settings.json——全局（所有项目生效）
.claude/settings.json——项目级（提交到 Git）
.claude/settings.local.json——个人本地（不提交）

也可以在交互模式中用 /hooks 命令可视化编辑。

实操：3 个最实用的 Hook

Hook 1：代码修改后自动格式化

这是使用频率最高的 Hook——Claude 每次写入或编辑文件后，自动跑 Prettier 格式化。

在 .claude/settings.json 中添加：

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit|MultiEdit",
        "hooks": [
          {
            "type": "command",
            "command": "jq -r '.tool_input.file_path' | xargs npx prettier --write 2>/dev/null; exit 0"
          }
        ]
      }
    ]
  }
}

解读一下这段配置：

事件：PostToolUse——工具执行完成后
matcher：Write|Edit|MultiEdit——只在文件写入或编辑操作后触发（正则语法）
命令：从 stdin 接收 JSON 输入，提取文件路径，然后对该文件跑 Prettier
exit 0：确保即使 Prettier 报错也不会阻塞 Claude 的流程

效果：从此 Claude 写的每一行代码都自动遵循你的 Prettier 配置，不用你在 CLAUDE.md 里写"请遵循代码格式"，也不用你手动跑 prettier --write。

如果你只想格式化特定类型的文件（比如只格式化 TypeScript），可以在命令中加个判断：

{
  "type": "command",
  "command": "jq -r '.tool_input.file_path' | { read f; echo \"$f\" | grep -qE '\\.(ts|tsx)$' && npx prettier --write \"$f\"; exit 0; }"
}

Hook 2：危险命令拦截

这个 Hook 在 Claude 执行 bash 命令之前检查，如果是危险命令就直接拦截：

{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Bash",
        "hooks": [
          {
            "type": "command",
            "command": "python3 -c \"import json,sys; d=json.load(sys.stdin); cmd=d.get('tool_input',{}).get('command',''); blocked=['rm -rf /','DROP TABLE','DROP DATABASE',':(){:|:&};:']; sys.exit(2) if any(b in cmd for b in blocked) else sys.exit(0)\""
          }
        ]
      }
    ]
  }
}

关键知识点：

事件：PreToolUse——工具执行之前（可以拦截）
exit code 2：表示"拒绝执行"，Claude 会收到拒绝原因
exit code 0：表示"放行"

这是你的最后一道安全防线——即使权限配置有遗漏，这个 Hook 也能兜底拦住破坏性命令。

Hook 3：敏感文件保护

防止 Claude 修改不该碰的文件：

{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Edit|Write|MultiEdit",
        "hooks": [
          {
            "type": "command",
            "command": "python3 -c \"import json,sys; d=json.load(sys.stdin); p=d.get('tool_input',{}).get('file_path',''); sys.exit(2 if any(x in p for x in ['.env','package-lock.json','.git/','prisma/migrations/']) else 0)\""
          }
        ]
      }
    ]
  }
}

这个 Hook 阻止 Claude 修改 .env、package-lock.json、.git/ 目录和 Prisma 迁移文件。这些文件要么包含敏感信息，要么由工具自动生成，不应该被 AI 手动修改。

DevPulse 完整 Hooks 配置

把三个 Hook 组合起来，这是 DevPulse 项目的完整配置：

{
  "permissions": {
    "...": "（第2篇配置的权限，此处省略）"
  },
"hooks": {
    "PreToolUse": [
      {
        "matcher": "Bash",
        "hooks": [
          {
            "type": "command",
            "command": "python3 -c \"import json,sys; d=json.load(sys.stdin); cmd=d.get('tool_input',{}).get('command',''); blocked=['rm -rf /','DROP TABLE','DROP DATABASE']; sys.exit(2) if any(b in cmd for b in blocked) else sys.exit(0)\""
          }
        ]
      },
      {
        "matcher": "Edit|Write|MultiEdit",
        "hooks": [
          {
            "type": "command",
            "command": "python3 -c \"import json,sys; d=json.load(sys.stdin); p=d.get('tool_input',{}).get('file_path',''); sys.exit(2 if any(x in p for x in ['.env','package-lock.json','.git/']) else 0)\""
          }
        ]
      }
    ],
    "PostToolUse": [
      {
        "matcher": "Write|Edit|MultiEdit",
        "hooks": [
          {
            "type": "command",
            "command": "jq -r '.tool_input.file_path' | xargs npx prettier --write 2>/dev/null; exit 0"
          }
        ]
      }
    ]
  }
}

三层防护：操作前拦截危险命令 → 操作前保护敏感文件 → 操作后自动格式化。

二、Skills 系统——Claude 的"技能库"

跟 Slash 命令有什么区别？

第 4 篇讲了 Slash 命令（.claude/commands/），Skills 看起来也是 Markdown 文件，也有 frontmatter——它们有什么区别？

┌──────────────────────────────────────────────────────────┐
│          Slash Commands vs Skills                         │
├──────────────────┬───────────────────────────────────────┤
│ Slash Commands    │ Skills                                │
├──────────────────┼───────────────────────────────────────┤
│ 你主动调用        │ Claude 根据任务自动加载                │
│ /review file.ts  │ 你说"写个组件"→ 自动加载前端规范       │
├──────────────────┼───────────────────────────────────────┤
│ 简单的提示词模板  │ 可包含脚本、模板、参考文档              │
├──────────────────┼───────────────────────────────────────┤
│ 单个 .md 文件    │ 一个目录（SKILL.md + 附属文件）        │
├──────────────────┼───────────────────────────────────────┤
│ 适合：固定操作    │ 适合：需要上下文感知的专业知识          │
│ "每次审查用这个"  │ "写前端时自动知道我们的规范"            │
├──────────────────┼───────────────────────────────────────┤
│ 位置：            │ 位置：                                 │
│ .claude/commands/ │ .claude/skills/                       │
│ ~/.claude/        │ ~/.claude/skills/                     │
│ commands/         │                                       │
└──────────────────┴───────────────────────────────────────┘

简单记忆：
Commands = 你说"做这个" → Claude 执行（主动触发）
Skills = Claude 看到任务 → 自动调取对应技能（被动匹配）

Skills 使用渐进式披露策略加载——Claude 启动时只读取每个 Skill 的名称和描述（约 30-50 Token），发现当前任务匹配某个 Skill 时才加载完整内容。所以你可以安装很多 Skill 而不用担心上下文爆炸。

创建一个 Skill：前端代码规范

mkdir -p .claude/skills/frontend-standards

创建 .claude/skills/frontend-standards/SKILL.md：

---
name: frontend-standards
description: DevPulse 前端代码规范和最佳实践。在编写 React 组件、样式、状态管理和数据获取时自动加载。
---

# DevPulse 前端开发规范

## 组件规范
- 使用 function 关键字声明组件，不用箭头函数导出
- Props 接口命名：ComponentNameProps
- 默认是 Server Component，需要交互时才加 'use client'
- 组件超过 150 行必须拆分

## 样式规范
- 使用 Tailwind CSS 工具类
- 超过 5 个类名用 cn() 函数合并
- 响应式优先：mobile-first 设计
- 暗色模式使用 dark: 前缀

## 数据获取
- Server Component 中直接 async/await 获取数据
- Client Component 中使用 SWR 或 React Query
- API 调用统一走 /api/ 路由

## 性能清单
- 图片必须使用 next/image
- 列表必须有稳定 key（不用 index）
- 大列表使用虚拟滚动
- 路由切换使用 next/link 预加载

## 错误处理
- 每个页面必须有 error.tsx 边界
- 加载状态使用 loading.tsx 或 Suspense
- API 错误统一格式：{ error: string, code: string }

现在当你让 Claude "写一个 ArticleCard 组件"时，它会自动匹配这个 Skill 的描述（"编写 React 组件"），加载完整规范，然后按照你定义的标准来写代码。你什么都不用说，它自动就知道用 function 声明、Props 命名为 ArticleCardProps、默认 Server Component。

Skill 还能打包脚本

Skills 比 Commands 强大的地方之一是可以附带脚本文件。比如一个代码可视化 Skill：

.claude/skills/codebase-visualizer/
├── SKILL.md          ← 指令和描述
├── visualize.sh      ← 生成可视化的脚本
└── template.html     ← 输出模板

Claude 执行 Skill 时可以调用目录中的脚本，产出比纯文本更丰富的结果。

三、Plugins 系统——团队级的标准化工具箱

Plugin 是什么？

如果说 Commands、Agents、Skills、Hooks、MCP 是各种零散的"零件"，那 Plugin 就是把这些零件打包成一个可安装的"工具箱"。

一个 Plugin 的结构：

my-plugin/
├── .claude-plugin/
│   └── plugin.json      ← 插件元数据（名称、版本、描述）
├── commands/             ← Slash 命令
├── agents/               ← 子代理
├── skills/               ← 技能包
├── hooks.json            ← Hooks 配置
├── .mcp.json             ← MCP Server 配置
└── README.md             ← 文档

使用场景：你是团队的技术负责人，你花了几天时间配好了一整套 Claude Code 工作流——审查命令、测试子代理、安全 Hook、前端规范 Skill。现在团队里来了个新人，你让他搞一套同样的配置？

不用。把你的配置打包成 Plugin，新人只需要：

/plugin install your-team-plugin@your-marketplace

一条命令，所有人的 Claude Code 环境就统一了。

基本操作

# 安装插件
/plugin install plugin-name@marketplace-name

# 查看已安装的插件
/plugin list

# 启用/禁用（不删除，只是开关）
/plugin enable plugin-name@marketplace-name
/plugin disable plugin-name@marketplace-name

# 开发时加载本地插件（调试用）
claude --plugin-dir ./my-plugin

实用的社区 Plugin

社区已经有不少现成的 Plugin 可以直接用：

code-review：自动化 PR 审查，5 个并行子代理分别检查不同维度
security-scanner：PreToolUse Hook 监控 9 种安全模式
python3-development：Python 开发全套——15+ 命令、17 个子代理、TDD 工作流

对于大多数个人开发者来说，你可能暂时不需要创建自己的 Plugin。但了解它的存在很重要——当你的 Claude Code 配置足够成熟，可以分享给团队或社区时，Plugin 就是分发的最佳方式。

四、综合实战：四个系统协同工作

现在让我们看看这些系统组合起来是什么效果。以 DevPulse 项目为例，一个完整的自动化工作流：

┌──────────────────────────────────────────────────────────┐
│    DevPulse 全自动开发工作流                                │
├──────────────────────────────────────────────────────────┤
│                                                          │
│  你: "修复 GitHub 上那个暗色模式闪屏的 issue"              │
│       ↓                                                  │
│  ① [MCP - GitHub]                                        │
│     自动搜索 issues → 找到 #49                           │
│     读取 issue 详情和评论中的复现步骤                      │
│       ↓                                                  │
│  ② [Skill - frontend-standards]                          │
│     Claude 准备修改组件 → 自动加载前端规范                 │
│     知道要用 function 声明、Tailwind 样式、               │
│     Server Component 优先                                │
│       ↓                                                  │
│  ③ [Claude 修改 ThemeProvider.tsx]                        │
│       ↓                                                  │
│  ④ [Hook - PostToolUse]                                  │
│     文件修改完成 → 自动跑 Prettier 格式化                  │
│     （你什么都不用说，自动执行）                           │
│       ↓                                                  │
│  ⑤ [子代理 - code-reviewer]                              │
│     你说"审查一下改动" →                                  │
│     独立上下文窗口中深度审查                               │
│       ↓                                                  │
│  ⑥ [MCP - GitHub]                                        │
│     创建 PR → 关联 #49 → 自动填写描述                    │
│                                                          │
│  整个过程：                                               │
│  MCP 提供外部信息 → Skill 提供专业规范 →                  │
│  Hook 保证代码质量 → 子代理提供深度审查                    │
│  四个系统各司其职，无缝协作                                │
│                                                          │
└──────────────────────────────────────────────────────────┘

这就是"AI 自动化流水线"的完整形态。你只说了一句话，四个系统自动接力完成了整个工作流。

五、扩展体系总览：一张图看清所有"积木"

整个 Level 3 讲了很多概念，这里用一张图总结它们之间的关系：

┌──────────────────────────────────────────────────────────┐
│     Claude Code 扩展体系总览                                │
├──────────────────────────────────────────────────────────┤
│                                                          │
│  ┌─────────┐  ┌──────────┐  ┌─────────┐  ┌──────────┐  │
│  │ Commands │  │ Agents   │  │ Skills  │  │ Hooks    │  │
│  │ 快捷命令 │  │ 子代理    │  │ 技能包  │  │ 自动触发 │  │
│  │ 你主动调 │  │ 专家分工  │  │ 自动匹配│  │ 确定性   │  │
│  │ 用       │  │ 独立上下文│  │ 渐进加载│  │ 执行     │  │
│  └────┬─────┘  └────┬─────┘  └────┬────┘  └────┬─────┘  │
│       │             │             │             │         │
│       └──────┬──────┴──────┬──────┘             │         │
│              ↓             ↓                    │         │
│       ┌──────────────────────────┐              │         │
│       │         MCP Servers       │              │         │
│       │    外部工具连接（GitHub、  │              │         │
│       │    数据库、文档查询等）    │              │         │
│       └──────────────────────────┘              │         │
│                                                  │         │
│       ┌──────────────────────────────────────────┘         │
│       ↓                                                    │
│  ┌──────────────────────────────────────────────┐         │
│  │              Plugin（打包分发）                │         │
│  │   = Commands + Agents + Skills + Hooks + MCP  │         │
│  │   一键安装，团队统一                           │         │
│  └──────────────────────────────────────────────┘         │
│                                                           │
│  选择指南：                                                │
│  "我要重复执行某个操作" → Command                         │
│  "我要专业分工和并行" → Agent                              │
│  "我要自动加载知识" → Skill                               │
│  "我要在每一步自动执行" → Hook                            │
│  "我要连接外部工具" → MCP                                 │
│  "我要打包分发给团队" → Plugin                            │
│                                                           │
└──────────────────────────────────────────────────────────┘

本篇小结

三个核心收获：

第一，Hooks 给你确定性控制——PostToolUse 自动格式化、PreToolUse 拦截危险操作、保护敏感文件。从"请求 Claude 做"变成"保证每次都做"。配置在 settings.json 的 hooks 字段中，用 matcher 正则匹配目标工具。

第二，Skills 是可自动匹配的知识包——Claude 根据任务描述自动加载对应的 Skill，不用你手动指定。渐进式加载机制让你可以安装很多 Skill 而不影响性能。跟 Commands 的核心区别是：Commands 你主动调用，Skills Claude 自动选用。

第三，Plugin 是终极打包方案——把 Commands + Agents + Skills + Hooks + MCP 打成一个可安装的包，团队统一标准只需要一条 /plugin install 命令。

Level 3 通关检查清单

回顾 Level 3（扩展篇）三篇文章的完整检查清单：

[ ] 创建了至少 2 个子代理（code-reviewer + test-writer）
[ ] 安装了 GitHub MCP 和 Context7 MCP
[ ] 配置了 PostToolUse Hook 自动格式化代码
[ ] 配置了 PreToolUse Hook 拦截危险命令
[ ] 创建了至少 1 个自定义 Skill
[ ] 理解 Commands / Agents / Skills / Hooks / MCP / Plugins 各自的定位
[ ] 知道 /hooks 和 /plugin 命令的用法

全部打勾？恭喜，Level 3 通关。你的 Claude Code 已经从"一个 AI 助手"进化成了一套完整的 AI 自动化开发平台。

下篇预告

第 8 篇：Claude Code 通关手册（八）—— Headless 模式 + SDK：用代码指挥 AI

从下一篇开始进入 Level 4（高级篇），面向想要把 Claude Code 集成到自动化流程中的开发者。

到目前为止，你一直在终端里跟 Claude 对话。但如果你想把 Claude Code 嵌入到 CI/CD 流水线里呢？比如每次有人提 PR，自动触发 Claude 做代码审查？或者批量处理 100 个文件的重构？

这就需要 Headless 模式（无交互运行）和 Agent SDK（用代码调用 Claude Code）。下一篇，带你解锁这个能力。

今日话题

你最想自动化的开发操作是什么？每次 commit 前自动跑测试？每次写完代码自动格式化？还是更有创意的用法？评论区分享你的自动化愿望——说不定 Hooks 就能帮你实现。

如果这篇文章帮你理清了 Claude Code 扩展体系的全貌，欢迎点赞、在看、转发三连——Level 3 收官之作，值得让更多人看到。

关注「前端达人」，Level 4 高级篇即将开启，我们下篇见。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2026-02-28，如有侵权请联系 cloudcommunity@tencent.com 删除

自动化

本文分享自前端达人微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度