年初的时候，我们调研了一下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上开始和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。
