Claude Code / Codex 工具配置笔记：MCP、Plugins 与 Skills

这篇文章整理我当前在 Claude Code 和 Codex 终端环境里常用的 MCP、插件和 Skills，主要方便后续查阅、迁移、更新和排查问题。

适用环境：Claude Code（终端）+ Codex（终端）

快速总览

类型	名称	主要用途	安装来源
MCP	`codegraph`	代码符号、依赖关系、调用链和文件结构查询	npm：`@colbymchenry/codegraph`
Plugin	`superpowers`	终端 Agent 工作流增强：脑暴、计划、TDD、验证、代码审查等	`claude plugins install superpowers`
Skills 集合	`taste-skill`	前端设计、页面生成、调研、配置与效率增强	GitHub：`Leonxlnx/taste-skill`
独立 Skill	`playwright-cli`	浏览器自动化、页面交互、截图、端到端测试辅助	skillsmp 手动安装
独立 Skill	`web-access`	联网检索、网页读取、CDP 浏览器访问、登录态页面访问	skillsmp 手动安装
独立 Skill	`skill-creator`	创建、优化和评估 Claude Skill	skillsmp 手动安装 / Anthropic 官方插件来源

1. MCP

MCP 更偏“给 Agent 增加外部工具能力”。这里目前主要记录 codegraph，用于在代码仓库里做结构化检索和调用链分析。

1.1 codegraph — 代码智能知识图谱

codegraph 用来为项目建立代码索引，并通过 MCP 工具查询 符号、依赖关系、调用链和文件结构。它适合阅读陌生项目、追踪 bug、评估重构影响面。

项目地址：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`	查看索引状态	“索引是否正常？”

安装方式

# 第一步：全局安装
npm install -g @colbymchenry/codegraph

# 第二步：运行并自动配置 Claude Code / Codex
npx @colbymchenry/codegraph

npx @colbymchenry/codegraph 会自动向 Claude Code 和 Codex 的配置文件写入 MCP server，通常不需要手动编辑 settings.json。

使用方式

1）在项目里初始化索引

codegraph init -i

适合这些情况：

第一次在某个仓库中使用 codegraph
新仓库还没有建立 .codegraph 索引
想让后续符号查询、调用链分析、影响面分析可用

建议进入项目根目录后执行。初始化完成后，再在 Claude Code 或 Codex 中使用相关 MCP 工具。

2）同步索引

codegraph sync

适合这些情况：

拉取新代码后
大量修改代码后
发现查询结果与当前代码不一致时

3）在 Agent 中使用

可以直接用自然语言描述需求，例如：

“帮我看一下登录流程从入口到数据库怎么走”
“评估一下改 UserService 会影响哪些调用方”
“找一下支付相关代码入口”

如果要更精确，也可以点名工具，例如：

先用 codegraph_context 找入口
再用 codegraph_explore 展开相关源码
重构前用 codegraph_impact 看影响面

更新方式

npm install -g @colbymchenry/codegraph@latest
npx @colbymchenry/codegraph

更新后建议重新执行一次自动配置，确保 Claude Code / Codex 的 MCP 配置与新版本一致。

卸载方式

npm uninstall -g @colbymchenry/codegraph

卸载后还需要手动清理 Claude Code 和 Codex 配置文件中的对应 MCP server 条目，例如：

~/.claude/settings.json → 删除 mcpServers.codegraph

验证方式

在 Claude Code 会话中调用 codegraph_status，能正常返回即说明 MCP 接入成功
检查 ~/.claude/settings.json 中是否包含 codegraph 的 MCP server 配置
如果查询结果不对，优先在项目根目录执行 codegraph sync

使用建议

场景	推荐流程
理解某个功能怎么实现	`codegraph_context` → `codegraph_explore`
追踪调用链	`codegraph_trace` → `codegraph_callers` / `codegraph_callees`
评估改动影响	`codegraph_impact` → `codegraph_callers`
按名称定位符号	`codegraph_search` → `codegraph_node`
确认索引状态	`codegraph_status`

2. Plugins 与 Skills

Plugins / Skills 更偏“让 Agent 按特定工作流做事”。我这里分成三类：

工作流类：比如 superpowers，约束 Agent 如何脑暴、计划、实现、验证。
设计与效率类：比如 taste-skill，增强前端设计、图像转代码、调研和配置能力。
独立能力类：比如浏览器自动化、联网访问、Skill 编写等。

2.1 Superpowers — 终端 Agent 工作流技能包

Superpowers 不是某一个单独功能，而是一套终端 Agent 工作流方法论。它把“从想法到交付”的过程拆成脑暴、计划、TDD、执行、验证、代码审查和分支收尾等阶段。

适合场景：

多步骤开发任务
修 bug 前需要系统排查
写代码前需要先明确方案
完工前需要验证是否真的完成
想让 Claude Code / Codex 更稳定地按流程工作

主要 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 等

配套增强

Skill	作用
`superpowers:using-git-worktrees`	使用 git worktree 隔离工作区
`superpowers:writing-skills`	编写或修改 skill 本身

安装方式

claude plugins install superpowers

安装完成后，相关 skills 会出现在可用技能列表中。

使用方式

直接调用

/superpowers:brainstorming
/superpowers:writing-plans
/superpowers:verification-before-completion

自然语言触发

也可以直接描述任务，让 Agent 根据当前场景判断是否需要调用对应 skill，例如：

“帮我设计这个功能的实现方案”
“系统排查一下这个 bug”
“完成前帮我验证一下改动是否真的生效”

更新方式

claude plugins update superpowers

如果更新后当前会话没有立即识别到变化，重新打开 Claude Code 会话再检查一次。

卸载方式

claude plugins uninstall superpowers

验证方式

在 Claude Code 中输入 /superpowers:brainstorming
如果能正常触发，说明插件已安装并可用
也可以检查 /skills 列表中是否出现 superpowers:* 相关条目

使用建议

场景	推荐组合
新功能开发	`brainstorming` → `writing-plans` → `test-driven-development` → `verification-before-completion`
修 bug	`systematic-debugging` → `verification-before-completion`
多模块任务	`writing-plans` → `subagent-driven-development`
代码审查	`requesting-code-review` / `receiving-code-review`
分支收尾	`finishing-a-development-branch`

2.2 taste-skill — 设计与审美增强 Skills 集合

taste-skill 是一组偏 设计审美、前端表达、图像生成、调研辅助与配置增强 的 skills。它适合让 Claude Code 帮你重做页面、还原截图、生成前端视觉方向，或者整理更像样的设计调研。

项目地址：https://github.com/Leonxlnx/taste-skill

主要 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`	生成移动端界面视觉稿或页面方向

研究与辅助类

Skill	作用
`deep-research`	多来源调研、核对并输出带引用结论
`verify`	运行并验证改动是否真的生效
`run`	启动项目并观察页面或功能表现
`claude-api`	查询 Claude API / Anthropic SDK / 模型相关信息

配置与效率类

Skill	作用
`update-config`	修改 Claude Code 配置、权限、环境变量或 hooks
`keybindings-help`	自定义 Claude Code 快捷键
`fewer-permission-prompts`	减少常见只读操作的权限提示

安装方式

npx skills add https://github.com/Leonxlnx/taste-skill

执行完成后，仓库里的 skills 会被加到当前环境中。后面可以通过 slash 命令或自然语言点名使用。

使用方式

直接调用

/design-taste-frontend
/high-end-visual-design
/image-to-code
/deep-research
/update-config

自然语言点名

例如：

“用 design-taste-frontend 帮我重做这个落地页”
“用 image-to-code 根据这张截图生成页面”
“用 deep-research 帮我做一份带来源的调研”
“用 update-config 帮我调整 Claude Code 配置”

更新方式

npx skills add https://github.com/Leonxlnx/taste-skill

如果本地已经存在这个来源的 skills，重新添加通常会刷新到最新内容。更新后如果当前会话没有识别到新内容，重启 Claude Code / Codex 会话再试。

卸载方式

如果后面不想继续使用，可以在 skills 管理中移除这个 GitHub 来源安装的 skills。

这里先不写死具体卸载命令，避免和本地 skills 工具版本行为不一致。后续确认统一命令后再补充会更稳妥。

验证方式

安装后随便触发一个常用 skill，例如：

/design-taste-frontend
/deep-research

只要能正常触发，就说明这组 skills 已接入成功。如果刚安装完没有生效，重开当前会话再试。

使用建议

场景	推荐 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. 独立 Skills

除了成组安装的插件，我还会单独安装一些偏“单项能力增强”的 skills。它们通常不是完整工作流插件，而是围绕浏览器、联网或 skill 编写这类具体场景提供能力。

这几个独立 skills 的安装方式基本一致：我是在 https://skillsmp.com/zh 找到后，下载 zip 包，再把解压后的 skill 目录复制到 Claude Code 和 Codex 的用户级 skills 目录中。

3.1 独立 Skills 总览

Skill	作用	常用场景
`playwright-cli`	通过 Playwright CLI 打开浏览器、点击、输入、截图、读取页面快照	页面验证、交互排查、端到端测试辅助
`web-access`	联网策略、网页读取、CDP 浏览器自动化、登录态页面访问	普通搜索不够用、动态页面、内部后台、社交平台页面
`skill-creator`	创建、修改、优化 skill，并通过 eval / benchmark 评估效果	把重复工作流沉淀成正式 skill

3.2 playwright-cli — 浏览器自动化与页面测试 Skill

playwright-cli 适合需要让 Claude 直接操作网页、检查页面状态、生成截图、辅助 Playwright 测试和调试前端交互的场景。

来源：本地 skill：~/.claude/skills/playwright-cli
依赖：playwright-cli 命令、Playwright / npm 环境

主要能力

能力	作用
打开与导航页面	`open`、`goto`、`reload`、`go-back`、`go-forward`
页面交互	`click`、`type`、`fill`、`press`、`hover`、`select`、`check`、`upload`
页面观察	`snapshot`、`screenshot`、`eval`、`console`、`requests`
多标签管理	`tab-list`、`tab-new`、`tab-select`、`tab-close`
状态管理	cookie、localStorage、sessionStorage、`state-save` / `state-load`
调试与测试辅助	tracing、video、request mocking、locator 生成、Playwright 测试生成

安装方式

playwright-cli 这一节除了复制 skill 目录，还需要先把对应 CLI 装好。否则在 Claude 里调用时，容易出现“无法打开”之类的提示。

第一步：安装 Playwright CLI

npm install -g @playwright/cli@latest

如果这一步没做，后面即使 skill 已经复制到本地，Claude 也可能因为找不到底层命令而无法正常拉起浏览器操作。

第二步：安装 Skill

打开 https://skillsmp.com/zh
搜索 playwright-cli
下载对应 zip 包
解压后，把 skill 目录复制到 Claude Code 和 Codex 的用户级 skills 目录

可参考的目标目录：

Claude Code：~/.claude/skills/playwright-cli
Codex：Codex 对应的用户级 skills 目录

如果本地已经存在同名目录，复制前建议先备份旧版本。

使用方式

直接调用 skill

/playwright-cli

也可以用自然语言触发：

“用 playwright-cli 打开这个页面并检查按钮能不能点击”
“帮我用浏览器跑一下这个登录流程”
“打开本地页面，截图看看样式有没有问题”

常用命令

# 打开浏览器
playwright-cli open

# 打开并直接访问页面
playwright-cli open https://example.com

# 跳转页面
playwright-cli goto https://playwright.dev

# 获取页面结构快照
playwright-cli snapshot

# 点击快照里的元素 ref
playwright-cli click e3

# 输入文本
playwright-cli type "search query"

# 执行页面 JS
playwright-cli eval "document.title"

# 截图
playwright-cli screenshot --filename=page.png

# 关闭浏览器
playwright-cli close

更新方式

如果是通过 skillsmp 下载 zip 包手动安装，更新时建议同时处理 CLI 和 skill：

npm install -g @playwright/cli@latest

然后再更新 skill 目录：

重新打开 https://skillsmp.com/zh
搜索 playwright-cli
下载新版 zip 包
解压后覆盖 Claude Code 和 Codex 用户级 skills 目录中的旧版本

覆盖前建议先备份旧目录。更新后如果当前会话没有识别到新内容，重启 Claude Code / Codex 会话再试。

卸载方式

如果是手动复制安装，卸载时直接删除对应 skill 目录即可：

Claude Code：删除 ~/.claude/skills/playwright-cli
Codex：删除 Codex 用户级 skills 目录中的 playwright-cli

如果只是暂时停用，也可以先改目录名或移走备份。

验证方式

在 Claude Code 中输入 /playwright-cli，能正常触发说明 skill 可用
执行 playwright-cli open，能打开浏览器说明 CLI 已正确安装
如果 Claude 提示无法打开，先检查是否已经执行过 npm install -g @playwright/cli@latest
执行 playwright-cli snapshot，能返回页面结构说明浏览器会话可正常交互

使用建议

场景	推荐用法
检查页面是否能正常打开	`open` → `snapshot`
验证按钮 / 表单交互	`open` → `click` / `fill` / `press` → `snapshot`
调试页面状态	`eval` / `console` / `requests`
生成截图或视觉核对	`screenshot` / `show --annotate`
辅助 Playwright 测试	`generate-locator` → 编写或修正测试

3.3 web-access — 联网与浏览器 CDP 自动化 Skill

web-access 是给 Agent 补全联网能力的 skill。它不只是“搜索网页”，而是把 搜索策略、网页抓取、浏览器 CDP 操作、登录态页面访问、站点经验积累 组合在一起。

适合处理普通 WebSearch / WebFetch 不够用的网页任务，例如动态页面、登录后页面、公众号 / 小红书 / 微博这类静态抓取不稳定的页面。

项目地址：https://github.com/eze-is/web-access
官网：https://web-access.eze.is
本地 skill：~/.claude/skills/web-access

主要能力

能力	作用
联网工具选择	在 WebSearch、WebFetch、curl、Jina、CDP 浏览器之间选择合适方式
浏览器 CDP 操作	直连 Chrome / Edge 等 Chromium 浏览器，读取动态页面并点击、滚动、截图
登录态页面访问	利用用户日常浏览器的登录状态访问后台、社交平台或内部系统
本地浏览器资源检索	从 Chrome / Edge 书签和历史中找用户访问过的页面
媒体内容处理	从 DOM 提取图片 / 视频 URL，或对视频画面进行截图采样
站点经验积累	记录特定网站的 URL 模式、平台特征和已知陷阱，方便复用

安装方式

打开 https://skillsmp.com/zh
搜索 web-access
下载对应 zip 包
解压后，把 skill 目录复制到 Claude Code 和 Codex 的用户级 skills 目录

可参考的目标目录：

Claude Code：~/.claude/skills/web-access
Codex：Codex 对应的用户级 skills 目录

前置配置

CDP 模式需要：

Node.js 22+
Chrome / Edge 等 Chromium 浏览器
浏览器开启远程调试权限

浏览器设置入口：

Chrome：chrome://inspect/#remote-debugging
Edge：edge://inspect/#remote-debugging

勾选 Allow remote debugging for this browser instance 后，必要时重启浏览器。

使用方式

直接调用 skill

/web-access

也可以直接描述联网任务，让 Agent 自动判断是否需要使用：

“帮我搜索一下这个工具的最新用法”
“读一下这个网页并总结重点：[URL]”
“打开我登录过的后台页面，帮我看一下这个设置在哪”
“去小红书 / 微博 / 公众号页面查一下这个内容”
“同时调研这几个产品官网，整理对比表”

CDP 前置检查

node "${CLAUDE_SKILL_DIR}/scripts/check-deps.mjs"

如果要临时指定浏览器：

node "${CLAUDE_SKILL_DIR}/scripts/check-deps.mjs" --browser edge

本地浏览器历史 / 书签检索

node "${CLAUDE_SKILL_DIR}/scripts/find-url.mjs" 关键词 --browser edge --limit 10

适合用户说“我之前打开过那个页面”“公司那个后台”但没有给出 URL 的情况。

更新方式

如果是通过 skillsmp 下载 zip 包手动安装，更新方式是重新下载新版 zip 包，然后覆盖用户级 skills 目录中的旧版本：

打开 https://skillsmp.com/zh
搜索 web-access
下载新版 zip 包
解压后覆盖 Claude Code 和 Codex 中原来的 web-access 目录

覆盖前建议先备份旧目录，尤其是本地如果已经积累了 references/site-patterns/ 这类站点经验文件。

卸载方式

如果是手动复制安装，卸载时直接删除对应目录即可：

Claude Code：删除 ~/.claude/skills/web-access
Codex：删除 Codex 用户级 skills 目录中的 web-access

如果你在这个 skill 里积累过站点经验、配置过 config.env，删除前建议先备份。

验证方式

输入 /web-access 能正常触发，说明 skill 已被识别
执行前置检查脚本不报错，说明 Node.js 和浏览器 CDP 环境可用
能通过浏览器打开页面并读取 DOM / 截图，说明 CDP Proxy 正常工作

使用建议

场景	推荐用法
普通资料搜索	WebSearch → 一手来源页面 → WebFetch / Jina
已知 URL 的内容提取	WebFetch；动态页面再升级到 CDP
登录后页面 / 内部系统	CDP 浏览器模式
小红书、公众号等反爬明显页面	优先 CDP，不要只依赖静态抓取
用户记得看过但没给 URL	`find-url.mjs` 查本地历史 / 书签
多个独立站点调研	分派子 Agent 并行，各自创建后台 tab

3.4 skill-creator — Skill 创建、优化与评估工具

skill-creator 是 Anthropic 官方的 skill，用来帮助创建新 skill、改进已有 skill，并通过测试用例、eval 和 benchmark 评估 skill 效果。

适合场景：

把重复工作流沉淀成正式 skill
优化已有 skill 的触发描述和执行质量
为 skill 准备真实测试 prompts
对比有 skill / 无 skill，或新版 / 旧版的效果差异
项目地址：https://github.com/anthropics/claude-plugins-official/tree/main/plugins/skill-creator
来源补充：我这里是通过 https://skillsmp.com/zh 找到后，下载 zip 包，再复制到 Claude Code 和 Codex 的用户级 skills 目录里使用

主要能力

能力	作用
创建 skill	从需求访谈开始，整理触发条件、输出格式和 `SKILL.md` 内容
修改 skill	优化已有 skill 的结构、描述、步骤和约束
编写测试用例	为 skill 准备真实用户会说的 eval prompts
运行评估	对比有 skill / 无 skill，或新旧 skill 的输出差异
生成评估报告	用 benchmark 和 review viewer 帮用户查看结果并反馈
优化触发描述	改进 description，让 skill 更容易在正确场景触发

安装方式

我这里的安装方式不是直接走 Claude Code 插件命令，而是从 skillsmp 下载 zip 包后手动复制：

打开 https://skillsmp.com/zh
搜索 skill-creator
下载对应 zip 包
解压后，把 skill 目录复制到 Claude Code 和 Codex 的用户级 skills 目录

可参考的目标目录：

Claude Code：~/.claude/skills/skill-creator
Codex：Codex 对应的用户级 skills 目录

如果当前环境已经能在 /skills 中看到 skill-creator，通常说明已经复制成功并被识别。

使用方式

直接调用 skill

/skill-creator

自然语言点名

例如：

“用 skill-creator 帮我创建一个用于写博客发布文档的 skill”
“帮我优化这个 skill 的 description，让它更容易触发”
“给这个 skill 设计几个 eval prompts”
“比较一下旧版和新版 skill 的效果”

典型流程

明确 skill 要解决什么问题，以及何时触发
写出初版 SKILL.md
准备 2～3 个真实测试 prompt
分别运行有 skill / 无 skill，或新版 / 旧版对比
让用户查看输出和 benchmark
根据反馈继续迭代 skill

更新方式

如果是通过 skillsmp 下载 zip 包手动安装，更新方式就是重新下载新版 zip 包并覆盖旧目录：

打开 https://skillsmp.com/zh
搜索 skill-creator
下载新版 zip 包
解压后覆盖 Claude Code 和 Codex 用户级 skills 目录中的旧版本

覆盖前建议先备份旧目录。更新后如果当前会话没有识别到新内容，重启 Claude Code / Codex 会话再试。

卸载方式

如果是手动复制安装，直接删除对应目录即可：

Claude Code：删除 ~/.claude/skills/skill-creator
Codex：删除 Codex 用户级 skills 目录中的 skill-creator

如果你改过这个 skill，或在里面加过自己的参考文件，删除前建议先备份。

验证方式

输入 /skill-creator，能正常触发说明 skill 可用
检查 /skills 列表中是否出现 skill-creator
让它为一个简单 skill 生成测试 prompt，能输出可执行的评估思路即可

使用建议

场景	推荐用法
想把重复工作流沉淀成 skill	`skill-creator` 从需求访谈开始创建
已有 skill 但触发不稳定	优化 description 和触发场景描述
不确定 skill 是否真的有效	编写 eval prompts，对比有无 skill 的输出
想系统评估多个版本	跑 benchmark，并用 review viewer 收集反馈
只想快速改一小段 skill	可以跳过完整评估，但要保留清晰修改目标

4. 推荐组合：Superpowers + Codegraph

我自己的理解是：

Superpowers 决定“这件事应该按什么流程做”
Codegraph 帮助“快速看清代码结构和影响范围”

两者配合时，可以按下面的方式使用：

场景	推荐流程
做新功能前	`brainstorming` → `codegraph_context` → `writing-plans`
修 bug 时	`systematic-debugging` → `codegraph_trace` → `verification-before-completion`
改公共模块	`codegraph_impact` → `writing-plans` → `requesting-code-review`
阅读陌生项目	`codegraph_files` → `codegraph_context` → `codegraph_explore`

如果只是快速查一个符号，直接用 codegraph 就够了；如果是要真正改代码，建议先用 Superpowers 把流程约束住，再用 codegraph 辅助定位代码。

ai使用的工具

Claude Code / Codex 工具配置笔记：MCP、Plugins 与 Skills

快速总览

1. MCP

1.1 codegraph — 代码智能知识图谱

主要能力

安装方式

使用方式

1）在项目里初始化索引

2）同步索引

3）在 Agent 中使用

更新方式

卸载方式

验证方式

使用建议

2. Plugins 与 Skills

2.1 Superpowers — 终端 Agent 工作流技能包

主要 Skills

流程与规划

开发与调试

评审与收尾

配套增强

安装方式

使用方式

直接调用

自然语言触发

更新方式

卸载方式

验证方式

使用建议

2.2 taste-skill — 设计与审美增强 Skills 集合

主要 Skills

设计审美类

图像 / 页面生成类

研究与辅助类

配置与效率类

安装方式

使用方式

直接调用

自然语言点名

更新方式

卸载方式

验证方式

使用建议

3. 独立 Skills

3.1 独立 Skills 总览

3.2 playwright-cli — 浏览器自动化与页面测试 Skill

主要能力

安装方式

第一步：安装 Playwright CLI

第二步：安装 Skill

使用方式

直接调用 skill

常用命令

更新方式

卸载方式

验证方式

使用建议

3.3 web-access — 联网与浏览器 CDP 自动化 Skill

主要能力

安装方式

前置配置

使用方式

直接调用 skill

CDP 前置检查

本地浏览器历史 / 书签检索

更新方式

卸载方式

验证方式

使用建议

3.4 skill-creator — Skill 创建、优化与评估工具

主要能力

安装方式

使用方式

直接调用 skill

自然语言点名

典型流程

更新方式

卸载方式

验证方式