用 Codex 做 Vibe Coding：五个插件覆盖从想法到上线全流程

很多人刚接触 Vibe Coding 和 skill 这些概念，会觉得 skill 装得越多，AI 就越聪明。

结果呢？热门的 skill 装了一大堆，真正做产品的时候还不知道用哪个。

而且很多人不知道，skill 装得太多还会影响 AI 的思考——在对话的时候引入大量有干扰的上下文，把已经很聪明的模型能力限制得死死的。

在 Vibe Coding 的时候，插件并不是装得越多才越好。

这一期我们就按照 Vibe Coding 做产品的完整流程来看：产品梳理、UI 设计、本地测试、存档备份，再到最后发布上线。每一步需要装什么，一次给你讲清楚。

下面是本期用到的所有工具和插件，安装入口都可以从这里找到：

五个插件都在 Codex 的插件目录里，搜索名字直接点击安装。其中 Supabase、GitHub、Vercel 安装后需要登录对应账号。

第一个就是 Codex 的 Product Design 插件，帮你解决需求梳理、原型设计和前端 demo 开发的过程。

Vibe Coding 的第一步，一般不是马上让 AI 写代码，而是先把一个模糊的想法整理成清楚的产品方案。Product Design 插件就是做这件事的。

安装

打开 Codex 的插件目录，搜索 Product Design，直接点击安装就可以了。

第一步：把需求问清楚

安装完成以后，新建一个任务，选择 Product Design 插件，直接跟它说：

对 AI 说：

我想做一个个人阅读档案馆，把自己的书架、阅读进度和读书笔记集中在一起。请先通过提问帮我把这个产品的需求梳理清楚。

Product Design 里面包含了 Get Context、Research 等产品设计能力。我们只需要跟着它的问题，一步一步把这个产品给谁用、解决什么问题、第一版到底要做什么说清楚。

第二步：确定 UI 设计方向

需求确认以后，继续告诉它：

根据我们刚才确认的产品需求，先不要写代码，请为这个产品生成几个明显不同的界面设计方向，让我看看效果

这个阶段，Product Design 可能会使用 Ideate 等设计能力生成方案。我们先看真实生成的结果，再提出修改意见，最后确认一个满意的方向。

这里它用的是生图模型做出来的图片，所以这一步的重点就是看一个感觉和布局。感觉对了，布局没问题，就可以进入下一步。

设计方向确认以后，就可以让它把图变成真正能操作的页面。

第三步：把设计做成前端页面

对 AI 说：

按照刚才确认的设计方向，做成一个可以实际操作的响应式前端页面。

这时候，它可以使用 Image To Code 把设计落成页面，而且这个插件还内置了 Design QA 对照检查——字体、间距、颜色、图片和页面内容如果有明显偏差，就继续修改，直到页面效果和我们确认的方向一致。

到这里相当于：有产品经理帮你梳理需求，有 UI 设计师帮你画图出方案，还有前端工程师帮你用代码实现出来。

第四步：把确认的内容沉淀成文档

页面完成以后，还有一个动作非常重要，就是把刚才确认的内容沉淀下来。

把我们已经确认的产品需求和 UI 设计，分别整理成一份详细的产品 PRD 和一份详细的 UI 设计文档。

作为这个产品 1.0 版本的整体方案，我们等它写完这两份文档。

这样 Vibe Coding 的第一个阶段就完成了。只需要 Product Design 这一个插件就搞定了。

现在做出来的还可能只是一个前端。要不要继续补后端，看你的产品是哪一种：

比如数据库，这里我建议安装第二个插件 —— Supabase。这是一个在线数据库的插件，可以让 Codex 直接处理数据库、用户登录、文件存储、数据迁移和访问权限。

怎么用

先点击输入框的 + 号，选择 Supabase 插件，直接说：

对 AI 说：

根据当前的产品 PRD 和前端页面，补齐这个产品需要的后端和服务，把前端里的模拟数据改成可以保存和读取的测试数据。如果需要数据库、登录或者文件存储，就使用 Supabase 插件。完成以后，把前端和后端完整连接起来。

Codex 会先根据产品需求判断需要哪些服务，再完成对应的代码和 Supabase 配置。我们只需要在登录的时候动一下手就可以了。

到这里，原来只能看的前端页面，才真正变成一个有数据、有状态、可以持续使用的产品。

前端和后端都接起来以后，我们要真正测试一遍，把整个页面的核心流程都走一遍，看看有没有跑通。这里我推荐 Codex 的 Chrome 插件。

安装

同样打开插件目录，搜索 Chrome，直接安装就可以了。

它可以让 Codex 打开本地页面，像真实用户一样点击按钮、填写内容、切换页面，并且查看每一步实际出现的结果。

怎么用

在输入框点击加号，调起 Chrome 插件，直接输入：

对 AI 说：

打开当前项目，按照真实用户的使用顺序，把产品最核心的流程完整走一遍，确认数据可以正常保存和读取，同时检查电脑和手机尺寸。发现问题就直接修复，修复以后重新测试，直到整个流程可以正常完成。

接下来 Codex 会启动项目，再通过 Chrome 操作实际页面。发现按钮没有反应、内容被遮挡，或者某一步走不下去，它就回到代码里修改，然后重新打开页面验证。

到这里，我们拿到的就是一个用户真的可以操作的、有数据、有状态、可以持续使用的产品。

核心流程测试通过以后，最后就是备份代码和发布上线。这里需要安装 GitHub 和 Vercel 两个插件。

打开插件目录，分别搜索 GitHub 和 Vercel，安装以后登录自己的账号。

第一步：用 GitHub 备份代码

先选择 GitHub 插件，告诉 Codex：

对 AI 说：

检查当前项目，创建一个新的 GitHub 仓库，把现在这个可以正常运行的版本上传上去。

第二步：用 Vercel 发布上线

代码上传完成以后，再选择 Vercel 插件，告诉它：

把当前项目发布到 Vercel，先部署并验证预览版本，等我确认以后再正式上线，最后连接 GitHub 用于后续自动更新。如果需要我登录或者确认，直接告诉我。

中间需要授权账号和确认正式上线的时候，我们动一下手，剩下的检查、上传和发布都可以交给 Codex。

从本地 demo 到正式上线的详细操作，可以直接看之前专门讲部署上线的那一期，讲得已经很详细了，这里就不展开。总之，通过 Codex 安装插件的方式，就能自动把作品发布到线上正常使用。

以上就是用 Codex 做 Vibe Coding 最值得安装的五个插件了。最后快速回顾一下：

只需要这五个就够了。再配合前面这些简单的提示词，你也能轻松把一个想法做成真正的产品，发布到线上，让所有人都能使用。

插件不在多，够用就好。装得太多，反而会给 AI 引入一堆干扰的上下文，把模型本来的能力限制住。

本期所有的插件清单、提示词和步骤，都已经放到了搞定空间站。