跨国深谈← 返回←Figma 第一个 MCP server 是怎么三个月做出来的

Figma 第一个 MCP server 是怎么三个月做出来的

关联

人物 Jesse Lumarie

公司 Figma

概念 MCP 服务器 · 智能体 · 评估 · CodeConnect · 上下文窗口 · React Tailwind

这一集是 Figma 工程师 Jesse 的技术演讲，讲的是他们如何在大约三个月内构建了 Figma 的第一个 MCP server——一种让 AI 编程工具直接读取设计稿上下文的通道，AI 工具不用做专门集成，接上这个 server 就能开工。Jesse 本来做增长项目，看到内部演示后很兴奋，觉得能让非设计师也用上 Figma，就每周抽一天自己搞起了插件版的 MCP server——一个公司其实并不存在的「20% 项目」。

后来他和其他人组成小团队正式推进。开场他就强调：后面我会频繁说「我」和「我们」，这背后是一个很大的团队 。

【背景】MCP 指 Model Context Protocol，Anthropic 在 2024 年 11 月发布的规范，让 AI 智能体能调用外部工具和数据。

最大的选型：怎么把设计稿喂给智能体

Figma 的画布在内部是一张 C++ 场景图(scene graph)——由相连节点构成的图，类似 HTML DOM。要传给智能体，得先决定用什么格式表示它。

他们手里有三个选项：一是内部表示，类似 JSX/XML,抽象但保真度不高；二是 D2R,即 React Tailwind 表示——因为 Figma 有 sites 产品，已有现成的场景图转 HTML 管线；三是直接给一张截图。他们押注 React Tailwind,直觉依据是：很多模型都在这类代码上做过 RL(强化学习训练)，效果应该会好 。结果今天的 MCP 输出粘贴进一个简单的 HTTP server 就能做到像素级精确——「如果不是，请提一个 bug」。

图片的处理上踩过坑：最初把 Base64 数据直接嵌进代码，「直接把上下文窗口撑爆了，方方面面都很糟。别那么做」。

改成把图片抽出来放到顶层，再附一张当前节点的截图。单靠图片转代码效果不好，但「把代码上下文加上图片一起用，智能体的输出反而更好了」。

eval:从手工 Excel 到每周几百次

怎么知道哪种表示「更好」？他们先做了很简单的 eval,定量看有没有用对变量、主题化、间距，定性看「好不好看」「信息不全时决策是否合理」。

第一次花了两小时人肉往 Excel 表格里填评分，「然后我们说，再也不干这种事了。太痛苦了。

能不手工做 eval 就别手工做」。难点在于：开源代码很多，但附带 FIG 设计文件的开源项目几乎没有，所以只能自己造数据或做自动化。最终他们写了个 web 应用来跑 eval,现在每周自动运行几百次，工程师改了 prompt 就能用 LLM judge(用另一个大模型当裁判打分)自动评分，把不需要人的环节里的人移出了流程 。

像素级完美只是半个故事：CodeConnect

企业不在乎像素级完美——如果代码没有用上经过实战检验、带可访问性和国际化支持的组件，那就不行。Figma 已有 CodeConnect,能把设计组件链接到代码库里的真实组件。

他们把它接进 MCP:同样是画一个按钮，不传一大坨 React Tailwind,而是通过 CodeConnect 传回一个指针，智能体就会用你代码库里真正的 button 组件。这既带来高保真实现，又省上下文窗口——「你就从这个庞大的 React Tailwind 东西变成了那个小的 React 组件，它只是写着『使用 button 组件』」。

客户端支持参差，只能自己 hack

MCP 规范在推进，但各客户端支持节奏差异很大：Claude Desktop 支持早但 Claude Code 功能不全，OpenAI 和 VS Code 很久才有支持，VS Code 到七月(July)才 GA，而且很多客户端只支持 tools。VS Code 最终支持了几乎所有规范，「真的就像是黄金客户端」——但很难搞清到底在为什么而构建。

规范里有但他们特别想要的两个特性：elicitation(server 向用户提问、拿回输入)和 sampling(server 借用客户端的 LLM 做小型查询)。他们想组合两者：问用户「要不要把你的代码库映射到 CodeConnect」,然后让智能体扫描代码找匹配，批量建立连接，输出更好、上下文更省。

可惜大多客户端没实现，sampling 即便在 VS Code 里也只能当通用智能体查询，不能针对代码库。于是他们用工具调用绕过：获取某个设计的上下文时，发现它是组件且未连接，就下发一个 prompt 模仿 elicitation 去问用户；用户同意后再下发 prompt 让智能体扫描代码库找匹配，模仿 sampling,最后批量传回建立 CodeConnect 。

「在我们的案例里，魔法在于结合这两个特性……最终用户获得了更好的体验」。

另一个小技巧：规范里的 server instructions(给 LLM 的使用说明)写在规范里却没客户端实现，他们就把它塞进每次工具调用里。为了让输出适配不同代码库，他们还在工具调用里加了可选参数，让智能体回报用户用的语言和框架——「这并不完美。

智能体会撒谎。但它至少是一个信号」,帮他们判断哪类用户可能体验不好。

架构：先本地，再远程

做 beta 时目标有四个：快速上线、安全标准尽可能高、尊重文件权限、尊重定价打包以免被滥用。2025 年 3 月规范引入 OAuth 后，他们面临选择：继续本地 server 还是转远程。

「我们搁置了」。本地方案很快：Figma 桌面应用是 Electron 的，前端就是跑在里面的 Figma.com,通过 IPC 桥接到 Node 进程读写文件系统，再暴露一个 server-send events server,客户端就能本地直连。

企业也喜欢「数据不外发」。这是最快验证产品市场契合的路径。

内部上线时反馈「非常坦诚」，修完各种毛病后社区口碑转正。同年九月上线远程 server,十月两个 server 都 GA,随后加入读写能力。「这些事情综合起来，最终让它成为 Figma 有史以来增长最快的产品之一，这是我们在开始做这个时没有预料到的」。

去年底他还顺手孵化了 make in your local codebase——Figma 在 GitHub 和本地代码库上工作的智能体方案。他最后想让人带走两件事：第一，「MCP 规范才两岁，我们仍在摸索最佳做法」——这个领域太早了；第二，Figma 的文化是放手让工程师去构建、去发现下一步——「我并没有被正式指派到 MCP 项目上…

…但我最终帮助了它们被构建出来，只是因为我被给予了这样做的自由空间」。

本集带走

• 选智能体「熟悉」的代码格式：在抽象 XML 和 React Tailwind 之间，他们押了后者，因为模型在这种代码上做过强化学习——判断依据是模型的训练分布，不是格式本身的优雅程度。
• 图片别嵌 Base64:会把上下文窗口撑爆；图片应抽出顶层、以截图形式作为代码上下文的补充，两者组合效果最好。
• 别手工做 eval:第一次两小时填 Excel 就让他们彻底转向自动化，最终建成每周跑几百次、LLM judge 打分的 eval 流水线。
• 客户端不支持规范？用工具调用模仿：elicitation 和 sampling 没实现，他们就靠下发 prompt 分两步模拟「先问用户、再让智能体扫描代码库」，同样跑通了 CodeConnect 映射工作流。
• 验证路径优先：先做本地 Electron + Node 方案最快拿到用户反馈，远程和 OAuth 之后再说；企业客户反而喜欢数据不出本地的本地方案。
• 给智能体留自报口味的通道：在工具调用里加可选参数让智能体回报语言和框架，虽然智能体会撒谎，但足够当作定位体验问题的信号。

如果你今天真的把 Figma MCP 的输出复制下来，粘贴到一个简单的 HTTP server 里，它应该是像素级精确的。如果不是，请提一个 bug。
If you actually copy the output of the Figma MCP today and you paste it into a simple HTTP server, it should be pixel perfect. And if it’s not, file a bug.
—— Jesse Lumarie · [04:18]

我们最初的尝试是把 Base64 数据直接传进代码，那是个非常糟糕的主意。它直接把上下文窗口撑爆了，方方面面都很糟。别那么做。
Our first attempt was just passing Base64 data into the code, and that was just a terrible idea. It just blew up the context window and was bad all around. Don’t do that.
—— Jesse Lumarie · [05:16]

我们花了大概两个小时把一个 eval 的评分填进 Excel 表格。然后我们说，再也不干这种事了。太痛苦了。能不手工做 eval 就别手工做。
And we spent like two hours grading an eval into an Excel spreadsheet. And we said, we’re never doing that again. It was awful. Don’t do evals by hand if you can help it.
—— Jesse Lumarie · [06:04]

这样我们在不需要人的环节就把人从流程里移除了。
So we kind of remove the human from the loop where we don’t need it.
—— Jesse Lumarie · [06:55]

企业不在乎它是不是像素级完美。如果它没有使用经过实战检验、可访问、并且国际化了的组件，那就不行。
An enterprise doesn’t care if it’s pixel-perfect. If it’s not using, it’s battle-tested, accessible, and internationalized components.
—— Jesse Lumarie · [07:10]

右边的截图是 MCP Inspector,如果你在开发 MCP server 却没用过它，那你就是在亏待自己。
The screenshot on the right is the MCP Inspector, and if you haven’t used it and you’re developing an MCP server, you’re doing yourself a disservice.
—— Jesse Lumarie · [12:04]

我并没有被正式指派到 MCP 项目上，也没有被正式指派到我们的 make 产品上。但我最终帮助了它们被构建出来，只是因为我被给予了这样做的自由空间，并在此过程中学到了大量东西。
I wasn’t staffed on MCP. I wasn’t staffed on our make product. But I ended up helping them be built just because I was kind of giving the leeway to do so and learning a ton along the way.
—— Jesse Lumarie · [16:10]