ai使用的工具 Claude Code / Codex MCP 与 Plugins 配置指南本文档整理我当前使用的 MCP 和 Plugins，方便后续查阅、维护和扩展。适用环境：Claude Code（终端）+ Codex（终端）1. MCP1.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_node2. Plugins2.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-developmentTDD 工作流superpowers:systematic-debugging系统化排查 bugsuperpowers: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-worktreesgit 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修 bugsystematic-debugging → verification-before-completion代码审查requesting-code-review / receiving-code-review分支收尾finishing-a-development-branch2.2 taste-skill — 设计与审美增强 skill 集合如果你平时会让 Claude Code 帮你重做页面、还原截图、生成前端视觉方向，或者整理一份更像样的设计调研，那么 taste-skill 这组 skills 会比较顺手。它不是单一 skill，而是一套偏 设计审美、前端表达、图像生成、调研辅助与配置增强 的工具集合。我的理解是，可以把它当成给 Claude Code 额外加上的一层“设计感”和“表达力”增强包。项目地址：https://github.com/Leonxlnx/taste-skill主要 Skills设计审美类这组更适合用在页面重构、视觉升级和风格探索上。Skill作用design-taste-frontend用更高审美标准重做前端页面与落地页design-taste-frontend-v1design-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 配置、权限、环境变量或 hookskeybindings-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-help3. Superpowers 与 Codegraph 配合使用Superpowers 决定“应该怎么做”Codegraph 帮助“快速看清代码结构”场景流程做功能前brainstorming → codegraph_context → writing-plans修 bug 时systematic-debugging → codegraph_trace → verification-before-completion改公共模块codegraph_impact → writing-plans → requesting-code-review