mcpField
F
F2C MCP Server

F2C MCP Server

本地服务
f2c.yy.com媒体与设计41048 周前更新
代码仓库访问官网

关于 F2C MCP Server

F2C MCP Server 是基于 F2C 的 MCP 服务，用于将 Figma 设计转换为代码。它面向需要在 AI 编码工具中直接获取设计数据的开发者，支持像素级 HTML/CSS 输出。

主要功能

  1. 01像素级 HTML/CSS 生成
  2. 02支持 React、CSS Modules 与 Tailwind CSS
  3. 03通过 Figma 链接解析设计节点
  4. 04获取设计上下文供 AI 工具使用
  5. 05远程图片下载并本地化

适用场景

  1. 01在 Cursor、Trae 等 IDE 中将 Figma 节点转换为前端代码
  2. 02批量下载设计稿中的图片资源到本地
  3. 03为 AI 编码工具提供 Figma 设计上下文

MCP 相关

该项目是一个 MCP 服务，向 MCP 客户端提供获取 Figma 节点数据、下载图片以及将设计转换为代码的能力。

#f2c#mcp#figma#html#css#ai-coding-assistant#d2c

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "f2c": {
      "command": "npx",
      "args": [
        "-y",
        "@f2c/mcp"
      ],
      "env": {
        "personalToken": "<personalToken>"
      }
    }
  }
}
启动命令npx -y @f2c/mcp
需要配置的环境变量
personalToken密钥

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npm@f2c/mcp

工具

2

收录的工具列表 · 更新于 3 周前

参数类型必填说明
fileKeystring是Figma 文件标识符，位于文件 URL 中（例如，https://www.figma.com/file/XXXXXXXXXXXX/）。提取 XXXXXXXXXXXX 部分作为 fileKey。
idsstring是逗号分隔的 Figma 节点 ID 列表，用于转换。要获取节点 ID，请在 Figma 中选择元素，右键单击并选择 "Copy/Paste as" → "Copy ID"。
personalTokenstring否用于 API 身份验证的 Figma 个人访问令牌。调用该工具时无需提供这些参数。
localPathstring否用于存储资源（例如图像）和代码的绝对路径。如果目录不存在，则会创建。路径必须遵循操作系统特定的格式，且无需对特殊字符进行转义。设置此路径后，所有与代码相关的静态资源都会存储在此目录中，而其他资源（例如图像）会保存到此路径下名为 assets 的子目录中。
imgFormatenum否图像资源的导出格式："png" 表示无损质量，"jpg" 表示压缩文件，"svg" 表示矢量图形。png | jpg | svg
scaleSizenumber否图像导出缩放系数（1-4）。数值越大，质量越高，但文件也越大。

详细介绍

F2C MCP 服务

MCP 服务 smithery 徽章 npm 版本 npm 下载量 github node

由于 Figma REST API 的速率限制，如果您受到影响，请切换到 @f2c/mcp-plugin 以恢复正常运行。

English | 简体中文

一个用于通过 F2C 将 Figma 设计转换为代码的 Model Context Protocol 服务。

f2c-mcp-server MCP 服务

功能

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

工作原理

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

建议使用 Comate AI IDE

  1. 在 IDE 中打开聊天（例如 Cursor 中的 Agent 模式）。
  2. 粘贴 Figma 节点链接（在 Figma 图层面板中右键点击任意节点即可复制）。
  3. 在聊天中输入您的需求，例如获取节点数据、下载图片、转换为代码等。

配置与开发

请参阅配置与开发

数据隐私声明

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

常见问题

请参阅常见问题

致谢

感谢：

  • Framelink Figma MCP Server 通过此 Model Context Protocol 服务，让 Cursor 和其他 AI 编码工具能够访问您的 Figma 文件。
  • Cursor Talk to Figma MCP 让 Cursor 能够与 Figma 通信，以读取设计并通过编程方式修改设计。
  • Figma MCP Server 此服务提供了可直接通过 ModelContextProtocol 查看、评论和分析 Figma 设计的工具。

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。