🎈 全网付费课

2024~2026+ | 长期更新 | ¥199元

一篇讲清楚:Codex的安装、Figma MCP、Skill 以及codex会员怎么选

最近有粉丝看了我的文章以后,也想自己体验一下 Codex,但真正开始操作时,卡在了一些比较基础的问题上。

比如 Codex 怎么安装?Figma MCP 怎么连接?Skill 到底是什么,又应该怎么安装?

这些问题对已经用过的人来说可能没什么难度,但对于第一次接触的新手,安装、登录、授权和配置,任何一步没弄明白,都可能直接卡住。

所以今天这篇文章,我就从最基础的地方开始,把下面四个问题讲清楚:

  • 01 Codex 的安装和简单使用(下载与登录)
  • 02 配置Figma MCP、连接与测试
  • 03 介绍skill和安装 Skill,两种方法
  • 04 Codex会员等级怎么选

如果你也是第一次接触 Codex,可以直接跟着文章一步一步操作

01 安装 Codex

Codex 是 OpenAI 官方的 AI 编程助手,可以帮你读取本地文件、修改代码、运行命令。不会写代码也可以用,但它主要适合处理项目、网页、脚本、文档这类任务。

提示:官网链接需要完成网络环境配置,才能打开。

Codex 主要有三种安装方式:桌面应用、CLI 命令行和 IDE 扩展。对于咱们设计师来说,CLI 命令行和 IDE,无脑选择桌面应用的安装方式就行啦。

1.1 安装 Codex 桌面应用

下载安装包

ChatGPT 官方网站:https://chatgpt.com/zh-Hans-CN/download/

根据自己的电脑系统下载最新版本。

官网下载页面截图

登录配置

Codex 安装完成后,打开软件会进入登录页面。目前有三种登录方式,这里只推荐使用ChatGPT 官方账号登录。

这是因为其他登录方式通常需要自行配置 API,部分功能、使用体验或模型能力可能存在限制。

此处插入:登录与验证页面截图

有账号直接进行登录,没有账号需要完成账号注册。

注册完登录的时候,可能会跳转手机号验证,可以找某鱼解决。

登录与验证页面截图

进入 Codex 工作界面

登录成功后,点击左上角的模式切换下拉菜单,你会看到 ChatGPT 工作(Work)和 Codex 两个选项。

选择 Codex 后,界面会切换到 Codex 模式,看到项目入口或新建任务入口,就说明切换成功了。

模式切换和 Codex 工作界面截图

新建项目

第一次使用时,不要一上来就把整个电脑目录都交给它。先建一个单独的测试文件夹,放几份不重要的文件,在这个范围里练习就可以了。

1.2 ChatGPT 工作和 Codex 有什么区别?

可以把它们理解成两种不同的工作模式。

ChatGPT 更像“聊天和思考助手”,适合问概念、写文案、总结资料、翻译、做计划和分析问题。…PROMPT

帮我解释 Hermes 是什么。

帮我写一段说明。

帮我规划一条学习路线。

Codex 更像“能动手的工程助手”,适合进入某个项目目录,查看文件、修改代码、运行命令、排查错误,以及生成网页、脚本或工具。…PROMPT

帮我修复这个项目的报错。

模式主要用途能力重点
ChatGPT通用对话、写作、解释、规划、问答理解问题、生成文本、分析思路、提供建议
Codex编程和本地工程任务读写文件、运行命令、修改代码、调试、制作项目

只聊、只问、只写内容,用 ChatGPT。要动本地文件、代码和命令,用 Codex。

02 配置 Figma MCP

如果你是 UI 设计师,安装好 Codex 以后,我建议接着把Figma MCP 配置好。

MCP 可以理解成 Codex 和其他工具之间的连接通道。连接以后,Codex 才能在你授权的范围内读取 Figma 文件中的画板、组件、变量和布局信息,并使用 Figma 提供的相关工具。

2.1 在 Codex 桌面端安装 Figma 插件

这是 Figma 官方更推荐的配置方法,也更适合新手。STEP 01

打开插件页面

打开 Codex,在左上角找到“Plugins”,进入插件目录。如果没有直接看到 Figma,可以在插件目录里搜索 Figma。

安装 Figma 插件

找到 Figma 插件以后,点击旁边的“安装”,然后点击“Install Figma”。插件会把 Figma MCP 需要的连接配置一并添加进 Codex,不需要你手动填写服务器地址。

登录并授权

安装过程中会打开 Figma 的官方授权页面。登录自己的 Figma 账号,确认账户和权限以后,点击“Allow access”。授权完成后返回 Codex。如果插件已经显示为安装状态,说明基础连接已经完成。

重新新建一个任务

插件和 MCP 安装完成以后,建议重新新建一个 Codex 任务,让新任务重新加载刚安装的工具。

2.2 检查 Figma MCP 是否可用

把一个你有权限访问的 Figma 文件链接发给 Codex,例如:…PROMPT

「插入你的文件链接」请读取这个 Figma 文件,先告诉我里面有哪些页面、主要 Frame 和组件,不要修改文件。

或者把 Figma 文件中一个具体的页面链接发给 Codex,例如:…PROMPT

「插入你的页面链接」请读取这个页面,在这个页面上画一个红色的圆圈。

03 Skill 是什么,怎么安装你的第一个 Skill?

你可以把它理解成一套提前保存好的工作方法。

以前我们让 AI 帮忙做设计时,经常得写一大串要求:

  1. 这个按钮要用现有组件。
  2. 颜色别自己乱写,要调用 Variables。
  3. 布局按照团队已有的规范。
  4. 做完以后再检查一下 Auto Layout。

如果下一次又要做类似的任务,你可能还得再跟 AI 解释一遍。

Skill 干的事情,就是把这些反复出现的要求、步骤和判断提前写下来,也可以把需要用到的参考资料、脚本和模板放在一起。

以后遇到类似的任务,AI 可以直接按照这套方法去做,不用每次重新教。

除了设计工作,写文章、检查内容风险、制作 PPT、处理表格和设计网页,也都可以做成不同的 Skill。

Skill 可能包含说明文件、脚本和其他资源。安装第三方 Skill 之前,要看清来源、安装量和它会执行什么,不要看到一个名字就直接安装。

3.1 为什么推荐 find-skills?

find-skills 是一个专门帮你搜索 Skill 的 Skill。先把它装好,以后想找写作、设计、测试或者部署相关的 Skill,就不用全靠自己翻。

如果让我推荐第一个应该安装什么 Skill

我会推荐 find-skills,真的很实用

关于这个 Skill,我之前还专门写过一篇文章介绍,想进一步了解的话,可以移步去看。用 find-skills,给 Codex 找到了两个 Logo 设计 Skill

3.2 安装方式与具体步骤

方式 1 :给地址,让 AI 自行搜索安装

打开 Codex 或 WorkBuddy,把下面命令一键复制发给它,让它自动去安装。…bash

npx skills add https://github.com/vercel-labs/skills –skill find-skills

方式2:让 AI 安装下载好的资源包

后台回复 find-skill,自动获取安装包。下载完安装包之后,找到它在电脑里的保存位置,然后把下面这段话复制发给 Codex 或 WorkBuddy。…PROMPT

把安装包放到 Codex 的对话框,然后告诉它:帮我安装一下。

!权限提示 🕳

AI 在查找文件、解压和写入 Skill 目录时,可能会向你申请权限。不要看到弹窗就直接全部允许,先看清它准备访问的文件和目录。确认它只操作这个资源包和对应的 Skill 安装目录以后,再允许必要权限。

3.3 检查确认

安装完成以后,我们再确认一下 Skill 是不是真的装上了。直接复制下面这句话发给 Codex:…PROMPT

你现在能用哪些 Skill?列出来给我看。

如果返回的列表里能看到 find-skill 这个名字,就说明资源包里的 Skill 已经安装成功。可以试一下:…PROMPT

用 find skill 帮我找一个设计 logo 的 Skill。

04 Codex 免费额度和会员怎么选?

Codex 有免费额度,新手可以先用 Free 套餐体验。不过免费额度并不是每天固定多少次,任务越复杂、文件越多,消耗也会越快,具体以自己账户里显示的剩余额度为准。

会员怎么选,其实看这三个就够了:

  1. Free 第一次体验
  2. Plus 20 美元/月
  3. Pro 100 美元/月起

我的建议是先用免费版,额度不够再升级 Plus。只有 Plus 已经明显不够用,而且 Codex 确实给你省下了很多时间,再考虑 Pro。

我自己前面先用了三个月的 Plus 会员,现在随着用量越来越大,这个月已经升级成 Pro 5x 了。好心疼,呜呜呜。

现在我也在积极寻找更平价的替代方法,如果后面找到了,再跟大家分享。

写在最后

这篇文章先写到这里。Codex 安装、Figma MCP 配置和 Skill 安装,真正自己操作一遍时,可能还会遇到各种不同的问题。

大家在实操的过程中有什么问题,可以直接在评论区留言。最好把自己用的电脑系统、卡在哪一步、页面提示或者报错截图一起发出来,这样更方便判断问题出在哪里,我们一起讨论一下。