AI+Figma真的能够还原好视觉稿？
年初我们做过一次调研，核心问题是：Figma的生态里，到底有没有办法快速把视觉稿转成代码？当时公司用的是蓝湖，说实话体验很一般。普通的HTML页面勉强能应付，但要融入真实的项目工程，基本等于从头来过。当时接管了三个方向：
- 把Figma原型截图丢给GPT，让AI照着尺寸写代码。结果就是，得反复纠正好几轮才能搞出个差不多的样子。人得盯着一遍遍调，心里苦。
- 尝试了Figma生态里的插件，比如builder.io这类。它们的思路你也能猜到——虽然贴了个“AI”的标签，但不支持对话式纠错。你想让它换掉某个组件？得先搭好一套完整的组件库、再手动告诉builder.io“用这个换那个”。费时费力，效果一般。
- 还看了国内的codeFun。这玩意儿也是号称Figma插件，实际是把视觉稿搬到自己的平台上，等于直接脱离Figma操作。而且生成的是Vue代码……嗯，真的很迷。调研完就果断放弃了。
所以我们那会儿把这块探索暂停了。说实话，AI发展的节奏和当年的前端社区很像——新技术层出不穷，隔三差五就有新模型、新方案冒出来。去年底DeepSeek刚火，今年2月MCP概念就刷屏了。
MCP是什么，网上讲得很详细，我就不重复了。简单说，它就像一种协议，让AI和各种应用能互相通信——月初谷歌推的A2A是另一种。我们今天重点聊的是：借助MCP，让AI能和Figma视觉稿“对上话”。
1. 使用 cursor-talk-to-figma-mcp
这个名字已经说明白了——它只能在Cursor里用。网上教程不少，但照着一做就出问题的也很多。下面这套方式我自己试过，确实能用：
照着官方源码的README一步一步走，到bun socket那步时，MCP服务器就启动了。然后在Cursor里加上全局或项目配置：
{
"mcpServers": {
"TalkToFigma": {
"command": "bunx",
"args": ["cursor-talk-to-figma-mcp"]
}
}
}
接着去Figma里装好插件 cursor_mcp_plugin，导入目录后打开插件，就能看到它和我们刚才启动的服务连上了。在Cursor那边，这个MCP状态要是绿色的才算正常。
这时候你跟Cursor的AI对话，如果连上了，它就能开始读取Figma里的视觉稿。经过好几轮沟通，我逐渐沉淀出一套“原则文档”，AI按它来还原，效果差不多能到75%——边距之类的信息还需要人工微调。换句话说，还是得有人过一遍。
原始视觉稿是这个样子：
最后还原出来是这个效果：
1.1 总结
这个MCP方案配置有点麻烦，只支持Cursor，还要打通各种通道。但说实话，它的还原效果比下面那个要好不少。它还支持单模块操作——你把Figma里某个编组的名字告诉它，AI能锁定到你想要的那一块。
2. 使用 Figma-Context-MCP
这个就简单多了，不需要插件，但按照官方文档来搞却经常不成功。官方的配置是这样的：
{
"mcpServers": {
"Framelink Figma MCP": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
我试了无数次都没跑通。后来看到有人说改成用源码启动，配置改成URL模式：
{
"mcpServers": {
"Figma": { "url": "http://localhost:3333/sse" }
}
}
下载源码、装包、编译，然后直接执行cli文件。记得改一下figma的token。剩下的操作参考官网的快速上手指南就行。
在Cursor里这么用：比如想把下面这样一块转成组件：
结果发现，AI根本读不到视觉稿里的间距信息，布局信息也是一团乱麻。最后出来的效果……真的不行。
2.1 总结
这个MCP配置确实简单，容易上手，但还原效果实在不敢恭维。AI一直在抱怨拿不到间距数据：
“拿不到间距信息”——这种话频繁出现。整体还原效果也很差，不推荐。
