Claude Code和Codex配置教程 上下文Claude Code"env": { "CLAUDE_CODE_MAX_CONTEXT_TOKENS": "1000000", "DISABLE_COMPACT": "1" }codexmodel_context_window = 1000000

ai使用的工具 Claude Code / Codex 工具配置笔记：MCP、Plugins 与 Skills这篇文章整理我当前在 Claude Code 和 Codex 终端环境里常用的 MCP、插件和 Skills，主要方便后续查阅、迁移、更新和排查问题。适用环境：Claude Code（终端）+ Codex（终端）快速总览类型名称主要用途安装来源MCPcodegraph代码符号、依赖关系、调用链和文件结构查询npm：@colbymchenry/codegraphPluginsuperpowers终端 Agent 工作流增强：脑暴、计划、TDD、验证、代码审查等claude plugins install superpowersSkills 集合taste-skill前端设计、页面生成、调研、配置与效率增强GitHub：Leonxlnx/taste-skill独立 Skillplaywright-cli浏览器自动化、页面交互、截图、端到端测试辅助skillsmp 手动安装独立 Skillweb-access联网检索、网页读取、CDP 浏览器访问、登录态页面访问skillsmp 手动安装独立 Skillskill-creator创建、优化和评估 Claude Skillskillsmp 手动安装 / Anthropic 官方插件来源1. MCPMCP 更偏“给 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/codegraphnpx @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_status2. Plugins 与 SkillsPlugins / 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-developmentTDD 工作流superpowers:systematic-debugging系统化排查 bugsuperpowers: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修 bugsystematic-debugging → verification-before-completion多模块任务writing-plans → subagent-driven-development代码审查requesting-code-review / receiving-code-review分支收尾finishing-a-development-branch2.2 taste-skill — 设计与审美增强 Skills 集合taste-skill 是一组偏 设计审美、前端表达、图像生成、调研辅助与配置增强 的 skills。它适合让 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生成移动端界面视觉稿或页面方向研究与辅助类Skill作用deep-research多来源调研、核对并输出带引用结论verify运行并验证改动是否真的生效run启动项目并观察页面或功能表现claude-api查询 Claude API / Anthropic SDK / 模型相关信息配置与效率类Skill作用update-config修改 Claude Code 配置、权限、环境变量或 hookskeybindings-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-help3. 独立 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 评估效果把重复工作流沉淀成正式 skill3.2 playwright-cli — 浏览器自动化与页面测试 Skillplaywright-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 CLInpm 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-cliCodex：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-cliCodex：删除 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 自动化 Skillweb-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-accessCodex：Codex 对应的用户级 skills 目录前置配置CDP 模式需要：Node.js 22+Chrome / Edge 等 Chromium 浏览器浏览器开启远程调试权限浏览器设置入口：Chrome：chrome://inspect/#remote-debuggingEdge：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-accessCodex：删除 Codex 用户级 skills 目录中的 web-access如果你在这个 skill 里积累过站点经验、配置过 config.env，删除前建议先备份。验证方式输入 /web-access 能正常触发，说明 skill 已被识别执行前置检查脚本不报错，说明 Node.js 和浏览器 CDP 环境可用能通过浏览器打开页面并读取 DOM / 截图，说明 CDP Proxy 正常工作使用建议场景推荐用法普通资料搜索WebSearch → 一手来源页面 → WebFetch / Jina已知 URL 的内容提取WebFetch；动态页面再升级到 CDP登录后页面 / 内部系统CDP 浏览器模式小红书、公众号等反爬明显页面优先 CDP，不要只依赖静态抓取用户记得看过但没给 URLfind-url.mjs 查本地历史 / 书签多个独立站点调研分派子 Agent 并行，各自创建后台 tab3.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-creatorCodex：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-creatorCodex：删除 Codex 用户级 skills 目录中的 skill-creator如果你改过这个 skill，或在里面加过自己的参考文件，删除前建议先备份。验证方式输入 /skill-creator，能正常触发说明 skill 可用检查 /skills 列表中是否出现 skill-creator让它为一个简单 skill 生成测试 prompt，能输出可执行的评估思路即可使用建议场景推荐用法想把重复工作流沉淀成 skillskill-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 辅助定位代码。