Claude Code 深度配置指南：构建你的 AI 工程团队

用 Claude Code 做 vibe coding，很多人停留在"打开终端、随手一问"的阶段。但真正高效的玩法，是把它当成一个可深度定制的开发环境来经营：插件、Skills、Subagents、规则文件、MCP 工具，一层层叠上去之后，你会发现 AI 不只是"帮你写代码的工具"，而是一个懂你的项目、懂你的技术栈、甚至懂你个人偏好的工程团队。

这篇文章基于我本机的真实配置（~/.claude/ 目录）展开，讲讲每一层到底怎么用，以及如何针对自己的项目做定制。

一、全局规则文件 CLAUDE.md：给 AI 立规矩

~/.claude/CLAUDE.md 是全局规则文件，每次会话都会被注入到上下文里。这是成本最低、收益最高的一层定制。

我的全局 CLAUDE.md 里目前最主要的内容是 oh-my-claudecode（OMC）注入的编排规则，比如：

<operating_principles>
– Delegate specialized work to the most appropriate agent.
– Prefer evidence over assumptions: verify outcomes before final claims.
– Choose the lightest-weight path that preserves quality.
– Consult official docs before implementing with SDKs/frameworks/APIs.
</operating_principles>

这告诉 AI：能委派就委派、先验证再汇报、用 SDK 前先查官方文档。还有一些很实用的执行协议，例如：

• 写作和审查分离：写代码的 pass 和 review 的 pass 必须是不同的上下文，"永远不要自己批准自己"；

• 2 个以上独立任务并行跑，构建/测试放后台；

• 宽泛需求先 explore 再 plan，不要上来就写代码。

除了全局规则，每个项目根目录还可以放一个项目级 CLAUDE.md（或 AGENTS.md），写清楚：技术栈、目录结构、命令怎么跑（build/test/lint）、代码风格约定。项目级规则会叠加在全局规则之上——vibe coding 想稳，规则文件是地基。

二、settings.json：模型路由与权限管理

~/.claude/settings.json 除了配置 API 端点和模型（我配的是 GLM 系列模型，haiku 槽位用 flash 模型跑轻量任务、opus 槽位用 turbo 模型跑重活），更重要的是 permissions.allow 列表：

{
"permissions": {
"allow": [
"Bash(git cherry-pick *)",
"Bash(git show *)",
"mcp__antd__antd_info",
"mcp__antd__antd_changelog"
]
}
}

把高频且安全的命令加进白名单（比如 git show、只读的 MCP 工具），AI 就不用每次都停下来问你"是否允许执行"，vibe 不会被打断。这里的 mcp__antd__* 是 MCP 工具的权限——antd 的 MCP 让 AI 写组件时直接查实时文档和变更记录，而不是靠训练数据里的旧版本记忆瞎写。"给 AI 接外部工具"这件事，下面两节展开。

三、CodeGraph：给 AI 一张代码地图

CodeGraph 是一个独立的 CLI 工具（npm 全局安装），定位是"any codebase 的代码智能与知识图谱"。它解决的是 vibe coding 里最痛的一个问题：AI 对项目结构的认知是靠逐个文件 grep 出来的，碎、慢、还容易漏。CodeGraph 把整个代码库索引成一张符号级的关系图，让 AI 直接查询。

安装和接入 Claude Code 只需要三步：

npm install -g codegraph
在项目根目录初始化并建索引（生成 .codegraph/ 目录）
codegraph init
把 CodeGraph 的 MCP server 一键注册进 Claude Code
codegraph install

codegraph install 会自动把 MCP 配置写进 Claude Code（也支持 Cursor、Codex CLI 等），–location 可以选 global 或 local——全局装一次所有项目共用，或者只给某个项目装。

之后项目里的日常使用：

• codegraph sync：代码改了之后增量同步索引（比全量 index 快得多）；

• codegraph status：看索引状态和统计。

而真正发挥威力的是 AI 侧的能力，注册成 MCP 后 Claude Code 可以直接用：

• callers / callees：查某个函数被谁调用、它又调用了谁——改一个函数前先看清上下游；

• impact：分析改动一个 symbol 会波及哪些代码，重构前的爆炸半径一目了然；

• affected：给定改动的源码文件，找出受影响的测试文件，精准回归；

• context：针对一个任务自动组装出相关代码上下文的 markdown，不用 AI 自己满仓库翻。

还有一个很贴心的 query，用自然语言搜符号，比记不清函数名时 grep 猜关键字好用得多。

对大仓库来说这套东西是质变：AI 从"盲人摸象"变成"拿着地图干活"。唯一要注意的是，如果索引卡死（比如进程中断留下锁文件），codegraph unlock 可以清掉 stale lock。不需要时 codegraph uninit 一键移除，项目不留垃圾。

四、MCP：把外部世界接进 AI

前面反复出现 MCP（Model Context Protocol），这里系统讲一下配置和使用——它是 Claude Code 生态里"接能力"的标准通道：文档查询、联网搜索、代码图谱，全都走这条路。

配置在哪

MCP server 配置在 ~/.claude.json 的 mcpServers 字段里（全局生效），项目级的配置放在项目根目录的 .mcp.json，两者叠加。一条配置长这样：

{
"mcpServers": {
"codegraph": {
"type": "stdio",
"command": "codegraph",
"args": ["serve", "–mcp"]
}
}
}

实际写配置基本不用手改 JSON：claude mcp add 命令，或者像 CodeGraph 那样由工具自己 codegraph install 一键写入，都可以。

两种接入类型

• stdio：本地命令拉起的子进程，比如 codegraph serve –mcp，或 npx -y @upstash/context7-mcp 这种用 npm 现拉的；

• http：远程服务，配 url + headers（鉴权），不占本地进程。

我实际在用的 MCP

我全局挂了五个，两种类型混搭：

项目级我还给不同仓库按需挂过 context7（查各类框架的最新官方文档，专治"AI 记的 API 版本是旧的"）——这正是项目级 .mcp.json 的意义：只跟某个项目相关的工具跟着项目走，不污染全局。

使用体验

配好之后无需任何额外操作，AI 自动获得 mcp__server名__工具名 形式的工具（比如上面白名单里的 mcp__antd__antd_info）。两条实践建议：

MCP 的本质是：模型的通用能力是固定的，但工具箱是你自己拼的。文档、搜索、代码图谱这个组合，基本覆盖了 vibe coding 时 AI 最常见的两大短板——"知识过时"和"不识庐山真面目"。

延伸：第三方平台的 MCP 接入

MCP 真正的想象空间在于，现在越来越多第三方平台直接官方提供 MCP server——你日常用的 SaaS 和云服务，正在一个个变成 AI 的"手"。

模型厂商的 MCP 托管平台。 我全局挂的 web-search-prime、web-reader、zread 就是典型：它们是智谱（bigmodel.cn）在云端托管好的 HTTP MCP，一条配置即可接入，不用自己部署任何东西：

{
"mcpServers": {
"web-search-prime": {
"type": "http",
"url": "https://open.bigmodel.cn/api/mcp/web_search_prime/mcp",
"headers": { "Authorization": "Bearer <你的API Key>" }
}
}
}

阿里云也有同样的玩法——我在另一个项目里接了 DashScope 托管的 WebSearch MCP，配置形式一模一样，换个 url 和 Key 即可。这类云端 MCP 的好处是零运维、随开随用；代价是依赖外部服务的可用性，介意的话可以找 stdio 方案的本地替代。

开发工具链的官方 MCP。 这一类和日常开发贴得最近：

• GitHub 官方 MCP：让 AI 直接查 issue、读 PR、管理 repo，"帮我看看这个 issue 里报的错"变成一句话的事；

• Playwright MCP：浏览器自动化，AI 自己打开页面、点击、截图自验，前端 vibe coding 的闭环利器；

• Sentry 官方 MCP：把线上报错直接喂给 AI，"根据异常堆栈定位并修复"不再需要人工转述粘贴；

• Figma Dev Mode MCP：设计稿直出代码，图层的尺寸、颜色、字体以结构化数据交给 AI，被不少人称为前端开发的"圣杯"——和国内场景下我用的蓝湖 skill 是同一思路的两种实现；

• 组件库文档 MCP：比如我白名单里的 antd MCP，让 AI 用组件库时查的是实时文档而不是过时的记忆。

云服务和数据库 MCP。 PostgreSQL、Supabase、火山引擎等都出了官方 MCP，让 AI 能安全地查询数据库结构、执行只读 SQL、操作云资源。这对 vibe coding 意味着：说一句"看看 users 表的结构然后写个分页接口"，AI 自己去查 schema，不用你贴建表语句。

选型的两个原则：

五、插件（Plugins）：三大件

我实际装了三个插件，各司其职：

oh-my-claudecode：让 AI 自己管 AI

OMC 是我最重的一层。它装完之后会接管 CLAUDE.md，注入一整套编排规则：

• 模型路由：快速查找用 haiku、标准任务用 sonnet、架构和深度分析用 opus，按任务重量分配算力，省钱且快；

• 委派规则：多文件改动、重构、debug、review、调研一律委派给专门的 agent，琐碎操作直接干；

• 关键词触发：对话里说 "autopilot" 进自动驾驶模式、"tdd" 进测试驱动模式、"deepsearch" 做深度代码搜索、"ultrathink" 进深度推理，"cancelomc" 一键取消；

• 验证闭环：结束前必须零待办、测试通过、有 verifier 的证据，不允许"我觉得写完了"。

superpowers：把工程纪律变成技能

superpowers 里我用得最多的是 subagent-driven-development：把一个大需求拆成 plan 文件里的多个 task，每个 task 由独立 subagent 执行 brief → implement → review 的流程。我的 permissions.allow 里躺着不少它的脚本调用记录，可见使用频率。

六、Subagents：你的虚拟专家团队

~/.claude/agents/ 下每个 .md 文件就是一个自定义子代理。我定义了四个：

~/.claude/agents/
├── react-developer.md       # React 专家
├── senior-frontend-architect.md # 前端架构师
├── uniapp-cross-platform-dev.md # uniapp 跨端开发
└── vue-specialist.md         # Vue 专家

每个 agent 文件就是一个带 frontmatter 的 markdown，声明它的身份、专长和使用场景。主 agent 遇到对应领域的任务时会自动委派过去——相当于你的前端团队里有四个"虚拟同事"，各自带着更聚焦的 system prompt，互不污染上下文。

举个实际的场景：我在改一个 Vue 模块的同时想 review 另一个 React 项目的代码，主 agent 可以把两件事分别委派给 vue-specialist 和 react-developer 并行处理，各自在干净的上下文里工作。

七、Skills：按需加载的能力模块

~/.claude/skills/ 下每个目录是一个 skill（核心是 SKILL.md）。和 agent 的区别在于：agent 是"另一个人"，skill 是"一本书"——AI 平时不背着这些内容，只在任务匹配 description 时才加载，非常省上下文。

我本地 30 多个 skills，大致分几类：

框架最佳实践类

• vue-best-practices：Vue 任务必加载，强制 Composition API + <script setup> + TypeScript，覆盖 Vue 3 / SSR / Pinia / Vite 全家桶

• clean-code：按 Robert C. Martin《Clean Code》的原则写/审/重构代码

设计还原类

• frontend-design / frontend-designer：生成有设计感的前端界面，而不是"AI 味"的模板脸

• web-design-guidelines：按 Web Interface Guidelines 审查 UI 可访问性和体验

• lanhu-reader：直接解析蓝湖原型/设计稿链接，拉取设计图和切图——设计稿到代码的最后一公里

动效类（GSAP 全家桶）

• gsap-core / gsap-timeline / gsap-scrolltrigger / gsap-react / gsap-plugins / gsap-performance / gsap-utils：官方按主题拆分的七个技能，做哪个加载哪个

文档与产出类

• prd / prd-generator：生成产品需求文档，vibe coding 之前先 vibe 出 PRD

• drawio-generator：从 Mermaid/XML 生成 draw.io 架构图、流程图、ERD

• pdf / pptx / xlsx：处理对应格式的文件

浏览器与调试类

• agent-browser：浏览器自动化 CLI，让 AI 自己打开网页、点按钮、截图验证

• chrome-cdp：连上本机 Chrome 调试正在开发的页面

一个 skill 的结构非常简单，看 vue-best-practices 的 frontmatter 就懂了：

—
name: vue-best-practices
description: MUST be used for Vue.js tasks. Strongly recommends
 Composition API with `<script setup>` and TypeScript…
metadata:
 version: "18.0.0"
—
# Vue Best Practices Workflow
（具体的规则和工作流程）

关键就在 description——它决定了 AI 什么时候自动触发这个 skill。写得越明确（什么时候必须用、覆盖什么关键词），触发越准。

八、针对项目自定义 Skill：把重复劳动固化下来

这是我认为 vibe coding 进阶的核心动作。当你在某个项目里第三次重复同一套操作时，就该把它做成 skill 了。

我自己的例子：我在做微信小程序 + CloudBase 的项目，于是写了两个项目相关的 skill：

• auth-wechat：微信小程序云开发认证的完整指南——原生登录、用户身份、云函数集成，AI 不用再猜云开发的 API 细节；

• cloud-functions / cloud-storage-web：云函数（Event/HTTP 两种形态、scf_bootstrap、SSE/WebSocket）和云存储 Web SDK 的开发规范。

效果是：说一句"给这个页面加上微信登录"，AI 会自动加载 auth-wechat，按照里面沉淀的正确姿势写代码，而不是产出一份混着旧 API 和幻觉端点的"看着像"的代码。

自定义 skill 的实操步骤：

判断一个东西该做成 skill 还是写进 CLAUDE.md 的标准：一直适用的进规则文件，按需触发的进 skill。规则文件常驻上下文，skill 按需加载，别把几百行 API 文档塞进 CLAUDE.md 白白烧 token。

九、我推荐的整体架构

把上面这些整理成一张分层图：

┌─ 规则层：CLAUDE.md（全局）+ 项目 CLAUDE.md ─→ 常驻的行为约束
├─ 配置层：settings.json ─→ 模型路由 + 权限白名单
├─ 插件层：OMC + superpowers ─→ 多 agent 编排、工程化工作流
├─ 代理层：~/.claude/agents/*.md ─→ 领域专家 subagent
├─ 技能层：~/.claude/skills/ ─→ 按需加载的能力模块
├─ 工具层：MCP（antd 文档、浏览器…）─→ 外部能力接入
└─ 代码智能层：CodeGraph（init/sync + MCP 查询）─→ 符号级代码地图

一个典型的 vibe coding 流程就变成：

结语

Vibe coding 的"vibe"不是放任不管，而是把你的工程判断预先编码进环境里，让 AI 在你划好的轨道上高速奔跑。规则文件管下限，skill 和 agent 抬上限，MCP 工具补能力。每一次你纠正 AI 的错误，都值得想一想：这条纠正能不能沉淀成一行规则、一个 skill、一个白名单条目？

持续做这件事一个月，你的 Claude Code 就不再是通用模型，而是"你的"开发环境——这才是 vibe coding 的正确打开方式。