Claude Code / Codex MCP 与 Plugins 配置指南
本文档整理我当前使用的 MCP 和 Plugins，方便后续查阅、维护和扩展。
适用环境：Claude Code（终端）+ Codex（终端）
1. MCP
1.1 codegraph — 代码智能知识图谱
提供代码的 符号、依赖关系和文件结构 索引查询。
- 项目地址：https://github.com/colbymchenry/codegraph
- 包名：
@colbymchenry/codegraph
能力一览
| 工具 | 作用 | 典型问题 |
|---|---|---|
codegraph_context | 按任务描述返回入口、关键符号、调用关系和代码上下文 | "这个功能怎么实现？" |
codegraph_search | 按名称搜索符号 | "有没有 login 方法？" |
codegraph_node | 查看单个符号详情 | "UserService 在哪？" |
codegraph_explore | 一次查看多个相关符号/文件源码 | "认证相关函数一起看" |
codegraph_callers | 查询"谁调用了这个符号" | "谁在用这个函数？" |
codegraph_callees | 查询"这个符号调用了谁" | "函数内部依赖了什么？" |
codegraph_trace | 追踪从 A 到 B 的调用路径 | "请求怎么走到数据库？" |
codegraph_impact | 评估修改某个符号的影响范围 | "改这个方法会波及哪？" |
codegraph_files | 查看文件树和符号分布 | "项目目录结构？" |
codegraph_status | 查看索引状态 | "索引是否正常？" |
适用场景
- 阅读陌生项目时快速建立结构认知
- 调试时梳理调用链
- 重构前评估影响面
- 比
grep + Read更快地定位关键实现
安装
# 第一步：全局安装
npm install -g @colbymchenry/codegraph
# 第二步：运行，自动配置 Claude Code 和 Codex
npx @colbymchenry/codegraphnpx @colbymchenry/codegraph 会自动向 Claude Code 和 Codex 的配置文件写入 MCP server，无需手动编辑 settings.json。
更新
npm install -g @colbymchenry/codegraph@latest
npx @colbymchenry/codegraph更新后重新执行一次自动配置，确保 Claude Code / Codex 的配置与新版本一致。
卸载
npm uninstall -g @colbymchenry/codegraph卸载后还需手动清理 Claude Code 和 Codex 配置文件中对应的 MCP server 条目：
~/.claude/settings.json→ 删除mcpServers.codegraph
验证
- 在 Claude Code 会话中调用
codegraph_status，能正常返回即说明接入成功 - 检查
~/.claude/settings.json中是否包含codegraph的 MCP server 配置
使用方式
初始化索引
codegraph init -i用途：
- 在当前项目中初始化 codegraph 索引
- 为后续的符号查询、调用链分析、影响面分析建立本地数据
适用场景：
- 第一次在某个仓库中使用 codegraph
- 新仓库还没有建立索引时
建议：
- 进入项目根目录后执行
- 初始化完成后，再在 Claude Code 或 Codex 中使用相关 MCP 工具
同步索引
codegraph sync用途：
- 同步当前项目代码到 codegraph 索引
- 在代码新增、修改较多后，刷新索引内容
适用场景：
- 拉取新代码后
- 大量修改代码后
- 发现查询结果与当前代码不一致时
建议：
- 在重要改动后执行一次
- 如果怀疑索引过旧，优先先执行
codegraph sync
使用建议
| 场景 | 推荐工具 |
|---|---|
| 理解某个功能怎么实现 | codegraph_context → codegraph_explore |
| 追踪调用链 | codegraph_trace → codegraph_callers / codegraph_callees |
| 评估改动影响 | codegraph_impact → codegraph_callers |
| 按名字定位符号 | codegraph_search → codegraph_node |
2. Plugins
2.1 Superpowers — 终端 Agent 工作流技能包
如果你平时会让 Claude Code 或 Codex 帮你做多步骤开发任务，比如先梳理需求、再写计划、接着实现、验证、收尾，那么 Superpowers 这一组 skills 会非常实用。
Superpowers 的价值不在某一个单独的 skill，而在于它把“从想法到交付”的整条工作流拆得更清楚。你可以把它理解成一套给终端 Agent 使用的方法论增强包。
主要 Skills
流程与规划
这组更适合在真正动手之前理清需求、方案和执行路径。
| Skill | 作用 |
|---|---|
superpowers:using-superpowers | 总控规则，约束 skill 使用流程 |
superpowers:brainstorming | 需求梳理、方案设计前的脑暴 |
superpowers:writing-plans | 多步骤任务的实施计划 |
superpowers:executing-plans | 按计划执行并检查 |
superpowers:subagent-driven-development | 多子 agent 协作开发 |
superpowers:dispatching-parallel-agents | 并行分派独立任务 |
开发与调试
这组主要用于具体编码、排查问题，以及在完工前确认结果是否靠谱。
| Skill | 作用 |
|---|---|
superpowers:test-driven-development | TDD 工作流 |
superpowers:systematic-debugging | 系统化排查 bug |
superpowers:verification-before-completion | 完工前验证 |
评审与收尾
这组适合用在代码审查、处理反馈和完成分支收尾这些阶段。
| Skill | 作用 |
|---|---|
superpowers:requesting-code-review | 主动请求代码审查 |
superpowers:receiving-code-review | 处理收到的 review 意见 |
superpowers:finishing-a-development-branch | 分支收尾：合并、提 PR |
配套增强
这组更像工作流补充包，适合在协作和执行方式上继续增强 Claude Code 的能力。
| Skill | 作用 |
|---|---|
superpowers:using-git-worktrees | git worktree 隔离工作区 |
superpowers:writing-skills | 编写/修改 skill 本身 |
安装
如果你想把这套工作流 skills 加到 Claude Code 里，直接执行下面这条命令即可：
# Claude Code
claude plugins install superpowers安装完成后，相关 skills 就会出现在可用技能列表里。对我这种主要在 Claude Code / Codex 终端里做开发的人来说，这个插件更像是把常用工作流预先整理好了。
更新
后续如果插件有更新，可以直接执行：
claude plugins update superpowers更新后通常不需要额外处理；如果当前会话没有立即识别到变化，重新打开 Claude Code 会话再检查一次即可。
卸载
如果后面不再需要，也可以直接卸载：
claude plugins uninstall superpowers验证
装好之后，最直接的检查方式就是在 Claude Code 会话里输入 /superpowers:brainstorming。
只要能正常触发，就说明插件已经安装成功并且可以使用。
使用建议
和 taste-skill 那种偏场景型的插件不同，Superpowers 更适合按“工作流阶段”组合使用。也就是说，它通常不是只调用一次，而是从需求梳理一路串到实现、验证和收尾。
如果你想先快速建立使用直觉，可以直接参考下面这几组常见搭配：
| 场景 | 推荐组合 |
|---|---|
| 新功能开发 | brainstorming → writing-plans → test-driven-development → verification-before-completion |
| 修 bug | systematic-debugging → verification-before-completion |
| 代码审查 | requesting-code-review / receiving-code-review |
| 分支收尾 | finishing-a-development-branch |
2.2 taste-skill — 设计与审美增强 skill 集合
如果你平时会让 Claude Code 帮你重做页面、还原截图、生成前端视觉方向，或者整理一份更像样的设计调研，那么 taste-skill 这组 skills 会比较顺手。
它不是单一 skill，而是一套偏 设计审美、前端表达、图像生成、调研辅助与配置增强 的工具集合。我的理解是，可以把它当成给 Claude Code 额外加上的一层“设计感”和“表达力”增强包。
主要 Skills
设计审美类
这组更适合用在页面重构、视觉升级和风格探索上。
| Skill | 作用 |
|---|---|
design-taste-frontend | 用更高审美标准重做前端页面与落地页 |
design-taste-frontend-v1 | design-taste-frontend 的早期版本，可用于兼容旧习惯 |
high-end-visual-design | 强化页面的高级感、层次和视觉表达 |
industrial-brutalist-ui | 生成工业 / brutalist 风格界面 |
minimalist-ui | 生成极简风格界面 |
redesign-existing-projects | 基于现有项目做结构化重设计 |
stitch-design-taste | 辅助整理设计方向与前端表达风格 |
brandkit | 整理品牌元素与视觉基调 |
gpt-taste | 辅助提升生成结果的设计品味 |
图像 / 页面生成类
这组适合做截图还原、参考图转页面，或者快速生成一个前端视觉方向。
| Skill | 作用 |
|---|---|
image-to-code | 根据截图、参考图生成页面代码 |
imagegen-frontend-web | 生成 Web 前端视觉稿 / 页面方向 |
imagegen-frontend-mobile | 生成移动端界面视觉稿 / 页面方向 |
研究与辅助类
这组偏“把事做完整”，适合做调研、验证、运行项目以及查询 Claude / Anthropic 相关资料。
| Skill | 作用 |
|---|---|
deep-research | 进行多来源调研、核对并输出带引用结论 |
verify | 运行并验证改动是否真的生效 |
run | 启动项目并观察页面 / 功能表现 |
claude-api | 查询 Claude API / Anthropic SDK / 模型相关信息 |
配置与效率类
如果你想长期优化 Claude Code 的使用体验，这组会更有价值。
| Skill | 作用 |
|---|---|
update-config | 修改 Claude Code 配置、权限、环境变量或 hooks |
keybindings-help | 自定义 Claude Code 快捷键 |
fewer-permission-prompts | 减少常见只读操作的权限提示 |
安装
如果你想把这组 skills 直接加到 Claude Code 里，最简单的方式就是执行下面这条命令：
npx skills add https://github.com/Leonxlnx/taste-skill我这里用的就是这种安装方式。执行完成后，仓库里提供的 skills 就会被加到当前环境里，后面可以直接按名字调用。
更新
后续如果仓库有更新，通常重新执行一次同样的命令就够了：
npx skills add https://github.com/Leonxlnx/taste-skill如果本地已经存在这个来源的 skills，重新添加通常就会刷新到最新内容。要是更新后当前会话还没识别到新内容，重新打开 Claude Code 会话再试一次就行。
卸载
如果后面不想继续用了，可以在 skills 管理里把这个 GitHub 来源安装的 skills 移除掉。
这里我先不把卸载命令写死，主要是避免和你本地 skills 工具的版本行为不一致；如果后面确认了统一命令，再补进来会更稳妥。
验证
装好之后，最直接的检查方式就是随便触发一个你会用到的 skill，例如：
/design-taste-frontend/deep-research
只要能正常触发，就说明这组 skills 已经接入成功。如果刚安装完还没有生效，重开当前会话再试一次即可。
使用方式
这组 skills 最常见的用法有两种。
第一种是直接在 Claude Code 里用 /skill-name 触发，比如：
/design-taste-frontend
/high-end-visual-design
/image-to-code
/deep-research
/update-config第二种是直接在自然语言需求里点名，让 AI 按指定 skill 的思路来做，例如：
- “用
design-taste-frontend帮我重做这个落地页” - “用
image-to-code根据这张截图生成页面” - “用
deep-research帮我做一份带来源的调研” - “用
update-config帮我调整 Claude Code 配置”
如果你是第一次装这组 skills，我建议优先从自己最常见的场景开始试，而不是一口气把所有 skill 都过一遍。这样更容易建立直觉：到底哪个 skill 更适合你现在的工作流。
使用建议
如果你只是想先快速判断“我现在该用哪个”，可以直接按下面这张表来选：
| 场景 | 推荐 Skill |
|---|---|
| 重做官网 / 落地页 | design-taste-frontend / high-end-visual-design |
| 做极简或特定风格页面 | minimalist-ui / industrial-brutalist-ui |
| 根据截图还原页面 | image-to-code |
| 生成前端视觉稿 | imagegen-frontend-web / imagegen-frontend-mobile |
| 做资料调研并整理来源 | deep-research |
| 调整 Claude Code 配置 | update-config |
| 修改快捷键 | keybindings-help |
3. Superpowers 与 Codegraph 配合使用
- Superpowers 决定“应该怎么做”
- Codegraph 帮助“快速看清代码结构”
| 场景 | 流程 |
|---|---|
| 做功能前 | brainstorming → codegraph_context → writing-plans |
| 修 bug 时 | systematic-debugging → codegraph_trace → verification-before-completion |
| 改公共模块 | codegraph_impact → writing-plans → requesting-code-review |
评论