We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/f2c-ai/f2c-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
# F2C MCP Server
[](https://smithery.ai/server/@f2c-ai/f2c-mcp)
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![github][github-src]][github-href]
[![node][node-src]][node-href]
[npm-version-src]: https://img.shields.io/npm/v/@f2c/mcp?style=flat&colorA=18181B&colorB=F0DB4F
[npm-version-href]: https://npmjs.com/package/@f2c/mcp
[npm-downloads-src]: https://img.shields.io/npm/dm/@f2c/mcp?style=flat&colorA=18181B&colorB=F0DB4F
[npm-downloads-href]: https://npmjs.com/package/@f2c/mcp
[github-src]: https://img.shields.io/badge/github-@f2c/mcp-blue?style=flat&colorA=18181B&colorB=F0DB4F
[github-href]: https://github.com/f2c-ai/f2c-mcp
[node-src]: https://img.shields.io/node/v/@f2c/mcp?style=flat&colorA=18181B&colorB=F0DB4F
[node-href]: https://nodejs.org/en/about/previous-releases
[English](./README.md) | 简体中文
使用[F2C](https://f2c.yy.com/) 根据 Figma设计稿生成代码的模型上下文协议服务器。
<a href="https://glama.ai/mcp/servers/@f2c-ai/f2c-mcp">
<img width="380" height="200" src="https://glama.ai/mcp/servers/@f2c-ai/f2c-mcp/badge" alt="f2c-mcp-server MCP server" />
</a>
## 主要功能
<img alt="f2c" src="https://raw.githubusercontent.com/f2c-ai/f2c-mcp/main/docs/bannerv3.png" />
- 🎨 高保真 HTML/CSS 还原：F2C 实现像素级高保真 Figma 设计到 HTML/CSS 的精准转换。
- ⚛️ 多框架支持：F2C 生成 React、CSS Modules 和 Tailwind CSS 代码，加速前端开发。
- 🧠 Figma 设计上下文：F2C 提供设计上下文，与 AI 工具兼容，确保代码一致性。
- 🔗 Figma 文件 URL 解析：F2C 通过 URL 直接转换 Figma 设计节点，简化工作流程。
- 🖼️ 远程图片本地化：F2C 自动下载 Figma 远程图片到本地，优化开发体验。
## 使用说明
1. 在支持 MCP 的 IDE（如 Cursor、Trae） 中 [配置 Server](docs/zh/GettingStarted.md)。
2. 在 IDE 中打开聊天窗口（例如：Cursor中的代理模式）。
3. 粘贴 Figma 节点链接（在Figma的Layer面板选择你想要的节点右键即可复制）。
4. 在对话框中输入需求，例如：获取节点数据、下载图片、转换为代码等。
## 配置开发
[配置&开发](docs/zh/GettingStarted.md)
## 数据隐私说明
本项目集成的日志工具仅用于基础的使用统计和错误日志上报，不会收集任何敏感信息或用户数据。所有上报的数据仅用于改进产品质量和用户体验。
## 常见问题
[FAQ](docs/zh/FAQ.md)
## 致谢
感谢：
+ [Framelink Figma MCP Server](https://github.com/GLips/Figma-Context-MCP) 通过此模型上下文协议服务器，为Cursor和其他AI编程工具提供Figma文件访问能力。
+ [Cursor Talk to Figma MCP](https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp) 允许 Cursor 与 Figma 进行通信，以便读取设计内容并通过编程方式修改它们。这种集成使开发者能够以编程方式访问和操作 Figma 中的设计元素。
+ [Figma MCP Server](https://github.com/MatthewDailey/figma-mcp) 该服务器提供直接通过ModelContextProtocol查看、评论和分析Figma设计的工具。