Codex 网页开发最小配置

① 核心：先把这几样做好

核心不是一排 Plugin 卡片，而是能让开发工作顺畅进行的基础。0 个插件也可以开始，不代表不用配置项目，更不代表 Codex 或第三方服务一定没有费用。

Codex：主要开发 Agent

把 Codex 当作开发 Agent：让它读取和修改项目代码，在允许的范围内运行命令，再检查结果。你不需要先给它接满外部工具，才能开始一个网页项目。

项目开发环境：项目先能正常运行

确认项目所需的 Node.js 或其他 Runtime、包管理器、依赖、环境变量和启动脚本都正常。不是每个项目都使用 Node，也不是每个项目都用 pnpm。

Codex 的效果很大程度取决于“这个项目本身能不能运行”。本地环境坏了，装再多 MCP 也不能替代修复根本问题。

OpenAI 的实际使用经验强调逐步完善启动脚本、环境变量和开发环境。当前最佳实践也提醒先排查工作目录、权限和缺失工具等基础问题。

给 Codex 一张地图，而不是一本百科全书

AGENTS.md 可以告诉 Codex 项目怎么运行、测试命令是什么、重要目录在哪里、命名规则、哪些文件不要乱动，以及特殊约束。

但不要把几十页文档全塞进去。很大的指令文件会挤占 Context，也更容易积累过时规则。这是 OpenAI Harness Engineering 分享的工程经验，不是一个固定行数的强制限制。

更好的分工是：AGENTS.md 做地图，README、docs/、ARCHITECTURE.md、DESIGN.md 保存细节。 只维护与你当前项目有关的内容。

一份 AGENTS.md 最小示例

下面只是结构示例，不是所有项目都必须照抄。示例命令与文档路径必须换成项目里真实存在的内容；不要为了套模板凭空声称已有测试。

# AGENTS.md

## Project

Next.js application using TypeScript.

## Commands

Install:
pnpm install

Development:
pnpm dev

Lint:
pnpm lint

Test:
pnpm test

Build:
pnpm build

## Rules

- Use TypeScript strict mode.
- Reuse existing components before creating new ones.
- Do not change production secrets.
- Run lint, test and build after meaningful changes.

## Docs

- Architecture: docs/architecture.md
- Design system: docs/design-system.md

它应该短、准确、持续维护。不要堆过时规则、几十个角色、长篇项目历史或与当前开发无关的信息。AGENTS.md 不是硬性要求，但持续开发项目通常值得有一份。

比插件更重要的，是让 Codex 能验证自己

网页正式项目至少建议有 lint、test、build；按需要增加 typecheck 和 E2E。它们分别检查不同问题，不能互相代替，也不能保证发现全部错误。

例如，项目已经定义了这些脚本时，可以让 Codex 修改后运行：

pnpm lint
pnpm test
pnpm build

以你的项目实际脚本为准。 这些不是所有技术栈的统一命令。检查失败时，应修正代码、测试或环境，不能用“多装几个插件”绕过失败。

② 推荐：需要浏览器时，加 Playwright CLI

如果开发网站、Web App、登录流程、表单、响应式布局，或需要页面交互、UI 回归和截图检查，Playwright CLI 很有价值。它是推荐选择，不是所有项目的必装项。

Playwright 官方 Coding Agents 文档把 CLI 面向编码 Agent：命令式交互适合已有 Shell 能力的工作流，可以获取 Accessibility Snapshot、截图，支持持续浏览器 Sessions，也可以加载对应 Skills。

相对 MCP，它的 Context 开销更轻，但不是没有输出成本，也不代表每项任务都更省。详见 Playwright MCP vs CLI 与 Playwright MCP 值得装吗？。

只在需要时安装

当前审核过的官方命令：

npm install -g @playwright/cli@latest

查看帮助：

playwright-cli --help

可选安装 Skills：

playwright-cli install --skills

Skills 是可选的。 CLI 也支持不安装 Skills，让 Coding Agent 查询 playwright-cli --help 再使用命令。本站只展示和复制命令，不自动安装或执行。首次使用前仍应阅读官方安装要求。

那 Playwright MCP 呢？

③ 按需：真正遇到问题以后再装

下面按工作缺口列候选项，不是推荐排行榜。先说缺什么能力，再选连接方式。

Context7：经常查最新开发文档时再考虑

适合经常使用变化很快的框架、已有知识过时、需要查当前 API / library docs，或反复查同一类文档的场景。

技术栈稳定、官方 docs 已在项目中、现有上下文足够，或只是偶尔查一次时，不一定需要。

Context7 可以通过 MCP 使用，也有 Codex Plugin 形式；项目自己的插件说明记录了其 MCP 与 Skill 组合。本页不要求安装，也不链接本站尚未发布的 Context7 页面。

Figma：设计稿真的在 Figma 里时再接

适合严格还原 Figma、读取设计系统或设计到代码的工作流。没有 Figma、只做后端、UI 已代码化，或只有几个简单页面时，不一定需要。

OpenAI Plugins 仓库包含 Figma 相关例子，但具体可用性还要看账号、workspace、地区与当前界面。不能推断所有 Codex 用户都有同一个 Figma Plugin。

GitHub：本地 Git 不够用时再接

在允许的项目环境里，Codex 可以使用已有的 git 和其他 CLI。只是查看 diff、commit、branch 或本地历史，不一定需要额外 GitHub Plugin。

需要 Issues、Pull Requests、远程仓库资料或账号协作动作时，再比较 GitHub Plugin / App / MCP / gh CLI。先看已有 git / gh 能不能解决，不强行推荐某一种。 不要假设你的环境已经安装 gh 或完成授权。

Notion / Linear：团队流程按需

团队确实把需求、任务、项目管理或文档放在这些平台时，再连接相应服务。项目不用，就不要为了“AI 工作流”额外引入一套。

Sentry：线上项目按需

已经接入 Sentry，需要让 Codex 读取真实错误、排查生产异常时才考虑。如果还没上线、没有 Sentry，或只是本地学习项目，不用为了这份配置单而安装。

④ 没有明确需求，这些先别装

这里针对的是重复或不必要的能力，不是对某个产品的排名或否定。同样的工具，在另一个项目中可能很有用。

Plugin / Skill / MCP 到底怎么理解？

三者不是互斥选项。一个 Plugin 可以把 Skills 和 Connected Apps / 连接器、MCP 等能力装在一起；App Templates 等模板内容是否包含，要看具体插件提供项，不能当作每个插件的标配。

想把工作方法与工具连接分清楚，可以接着看 Skill 和 MCP 有什么区别？。

当前 Codex Plugin 生态：能安装，不等于需要安装

OpenAI 已提供 Plugin Directory。当前官方说明把 Plugin 作为可复用工作流的能力包；公开示例仓库展示 Skills、App 连接和 MCP 等组合。

部分插件不需要外部 App；部分必须连接外部账号后才能调用工具。某个 App Template 或插件是否可用，以当前产品界面和插件说明为准。workspace、plan、region 和使用入口可能影响可用性，不是所有人都能安装所有 Plugin。

这段只是帮助理解生态，不是让你现在打开目录全装一遍。

真正的 Codex 网页开发最小配置

核心是“让项目能开发、能验证”。AGENTS.md 在起步方案中很重要，但仍是推荐做法；没有它也不代表 Codex 无法工作。

三个推荐配置

你的项目需要加工具吗？

一个网页功能从开始到完成

假设用户要求：“给登录页面增加忘记密码流程。”下面是工作流示例，不是本站已完成的真实项目测试记录。

读取 AGENTS.md（如有）
↓
检查项目结构
↓
修改代码
↓
运行 lint / test
↓
运行 build
↓
需要 UI 验证时：使用 Playwright CLI
↓
截图 / 检查
↓
修正问题，再验证

这个流程不要求先装十几个 MCP。浏览器验证也不应在真实生产环境里随意发送重置邮件或改动真实账号；使用你有权限的测试环境与测试数据。

工具越少，问题越容易定位

假设同时加入 5 个 MCP、8 个 Skills、6 个 Plugins——这些只是说明配置复杂度的例子，不是实测数据。发生错误时，可能更难区分问题来自 Codex、项目、Skill、MCP、Plugin、权限还是第三方服务。

更多工具还可能带来额外 Token 与 Context 使用；实际影响取决于工具加载方式和任务，没有一个适用于所有人的固定百分比。

本站建议：一次加一个。加入后真实使用，有价值留下，没用就删掉。 需要配置或移除 MCP 时，再看 Codex 怎么安装 MCP？。

一个小型社区信号

常见问题

Codex 做网页开发必须安装 MCP 吗？

不必须。项目环境、说明和验证手段先准备好，遇到明确的外部能力缺口再加。

Codex 必须安装 Plugin 吗？

不必须。0 个插件也可以开始开发；Plugin 是可选能力包。

AGENTS.md 必须有吗？

不是硬性要求。持续项目通常值得维护一份简洁准确的 AGENTS.md，让 Codex 更容易找到项目规则和文档。

Playwright MCP 和 CLI 应该装哪个？

典型 Coding Agent Web 工作流先试 CLI；探索式 Agent、结构化工具与持续浏览器工作流再考虑 MCP。看完整比较，不要按热门程度决定。

Context7 是必装吗？

不是。经常缺少最新第三方库文档，且现有能力不足时再考虑。

Figma Plugin 是必装吗？

不是。工作流真的围绕 Figma，并且你的账号与入口支持对应能力时才有意义。

MCP 是不是装越多越强？

不是。工具增加也会带来配置、权限、维护、Context 与排错复杂度。先留真正用得上的工具。

从最少开始，需要什么再补什么。 能不用的，不装；真正需要的时候，再加。