先说我自己的真实感受。过去接设计稿还原这种活儿最烦的不是写代码而是“对着稿子猜”。图层命名全是一堆 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 授权页面你确认授权后回到 CursorMCP 服务器就会变成 Connected 状态。方式二手动配置。如果你更想自己控制配置可以在~/.cursor/mcp.jsonmacOS/Linux或C:\Users\你的用户名\.cursor\mcp.jsonWindows中手动加入一段配置。对于 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. 实战记录用CursorMCP还原真实设计稿的全过程3.1 选一个难度适中的目标页面为了把流程讲清楚我建议你第一次不要拿那种几十个组件的复杂项目试水选一个结构稍微完整的单页就好比如一个登录页、一个卡片列表页或者一个控制台的数据总览页。我这边拿的是一个典型的数据看板页面左侧导航栏 顶部 Header 中间统计卡片区域 底部数据表格。这个页面有典型的布局层级、有多种颜色语义主色、成功色、警告色、有字体大小梯度还有图标和图片资源几乎覆盖了还原设计稿最常见的所有场景。选定之后在 Figma 中把这个 Frame 的图层树稍微整理一下。我说的整理不是让你重新设计而是至少保证顶层 Frame 的名字是有意义的比如叫dashboard-overview里面再拆成sidebar、header、stats-cards、>// figma: fileKeyabc123xyz, framedashboard-overview这个注释会在以后发挥大作用。当设计稿更新后你可以直接通过这个 ID 快速回到 Figma 对应位置当你发现线上页面和设计稿不一致时也能凭着这段注释迅速定位到“这个页面到底对应的是哪个 Frame”和“当时根据哪一版稿子生成的代码”。别看它只是一个小注释在项目周期拉长、设计稿迭代多轮之后它比任何文档都管用。