☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
零代码基础？手把手教你用Cursor+MasterGo跑通AI编程！
一、全文速览图很多没有代码基础的设计师，看到 AI 写代码，第一反应都是：我也想试试。
当然有！
这篇就做一件事：把 Figma MCP → Cursor → 页面还原 这条链路，用最少步骤跑通。
二、先说结论
市面上很多教程一上来就让你配环境、跑命令、填 Token，对新手小白来说很容易被劝退。
但如果你的目标只是：
让 Cursor 读到 Figma 设计稿，并基于设计稿尝试生成页面
那其实可以走更简单的路线：
不装 Node，不手填 Figma Token，直接用官方 Remote MCP 授权连接。
这篇会主要推荐两种方式（二选一使用即可）：
- 方式 A：插件托管，最简单，推荐优先使用
- 方式 B：添加 Remote MCP 地址，方式 A 不成功时使用
三、这篇能帮你解决的 4 个问题
- 在 Cursor 里接上 Figma MCP（最简单的方式，1 分钟搞定）
- 完成 Figma 授权
- 验证 AI 是否真的读到设计稿
- 用一个页面做基础还原，并在文末附上案例效果和文件结构参考供下载参考
这篇的重点不是追求“一次生成 100% 高保真页面”，而是先把最基础的链路跑通。
先跑通，再谈精修。
四、需要准备的 2 个工具 + 1 个连接入口
Cursor：主工作台 （付费版体验更完整，免费版也有一定额度，本教程的基础流程够用）
Figma：提供设计稿 （推荐付费版，免费版只有很少量的读取额度， Web 端&桌面端都可，本教程选的 Web 端）
Figma MCP：让 Cursor 能读取 Figma 结构 ，两种方式二选一
(这里再解释一下：Node.js 不是今天主流程的必需品。只有当你去折腾第三方 npm 包时才需要装它。小白今天不用管！)
五、2 种配置方式：先选 A，失败再用 B
准备工作：
配置之前，我们还需要工具准备和新建项目，这里不赘述
可参考这篇：
零代码基础？手把手教你用Cursor+MasterGo跑通AI编程！
一、全文速览图很多没有代码基础的设计师，看到 AI 写代码，第一反应都是：我也想试试。
详细过程可以看第一、二步骤。
Figma MCP 的接入方式不止一种，所以很多人看教程时会觉得混乱。
本质原因是：大家说的“接入 Figma MCP”，可能不是同一件事。
为了不走弯路，直接看这个表，本文也重点只讲方式 A 和 B：
一句话建议：
- 第一次尝试，直接走 方式 A。
- 如果方式 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
最简单的理解是：你走的路不一样。
- 如果你是自己写程序直接调 Figma 接口（像工程开发），通常要自己准备 Token。
- 如果你用的是一些第三方 MCP 脚本，也经常要手动填 Token。
- 但你现在在 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 说读不到文件？
检查四点：
- 链接是不是具体的 Frame？
- Figma 授权是否成功？
- 文件权限是否对（当前用于 MCP 授权的 Figma 账号必须对目标文件至少有可查看权限（can view））？
- 是不是在设置里不小心开启了多个相同的 Figma MCP 导致冲突？（我们推荐的方式二选一即可）
Q4：读到了结构，写出来还是不准？
MCP 负责让 AI 看见设计稿，但页面最终写得准不准，还取决于模型能力、资源是否完整、后续有没有做分块精修等等。
所以不要期待一次生成就完全还原，更现实的流程是：先跑通 → 再生成 → 再对比 → 再分块精修。
如何提高还原度，具体可以再回看这篇：https://www.uisdc.com/design-to-code-3
十、最后
Figma MCP 的价值，不是让 AI 一次性替你做完所有页面。
它更像是给 Cursor 多开了一双眼睛：
让它少猜一点，多看一点。
但页面最终能不能还原好，还是取决于你怎么给它框定范围、拆分任务、补充参考图，以及如何做后续精修。
先别追求完美。
先跑通，再优化。
先完成，再精修。
另外：案例文件下载
为了方便大家对照练习连接 MCP 后的页面还原，我把本次还原页面用到的基础静态文件整理成了静态页面的压缩包。
大家可以下载后，用 Cursor 或 VS Code 打开，先链接 Figma MCP，再结合文中的 Prompt 自己跑一遍完整流程。
| 文件名 如何下载使用 | 文件大小 | 提取码 | 下载来源 |
|---|---|---|---|
| FigmaMCP+Cursor页面 Demo | 5.51M | 6666 点此复制 | 登录下载 |
