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

1,395 阅读2分钟

介绍

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

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

bannerv3.png

使用展示

获取Figma的Personal access tokens

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

image|169x93

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

image|643x323

配置 MCP

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

image|690x87

使用

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

image|677x152

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

image|561x88

测试的设计稿大致长这样

image|690x474

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

Figma-Context-MCP 实现 1|527x357

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

image|532x343

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

image|250x207

总结

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

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

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