开源F2C MCP Server高精度还原Figma设计稿

背景

在 AI 辅助编程工具快速发展的背景下，设计师与开发者之间的协作效率一直是关注焦点。Figma 作为主流设计工具，其设计稿节点信息可以通过 MCP（Model Context Protocol）接口直接传递给 AI 编程客户端（如 Cursor、Trae、Dify 等），从而实现从设计到代码的自动转换。然而，现有的 Figma MCP 方案往往只是将设计稿原始节点数据丢给 AI 模型，由模型自行解析并生成代码，导致输出结果不稳定、还原度参差不齐。为此，社区开发者基于 F2C（Figma to Code）服务实现了一个专门的 MCP Server，旨在提高代码还原的精度和一致性。

核心内容

F2C（figma to code）MCP Server 是一个基于 F2C 实现的 MCP 服务端，能够获取 Figma 设计稿节点信息，并将其转换为高还原度的 HTML、React 以及其他前端代码。该 Server 支持 Cursor、Trae、Dify 等主流 AI 编程客户端。

工作原理：首先将 Figma 设计稿节点信息传递给 F2C 服务，由 F2C 生成高还原度的代码，再将这份代码返回给 AI 客户端，而不是直接把原始节点数据丢给模型。这种方式相比直接使用 Figma MCP 方案，具有更高的稳定性和还原度。

使用步骤：

1. 获取 Figma Personal Access Tokens：在 Figma App 中点击左上角个人菜单 → 选择 Security → 点击 Generate new token 生成。
2. 配置 MCP：以 Cursor 为例，根据官方文档选择合适的方式配置好 MCP Server。
3. 使用：在聊天框输入需求（例如某页面或组件的还原指令），Agent 会自动调用 tool 并返回代码。

效果对比：

• 测试中，使用流行的 Figma MCP 方案，在同一条 prompt 下，生成的代码还原度一般。
• 使用基于 F2C 的 MCP Server，生成的代码高度还原设计稿，同时设计稿相关图片也会下载到本地。

已知问题与后续计划：

• 模型有时会“给自己加戏”：即使返回的代码已高度还原，模型仍可能结合 Figma 信息自行“优化”，反而降低效果。目前已在 tool 内进行优化和限制。
• 输出的代码有时需要二次润色优化。
• 命名还不够拟人化。
• 后续会结合模型能力进一步优化，欢迎用户试用并提交 issues。

关键要点

• 核心优势：通过 F2C 服务预处理设计稿节点信息，生成高还原度代码再返回给客户端，避免 AI 模型直接处理原始节点数据带来的不稳定性。
• 支持的客户端：Cursor、Trae、Dify 等支持 MCP 的 AI 工具。
• 输出格式：HTML、React 等前端代码，并支持扩展更多输出类型。
• 配置方式：需先获取 Figma Personal Access Token，再按文档在客户端中配置 MCP Server。
• 使用体验：Agent 自动调用 tool，开发者只需描述需求即可获得代码。
• 现有局限：模型可能自动修改已还原的代码；输出代码需二次润色；命名风格不够自然。
• 改进方向：在 tool 内增加限制避免模型加戏，探索结合模型能力优化代码质量和命名拟人化。

意义与影响

F2C MCP Server 的推出，为 Figma 设计稿到前端代码的自动化流程提供了一个更稳定、还原度更高的选择。它对 AI 辅助编程工具生态具有以下意义：

• 提升设计稿还原效率：减少设计师与开发者之间反复沟通的成本，让 AI 工具输出的代码更贴近设计意图。
• 推动 MCP 协议在专业场景的落地：展示了如何通过服务端预处理来弥补通用 AI 模型对特定领域理解不足的缺陷，为其他类似工具（如设计系统、组件库）提供了可借鉴的模式。
• 促进 AI 编程工具的实用化：当前许多 AI 编程工具在复杂设计稿还原上表现欠佳，F2C 方案通过「先还原再交付」的思路，降低了模型幻觉和不确定性带来的风险。
• 社区协作的良性循环：项目在 LINUX DO 社区公开讨论并收集反馈，用户可试用、提 issues，这种开源共创模式有助于快速迭代和改进，最终使整个开发者群体受益。

尽管目前仍存在模型插手修改、命名不够拟人化等问题，但项目团队已经明确后续优化方向，并开放了源码和互动渠道。随着模型能力和工具链的进一步整合，F2C MCP Server 有望成为 Figma 生态中连接设计与代码的关键桥梁。