技术文档摘要

F2C MCP 服务器

English | 简体中文

使用 F2C 将 Figma 设计转换为代码的模型上下文协议服务器。

<a href="https://glama.ai/mcp/servers/@f2c-ai/f2c-mcp"> <img width="380" height="200" src="https://gips1.baidu.com/it/u=1714621375,1565752985&fm=3081&app=3081&f=PNG?w=760&h=400" alt="f2c-mcp-server MCP 服务器" /> </a>

功能

<img alt="f2c" src="https://gips2.baidu.com/it/u=3346235826,2769783205&fm=3081&app=3081&f=PNG?w=980&h=500" />

• 🎨 像素完美的 HTML/CSS：F2C 将 Figma 设计转换为像素完美的 HTML/CSS。
• ⚛️ 多框架支持：F2C 生成 React、CSS 模块和 Tailwind CSS 代码以加快开发速度。
• 🧠 Figma 设计上下文：F2C 集成设计上下文，确保与 Cursor 等 AI 工具兼容。
• 🔗 Figma 文件 URL 解析：F2C 通过 Figma URL 转换设计节点，简化工作流程。
• 🖼️ 远程图像本地化：F2C 自动下载 Figma 图像到本地资源以提高效率。

工作原理

1. 在支持 MCP 的 IDE（例如 Cursor、Trae）中配置服务器。

推荐使用 Comate AI IDE

2. 在 IDE 中打开聊天（例如在 Cursor 中的代理模式）。
3. 粘贴一个指向 Figma 节点的链接（右键点击 Figma 层面板中的任何节点复制它）。
4. 在聊天中输入您的需求，如获取节点数据、下载图像、转换为代码等。

配置和开发

参见 配置和开发

数据隐私声明

该项目集成的日志工具仅用于基本使用统计和错误日志报告。不收集任何敏感信息或用户数据。所有报告的数据仅用于改进产品质量和用户体验。

常见问题解答

参见 常见问题解答

致谢

感谢：

• Framelink Figma MCP 服务器 给 Cursor 和其他 AI 驱动的编码工具访问您的 Figma 文件的能力。
• Cursor 与 Figma MCP 对话 允许 Cursor 与 Figma 通信，读取设计并进行编程修改。
• Figma MCP 服务器 该服务器提供了直接通过 ModelContextProtocol 查看、评论和分析 Figma 设计的工具。