AI+Figma真的能够还原好视觉稿？

年初的时候，我们调研了一下figma的生态下，是否有快速转代码的能力，当前公司用的蓝湖，非常鸡肋，普通的html可以简单搞搞，但是要融入到你的项目中，就略显苍白了。于是我们尝试了多种方案：

• figma截原型图，上面包含尺寸信息给GPT，但是需要不断地纠正才勉强可以
• figma生态下的插件：builder.io或者类似的插件，虽然引入了一些AI的能力，但是无法通过对话的方式进行纠正，并且，对于一些组件还得通过维护好一套组件库，告诉builder.io，它才会替换掉，非常麻烦
• 国内的codeFun，这个就很有意思了，虽然号称是figma的插件，但却是把视觉稿直接copy到他们自己的平台上，相当于直接脱离了figma了，然后生成的代码也只能是vue，非常奇怪的骚操作。对于这种方式，调研完就立马弃选了。

之后我们就暂时停止了这块的探索，要我说AI的发展和当年前端社区发展很像（不过也是废话，一个新兴技术的崛起都是经历这种过程），隔三差五就有新技术或者更好的模型诞生。就如去年年底的DeepSeek的诞生，在2月份出现了MCP概念，一下子就火起来了。

MCP的介绍网上一大堆，我就不细讲了，主要是创建了一个协议，让AI与各种应用进行通信，月初谷歌搞的A2A是另外一种通信协议。今天我们的主题是如何借助MCP，让我的AI和视觉稿通信。

1、使用cursor-talk-to-figma-mcp

顾名思义，这个MCP只能在cursor中使用，我看网上的教程搞起来，好多都不能使用，我的这个方案保证一搞就通。

首先按照官方源码的README说的操作一遍：

到bun socket这一步，即启动好了MCP 服务器。

之后，到cursor上添加全局配置，或者项目配置，都可以：

ounter(lineounter(lineounter(lineounter(lineounter(line{  "mcpServers": {    "TalkToFigma": { "command": "bunx", "args": ["cursor-talk-to-figma-mcp"] },  }}

之后来到Figma软件上，安装cursor_mcp_plugin：

之后导入的目录如下：成功之后，打开该插件：就可以看到该插件已经和我们刚才启动的服务建立了连接。 另外Cursor那边的这个MCP的状态必须是绿色的，代表一切正常：

这个时候到Cursor上开始和AI对话：

这个时候说明连接成功了，于是你可以开始针对你的视觉稿跟AI进行沟通。针对我在多轮和它沟通之后形成的一个原则性文档，AI能够还原75%差不多，一些边距信息还需要进行细微调整，等价于还是需要投入人力再进行核对一遍。

视觉稿如下：

最后还原出来的如下：

还原的规则：

1.1、总结

该MCP配置略显麻烦，并且只支持cursor，还需要各种通道建立，但是他的还原效果比下面要介绍的MCP要好很多。而且它也支持单模块操作，只需要把Figma的某个编组的名字给它，AI能够找到你要还原的某一个模块

2、使用Figma-Context-MCP

这个MCP就简单很多，无须配置插件，但是一开始如果按照官网说的，好像挺难成功的。官网介绍是这样的：

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line{  "mcpServers": {    "Framelink Figma MCP": {      "command": "npx",      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]    }  }}

于是我就按照这个来，尝试了很多次都没成功。于是看了网上说的，可以改成用源码来启动，配置就变成这样了：

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(line{  "mcpServers": {    "Figma": { "url": "http://localhost:3333/sse" }  }}

先把源码下载下来，之后安装好包并编译，直接执行cli文件，如下图，记得修改figma的token

剩余的操作，跟官网介绍的一样：https://www.framelink.ai/docs/quickstart。我们在cursor中这么使用，比如我们想把下面这个转换为组件：

扯了半天，原来AI读取不到视觉稿中的间距信息，而且布局信息也是一塌糊涂！！最后出来的效果是这样的：

2.1、总结

该MCP配置比较简单，也好容易上手，但是还原信息是真的很差，AI一直在跟你说拿不到间距信息：

然后还原的整体也是很差。不推荐用这个MCP。