Codex 打通 Figma，3 分钟搞定产品UI界面（附保姆级安装教程）

一、安装Codex​

第 1 步：下载 Cursor​

安装 COdex 之前，要先安装Cursor、VScode等都可以。​

​

​

直接让Cursor帮忙安装Codex​

​

​

代码块​

Plain Text

提示词：请直接在终端里帮我执行 npm install -g @anthropic-ai/claude-code 来安装 Claude Code CLI​

​

​

•

然后如果遇到停顿，你就点击【RUN】就可以了。​

•

到下图的这一步，你就回复【用本地安装方案就行】​

​

​

直到下图的显示，就说明安装成功了。​

​

​

第 2 步：打开 Cursor 底部的“ 终端 (Terminal) ”​

​

​

代码块​

Plain Text 取消自动换行复制

如果你现在界面底部没有那个用来敲命令的黑框框，你可以按下键盘快捷键Cmd + J（Mac 系统），终端就会弹出来。​

​

​

​

​

第 3 步：输入启动命令并回车​

在弹出的终端里直接输入下面这三个单词，然后按下回车键：​

​

代码块​

Plain Text 取消自动换行复制

npm run claude​

​

如果遇到报错，直接截图发给Cursor问，根据他的步骤来解决。​

解决完报错问题，显示以下界面说明claude code安装成功了。​

​

​

二、接入API​

•

Claude Code 我们可以使用两种方式，第一种是官方版，第二种是使用国内模型如 GLM4.6 驱动 ClaudeCode。​

•

使用官方版需要我们在 Claude.ai 进行订阅，目前 Claud 官方有 Pro、5x MAX、20x MAX 三种套餐形式，对应的价格分别为 20 刀、100 刀、200 刀。​

•

另外因为 Claude 一直对国内进行封锁，所以想使用 Claude 官方版本需要突破网络和海外信用卡支付两个关卡，门槛较高。​

•

所以主要推荐大家使用国内的模型 GLM4.6 驱动 Claude Code​

​

​

如果你不是新用户，选择点击【GLM Coding Plan】​

​

​

你想试试水的话，选择第一个【GLM Coding Lite】就行了。​

这里绝对不是广告，因为之前写了一篇免费使用claude code的，各种报错封号啥的用得有点烦。​

​

​

然后点击左侧菜单栏的API Key【添加新的API Key】​

​

​

复制下图的API key。​

​

​

不过我目前用的API是在OpenRouter创建的，一个大模型聚合平台：https://openrouter.ai/settings/keys​

但是在这里买会很贵，我就做了一个网站页面，花了我3美金，21块钱泪目了。​

大家还是买国内的比较划算，我也准备换国内的了。​

​

​

三、下载cc switch​

然后让AI直接帮你下载cc switch，我是让codex帮我下载的。​

codex下载mac地址：https://openai.com/zh-Hans-CN/codex/​

codex下载windows地址：https://apps.microsoft.com/detail/9plm9xgg6vks?hl=zh-CN&gl=CN​

​

代码块​

Plain Text 取消自动换行复制

帮我下载cc switch：https://github.com/farion1231/cc-switch/releases​

​

​

​

下载完后，打开CC Switch，点击右上角的添加【+】按钮。​

​

​

选择智谱模型，再往下滑输入API。​

​

​

粘贴刚刚复制的API key，点击【添加】就可以了。​

​

​

再点击设置按钮。​

​

​

这里有个设置一定要开，点击下面的【应用到claude code插件】开关。​

​

​

​

四、启动claude code​

点击删除按钮，删掉后，重新【command+j】打开终端。​

​

​

输入命令claude回车，就可以愉快的聊天了！​

​

​

​

五、连接figma mcp​

第 1 步：退回到最外层的电脑终端​

如果你现在还在 > 符号后面，请输入 /exit 然后回车。​

确保你回到了带有 % 符号的普通 Mac 终端界面。​

第 2 步：执行官方的“全局安装”命令​

在带有 % 的终端里，复制粘贴这行 Figma 官方专门给 Claude Code 准备的安装代码：​

​

代码块​

Plain Text 取消自动换行复制

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp​

​

(注意：这里加了–scope user，意思是给你电脑上所有的代码项目都装上这个插件，以后换个文件夹敲代码也不用重复装了。复制完按下回车执行。)​

第 3 步：重新叫出claude code​

代码执行完毕后，再次输入启动口令，按回车：claude​

第 4 步：关键一步——去 Figma 官网领“通行证”​

在小机器人的 > 后面，输入 /mcp 并回车。​

看到>在figma中，继续回车。​

​

​

请选择Authenticate(授权)并再次回车。​

电脑会自动弹出一个浏览器网页。在网页里登录你的 Figma 账号，并点击Allow Access (允许访问)。​

网页授权成功后，切回终端，你就会看到一句闪亮的 Authentication successful. Connected to figma.！​

​

​

六、安装figma plugin​

复制下面这条命令，粘贴到claude code，然后回车​

​

代码块​

Plain Text 取消自动换行复制

/plugin install figma@claude-plugins-official​

​

显示下面这个页面后，继续回车。​

​

​

继续输入【/plugin】回车，会看到以下界面，键盘右键选择【installed】，再按回车。​

​

​

•

这样插件就安装成功了！​

然后连按几下键盘左上角的Esc键，直到退回那个只有 > 的普通聊天状态。​

​

​

七、报错解决​

这里有一个报错卡了我很久，就是下图这个400。​

​

​

原本Claude code v2.1.69的版本降到68就可以了。​

​

​

继续让codex帮你的版本改成低一个版本​

提示词：帮我的claude code版本改成v2.1.68​

​

​

八、Claude code to figma​

我们到figma【复制链接】建一个空的文件。​

​

​

回到Cursor中，输入提示词：需要在下面的提示词中粘贴你的figma链接。​

直接在这个空的 Figma 文件里，为我设计一个现代风格的设计师个人网站首页，包含导航栏、个人简介、作品集展示区和页脚。设计完成后，再帮我生成对应的 HTML/CSS/JS 代码：https://www.figma.com/design/obFdrXRrkBf7YlQzLNrr5F/Untitled?node-id=0-1&t=YaP6DHdJZ4fm0s​

一键获取完整项目代码​

ruby​

1​

接着会一直做一些选项，一直选择yes回车就行。​

​

​

​

最后会自动跳转到浏览器，然后可以直接点击【发送到figma】​

​

​

​

​

​

就会自动发送到figma文件中。​

​

​

​

​

​

看看它生成的效果，不愧是claude code，没话说，效果非常好！​

​

​

​

​

​

九、修改完设计如何传回code里？​

选择设计稿，右键复制【copy link to selection】。​

​

​

​

​

​

回到claude code 中输入：​

​

update changes:【这里是刚刚复制的链接】​

一键获取完整项目代码​

nginx​

1​

​

​

​

​

claude就重新构建了对应的部分，就这么简单。​

​

​

​

​

​

这种两边同步的功能对做设计的人来说真的太好用了！​

​

以后那些无聊的苦力活都能丢给AI去干，你只要专心出点子、调细节、把控大方向就行。​

​

今天的分享就到这里，希望对你有帮助！​

​