先说我自己的真实感受。过去接设计稿还原这种活儿，最烦的不是写代码，而是“对着稿子猜”。图层命名全是一堆 Frame 123、Rectangle 45，字号间距要自己拿鼠标量，切图还得开一堆插件。后来把Cursor、Figma和MCP这三样东西串在一起，我才感觉到“AI 还原设计稿”这条路算是真正走通了——AI 不再靠截图猜像素，而是能直接隔着 MCP 协议去读 Figma 里的图层结构、样式变量和选中节点，生成的代码基本能落到像素级。这篇文章就围绕这个组合，把我从接入到跑通、再到拿去干活的完整经验写清楚，适合前端开发、全栈工程师、AI 编程重度用户，以及所有想把“设计稿→代码”这条链路自动化的人参考。
1. MCP协议入门：为什么Cursor能“看见”Figma设计稿
1.1 AI最缺的不是聪明，而是“手”
很多人在一开始容易把 Cursor 想象成一个全知全能的编码助手，但它本质上只是一个模型 + 一套编辑器外壳。模型再聪明，它也只有两条信息来源：一是你贴给它的文本，二是它自己训练时见过的公开代码。你让它去还原设计稿，它如果连设计稿长什么样都不知道，那它只能凭感觉生成一个“看起来像后台管理系统”的页面，最后你还要手动调整几十处。
这时候就需要 MCP 来解决一个很实际的问题：给 AI 接上外部系统的只读通道。MCP 全称 Model Context Protocol，翻译成大白话就是“模型上下文协议”，它像是一个标准化的 USB-C 接口。过去你要给 AI 接一个数据库、接一个设计工具、接一个文档服务，每家都得写一套私有 API，现在大家统一按 MCP 协议来暴露能力，Cursor 这类客户端只要支持 MCP，就能统一调度所有外部工具。
拿 Figma 打比方。你在 Figma 里选中的那个 Frame，原本在 AI 眼里就是一张 PNG 截图。但通过 Figma 官方的 MCP 服务，AI 拿到的是一份结构化数据：图层叫什么名字、宽高是多少、间距多少、填充色是什么、文本内容是什么、字号行高怎么定义。它就像一个刚入职的实习生突然领到了全套办公工具和门禁卡，可以自己去翻图纸、量尺寸、导出素材，不再需要用肉眼对着模糊截图瞎猜。
1.2 MCP里的三个原语，对应到Figma场景是什么
MCP 协议的核心概念并不复杂，你可以只记三个关键词：资源（Resources）、工具（Tools）、提示词模板（Prompts）。这三个东西几乎覆盖了 Cursor 操作 Figma 的全部方式。
- 资源：类似一套只读文件系统。Cursor 可以通过 MCP 拿到当前 Figma 文件的节点树、文件信息、选中对象的结构。这部分解决的是“AI 不知道有哪些设计信息”的问题。
- 工具：类似可执行的函数。Cursor 可以调用 Figma MCP 提供的工具，比如读取当前选中节点、导出选中区域的图片、获取设计稿变量。这部分解决的是“AI 想主动读取设计稿”的问题。
- 提示词模板：类似预设的标准化指令。有些 MCP 服务会内置好一批常用提示词，比如“分析当前选中 Frame 的布局结构”，你点击之后 AI 就会按固定套路执行。
我在实际使用中，最常用到的是“工具”这部分。举个例子，我在 Cursor 的对话条里输入“读取我当前在 Figma 中选中的组件”，Cursor 会自动调用read_selection工具，把选中 Frame 的图层树拉回来。这时候你再让它“按照这个结构写一个 React 组件”，它就不是在编，而是在照着设计稿的真实数据写代码。
1.3 为什么非MCP不可：传统方案的三宗罪
可能有人会觉得，这玩意儿不就是把设计稿截图拖进 Cursor 里让 AI 生成吗？我用 GPT-4o 直接生成不也能给个七七八八？确实，截图 + 提示词也是一种方案，但我在实际对比后发现它有几个很难绕开的痛点。
第一，信息损耗严重。截图是像素级的，但 AI 很难从像素里精确推导出 8px 间距和 12px 间距的区别，更别提判断哪些元素是同一个组件实例。而 MCP 返回的 JSON 数据里，坐标、尺寸、颜色、字体全都有精确值，不存在“看走眼”的问题。
第二，样式不可复用。截图方案生成的代码经常把颜色写成#F5F5F5这种散落的魔法值，完全不会替你去读取设计变量。Figma MCP 能直接拿到设计系统里的变量名，比如colors.background.primary，这样生成的 Tailwind 类名和自定义变量才能挂上设计体系的钩子。
第三，更新不同步。设计稿改了一版，你截图也换一版，但前面 AI 生成过的代码和这版截图是否对得上，全凭肉眼。MCP 方式下，你重新选中新稿子，让 AI 直接用最新数据覆盖旧代码，等于建立了一条持续同步的链路。
2. 接入实操：Cursor配置Figma MCP的完整步骤
2.1 先做好这三件事：环境、账号、版本
在开始配置之前，先把环境理清楚，免得后面踩一些莫名其妙的坑。我建议你按照下面三步来做准备。
第一步，安装 Cursor。这个不用多解释，直接官网下载即可。如果你打开后看到的是英文界面不习惯，可以在新版 Cursor 的Settings→General→Language里找到语言选项，选“简体中文”就行。有些老版本没有这个选项，那就先保持英文界面，因为后面操作 MCP 面板时需要看的按钮名称是固定的，中文也不是很关键。另一个更常见的做法是直接在对话里让 AI 用中文回复，体验基本无差别。
第二步，确认 Figma 账号可用，并且能打开开发者模式（Dev Mode）。注意，Figma 的免费账号也能用 Dev Mode，不需要额外付费，但建议在桌面端操作，浏览器端有些版本的按钮位置会不太一样。如果你在 Figma 里看到的是中文界面，多半是装过汉化插件，这也不影响 MCP 连接，反倒是有些汉化插件会把官方按钮名改掉，到时候你反而找不到“Copy MCP Link”，所以我不太推荐在配合 MCP 使用时装汉化插件。
第三步，检查 Node.js 环境和网络状态。虽然新版的 Figma MCP 主要是走 HTTP 链接，不一定需要本地跑 Node，但如果你准备用社区方案或者需要调试，一个可用的 Node LTS 环境还是很有必要的。在终端里执行node -v，确认版本在 20 以上就行。
2.2 Figma侧操作：复制MCP链接的关键一步
接下来就是最核心的一步。在 Figma 中打开你要还原的设计文件，先点击右上角的Dev Mode（开发者模式）开关，进入开发者模式。
然后，用鼠标选中你要还原的目标图层，最好是一个完整的 Frame 或 section，不要只选一个孤零零的按钮图层。选完后，在顶部工具栏或右键菜单里找到 MCP 相关的按钮，点击下拉，选择Copy MCP Link，系统会复制一段形如figma-mcp://...的长链接到剪贴板。
这一步为什么重要？因为这段链接里其实已经包含了授权凭据，Cursor 通过它去访问的就不再是公开的 Figma 页面，而是当前你这个账号、当前这个文件、以及你选中的那部分图层。也就是说，你不用再去申请什么 Figma API Token，也不用把整个文件权限暴露给 AI，粒度收到“选中对象”这一层，安全性上舒服很多。
我自己一开始犯过一个错：没进 Dev Mode 就直接找 MCP 按钮，结果找了五分钟都没看到入口。所以这里特别提醒，Figma 的 MCP 入口是藏在开发者模式下面的，一定要先把那个开关点亮。
2.3 Cursor侧接入：推荐两种配置方式
拿到 MCP 链接后，切到 Cursor。点击右侧边栏顶部的 MCP 按钮（一个“插头”或“拼图”样式的图标），打开 Model Context Protocol 管理面板，操作路径大概是Settings→Integrations→Model Context Protocol。不同版本入口稍微有点区别，你直接在设置里搜 MCP 也行。
方式一，最简单的方式。在 MCP 管理面板里点+或Add，选择 “Connect to Figma MCP”，然后把刚才从 Figma 复制的那段链接粘贴进去。此时 Cursor 会尝试打开浏览器跳转到 Figma 授权页面，你确认授权后回到 Cursor，MCP 服务器就会变成 Connected 状态。
方式二，手动配置。如果你更想自己控制配置，可以在~/.cursor/mcp.json（macOS/Linux）或C:\Users\你的用户名\.cursor\mcp.json（Windows）中手动加入一段配置。对于 Figma 官方的 HTTP 方式，配置大概是：
{ "mcpServers": { "figma": { "type": "http", "url": "https://mcp.figma.com/mcp" } } }不过说实话，我实际体验下来，方式一最省心，因为授权过程是自动的，不容易因为 URL 配置错误而反复调试。手动配置这种方式更适合你在远程开发环境或者自己写的 Agent 框架里接入，本地桌面端直接用官方流程就好。
2.4 配置成功后的验收标准
配置完成不代表真能干活了，我一般会做一个 30 秒的验收动作。回到 Figma，选中一个 Frame；回到 Cursor 新建一个 Composer 对话，输入：
Use the Figma MCP tools to read my current selection，然后告诉我这个 Frame 里有哪些主要 section，以及它们的尺寸和间距。正常情况下，Cursor 会调用read_selection工具，返回一长串 JSON 片段，然后 AI 会根据 JSON 内容用中文回复你。如果你看到它返回了“我没有读取到任何选中的图层”之类的信息，那就说明授权虽然成功，但当前没有选中对象，回到 Figma 先选一个再试。
这个验收步骤非常关键，它验证的不只是“MCP 服务器连上了”，还有“AI 真的能动态读取设计稿信息”。只有到了这一步，后面所有自动还原的流程才有意义。
3. 实战记录：用Cursor+MCP还原真实设计稿的全过程
3.1 选一个难度适中的目标页面
为了把流程讲清楚，我建议你第一次不要拿那种几十个组件的复杂项目试水，选一个结构稍微完整的单页就好，比如一个登录页、一个卡片列表页，或者一个控制台的数据总览页。我这边拿的是一个典型的数据看板页面：左侧导航栏 + 顶部 Header + 中间统计卡片区域 + 底部数据表格。这个页面有典型的布局层级、有多种颜色语义（主色、成功色、警告色）、有字体大小梯度，还有图标和图片资源，几乎覆盖了还原设计稿最常见的所有场景。
选定之后，在 Figma 中把这个 Frame 的图层树稍微整理一下。我说的整理不是让你重新设计，而是至少保证顶层 Frame 的名字是有意义的，比如叫dashboard-overview，里面再拆成sidebar、header、stats-cards、>// figma: fileKey=abc123xyz, frame=dashboard-overview
这个注释会在以后发挥大作用。当设计稿更新后，你可以直接通过这个 ID 快速回到 Figma 对应位置；当你发现线上页面和设计稿不一致时，也能凭着这段注释迅速定位到“这个页面到底对应的是哪个 Frame”和“当时根据哪一版稿子生成的代码”。别看它只是一个小注释，在项目周期拉长、设计稿迭代多轮之后，它比任何文档都管用。
