搓了一个MCP帮你高精度还原代码

介绍

F2C(figma to code)MCP Server 是一个基于 F2C 实现的 MCP Server。它能够获取 Figma 设计稿节点信息,将其转换为高还原度的HTML、React甚至其它更多代码。支持Cursor、Trae、Dify等。

相较于现在比较流行的 Trae 内置 Figma MCP,优势在于会将设计稿信息先喂给 F2C 进行代码实现,在通过返回已经具有高还原度的代码给 clients。相较于直接将 Figma 设计稿节点信息丢给 clients,具有更高的稳定性和还原度。

使用展示

获取Figma的Personal access tokens

我们打开Figma App,点击左上角个人菜单

image

随后选择 Security,点击 Generate new token生成一个新的 Personal access tokens

配置 MCP

这里我拿cursor举例,根据 文档 选择自己想要的方式配置好MCP Server

image

使用

在 chat 处输入你想要做的事情,例如(这里只是随便写的)

点击运行我们可以看到 agent 会调用 tool

image

测试的设计稿大致长这样

先来看看比较热门的 Figma MCP 实现的样子(都是同样的prompt)

再看看基于F2C的MCP Server的效果

同时代码相关的图片也会下载到本地

总结

还有一些实战的视频,由于限制没办法公开,后续将会更新到 Github上。当然目前也收集到一些问题,比如:

  • 模型会给自己加戏,我们返回的代码已经是高度还原的了,结合Figma信息模型会 自行优化,有时候效果会适得其反,目前我们已经在tool内进行优化和限制。
  • 输出的代码有时候需要二次润色优化
  • 命名还不够拟人化

后续会看看怎么结合模型能力优化,欢迎各位大佬试用,如果在使用中有什么问题或者建议,欢迎提issues。

160 Likes

感谢佬友

1 Like

厉害 :+1:,厉害 :+1:,感谢佬友 :folded_hands:

1 Like

感谢佬友~~

这太猛了

太可惜了,我们公司用的蓝湖 :joy:

希望大佬开源

前端同学的福音啊 :+1:

:joy:如果蓝湖有开放接口,可以看看能不能接一下,我们评估一下看是否放到roadmap

还原度这么高啊 :open_mouth:

感谢大佬!!

mcp server 是开源的

不过论坛里的佬 都应该不会画原型 Figma上好多好看的原型都要付费来着 要么是给一张图片

大佬帮我看下,我在cursor里面的配置,看上去没啥问题吧,就是连接不上

我知道问题了,我让cursor自己配置的。。。@f2c/mcp 这里不对

点赞 大佬厉害!

哈哈,蓝湖估计不会开放 :rofl:

对比了一下,比o3和o4mini-high效果都要好


这是o3

这是o4mini-high
果然特定任务还是得针对性微调
就是有点好奇,他这个头像是咋做到一模一样的呀 :smiley:

1 Like

太强了,我就说上L站能学到真本事,果断mark

1 Like

太强了 佬