到底怎么才能从零开始，顺畅地把claude code和 Figma 打通。

实现一边改设计、一边看前端自动生成代码的神奇操作？

今天我就带大家走一遍这个完整的工作流。

一、安装claude code

第 1 步：下载 Cursor

安装claude code之前，要先安装Cursor、VScode等都可以。

直接让Cursor帮忙安装claude code

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

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

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

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

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

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

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

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

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 链接：

https://www.bigmodel.cn/glm-coding?ic=2INPONN4EL

如果你是新用户，点击【财务】-【资源包管理】-【我的资源包】里面会有一些免费的额度可以使用。

如果你不是新用户，选择点击【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

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

不过你也可以直接手动下载，下载地址：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 准备的安装代码：

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，然后回车

/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

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

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

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

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

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

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

回到claude code 中输入：

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

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

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

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

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