尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

claude-code-templates 实战:从零搭建 Claude Code 配置模板与 MCP 集成

claude-code-templates 实战:从零搭建 Claude Code 配置模板与 MCP 集成 1. 从零认识 claude-code-templates它到底解决什么问题第一次看到claude-code-templates这个名字很多人会以为它只是某个官方仓库里的一堆示例文件。实际用下来你会发现它更像是一套“开箱即用的配置骨架”把 Claude Code 这个 CLI 工具从裸装状态快速拉到一个能干活的状态。Claude Code 本身是一个跑在终端里的编码助手通过 npm 全局安装后用claude命令唤起能读你本地的代码、执行命令、调用 MCP 服务。但裸装完之后它默认什么都不知道——没有项目上下文、没有常用命令模板、没有 MCP 服务器配置你得一项项手动补。claude-code-templates干的就是把这些重复劳动打包让你 clone 下来改改就能用。我最初接触它是因为团队里几个人各自配 Claude Code配出来的东西五花八门有人把 API key 写死在配置里有人 MCP 服务器路径写的是自己电脑的绝对路径换台机器就崩。后来统一用模板仓库管理才算把这事理顺。所以这篇东西适合三类人看一是刚装完 Claude Code、对着空配置发呆的新手二是想把 Claude Code 接进现有工程、但不想每次重配的老手三是团队里负责统一开发环境的那个人。核心关键词就几个claude-code-templates、CLI、npm、Claude Code、MCP下面所有内容都围绕它们展开。需要先说明一点claude-code-templates并不是一个官方发布的 npm 包它更像是一种社区约定俗成的“模板仓库”形态——一个目录结构 若干配置文件 一份说明。你可以在 GitHub 上找到各种变体核心思路一致把 Claude Code 需要的配置、命令、MCP 声明、项目级指令集中管理。理解了这一点后面无论你拿到的是哪个具体仓库都能快速上手。2. 环境准备npm、Node 版本与那些绕不开的坑2.1 Node 与 npm 的安装底线Claude Code 通过 npm 分发所以第一步永远是 Node 环境。官方建议 Node 18 以上我实测下来 Node 20 LTS 最稳Node 22 也能跑但个别 MCP 服务器会有兼容性告警。安装 Node 本身没什么好说的官网下载安装包一路下一步即可但 Windows 用户要注意一个高频报错npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1因为在此系统上禁止运行脚本这个不是 npm 坏了是 PowerShell 的执行策略默认禁止运行脚本。解决办法是以管理员身份打开 PowerShell执行Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned执行完输入Y确认重开终端即可。我见过太多人卡在这一步以为是 Node 没装好反复卸载重装其实一行命令的事。Mac 和 Linux 用户基本不会遇到这个问题但如果你用 zsh 且装过 nvm注意npm命令可能指向 nvm 管理的版本which npm确认一下路径。2.2 npm 国内源配置别让下载卡住你国内直连 npm 官方源装 Claude Code慢的时候能等到你怀疑人生。换国内源是常规操作npm config set registry https://registry.npmmirror.com验证是否生效npm config get registry返回https://registry.npmmirror.com就对了。这里有个细节如果你公司内网有自己的私有源别直接覆盖全局配置用项目级.npmrc文件单独指定否则会影响其他项目的依赖拉取。另外npm warn eresolve overriding peer dependency这个警告在装 Claude Code 相关依赖时很常见多数情况下可以忽略它只是提示某个 peer 依赖被覆盖了不影响功能。但如果安装直接失败就要认真看这个警告指向哪个包。2.3 Claude Code 的安装与验证环境就绪后全局安装npm install -g anthropic-ai/claude-code装完执行claude --version能打印版本号就说明 CLI 可用了。如果提示claude: command not found八成是 npm 全局 bin 目录没进 PATH。查一下npm config get prefix把这个路径下的binWindows 是根目录加进系统环境变量 PATH。Windows 用户改完 PATH 一定要重开终端老终端不会自动刷新。Ubuntu 用户如果遇到权限问题别用sudo npm install -g那会把文件装到 root 目录下后续升级各种权限报错正确做法是配置 npm 的全局目录到用户目录mkdir ~/.npm-global npm config set prefix ~/.npm-global export PATH~/.npm-global/bin:$PATH把这行 export 写进~/.bashrc或~/.zshrc一劳永逸。3. claude-code-templates 的目录结构与设计逻辑3.1 为什么要有模板仓库裸装 Claude Code 之后它的配置散落在几个地方全局配置在用户目录下的.claude文件夹项目级配置在项目根目录的.claude文件夹MCP 服务器声明可能在settings.json里自定义命令在commands目录。一个人用无所谓团队用就乱套。claude-code-templates的核心价值就是把这些散落的东西收拢到一个仓库里用 Git 管理版本新人 clone 下来跑个脚本就能对齐环境。我自己的模板仓库结构大致是这样你可以参考claude-code-templates/ ├── .claude/ │ ├── settings.json # 项目级配置 │ ├── commands/ # 自定义斜杠命令 │ │ ├── review.md │ │ └── test.md │ └── mcp.json # MCP 服务器声明 ├── CLAUDE.md # 项目级指令Claude 每次会话都会读 ├── scripts/ │ └── setup.sh # 一键初始化脚本 └── README.md这个结构不是拍脑袋定的。.claude/settings.json放项目级配置是因为 Claude Code 会优先读项目级配置再合并全局配置这样团队共享的配置不会污染个人全局设置。CLAUDE.md放在根目录是因为 Claude Code 启动时会自动扫描当前目录及父目录的CLAUDE.md把里面的内容作为系统提示的一部分。commands目录下的 markdown 文件会自动注册成斜杠命令比如review.md对应/review。3.2 CLAUDE.md 的写法与常见误区CLAUDE.md是整个模板里最值得花心思的文件。它相当于给 Claude 的一份“项目说明书”每次会话开始都会被读取。写得好Claude 一上来就知道项目用什么框架、代码规范是什么、哪些目录别碰写得烂等于没写。我见过最常见的误区是把CLAUDE.md写成 README 的复制粘贴堆一堆项目介绍。Claude 不需要知道你的项目多牛它需要知道的是可执行的约束。比如## 代码规范 - 所有 TypeScript 文件使用 2 空格缩进 - 组件文件必须导出默认组件 - 禁止在 src/utils 下引入 React 相关依赖 ## 常用命令 - 跑测试npm run test - 类型检查npm run typecheck - 构建npm run build ## 禁止操作 - 不要修改 package-lock.json - 不要动 migrations 目录下的历史文件这种写法直接、可执行。我实测下来把“禁止操作”单独列出来特别有用能挡掉 Claude 自作主张改锁文件、删迁移脚本这类事故。另外CLAUDE.md支持分层你可以在子目录再放一个CLAUDE.mdClaude 进入那个目录时会叠加读取适合 monorepo 场景。3.3 自定义命令的设计思路commands目录下的每个 markdown 文件就是一个斜杠命令。文件名即命令名文件内容是提示词模板。比如review.md请审查当前 git diff 中的改动重点关注 1. 是否有明显的逻辑错误 2. 是否有未处理的边界情况 3. 命名是否符合项目规范 输出格式按文件分组每个问题标注严重程度高/中/低。保存后在 Claude Code 里输入/review就会执行这段提示词。这个机制的好处是把重复性的提示词固化下来团队共享。我建议把最常用的三五个场景做成命令比如代码审查、写测试、生成提交信息。别贪多命令太多反而记不住。命名上尽量用动词开头review、test、commit比code-check这种模糊命名好用。4. MCP 配置让 Claude Code 真正长出触手4.1 MCP 是什么为什么它重要MCP 全称 Model Context Protocol是一套让 AI 助手连接外部工具和数据的协议。Claude Code 本身只能读写本地文件和执行命令接上 MCP 服务器之后它能查数据库、调 API、操作浏览器、读设计稿。热词里出现的playwright mcp、蓝湖 mcp、blender mcp、burpsuite mcp都是具体的 MCP 服务器实现分别对应浏览器自动化、设计稿读取、3D 建模、安全测试这些场景。claude-code-templates里 MCP 的配置通常放在.claude/mcp.json或settings.json的mcpServers字段。一个典型的配置长这样{ mcpServers: { playwright: { command: npx, args: [-y, playwright/mcplatest] }, filesystem: { command: npx, args: [-y, modelcontextprotocol/server-filesystem, /path/to/allowed/dir] } } }command是启动命令args是参数。用npx -y的好处是每次拉最新版不用手动装。但生产环境我建议锁定版本把latest换成具体版本号避免某天上游更新导致行为突变。4.2 MCP 服务器选型与常见问题选 MCP 服务器有个原则只装当前项目真正需要的。每多一个 MCP 服务器Claude Code 启动时就多一份上下文开销工具列表太长还会稀释模型的注意力。我见过有人一口气装十几个结果 Claude 每次选工具都犹豫效率反而下降。几个高频 MCP 的适用场景MCP 服务器适用场景注意事项playwright前端自动化测试、页面截图首次运行会下载浏览器内核国内网络可能慢filesystem限定 Claude 可访问的目录路径必须写绝对路径相对路径会失效蓝湖 MCP读取设计稿标注、切图需要配置对应的访问凭证burpsuite安全测试场景仅限授权环境使用配置完 MCP 后用claude启动输入/mcp可以查看已连接的服务器状态。如果某个服务器显示连接失败先看它的启动命令能不能在终端里单独跑通。我踩过最多的坑是npx找不到包原因是 npm 全局缓存损坏npm cache clean --force之后重装就好。另一个坑是 Windows 下路径里的反斜杠JSON 里必须转义成\\或者干脆用正斜杠。4.3 MCP 与 CLI 的协作方式Claude Code 作为 CLI 工具和 MCP 的关系是“宿主与插件”。CLI 负责和模型对话、管理会话MCP 服务器负责提供具体能力。当你说“帮我截个图看看这个页面”Claude 会判断需要调用 playwright MCP 的截图工具然后通过 MCP 协议发指令拿到结果再继续对话。整个过程你不需要手动切换但前提是 MCP 配置正确且服务器在运行。这里有个实用技巧把 MCP 配置也纳入claude-code-templates管理但凭证类信息单独放。比如蓝湖 MCP 需要的 token不要写进mcp.json提交到 Git而是用环境变量引用{ mcpServers: { lanhu: { command: npx, args: [-y, lanhu-mcp], env: { LANHU_TOKEN: ${LANHU_TOKEN} } } } }然后在本地.env或 shell 配置里设置LANHU_TOKEN。这样模板可以安全共享凭证各自管理。5. 实操全流程从 clone 到跑通第一个任务5.1 初始化步骤拆解假设你拿到了一个claude-code-templates仓库完整跑通流程如下。第一步clone 仓库到本地git clone 模板仓库地址 my-claude-setup cd my-claude-setup第二步检查 Node 版本低于 18 先升级node -v第三步安装 Claude Code如果还没装npm install -g anthropic-ai/claude-code第四步把模板里的.claude目录和CLAUDE.md复制到你的目标项目根目录。注意是复制不是移动模板仓库本身保持干净方便后续更新。第五步根据项目实际情况修改CLAUDE.md和settings.json。这一步最花时间但值得。把项目特有的命令、规范、禁忌都写进去。第六步配置 MCP。编辑.claude/mcp.json只保留需要的服务器路径改成自己机器的实际路径。第七步启动验证claude进入交互界面后输入/mcp看服务器状态输入/review测试自定义命令是否注册成功。5.2 参数选择与配置细节settings.json里有几个参数值得单独说。model字段指定默认模型不写就用 Claude Code 的默认值。permissions字段控制哪些操作需要确认比如文件写入、命令执行。我建议初期把权限收紧让 Claude 每次执行敏感操作都问你用顺了再逐步放开。{ permissions: { allow: [Read, Glob, Grep], ask: [Bash, Write, Edit] } }这个配置的意思是读操作直接放行写操作和命令执行每次询问。实测下来这个平衡点比较舒服既不会被频繁打断又不会让 Claude 乱改文件。等你对某个项目足够熟悉可以把常用的Bash命令加进allow比如npm run test。另一个细节是commands目录下命令的触发方式。文件名带连字符的比如gen-test.md对应命令是/gen-test。文件名不要用中文或空格会注册失败。命令内容支持参数占位用$ARGUMENTS接收用户输入比如请为 $ARGUMENTS 这个文件生成单元测试覆盖所有导出函数。输入/gen-test src/utils/format.ts时$ARGUMENTS会被替换成src/utils/format.ts。5.3 一次完整的任务演示假设项目里有个函数需要加测试。启动 Claude Code 后 /gen-test src/utils/format.tsClaude 会读取该文件分析导出函数生成测试文件。生成完它会问你是否写入确认后测试文件出现在src/utils/__tests__/下。接着你可以 跑一下这个测试看看有没有问题Claude 调用npm run test把结果读回来如果有失败它会尝试分析原因。整个过程你只需要在关键节点确认其余交给它。这就是模板 MCP 自定义命令组合起来的效率——把“读文件、写测试、跑测试、看结果”这条链路压缩成两句话。6. 常见问题与排查技巧实录6.1 安装与启动类问题问题一npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称这是 Windows 上 PATH 没配好。找到 Node 安装目录把根目录加进系统 PATH。如果用的是 nvm-windows注意 nvm 的 symlink 目录也要在 PATH 里。改完重开终端。问题二unable to locate the codex cli binary or required runtime components这个报错通常出现在你同时装了多个 CLI 工具、环境变量互相干扰时。检查which codex和which claude是否指向预期路径。如果确实需要 codex cli单独装如果不需要把它的 PATH 条目清掉避免冲突。问题三安装 Claude Code 时卡在npm warn eresolve overriding peer dependency多数情况是网络问题换国内源重试。如果换源还卡试试npm install -g anthropic-ai/claude-code --verbose看具体卡在哪个包。6.2 配置与运行类问题问题四MCP 服务器显示连接失败排查顺序先在终端单独跑 MCP 的启动命令看能不能起来再看mcp.json里的路径是不是绝对路径最后检查环境变量有没有正确传入。Windows 用户特别注意 JSON 里的反斜杠转义。问题五自定义命令不生效检查commands目录位置是否正确必须在.claude/commands/下。文件名不能有特殊字符。改完配置要重启 Claude Code 会话热更新不生效。问题六Claude 读不到CLAUDE.md确认文件在项目根目录且文件名大小写正确全大写。如果你在子目录启动 Claude Code它会向上查找但根目录的CLAUDE.md优先级最高。monorepo 场景下子包的CLAUDE.md会叠加而非覆盖。6.3 独家避坑经验第一条别把 API key 写进模板。我见过有人图省事把 key 写进settings.json提交到公司仓库结果整个团队共用一把 key额度瞬间打满。正确做法是用环境变量模板里只留占位符。第二条MCP 服务器版本要锁。latest在个人项目里没问题团队协作时某天上游发新版改了工具签名所有人的 Claude 突然不会用那个工具了。锁版本号升级走变更流程。第三条CLAUDE.md定期清理。项目演进过程中有些规范会过时。我习惯每个月过一遍把不再适用的条目删掉。Claude 会认真执行你写的每一条包括过时的那些所以别让它读废话。第四条权限配置从紧到松。刚接入新项目时所有写操作都设成ask观察一两周 Claude 的行为模式确认它不会乱来之后再逐步放开。这个习惯帮我挡掉过好几次误删文件的事故。7. 模板的扩展与团队协作实践7.1 把模板做成团队标准件一个人用模板和团队用模板是两回事。团队场景下claude-code-templates应该作为一个独立的 Git 仓库维护而不是散落在各个项目里。做法是建一个team-claude-config仓库里面放通用的CLAUDE.md基础模板、通用命令、MCP 配置模板。各项目通过 git submodule 或复制脚本引入项目特有的部分在本地覆盖。这样做的收益是新人入职 clone 一次就对齐环境规范更新只改一处所有人同步出问题有版本可回溯。代价是需要有人维护这个仓库但相比每个人各自折腾维护成本低得多。7.2 与现有工程体系的衔接Claude Code 不是孤立工具它要接进现有的 lint、test、build 流程。我的做法是在CLAUDE.md里明确写出这些命令让 Claude 知道改完代码该跑什么验证。更进一步可以把这些命令做成自定义命令比如/verify一次性跑 lint typecheck testClaude 改完代码自己验证你只看结果。MCP 层面如果团队用蓝湖管理设计稿配好蓝湖 MCP 之后Claude 能直接读设计稿标注前端还原时不用来回切窗口。如果做安全测试burpsuite MCP 能让 Claude 辅助分析请求。这些场景的共同点是把原本需要人工在多个工具间搬运信息的环节交给 Claude 通过 MCP 自动完成。7.3 后续可扩展的方向模板跑顺之后可以往几个方向扩展。一是把常用提示词库化按场景分类比如“写文档”“重构”“排查 bug”各一组命令。二是接入更多 MCP比如数据库查询 MCP让 Claude 能直接看表结构写 SQL。三是做配置校验脚本在 CI 里检查mcp.json格式、CLAUDE.md是否存在防止有人提交坏配置。我个人在实际操作中的体会是claude-code-templates的价值不在于模板本身多复杂而在于它强迫你把“怎么用 Claude Code”这件事想清楚、写下来、固化住。裸装状态下每个人都在重复造轮子有了模板轮子造一次就够了。最后分享一个小技巧把模板仓库的 README 写成“新人上手指南”从装 Node 到跑通第一个命令一步步写清楚比任何口头交接都管用。
返回列表