让设计稿变代码！小白也能学会的 Figma MCP 接入 Cursor 保姆级教程

一、全文速览图

上次分享了 MasterGo 链接 MCP 的教程，评论区有小伙伴问：有 Figma 版本吗？

当然有！

这篇就做一件事：把 Figma MCP → Cursor → 页面还原 这条链路，用最少步骤跑通。

二、先说结论

市面上很多教程一上来就让你配环境、跑命令、填 Token，对新手小白来说很容易被劝退。

但如果你的目标只是：

让 Cursor 读到 Figma 设计稿，并基于设计稿尝试生成页面

那其实可以走更简单的路线：

不装 Node，不手填 Figma Token，直接用官方 Remote MCP 授权连接。

这篇会主要推荐两种方式（二选一使用即可）：

1. 方式 A：插件托管，最简单，推荐优先使用
2. 方式 B：添加 Remote MCP 地址，方式 A 不成功时使用

三、这篇能帮你解决的 4 个问题

1. 在 Cursor 里接上 Figma MCP（最简单的方式，1 分钟搞定）
2. 完成 Figma 授权
3. 验证 AI 是否真的读到设计稿
4. 用一个页面做基础还原，并在文末附上案例效果和文件结构参考供下载参考

这篇的重点不是追求“一次生成 100% 高保真页面”，而是先把最基础的链路跑通。

先跑通，再谈精修。

四、需要准备的 2 个工具 + 1 个连接入口

Cursor：主工作台 （付费版体验更完整，免费版也有一定额度，本教程的基础流程够用）

Figma：提供设计稿 （推荐付费版，免费版只有很少量的读取额度， Web 端&桌面端都可，本教程选的 Web 端）

Figma MCP：让 Cursor 能读取 Figma 结构 ，两种方式二选一

(这里再解释一下：Node.js 不是今天主流程的必需品。只有当你去折腾第三方 npm 包时才需要装它。小白今天不用管！)

五、2 种配置方式：先选 A，失败再用 B

准备工作：

配置之前，我们还需要工具准备和新建项目，这里不赘述

可参考这篇：

详细过程可以看第一、二步骤。

Figma MCP 的接入方式不止一种，所以很多人看教程时会觉得混乱。

本质原因是：大家说的“接入 Figma MCP”，可能不是同一件事。

为了不走弯路，直接看这个表，本文也重点只讲方式 A 和 B：

一句话建议：

1. 第一次尝试，直接走 方式 A。
2. 如果方式 A 没成功，再试 方式 B。

方式 A：插件托管，最简单，推荐优先使用

第一步：插件安装

Cursor 聊天框输入：

/add-plugin figma

然后在弹出的选项中选择：Add for Myself

这一步的作用是：把 Figma MCP 作为插件添加到 Cursor 里。

第二步：进入 Cursor 设置面板

路径是：

Settings → Tools & MCPs

在列表里找到 figma，点击右侧的：

Connect

第三步：浏览器授权

点击 Connect 后，会跳转到浏览器授权页面，这里直接点击：

Allow access

如果浏览器弹出确认框，继续确认即可。

成功标志：

回到 Cursor，看到 figma 旁边亮起绿色小圆点，并且显示 tools / resources enabled，搞定！

方式 B：添加 Remote MCP，备选方案

在 Cursor 的对话框里输入（直接复制即可，不用改任何文字）：

请帮我添加一个 Figma MCP server，地址为： https://mcp.figma.com/mcp

然后进入：

Settings → Tools & MCPs

找到 figma（当前还是小黄点状态），点击 Connect 授权。

后面的浏览器授权步骤和方式 A 一样：

授权完成后，回到 Cursor 看是否变成绿色连接状态。

为什么不用手填 Token

最简单的理解是：你走的路不一样。

1. 如果你是自己写程序直接调 Figma 接口（像工程开发），通常要自己准备 Token。
2. 如果你用的是一些第三方 MCP 脚本，也经常要手动填 Token。
3. 但你现在在 Cursor 里连官方 Figma MCP，走的是 Connect 授权流程，系统会帮你处理登录授权，所以一般不用手填。

六、MCP 连通验证

这里一定要注意：

绿灯亮了，只能说明 MCP 连接成功。

但 AI 是否真的读到了设计稿，还需要单独验证。

正式让它写代码之前，建议先测一下它的“视力”。

在 Cursor 聊天框发这段话进行测试：

请使用 Figma MCP 读取这个 Figma Frame 链接。
先不要写代码，只返回：
1. 页面结构
2. 组件层级
3. 颜色与字体信息
4. 图片 / 图标资源列表

链接：{你的 Frame 链接}

如果它能准确说出设计稿里的文字、颜色、字体、图层和结构，才说明它真的读到了 Figma 页面。

避坑铁律：

优先复制单个 Frame 链接，不要直接丢整个文件，千万不要一上来就把整个 Figma 文件链接水灵灵的丢给 AI。

更推荐在 Figma 里选中你要还原的那个具体 Frame（画板），右键 Copy link。链接里带 node-id 越具体，AI 读取越聚焦，越不容易崩溃。

七、页面还原 Prompt

关于如何精修还原页面，可以阅读：https://www.uisdc.com/design-to-code-3

思路是一致的。

前面只是验证 Cursor 能不能读到 Figma，接下来才是让它真正开始还原页面。

我这次主要用的是：Figma Frame 链接 + 本地完整参考图。

可以使用这段 Prompt：

请结合 Figma Frame 链接 + 名为 xxx.png 本地完整参考图还原页面。

规则：
1. 结构以 Figma 读取结果为准；
2. 视觉细节以本地参考图为准；
3. 只修改 index.html / style.css / script.js；
4. 优先使用 assets/portal 下现有切图；
5. 不要生成占位图；
6. 不要改资源路径；
7. 完成后输出修改文件清单和缺失资源列表。

跑下来之后，再针对字号、颜色、间距、圆角、阴影等细节继续微调。

这种结构比较简单的落地页，只要资源完整，精修后还原度可以做到比较高。

另外，发现可以增加交互动效很好玩，直接 Cursor 对话框输入：

例如，所有卡片都加 Hover 效果，卡片向上移动 6px 或者第二排 logo 循环滚动起来等等。

案例来源：

本案例设计稿来自 Figma Community 免费设计文件 SaaS Website UI Kit — Framer Website Kit。本文仅基于该设计稿进行 Figma MCP 接入、读取验证与页面还原测试，不涉及商业使用。

八、2 个页面精修小技巧：先选中，再修改

页面生成后，不建议只靠对话框一句句反复描述问题。

Cursor 里其实有两种更快的精修方式，特别适合改字号、颜色、间距、圆角、位置这些细节。

首先，可以在 Cursor 里直接下指令，获取我们的预览页面，然后就可以进行调整。

技巧 1：用可视化面板直接微调样式

选中要调整的元素，在右侧的样式面板里面直接调整：字号、颜色、间距等元素，比反复跟 AI 描述“再大一点、再往上一点”要快很多。

技巧 2：选中元素后，再让 AI 定向修改

如果你不想手动改，也可以先在预览页面里点中要修改的元素。
选中后，这个元素会自动带到右侧对话框里。

这时候再输入修改指令，AI 会更清楚你要改的是哪个元素，减少误改其他区域的情况。

比如可以这样说：

把当前选中的标签字号改小一点，背景色改成 #EAEFFE，圆角保持 10px。

九、常见问题 FAQ

Q1：必须用 Figma 桌面版吗？

不一定。Remote MCP 可以配合网页端使用。只有 Figma Desktop 本地 MCP 才需要桌面客户端。

Q2：为什么我没装 Node 也能用？

因为这次走的是远程 MCP，不是本地 npm 服务。

Q3：连接亮绿灯了，但 AI 说读不到文件？

检查四点：

1. 链接是不是具体的 Frame？
2. Figma 授权是否成功？
3. 文件权限是否对（当前用于 MCP 授权的 Figma 账号必须对目标文件至少有可查看权限（can view））？
4. 是不是在设置里不小心开启了多个相同的 Figma MCP 导致冲突？（我们推荐的方式二选一即可）

Q4：读到了结构，写出来还是不准？

MCP 负责让 AI 看见设计稿，但页面最终写得准不准，还取决于模型能力、资源是否完整、后续有没有做分块精修等等。

所以不要期待一次生成就完全还原，更现实的流程是：先跑通 → 再生成 → 再对比 → 再分块精修。

如何提高还原度，具体可以再回看这篇：https://www.uisdc.com/design-to-code-3

十、最后

Figma MCP 的价值，不是让 AI 一次性替你做完所有页面。

它更像是给 Cursor 多开了一双眼睛：

让它少猜一点，多看一点。

但页面最终能不能还原好，还是取决于你怎么给它框定范围、拆分任务、补充参考图，以及如何做后续精修。

先别追求完美。

先跑通，再优化。

先完成，再精修。

另外：案例文件下载

为了方便大家对照练习连接 MCP 后的页面还原，我把本次还原页面用到的基础静态文件整理成了静态页面的压缩包。

大家可以下载后，用 Cursor 或 VS Code 打开，先链接 Figma MCP，再结合文中的 Prompt 自己跑一遍完整流程。