全部教程claude-code-templates 实战：组件一键装

claude-code-templates 实战：500+ Agent 与 MCP 一键装上

我是 Quentin，OpenClaw 作者，OpenClaw 拼车（cp.bizq.net）的维护者。

Claude Code 的强项是 subagent + slash command + MCP + Hooks + Skills 这套生态——但凡用过的都知道：

  • 自己从零写一个前端开发 agent 要花一晚上
  • MCP server 配置又是 JSON 又是环境变量
  • pre-commit hook 调一遍才跑通
  • skills 文件夹还要按规范摆好

这套初始化工作大概占了新人前 3 天的全部时间。claude-code-templates（GitHub 11.7k+ ⭐）就是来解决这个问题的：一个开箱即用的组件库，500+ 预配置 Agent / Command / Hook / MCP / Skills，复制粘贴就能装。

跑 Claude Code 之前先把配额接好：

curl -fsSL https://cp.bizq.net/setup.sh | bash -s -- claude-max-20x

项目是什么

claude-code-templates 是一个 Claude Code 的开箱即用配置集，作者 @davila7 维护。

它提供了：

  • AI 智能体（Agents）：500+ 预设 subagent
  • 自定义指令（Commands）：成百上千个 slash 命令模板
  • 参数配置（Settings）：常见性能优化参数包
  • 钩子脚本（Hooks）：pre-commit、安全检查、git-flow 等
  • 外部集成（MCP）：GitHub、PostgreSQL、Notion、Linear 等
  • Skills：Anthropic Skills 协议的预制技能包

除了组件，项目还附带几个开发工具：

工具作用
Analytics DashboardClaude Code 会话的实时监控
Conversation Monitor实时查看 Claude 回复界面，支持远程访问
Health Check全面的系统诊断
Plugin Dashboard管理插件和权限的统一界面

项目还配了可视化网站，能一项项浏览每个组件的描述、依赖、安装命令，相当于 Claude Code 生态的 「shadcn 风格」 注册表。

前置条件

唯一硬要求：Node.js（因为项目用 npx 管理组件）。

验证：

node --version  # 建议 ≥ 18
npx --version

国内网络的话，最好把 npm 换源（详细见 npm 中国加速配置）。

三种安装方式

方式一：交互式安装（推荐）

进入你的项目目录，跑：

npx claude-code-templates@latest

这条命令会启动一个交互式 TUI：

  • 用上下方向键选 Agent / Command / Hook / MCP / Skill
  • 空格勾选要装的
  • 回车确认

最适合第一次用的人。能边浏览边了解每个组件做什么。

方式二：单组件直接装

知道自己要什么，直接 --agent / --command / --mcp / --hook / --setting 参数：

# 装一个前端开发 agent
npx claude-code-templates@latest --agent development-team/frontend-developer --yes
 
# 装一个测试生成 command
npx claude-code-templates@latest --command testing/generate-tests --yes
 
# 装一个 GitHub MCP server
npx claude-code-templates@latest --mcp development/github-integration --yes
 
# 装一个 pre-commit hook
npx claude-code-templates@latest --hook git/pre-commit-validation --yes
 
# 装一个性能优化 setting 包
npx claude-code-templates@latest --setting performance/mcp-timeouts --yes

--yes 跳过所有确认提示，CI 环境必加。

方式三：组合一次装多个

# 完整开发组件包
npx claude-code-templates@latest \
  --agent development-team/frontend-developer \
  --command testing/generate-tests \
  --mcp development/github-integration \
  --yes
 
# 装多个 agent
npx claude-code-templates@latest \
  --agent development-tools/code-reviewer \
  --agent development-team/backend-developer \
  --yes

小技巧：可视化网站支持「购物车」模式——把想装的组件逐个加到购物车，最后复制生成的命令一键安装。

推荐组合：常见场景的开箱套装

场景 1：全栈 Web 项目初始化

npx claude-code-templates@latest \
  --agent development-team/frontend-developer \
  --agent development-team/backend-developer \
  --agent development-tools/code-reviewer \
  --command testing/generate-tests \
  --command performance/optimize-bundle \
  --hook git/pre-commit-validation \
  --mcp development/github-integration \
  --mcp database/postgresql-integration \
  --yes

跑完之后你的 ~/.claude/agents/ 里会多出几个 subagent，.mcp.json 里会多两个 server，.claude/hooks/ 里多个 pre-commit 脚本。

场景 2：纯后端 + 数据库

npx claude-code-templates@latest \
  --agent development-team/backend-developer \
  --agent database-tools/sql-query-optimizer \
  --mcp database/postgresql-integration \
  --mcp development/redis-integration \
  --hook git/pre-commit-validation \
  --yes

场景 3：DevOps / 运维

npx claude-code-templates@latest \
  --agent infrastructure/devops-engineer \
  --agent security-tools/vulnerability-scanner \
  --command deployment/k8s-rollout \
  --mcp infrastructure/aws-integration \
  --yes

具体组件名字在可视化网站上能查到，不要硬背。

Analytics Dashboard：会话监控

claude-code-templates 自带一个实时监控面板：

npx claude-code-templates@latest --dashboard

打开后浏览器自动开 http://localhost:3000，里面能看到：

  • 当前活跃 session 列表
  • 每个 session 的 token 消耗
  • 模型分布
  • 实时输出流

跟 claude-monitor 互补：claude-monitor 看 5 小时窗口宏观，Analytics Dashboard 看 session 级别细节。

Conversation Monitor：远程查看

claude-code-templates 还有个有意思的功能——远程实时查看 Claude 的回复：

npx claude-code-templates@latest --conversation-monitor

启动后会给你一个临时 URL，手机 / 平板上打开就能看 Claude Code 当前在写什么。我自己用过两个场景：

  1. 在外面咖啡店写代码，电脑慢，让 Claude 在家里 VPS 上跑长任务，手机看进度
  2. 团队 demo 时把屏幕投到大屏，让 Claude Code 跑，自己拿手机看结构化输出

安全提醒：URL 是公网可访问的，敏感项目慎用。

Health Check：系统诊断

跑：

npx claude-code-templates@latest --health-check

会输出：

  • Node.js / npm 版本
  • Claude Code 安装状态
  • ~/.claude/ 目录健康度
  • MCP server 连接状态
  • 凭据有效性

接到环境问题第一时间跑这个比挨个排查快得多。

Plugin Dashboard：权限管理

新版 Claude Code 引入了 plugin 概念。Plugin Dashboard 给你一个 GUI 管理：

npx claude-code-templates@latest --plugin-dashboard

里面能看到：

  • 装了哪些 plugin
  • 每个的权限范围
  • 哪些 plugin 在调用什么 MCP

适合生产环境强审计场景：所有 plugin 行为可追溯。

与 OpenClaw 拼车搭配

claude-code-templates 装的是配置和组件，跟你接的是官方 API 还是 OpenClaw 拼车没关系——两个完全独立的层。

推荐流程

# 1. 接拼车（一行）
curl -fsSL https://cp.bizq.net/setup.sh | bash -s -- claude-max-20x
 
# 2. 进入项目目录
cd ~/projects/myapp
 
# 3. 装组件
npx claude-code-templates@latest
 
# 4. 跑起来
claude

完成。Claude Code 启动后会自动读你刚装的 agents / commands / MCPs。

为什么搭得来

  • 拼车解决 配额 问题（Max 20× 用满）
  • claude-code-templates 解决 配置 问题（500+ 组件随手装）
  • 两个一起 = 半小时把团队新人的开发环境搭到老手水平

几个使用建议

1. 不要全装

500+ 组件不是让你全装上。每个 agent 都会占 prompt cache 一块、每个 MCP 都启动一个进程。装 5–10 个常用的就够。

2. 团队共享一份组件清单

把你团队认可的组件清单写到一个 shell 脚本里，新人入职跑一遍：

# scripts/setup-claude-code.sh
#!/bin/bash
set -euo pipefail
 
npx claude-code-templates@latest \
  --agent development-team/frontend-developer \
  --agent development-tools/code-reviewer \
  --command testing/generate-tests \
  --hook git/pre-commit-validation \
  --mcp development/github-integration \
  --yes
 
echo "Claude Code 组件已就绪"

提交到代码仓库，新人 bash scripts/setup-claude-code.sh 即可。

3. 跟 CLAUDE.md 配合

claude-code-templates 装的 agent 是全局或项目级 subagent，但你项目本身的「业务约束」还是得写到 CLAUDE.md 里。模板里的组件是通用能力，CLAUDE.md 是项目知识——两者不冲突。

详见 CLAUDE.md 约束提示词指南。

4. 装完跑一次 health check

npx claude-code-templates@latest --health-check

确认所有组件都加载成功、MCP server 都连得通，再开始写代码，少踩坑。

5. 定期更新

组件库每周都在更新。定期跑：

# 重装某个 agent 拉最新版
npx claude-code-templates@latest --agent development-tools/code-reviewer --yes --force

常见问题

Q：装的东西放在哪里？

跟原生 Claude Code 一致：

  • Agents → ~/.claude/agents/<name>.md 或 项目里 .claude/agents/
  • Commands → ~/.claude/commands/<name>.md
  • Hooks → .claude/hooks/
  • MCP → .mcp.json（项目根目录）
  • Skills → .claude/skills/

直接编辑这些文件就能改组件行为。

Q：会改坏我的现有配置吗？

claude-code-templates 默认追加而不是覆盖。但安全起见，运行前备份：

cp ~/.claude.json ~/.claude.json.backup-$(date +%F)
tar czf claude-backup-$(date +%F).tar.gz ~/.claude/

或者用 Claude Code 清理指南 里的归档脚本。

Q：组件能离线装吗？

不能，至少首次安装必须联网拉 npm 包。装好之后，组件本身是本地文件，Claude Code 跑时不需要再联网拉组件。

Q：可视化网站打不开？

国内访问可能慢，可以直接用命令行交互模式：

npx claude-code-templates@latest

不依赖网站。

立即开始

claude-code-templates + OpenClaw 拼车 = 「配置开箱即用 + 配额随时够用」：

# 接拼车
curl -fsSL https://cp.bizq.net/setup.sh | bash -s -- claude-max-20x
 
# 装一套常用组件
npx claude-code-templates@latest

更多文档见 https://cp.bizq.net。

相关文章

Opcode 实战：Claude Code GUI 该不该用Claude Code 常见问题 FAQ（拼车 / 安装 / 安全 / 用量）