做前端的都知道,设计稿还原这件事,大头从来不是写代码本身,而是那些“看稿”的功夫——量一下间距、取个色值、确认字号字重,一个页面几十个区块,每个区块翻来覆去地核对,一上午就没了。我之前接过一个后台管理系统,设计稿里光按钮就十几种状态,手动对着 Figma 抠了一整天,改完一核对,还有三处字体粗细不对。后来我把 Cursor 和 Figma MCP 这套工作流完整跑通了,效果确实比我预期好不少——不是它把所有事都干完了,而是把“看稿”这件最耗体力的事交给工具了。这篇文章就把完整流程、踩过的坑、以及哪些环节必须人工介入,一次性讲清楚。
1. 设计稿还原为什么难:先搞清楚误差到底出在哪一环
1.1 传统还原流程里的三处信息损耗
手动还原设计稿这件事,表面看是“照着稿子写代码”,但真正干过的人都知道,误差不是写代码那一步产生的,而是从“看稿”到“动手”这个过程中就已经丢了信息。
第一处损耗在看标注。设计师在 Figma 里拖一个矩形,它的 x、y 坐标、宽高、圆角、填充色、阴影参数,这些数据在设计稿里是精确到一个像素的。但人眼去读这些信息的时候,经常是量个大概——间距是 16px 还是 18px,有时候真分不出来。等代码写出来,视觉上看着没差多少,但严格一比,就是差那 2 个像素。单个区块差 2px 看不出问题,一整个页面几十个区块叠起来,那种“说不出来哪里不对,但就是不像原稿”的感觉就来了。
第二处损耗在切图。老一套流程里,图标、背景图、插画都要从 Figma 里手动导出来,导完还得压缩、换格式、放到项目目录里,再在代码里引用路径。这个环节最容易出问题的不是技术,而是版本管理——设计师改了一版设计稿,你切好的图还在用旧版本,等发现的时候页面已经快做完了,只能回头重来。
第三处损耗在沟通。前端问设计师“这个按钮 hover 状态是什么颜色”,设计师说“你自己试一下”,或者“跟别的页面统一就行”。这种模糊地带多了,还原度就是一笔糊涂账。归根结底,手动还原是把一个“数据精确”的设计稿,通过人眼转成了“大概准确”的代码。
1.2 Figma 文件本身就是数据,MCP 是把数据递给 AI 的那只手
Figma 和普通的图片稿不一样,它的文件本质是一棵结构化的节点树。每个节点都有完整的样式属性——宽高、坐标、填充、描边、圆角、字体、行高、自动布局方向、间距、响应式约束,全部以 JSON 的形式存在。也就是说,“像素级还原”所需要的全部信息,设计稿里早就有,缺的只是怎么把这些数据喂给写代码的工具。
过去这个环节靠人肉读取,现在有了 MCP,流程就变了。MCP(Model Context Protocol)是一个开放协议,解决的是“AI 模型怎么安全地调用外部工具和数据”的问题。拿 Figma MCP 来说,它起的作用是中间人——Cursor 通过 MCP 协议向本地运行的 Figma MCP Server 发起请求,MCP Server 拿着你配置的 API Token 去访问 Figma 的文件数据,然后把结构化的节点信息返回给 Cursor。整套链路里,Cursor 拿到的不再是一张截图让它“猜”,而是设计稿的精确尺寸、颜色值、字体信息。
这就是为什么“像素级还原”这件事,搭配 MCP 比纯靠 AI 识图要靠谱得多。AI 看截图,本质上还是在猜,图被缩放一下、压缩一点,识别出来的数值就变了。但走 MCP 拿数据,是多少就是多少,设计稿标 16px,代码里就是 16px,不存在“猜”的环节。
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 动手配置:给 Cursor 接上 Figma 的“数据源”
2.1 第一步:生成 Figma 只读 Token
配置 MCP 之前,先解决身份认证的问题。Figma API 的访问凭证是 Personal Access Token,在 Figma 网页端右上角头像菜单里找到 Settings,切换到 Security 标签页,往下拉能看到 Personal access tokens 区域,点 Generate new token。
生成的时候有几个选择要注意。Token 的过期时间建议选长一点,省得一个月后突然失效还得重新配置。勾选权限的时候,只勾 File content 的只读权限就够了,FS(File System)相关的权限、Dev resources 之类的都别开。这是安全习惯也是务实选择——MCP Server 只需要读设计稿,给它写权限徒增风险,而且某些 MCP Server 在权限过大的情况下反而可能触发 Figma 的风控。
生成之后是一串以 figd 开头的字符串,复制出来存好。注意,这串 Token 等同于你 Figma 账号的一把只读钥匙,不要贴到公开仓库里,也不要随手发到群里。如果你用的是团队项目,还需要确认当前账号能访问那个设计稿文件,不然 MCP Server 调 API 的时候会返回 403。
