Codex装完插件还是看不到Figma——你还差一个MCP

本文涉及的知识点：MCP协议是什么 ｜ MCP vs 插件 vs Skill 三者区别 ｜ Codex App中配置MCP ｜ 三个常用MCP工具

我今天数了一下。

做一个小需求——改登录页的手机号校验逻辑——我切换了六个工具。

Figma 看设计稿 → VS Code 改代码 → 终端跑测试 → GitHub 提 PR → Slack 通知队友 → Notion 更新任务状态。六个窗口，来回切，复制粘贴，复制粘贴，复制粘贴。

问题是，我的 Codex 明明插件也装了、Skill 也配了，这些事它都能做——但它看不到 Figma 里的设计稿，碰不到 GitHub 上的 PR，连不上团队的 Slack 频道。

因为少了一样东西：MCP。

插件是给 Codex 装器官——让它能做新的事情。Skill 是给 Codex 装方法论——让它把事情做好。但 MCP 解决的是另一个问题：你的数据不在 Codex 里，在外面。MCP 就是一根数据线，让 Codex 直接读到那些外部工具里的东西。

一、MCP是什么——Codex的万能USB-C

你手机上有 USB-C 口，插显示器就投屏，插硬盘就读文件，插键盘就打字。

一个口，兼容所有设备。

MCP——Model Context Protocol——干的是一模一样的事。它是一个标准接口，让 Codex 能和任何支持 MCP 的外部工具直接通信。不用你自己复制粘贴数据，不用在六个窗口之间手动切换。

说人话：MCP = Codex 的万能插头。

你可能会问：插件也能连外部工具啊？比如那个 Presentations 插件不就是连的 PPT 软件吗？

对。但插件的问题是——它是一次性、专用型连接。Prsentations 插件只能做 PPT，不能帮你查数据库。你要查数据库？再装一个数据库插件。要读 Figma？再装一个 Figma 插件。

MCP 不一样。装一个 MCP 协议层，然后你想接什么外部工具，只需要配置一个对应的 MCP 服务器就好。就像 USB-C 不需要给每一种外设重新设计接口——你只需要不同功能的线。

二、你什么时候会撞上这堵墙

大部分人第一次意识到自己需要 MCP，是在这三个场景里。

场景一：做一个"跟设计稿一模一样"的页面。

Codex 写代码没问题，但你看不到它的眼睛——它根本没有看到 Figma 设计稿。你只能截图发给它，或者手动描述"那个按钮是圆角的，大概 8px"。然后它自己猜，你来回改。

接了 Figma MCP 之后：Codex 直接读取 Figma 文件里的设计参数——颜色值、间距、字体大小、组件层级。它不再猜，你也不需要做人工搬运工。

场景二：写完代码想直接发 PR。

你已经让 Codex 帮你改完代码、跑完测试了。下一步是：打开 GitHub → 创建 PR → 写描述 → 指派人 → 贴链接到群里通知队友。一连串手动操作，刚好是你最烦的那种。

接了 GitHub MCP 之后：Codex 改完代码自动创建 PR、自动写变更描述、自动 @ 队友 review。你只需要看通知。

场景三：做一个带数据的管理后台。

Codex 写了前端页面，但要连数据库拿真实数据——它连不上。你只能手动把数据库 schema 复制给它，把示例数据粘贴给它，让它模拟。然后你自己再把返回格式、接口路径、认证方式一个个告诉它。

接了数据库 MCP 之后：Codex 直接读你的表结构、查示例数据、验证 SQL 是否跑得通。前端和后端一起做，不用你当中间人。

这三个场景有一个共同点：Codex 被关在项目目录里，外面的世界它看不到。

MCP 就是在墙上开一扇门。

三、Codex App 里怎么配MCP

在 Codex App 里配 MCP 不需要写代码。

打开 Codex App，点左下角头像 → 设置→ 找到 MCP标签。

你会看到一个 MCP 服务器列表。初始是空的——这很正常。

点击「添加 MCP 服务器」，会弹出配置窗口。三个字段：

• 名称：随便填，比如"我的 GitHub"
• 类型：选 command（本地启动）或 url（远程连接）
• 命令 / URL：填对应的启动命令或远程地址

拿 GitHub MCP 举例，填法如下：

填完点保存，Codex 会自动启动这个 MCP 服务器。状态变成绿色「已连接」，就搞定了。

如果你用的是别人的 MCP 服务器，对方会给你一个 URL。类型选 url，把地址粘进去就行。

装完之后不需要手动告诉 Codex"请用 MCP 读我的 Figma"。你正常下任务就行——Codex 会自动判断什么时候该用 MCP、该用哪个。

这点和 Skill 的逻辑一样：装好就行，Codex 自己会调用。

四、三个我每天都在用的MCP

不是让你装一堆，先装这三个——覆盖你 90% 的场景。

1. GitHub MCP

装了这个，Codex 是一个真正的工程 Agent——不再只是本地改代码，而是打通了 GitHub 全流程。

能干什么：

• 自动创建 PR，写变更描述
• 自动读取 issue，理解需求上下文
• 自动查看 CI 状态，失败了还能读日志定位原因
• 自动 @ reviewer，发评论

装法：

在 Codex App → 设置 → MCP → 添加，填 npx -y @anthropic/mcp-server-github。第一次启动时会弹出 GitHub 授权页面，点一下确认就行。

我装完之后干的第一个活：让 Codex 把一个 bug 修完，自动提 PR，自动写"修了什么、影响范围、测试结果"。我全程没碰 GitHub 网页——通知弹出的时候，PR 已经整整齐齐摆在那了。

2. Filesystem MCP

这个很多人觉得鸡肋——"Codex 不就能直接读本地文件吗？"

对，但只能读当前项目目录里的文件。如果你想让 Codex 读桌面上的配置文件、读 Downloads 里的数据表、读另一个项目里的参考代码——它够不着。

Filesystem MCP 把 Codex 的文件访问范围从"当前项目"扩展到"你指定的任何目录"。

装法：

添加 MCP 服务器，命令填：

npx -y @anthropic/mcp-server-filesystem /Users/你的用户名/Documents

把路径换成你想让 Codex 访问的目录就行。

一个我经常用的场景：旧项目代码在另一个文件夹里，让 Codex 参考旧项目的实现风格来写新项目的代码。不装这个 MCP，你只能手动把旧代码粘贴过去。

3. Puppeteer MCP

这个是三个里最能让你"哇塞"的。

Puppeteer 是一个浏览器自动化工具。装上 Puppeteer MCP 之后，Codex 能像一个真人一样操作网页——打开页面、点击按钮、填表单、截图、抓数据。

能干什么：

• 自动打开网页检查部署效果——"帮我看看刚部署的页面长什么样，和设计稿对比一下"
• 自动填写在线表单——"帮我在这个网站上注册一个新账号，填好测试数据"
• 自动抓网页数据——"把这三页搜索结果的结构化数据爬下来存成 CSV"

装法：

npx -y @anthropic/mcp-server-puppeteer

我第一次用这个 MCP 的时候，让 Codex 帮我在一个内网系统里批量导出 200 条记录。以前我手动点——搜索→导出→下一页→搜索→导出。装了 Puppeteer MCP 之后，Codex 自己在那点了 20 分钟，我去喝了杯咖啡。

五、我的MCP起步套餐（直接抄）

别纠结先装哪个。照这个顺序，五分钟搞定。

第一步：打开 Codex App → 设置 → MCP。

第二步：依次添加这三个：

第三步：全部状态变绿，关设置，正常用 Codex。

你不需要特意告诉 Codex"请用 Puppeteer MCP"。你只需要说"帮我把这个页面截个图"——它自己知道该调哪个 MCP。

插件让你想做什么就能做什么。

Skill 让你做什么都像专家在做。

MCP 让这些能力不再被关在 Codex 自己的小房间里——它能伸手碰到你整个工具链。

三件事加在一起的时候，Codex 就不再是一个"工具"了——它是在你的整个数字工作环境里替你跑腿的工程执行者。

下一篇讲 Git 基础。前面八篇你学会了怎么用 Codex 干活、怎么给它装插件、怎么教它做事的标准、怎么让它连上外部世界。下一篇教你干活的时候怎么不把自己坑死——版本回退、分支管理、提交规范，全是救命的活。

往期推荐