F

F2C-MCP-Server

@f2c-ai/F2C-MCP-Server
Hosted
1 Stars 192 次浏览 f2c-ai 更新于 2026-08-23

将Figma设计节点转换为极高还原度的HTML/CSS代码,行业内领先

MCP 服务配置

复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用

{
  "mcpServers": {
    "f2c-mcp": {
      "args": [
        "-y",
        "@f2c/mcp"
      ],
      "command": "npx",
      "env": {
        "personalToken": ""
      }
    }
  }
}

该服务需要配置环境变量:personalToken

可用工具 (5 个)

该服务在 MCP 协议中暴露的工具,AI 可按需调用

figma_get_file_data 8 个参数 需填 2 项

Get detailed information about a Figma file

必填参数:fileKey、ids

figma_get_images 9 个参数 需填 2 项

Get images of Figma nodes

必填参数:fileKey、ids

figma_get_image_fills 2 个参数 需填 1 项

Get all image resources in the specified Figma file

必填参数:fileKey

figma_get_file_meta 2 个参数 需填 1 项

Get metadata information for a Figma file

必填参数:fileKey

figma_to_code 4 个参数 需填 2 项

Convert Figma designs into code. This tool extracts specified Figma nodes and transforms them into HTML, React with CSS Modules, or React with Tailwind CSS, facilitating automated design-to-code conversion.

必填参数:fileKey、ids

服务介绍

F2C MCP 服务器

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

English | 简体中文

一个用于将 Figma 设计转换为代码的 Model Context Protocol 服务器,使用 F2C

功能

  • 🎨 将 Figma 设计节点转换为高保真的 HTML/CSS 标记,处于行业领先地位
  • 📚 为像 Cursor 这样的 AI 编码工具提供 Figma 设计上下文
  • 🚀 支持带有 fileKey 和 nodeId 参数的 Figma 文件 URL

开始使用

请参阅 开始使用

常见问题

请参阅 常见问题

致谢

感谢:

  • Framelink Figma MCP 服务器 通过这个 Model Context Protocol 服务器让 Cursor 和其他基于 AI 的编码工具访问您的 Figma 文件。
  • Cursor Talk to Figma MCP 允许 Cursor 与 Figma 通信以读取设计并进行程序化修改。
  • Figma MCP 服务器 该服务器通过 ModelContextProtocol 提供查看、评论和分析 Figma 设计的工具。

相关 MCP 服务