这是一个创建于 210 天前的主题，其中的信息可能已经有所发展或是发生改变。
介绍
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 支持一下，感谢。
 | 1 2MO 210 天前 哇，是 YY |
 | 2 zoharSoul 210 天前  2 其实想要个画 ai ui 设计稿的 写代码的已经太多了 |
 | 3 needpp 210 天前 牛逼 |
 | 4 xialaoban 210 天前 很好，只差一个设计师了！ |
 | 5 KyrieChen OP |
 | 6 jtacm 210 天前 赞！ |
 | 7 xkongstore 210 天前 @KyrieChen 是否会集成 cursor-talk-to-figma-mcp 功能，利于个人开发先出设计再出代码 |
| 8 KyrieChen OP @xkongstore 可以的，这部分已经在做了 |
 | 9 blueed 210 天前 看起来很赞，对于初次生成代码看起来确实挺好用的。 想咨询下老哥，已经在项目里的代码怎么继续迭代呢？比如已经封装成组件的模块，设计改了一些设计，用这个流程怎么持续迭代已有代码呢？ |
 | 11 zy0829 209 天前 有没有蓝湖的 |
Select Language