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一直在抱怨拿不到间距数据：

“拿不到间距信息”——这种话频繁出现。整体还原效果也很差，不推荐。