很多人第一次使用 Codex，通常只把它当成一个“会写代码的 ChatGPT”。

但真正用上一段时间之后，你会发现：

Codex 最有价值的地方，不只是写代码，而是可以通过不同插件，直接操作浏览器、控制电脑、制作视频、开发网页，甚至把项目部署上线。

这篇文章整理了几个我日常使用频率比较高的 Codex 插件。

即使你没有编程基础，也可以先了解它们分别能解决什么问题，再根据自己的工作场景选择安装。

一、电脑操作三件套：Computer Use、Chrome、Browser

这三个插件看起来都和“操作网页、操作电脑”有关，所以新手很容易分不清。

实际上，它们的使用范围和适合场景并不一样。

1. Computer Use：让 Codex 操作整个电脑

Computer Use 是我认为 Codex 里非常重要的一项能力。

它不仅可以操作网页，还可以识别电脑屏幕上的内容，并模拟鼠标点击、键盘输入等操作。

例如：

• 打开电脑里的软件

• 操作 Photoshop、剪辑软件等桌面应用

• 修改系统设置

• 整理本地文件

• 在不同软件之间复制和传递内容

• 完成一些重复性的电脑操作

简单理解就是：

只要是你平时需要用鼠标和键盘完成的事情，都有可能交给 Computer Use。

它最大的优势是操作范围广，不局限于浏览器。

不过，因为它需要识别屏幕，再决定下一步操作，所以在处理纯网页任务时，速度有时不如专门的浏览器插件。

2. Chrome：直接操作你正在使用的浏览器

Chrome 插件可以让 Codex 操作你的真实 Chrome 浏览器。

它比较适合处理需要账号登录的网站，例如：

• 操作电商后台

• 查看在线文档

• 管理社交媒体账号

• 填写网页表单

• 处理已经登录的管理后台

• 在多个网页之间整理资料

它的优势是可以直接使用你当前浏览器里的登录状态，不需要每次重新登录。

对于网页操作来说，Chrome 插件通常也会比 Computer Use 更直接、更快。

简单理解：

需要使用自己真实浏览器和账号登录状态时，优先考虑 Chrome。

3. Browser：Codex 自带的独立浏览器

Browser 使用的是 Codex 内置的浏览器环境，而不是你平时使用的 Chrome。

它更适合开发和测试网页，例如：

• 打开本地网页

• 检查网页是否正常显示

• 测试按钮和交互功能

• 查看网页报错

• 调试前端页面

• 验证 Codex 刚刚写好的网页

如果你正在让 Codex 开发一个网站，Browser 就像一个专门用来检查作业的测试窗口。

简单理解：

Computer Use 负责整个电脑，Chrome 负责真实浏览器，Browser 负责网页开发和测试。

新手可以按照下面的方式选择：

二、HyperFrames：用代码制作高级视频动效

对于做自媒体、产品展示、AI视频的人来说，HyperFrames 是一个非常值得关注的工具。

很多人制作视频动效时，会想到 After Effects。

但 AE 的学习成本比较高，需要掌握关键帧、图层、表达式和各种插件。

HyperFrames 提供了另一种思路：

通过代码和模板生成视频动画。

你可以让 Codex 帮你完成：

• 文字入场动画

• 数据增长动画

• 产品功能展示

• AI科技感视频

• 片头和片尾

• 信息图动画

• 社交媒体短视频

• 产品发布演示视频

对于不会写代码的人来说，也不需要自己从零开始编写。

你可以先描述想要的效果，例如：

制作一段科技感产品介绍视频，标题从左侧滑入，数据数字从0增长到100，背景有轻微粒子动画。

然后让 Codex 调用 HyperFrames 的模板和能力进行制作。

HyperFrames 的开源生态也比较丰富，官方提供了不少现成模板，可以直接修改文字、图片、颜色和动画节奏。

官方网站：https://hyperframes.dev

需要注意的是，HyperFrames 并不是传统意义上的“自动剪辑软件”。

它更适合制作：

• 有设计感的动态排版

• 数据可视化动画

• 科技感产品演示

• 程序化生成的视频内容

如果你只是想把一段长视频快速剪成短视频，应该选择剪辑类工具。

但如果你想让视频中的文字、图形和产品展示更有高级感，HyperFrames 会更合适。

三、Build Web Apps：让 Codex 做出来的网页不再那么难看

Codex 写代码的能力很强，但让它直接根据一句话设计网页，结果经常不太稳定。

例如你只告诉它：

帮我制作一个高级的科技公司官网。

Codex 虽然可以快速生成网页，但经常会出现这些问题：

• 页面像普通模板

• 配色不够高级

• 字体层级混乱

• 留白不合理

• 每个模块都差不多

• 看起来能用，但不像专业设计作品

问题不一定出在代码能力，而是因为“高级”“简约”“科技感”这些描述过于抽象。

Build Web Apps 提供了一套更加稳定的网页制作流程。

其中一个很实用的方法是：

第一步：先生成网页视觉参考图

先让 Codex 或图像生成工具制作一张网页设计效果图。

这一步重点确定：

• 页面风格

• 颜色搭配

• 字体层级

• 模块布局

• 图片比例

• 按钮样式

• 整体视觉氛围

第二步：再使用 Image-to-Code 复刻

视觉方向确定后，再让 Codex根据参考图编写网页代码。

这种方式相比纯文字描述更稳定，因为 Codex 不需要自己猜测“高级感”到底是什么样子。

它只需要按照已经确定的视觉参考进行还原。

这和我们做电商设计的逻辑其实很像：

不要一开始就让 AI 凭空设计，而是先给它明确的视觉参考。

Build Web Apps 比较适合：

• 个人作品集网站

• 产品官网

• 活动落地页

• AI工具网站

• 数据后台

• 企业展示页面

• Vibe Coding 项目

即使你完全不懂前端，也可以把它理解成一套“让 Codex 按流程做网页”的操作规范。

四、Superpowers：给 Codex 加上一套完整的工作方法

Superpowers 是一个非常受关注的开发类项目。

它并不是简单增加某一项功能，而是给 AI 提供一整套更加结构化的工作流程。

其中包括：

• Brainstorm：头脑风暴

• 写需求和方案

• 制定开发计划

• TDD 测试驱动开发

• Debug 问题排查

• Code Review 代码检查

• 分步骤执行任务

• 完成后的结果验证

很多人使用 AI 时，容易遇到一个问题：

给它一句要求之后，它马上开始做，但没有先把问题想清楚。

结果经常是做了一大堆，最后才发现方向错了。

Superpowers 的核心价值，就是要求 AI 在动手之前，先经过更完整的思考流程。

例如你想制作一个记账工具。

普通做法可能是直接告诉 Codex：

帮我做一个记账网站。

Codex 可能马上开始写代码。

使用 Brainstorm 工作流后，它会先和你讨论：

• 这个工具给谁使用？

• 最重要的功能是什么？

• 是否需要账号系统？

• 数据保存在哪里？

• 手机端还是电脑端优先？

• 页面应该包含哪些模块？

• 第一版应该先做哪些功能？

确认方案后，再进入实际制作。

虽然 Superpowers 主要面向开发场景，但不会编程的人也可以使用里面的 Brainstorm 能力。

例如可以用来：

• 拆解工作流程

• 规划公众号内容

• 分析产品需求

• 讨论商业想法

• 制定项目方案

• 寻找问题原因

• 比较不同解决方案

对普通用户来说，最值得使用的不是里面复杂的开发流程，而是它的思考方法。

不要只让 AI 给答案，而是让 AI 陪你把问题一步一步拆开。

五、GitHub + Vercel：Vibe Coding 项目的发布组合

很多新手第一次用 Codex 做应用时，最兴奋的瞬间是：

页面终于在电脑上运行起来了。

但接下来很快会遇到另一个问题：

这个应用怎么保存？怎么继续修改？怎么发给别人体验？

这时候就需要 GitHub 和 Vercel。

1. GitHub：保存和管理项目代码

你可以把 GitHub 理解成一个专门保存代码的云端空间。

它可以帮助你：

• 保存项目文件

• 记录每次修改

• 恢复之前的版本

• 在不同电脑上继续开发

• 与其他人协作

• 让 Codex 直接读取和修改项目

安装 GitHub 插件后，Codex 可以直接连接你的代码仓库。

你可以告诉它：

检查这个项目最近的代码修改。

或者：

在现有项目里增加一个登录页面。

这样就不用每次都把整个项目重新上传给 Codex。

2. Vercel：把应用发布到互联网上

项目在电脑本地运行时，通常只有自己能看到。

Vercel 可以把项目部署到互联网上，并生成一个可以访问的网址。

部署完成后，你可以把链接发给：

• 客户

• 同事

• 面试官

• 朋友

• 公众号读者

• 产品体验用户

对 Vibe Coding 用户来说，这两个工具通常是配合使用的：

GitHub 负责保存项目，Vercel 负责发布项目。

整个流程可以理解为：

Codex 制作应用↓GitHub 保存代码↓Vercel 部署上线↓把链接分享给别人

对于新手来说，做到“能写出来”只是第一步。

真正让一个项目具备展示价值，需要把它保存、部署，并让别人可以直接打开体验。

新手应该先安装哪些插件？

如果你刚刚开始使用 Codex，没有必要一次安装所有插件。

可以按照自己的需求选择。

日常办公和自动化

优先尝试：

• Computer Use

• Chrome

适合操作软件、处理网站后台和完成重复任务。

做自媒体视频

优先尝试：

• HyperFrames

适合制作动态文字、科技感动画和产品演示视频。

做网页和应用

优先尝试：

• Build Web Apps

• Browser

• GitHub

• Vercel

这是从网页设计、开发、测试到上线的一套完整组合。

拆解复杂问题和规划项目

优先尝试：

• Superpowers

即使不写代码，也可以用它进行头脑风暴和方案讨论。

写在最后

Codex 插件的意义，并不是让我们安装更多工具。

真正重要的是，它可以不断扩大 AI 能够参与的工作范围。

以前我们使用 AI，主要停留在对话框里：

• 问问题

• 写文案

• 生成代码

• 修改内容

现在通过插件，AI 可以进一步参与真实工作：

• 操作电脑

• 控制浏览器

• 制作视频

• 开发网站

• 管理代码

• 部署应用

• 拆解复杂项目

对于普通用户来说，不需要一开始就研究所有技术细节。

可以先从一个自己每天都会遇到的重复问题开始。

比如：

能不能让 Codex 自动整理这些资料？

能不能让 Codex 帮我操作这个网站？

能不能把我的想法做成一个可以打开的网页？

能不能让 AI 先帮我拆解方案，再开始执行？

当你开始把这些具体问题交给 Codex，插件才真正从“看起来很强”，变成可以每天使用的生产力工具

。