小白教学：Cursor + Figma，设计稿和代码打通的第一步

你有没有经历过这种痛苦——设计师发来一整屏的 Figma 设计稿，你对着它一个像素一个像素地手搓 CSS，搞了一下午，结果人家说"这个间距不太对"……

我之前也是这么过来的。后来发现 Cursor 居然能直接连上 Figma，让 AI 帮你看设计稿、生成代码，甚至还能把代码写回 Figma。虽然目前还原度还不太理想，但已经能省掉大量重复劳动了。

这篇就是帮你把 Cursor 和 Figma 连起来，知道它有哪些能力、什么场景能用。

读完这篇你能学到什么：

• 在 Cursor 里装好 Figma MCP
• 连上服务、登录账号的完整过程
• Figma MCP 自带的 6 个 skill 各干什么
• 什么时候用哪个 skill

安装 Figma MCP

直接在 Cursor 里装就行，不用到处找配置文件。

1. 打开 Cursor，进入 Settings → Features → MCP
2. 点 "Add new MCP Server"
3. 找到 Figma，点 Install

装好之后，MCP 列表里会出现 Figma，旁边有个绿色圆点就说明安装成功了。

个人提示：Figma MCP 需要 Figma 付费版才能用（教育版也行）。教育版在某宝 50 块左右，我用下来没问题。逐步习惯付费办公吧，毕竟咱们也要别人花钱来买咱们的服务。

连接 Figma 服务

安装好 MCP 之后，还需要登录你的 Figma 账号才能真正连上。这个过程是在 Figma 那边完成的。

第一步：打开 Figma 桌面版

确保你装了 Figma 桌面版（最新版），网页版不行，MCP 服务只能在桌面版里开。

第二步：开启 Dev Mode MCP

1. 打开 Figma 桌面应用，随便打开一个设计文件
2. 点左上角 Figma 菜单 → Preferences → 勾选 "Enable Dev Mode MCP Server"

勾选之后，Figma 会在本地启动一个 MCP 服务，地址是 http://127.0.0.1:3845/sse。你不用记这个地址，Cursor 会自动识别。

第三步：在 Figma 里登录账号

MCP 服务启动后会要求你登录 Figma 账号。如果你桌面版已经登录了，可能会自动识别；如果没有，会弹出登录窗口，输入你的 Figma 邮箱和密码就行。

第四步：回到 Cursor 验证连接

切换回 Cursor，在 Composer 对话框里直接输入带 Figma 链接的提示词试试，比如：

帮我看看这个 Figma 设计：https://www.figma.com/file/xxx?node-id=123-4567

如果 AI 能读取到 Figma 的内容并回复，就说明连接成功了。

这里有个坑：设计文件必须放在 Figma 的 Team/团队空间 里，放在个人 Drafts 下 MCP 读不到。我一开始不知道，折腾了半天才发现是文件位置不对。

Figma MCP 自带的 6 个 Skill

装好连上之后，Figma MCP 可不只有一个功能，它带了 6 个 skill，各有各的用途。先搞清楚它们分别干什么，后面用起来才不懵。

1. figma-use

干什么的：让你在 Figma 文件里执行 JavaScript，直接操作画布上的节点——创建 Frame、改 AutoLayout、改颜色、批量改文本、绑定变量等。

什么时候用：你要"自动修 Figma"、"批量改一堆图层"、"把某块布局重排"这类写操作的时候。

特点：强调原子性、分步执行，每步必须 return 节点 id。常见坑有字体加载、页面切换、颜色值是 0-1 而不是 0-255 等。

举个例子：你说"把这个页面里所有标题颜色改成品牌色"，figma-use 就会去 Figma 里找到所有标题节点，批量改颜色。

2. figma-implement-design

干什么的：把 Figma 设计稿转成前端代码（通常是 React/Tailwind），并提醒你映射到项目里已有的组件和规范。

什么时候用：你说"按这个 Figma 还原前端页面/组件"的时候。

这是最常用的一个 skill。你在 Figma 里选中一个 Frame，给 Cursor 贴上链接，让它帮你生成代码，背后调用的就是 figma-implement-design。

3. figma-generate-design

干什么的：反过来——把代码或文字描述写回 Figma。它会优先通过设计系统（组件、变量、样式）来搭页面，避免硬编码样式。

什么时候用：你说"把当前页面生成到 Figma"/"在 Figma 里搭个同款大屏"的时候。

个人提示：这个功能目前效果还比较一般，demo 转 Figma 的质量奇差无比。但方向是对的，后续应该会改善。

4. figma-generate-library

干什么的：从你的代码库梳理出设计系统——tokens、变量、组件库、主题，然后补齐到 Figma 里，让后续设计和代码更一致。

什么时候用：你觉得 Figma 里很乱、没有规范，想先把"组件/变量/主题"建好的时候。

5. figma-code-connect

干什么的：维护 Figma 的 Code Connect 映射文件，让 Figma 组件能关联到代码里的真实组件用法。

什么时候用：你们团队用 Code Connect 做设计系统联动的时候。

6. figma-dev-mode

干什么的：读取 Figma 的 Dev Mode 信息，包括选中元素的属性、标注、代码片段等。

什么时候用：你想快速查看某个元素的尺寸、颜色值、间距等属性的时候。

---

小技巧：不用死记这几个 skill 叫什么。你只要在 Cursor 里正常描述你想做的事——"帮我还原这个设计""把这个页面写到 Figma 里"——AI 会自动调用对应的 skill。理解即可，不用记住。

使用场景

搞清楚每个 skill 之后，来看看实际怎么用。

场景一：Figma 设计稿 → 前端代码

这是最经典的场景。设计师给你一个 Figma 链接，你直接让 Cursor 生成代码。

操作步骤：

1. 在 Figma 里选中要转代码的 Frame，按 Ctrl+L（Mac 是 Cmd+L）复制链接
2. 在 Cursor Composer 里贴链接，写提示词

首次提示词可以这样写：

使用 @Figma 当前选中的 frame，生成 React + Tailwind 组件。
严格遵循 Figma 中的：
- Variables（颜色、spacing、radius）
- Auto Layout 结构
- 组件 Variants（包括所有交互状态）
- 字体、阴影、精确间距

生成代码放到 src/components/ 下，遵循项目现有风格。

这里有个关键：一定要选中具体元素再复制链接，不要复制整个文件的链接。文件节点太多，AI 会被撑晕。

迭代优化：

说实话，第一版出来的代码还原度可能不太高——10% 都不到也不是夸张。这时候别急，开始"PUA"它：

• "用项目里的 shadcn/ui 组件替换，不要硬编码"
• "这个间距再收紧 2px，对齐左边"
• "这个阴影用 Figma 的 blur 和 offset 精确复刻"

个人感悟：不要纠结一比一还原，先出个能看的版本交差，再慢慢调。我后来换方向了——不再追求完美还原，只要设计风格能看、比我原来的好看就行，先交差再说。

场景二：前端代码 → Figma 设计

反过来也行——你已经有了一个前端页面，想让 Figma 里有对应的设计稿。

操作步骤：

1. 先让 Cursor 做个规划：根据参考图得出 UI 设计规范，再根据规范把页面生成到 Figma
2. 让 Cursor 执行规划，它会调用 figma-generate-design 来写 Figma

根据当前项目的页面，生成对应的 Figma 设计。
先梳理出 UI 设计规范（颜色、字体、间距、组件），然后按规范在 Figma 中搭建。

个人提示：这个方向目前效果还比较差，demo 转 Figma 奇差无比。但如果你只是想快速出个粗糙的设计稿做沟通，勉强能用。

场景三：批量修改 Figma 设计

设计稿要统一改颜色、改间距、改布局？不用一个个手动点，让 Cursor 通过 figma-use 来批量操作。

把当前 Figma 页面里所有主色从 #1a1a2e 改成 #0f3460，
所有圆角从 8px 改成 12px。

这个场景 figma-use 比较靠谱，因为操作很明确，不像生成代码那样需要"理解设计意图"。

场景四：建立 Figma 设计系统

如果你的 Figma 文件比较乱，没有统一的设计规范，可以用 figma-generate-library 先把基础搭好：

从当前项目代码中梳理设计系统，包括：
- 颜色变量（品牌色、功能色、中性色）
- 字体规范（标题、正文、辅助文字）
- 间距规范
- 组件库（按钮、卡片、弹窗等）

在 Figma 中创建对应的变量和组件。

先建好规范，后续再做"设计↔代码"的转换会顺畅很多。

---

设计稿和代码之间的这道墙，正在一点点被拆掉。虽然现在 Figma MCP 的还原度还远远不够完美，但它已经能帮你省掉大量重复劳动——抄颜色值、写布局、对间距这些体力活，交给 AI 干就行了。

AI 工具这波迭代很快，也许再过几个月还原度就上来了。但不管工具怎么变，核心还是——AI 是工具，怎么用好它，得靠人来判断。你愿意花时间研究这些工具，本身就已经走在了前面。

赶紧去试试吧～先从最简单的"设计稿生成代码"开始，跑通一次就知道怎么用了 👋

以上内容有帮助到你，记得给我点点赞~

---

---