chouwa 发表于 2025-6-24 14:50:41

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

<h2>介绍</h2>
<p>F2C（figma to code）MCP Server [<strong>https://github.com/f2c-ai/f2c-mcp</strong>]是一个基于 F2C [<strong>https://f2c.yy.com/index.html</strong>]实现的 MCP Server。它能够获取 Figma 设计稿节点信息，将其转换为高还原度的HTML、React甚至其它更多代码。支持Cursor、Trae、Dify等。</p>
<p>相较于现在比较流行的 Trae 内置 Figma MCP [<strong>https://github.com/GLips/Figma-Context-MCP</strong>]，优势在于会将设计稿信息先喂给 F2C 进行代码实现，在通过返回已经具有高还原度的代码给 clients。相较于直接将 Figma 设计稿节点信息丢给 clients，具有更高的稳定性和还原度。</p>
<h1>使用展示</h1>
<h2>获取Figma的Personal access tokens</h2>
<p>我们打开Figma App，点击左上角个人菜单</p>
<p><img src="data/attachment/forum/202506/24/150858zjtb1rx9ttijrtxk.webp" alt="4e620886977129bd0e7f56eeada3dad8f6825e0d.webp" title="4e620886977129bd0e7f56eeada3dad8f6825e0d.webp" /></p>
<p>随后选择 <code>Security</code>，点击 <code>Generate new token</code>生成一个新的 Personal access tokens</p>
<p><img src="data/attachment/forum/202506/24/150924myg14p3zyy4qzyrr.webp" alt="c0bf33a68a08977f110b9d04a0b69961b058e47d.webp" title="c0bf33a68a08977f110b9d04a0b69961b058e47d.webp" /></p>
<h2>配置 MCP</h2>
<p>这里我拿cursor举例，根据 文档 选择自己想要的方式配置好MCP Serve</p>
<p><img src="data/attachment/forum/202506/24/150948a1haytn9huwntdtz.webp" alt="d24a95fcd023e5b0448da09182f7fdaf69fee92f.webp" title="d24a95fcd023e5b0448da09182f7fdaf69fee92f.webp" /></p>
<p>点击运行我们可以看到 agent 会调用 tool</p>
<p><img src="data/attachment/forum/202506/24/151010xz33rsoac5rur5yc.png" alt="c61dbdb4dcc4617ca50823ec0f10e1ea2a03c4a8.png" title="c61dbdb4dcc4617ca50823ec0f10e1ea2a03c4a8.png" /></p>
<p>测试的设计稿大致长这样</p>
<p>先来看看比较热门的 Figma MCP 实现的样子（都是同样的prompt）<img src="https://images.bigseek.com//forum/202506/24/153207kmdkwxj8b7qkqqjx.jpeg" alt="5dba30df0c6b8fe207a753006618b3e68c791148.jpeg" title="5dba30df0c6b8fe207a753006618b3e68c791148.jpeg" /></p>
<p>先来看看比较热门的 Figma MCP 实现的样子（都是同样的prompt）</p>
<p><img src="https://images.bigseek.com//forum/202506/24/153235pqw997ie2h4d9n7t.jpeg" alt="8fde3658d6bf434ece79d262ec687b3d50aa5de0.jpeg" title="8fde3658d6bf434ece79d262ec687b3d50aa5de0.jpeg" /></p>
<p>再看看基于F2C的MCP Server的效果<br />
<img src="https://images.bigseek.com//forum/202506/24/153249qosp2ogfksk1rkks.webp" alt="e7824887451b4fad31d462065ea25cdde08cdc4c.webp" title="e7824887451b4fad31d462065ea25cdde08cdc4c.webp" /></p>
<p>同时代码相关的图片也会下载到本地<br />
<img src="https://images.bigseek.com//forum/202506/24/153301gwq7aob44g8cxx8a.webp" alt="2157cf4c8d3274eaf36e15c61681300622485752.webp" title="2157cf4c8d3274eaf36e15c61681300622485752.webp" /></p>
<h1>总结</h1>
<p>还有一些实战的视频，由于限制没办法公开，后续将会更新到 Github上。当然目前也收集到一些问题，比如：</p>
<ul>
<li>模型会给自己加戏，我们返回的代码已经是高度还原的了，结合Figma信息模型会 <em>自行优化</em>，有时候效果会适得其反，目前我们已经在tool内进行优化和限制。</li>
<li>输出的代码有时候需要二次润色优化</li>
<li>命名还不够拟人化</li>
</ul>
<p>后续会看看怎么结合模型能力优化，欢迎各位大佬试用，如果在使用中有什么问题或者建议，可以在github上题issues，作者看到了会参考采纳的。</p>

mingren119 发表于 2025-6-24 15:54:56

太可惜了，我们公司用的蓝湖 https://linux.do/images/emoji/twemoji/joy.png?v=14

fcsyzh03 发表于 2025-6-24 15:55:09

前端同学的福音啊 https://linux.do/images/emoji/twemoji/+1.png?v=14

chaoji 发表于 2025-6-24 15:55:21

还原度这么高啊 https://linux.do/images/emoji/twemoji/open_mouth.png?v=14

lifesinger 发表于 2025-6-24 15:56:19

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

这是o3

这是o4mini-high
果然特定任务还是得针对性微调
就是有点好奇，他这个头像是咋做到一模一样的呀 https://linux.do/images/emoji/twemoji/smiley.png?v=14

davie67 发表于 2025-6-24 15:56:32

lifesinger 发表于 2025-6-24 15:56
对比了一下，比o3和o4mini-high效果都要好

这是o3


因为mcp把图像资源下载下来了

e999 发表于 2025-8-24 11:00:03

看起来挺实用的

冷白 发表于 3 天前

这工具看着挺厉害
页: [1]
查看完整版本: 一个MCP帮你高精度还原代码