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

[KyrieChen]

介绍

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 ，点击左上角个人菜单

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

配置 MCP

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

使用

在 chat 处输入你想要做的事情，例如（这里只是随便写的）

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

测试的设计稿大致长这样

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

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

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

总结

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

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

后续会看看有啥办法优化一下。欢迎各位大佬试用，如果在使用中有什么问题或者建议，欢迎提 issues 。喜欢的大佬们可以点个 star 支持一下，感谢。

[2MO]

哇，是 YY

[zoharSoul]

其实想要个画 ai ui 设计稿的
写代码的已经太多了

[needpp]

牛逼

[xialaoban]

很好，只差一个设计师了！

[KyrieChen]

@zoharSoul https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp 类似这种吗？

[jtacm]

赞！

[xkongstore]

@KyrieChen 是否会集成 cursor-talk-to-figma-mcp 功能，利于个人开发先出设计再出代码

[KyrieChen]

@xkongstore 可以的，这部分已经在做了

[blueed]

看起来很赞，对于初次生成代码看起来确实挺好用的。
想咨询下老哥，已经在项目里的代码怎么继续迭代呢？比如已经封装成组件的模块，设计改了一些设计，用这个流程怎么持续迭代已有代码呢？

[ckken]

@blueed llm.txt + user rule 进一步做重构，目前也在做这块调研，现要解决 context 传递问题

[zy0829]

有没有蓝湖的

[KyrieChen]

@zy0829 暂时没有