Codex to Figma，一键直出设计稿！
一、安装 Codex
二、接入模型
Codex 我们可以使用两种方式，第一种是官方版，第二种是使用国内模型如 GLM4.6 驱动 ClaudeCode。
50%
50%
如果你不是新用户，选择点击【GLM Coding Plan】
然后点击左侧菜单栏的API Key【添加新的API Key】
复制下图的API key。
三、下载Codex switch
然后让AI直接帮你下载Codex switch，我是让codex帮我下载的。
下载windows地址：https://apps.microsoft.com/detail/9plm9xgg6vks?hl=zh-CN&gl=CN
代码块
Python
帮我下载cc switch：h*****//github****/farion1231/cc-switch/releases
下载完后，打开CC Switch，点击右上角的添加【+】按钮。
选择智谱模型，再往下滑输入API。
粘贴刚刚复制的API key，点击【添加】就可以了。
再点击设置按钮。
这里有个设置一定要开，点击下面的【应用到claude code插件】开关。
四、启动Codex
点击删除按钮，删掉后，重新【command+j】打开终端。
52%
48%
五、连接figma mcp
第 1 步：退回到最外层的电脑终端如果你现在还在 > 符号后面，请输入 /exit 然后回车。确保你回到了带有 % 符号的普通 Mac 终端界面。
第 2 步：执行官方的“全局安装”命令在带有 % 的终端里，复制粘贴这行 Figma 官方专门给 Claude Code 准备的安装代码：
代码块
Python
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，然后回车
代码块
Python
显示下面这个页面后，继续回车。
继续输入【/plugin】回车，会看到以下界面，键盘右键选择【installed】，再按回车。
这样插件就安装成功了！然后连按几下键盘左上角的Esc键，直到退回那个只有 > 的普通聊天状态。
七、报错解决
这里有一个报错卡了我很久，就是下图这个400。
原本Claude code v2.1.69的版本降到68就可以了。
继续让codex帮你的版本改成低一个版本提示词：帮我的claude code版本改成v2.1.68
八、Codex to figma
我们到figma【复制链接】建一个空的文件。
62%
38%
回到Cursor中，输入提示词：需要在下面的提示词中粘贴你的figma链接。
代码块
Python
直接在这个空的 Figma 文件里，为我设计一个现代风格的设计师个人网站首页，包含导航栏、个人简介、作品集展示区和页脚。设计完成后，再帮我生成对应的 HTML/CSS/JS 代码：https://www.figma.com/design/obFdrXRrkBf7YlQzLNrr5F/Untitled?node-id=0-1&t=YaP6DHdJZ4fm0s
接着会一直做一些选项，一直选择yes回车就行。
最后会自动跳转到浏览器，然后可以直接点击【发送到figma】
就会自动发送到figma文件中。
看看它生成的效果，不愧是claude code，没话说，效果非常好！
九、修改完设计如何传回code里？
选择设计稿，右键复制【copy link to selection】。
回到claude code 中输入：
代码块
Python
update changes:【这里是刚刚复制的链接】
claude就重新构建了对应的部分，就这么简单。