Figma 推出 Dev Mode MCP Server：让 Cursor、Claude 直接读懂设计稿

过去让 AI 帮着写前端代码，最常见的操作就是截一张设计图扔给 Cursor 或 ChatGPT。结果通常很尴尬：AI 写的代码确实能跑，但它根本不知道你团队的组件库叫什么，硬生生手写一堆样式，把设计系统踩得稀烂。

Figma 试图彻底终结这种看图猜意图的做法。官方正式推出了 Figma MCP server 的公开测试版，把 Figma 的设计上下文直接搬进了开发者的代码编辑器。

让 Cursor 直接看懂你的设计系统

这次接入用的是 Model Context Protocol，也就是目前大火的 MCP 标准协议。只要你在 Cursor、Windsurf、Claude Code 或者 VS Code 的 Copilot 里配好这个服务，AI 就能直接读取当前设计稿里的真实结构。

目前这个测试版提供了三项核心工具，分别用于调取代码、截图以及变量定义。开发者只要在 Figma 里选中某个图层或提供节点 ID，AI 就能获取对应的上下文。

这和单纯扔一张截图有本质区别。如果团队在 Figma 里做好了设计系统，AI 拿到的就不是一串十六进制色值，而是具体的变量名称；配合 Figma 的 Code Connect 功能，AI 甚至能直接拿到对应代码组件的文件路径，而不是自己胡乱新建一个。

除了底层元数据，Figma 还会把视觉截图和交互伪代码搭配着喂给大模型。比如在需要表达多屏联动或动态效果时，它能输出结合 React 和 Tailwind 的代码原型，帮 AI 搞清楚组件在真实状态下的运转逻辑。

目前所有拥有 Figma Dev 席位或 Full 席位的用户都可以接入测试。官方表示，后续还会推出无需依赖桌面客户端的远程服务器支持，并进一步优化 Code Connect 的配置流程，加入对网格和设计标注的深度支持。

为什么重要

对于每天跟前端打交道的开发者和独立创作者来说，这个功能的价值非常实在。以前用 AI 写 UI，一半时间花在改组件引用和补全设计变量上，现在只要你的设计文件规范，AI 生成的代码就能直接复用现有资产，不再是随手抛弃的一次性玩具。只要你手里有对应的席位，完全值得今天就在 Cursor 里配置起来试试。

对行业来说，这也是 MCP 生态落地的一个风向标。当 Figma 这种设计领域的绝对垄断者选择拥抱开放协议，而不是把开发者死死圈在自己的生态里，实际上把压力给到了其他工具。它向整个行业证明，给大模型接入真实业务上下文，才是提升代码可用性的唯一出路。

我们认为 Figma 这一步走得相当聪明。它没有执着于在自己的画布里硬造一个代码编辑器，而是退后一步，把自己变成 Cursor 和 Claude 的上下文供应商，牢牢卡住了设计资产这个源头。不过看起来这也带来了一个隐形门槛：这套流程的威力完全取决于团队设计系统的治理水平，如果日常设计稿里全是一团乱麻的图层和硬编码颜色，AI 哪怕接入了 MCP，也只会以更高的效率写出一堆精美的垃圾代码。