关键词

Figma设计代码生成AI辅助编程前端开发

使用说明

F2C MCP Server 是一个 Model Context Protocol (MCP) 服务器实现，旨在帮助AI编码助手（如Cursor）直接访问Figma设计数据，并将其转换为可用的HTML/CSS代码。

项目简介

通过此MCP服务器，AI助手可以调用特定的功能（工具），获取Figma文件和节点的信息，从而更好地理解设计意图，甚至自动化地生成与设计对应的代码。它充当了AI与Figma设计工具之间的桥梁。

主要功能点

  • 提供Figma设计上下文: 允许AI助手获取Figma文件的结构和属性信息。
  • Figma节点转HTML/CSS: 提供一个工具，可以将指定的Figma设计节点导出为HTML和CSS代码。
  • 支持Figma URL: 可以直接使用标准的Figma文件或节点URL作为输入。
  • 标准通信协议: 使用JSON-RPC 2.0协议与兼容的AI客户端通信。

安装步骤

要使用F2C MCP Server，您需要先安装Node.js环境，然后按照以下步骤设置：

  1. 获取代码: 从GitHub克隆或下载仓库代码。
  2. 安装依赖: 在项目根目录运行命令 'npm install'。
  3. 配置Figma API密钥:
    • 访问您的Figma账号设置，生成一个Personal Access Token。
    • 在项目根目录创建一个名为 '.env' 的文件。
    • 在 '.env' 文件中添加您的Figma API密钥，格式如下： 
      FIGMA_API_KEY=您的个人访问令牌
    • 或者，您也可以在MCP客户端配置时，通过环境变量 'personalToken' 传递此密钥。

服务器配置（供MCP客户端使用）

此服务器通常不是独立运行的，而是由兼容MCP协议的AI客户端按需启动和管理。AI客户端需要以下配置信息来启动并连接到F2C MCP服务器：

  • 服务器名称: 'f2c-mcp'
  • 启动命令 (command): 用于执行服务器的可执行文件或脚本。通常为 'npx'。
  • 启动参数 (args): 传递给启动命令的参数。通常为 '["-y", "@f2c/mcp"]'，这会通过npx执行安装在本地或远端的 '@f2c/mcp' 包。
  • 环境变量 (env): 可以在此处设置敏感信息，例如 'personalToken'（对应您的Figma API密钥），以便服务器使用。例如：'{ "personalToken": "您的密钥" }'。

（注意：以上信息是供MCP客户端进行配置时使用的，您无需手动执行这些命令来“启动”服务器，客户端会处理这些细节。）

基本使用方法

一旦在您的AI客户端中配置并连接了F2C MCP Server，您就可以通过与客户端交互，让AI调用此服务器提供的功能。该服务器目前主要提供一个名为 'figma_to_html' 的工具。

AI助手可以通过客户端调用 'figma_to_html' 工具，并为其提供一个 'figmaUrl' 参数（即您想要转换的Figma文件或节点链接）。服务器将处理请求，使用您的API密钥从Figma获取数据，并返回转换后的HTML/CSS内容，AI助手可以将这些内容展示给您或用于代码生成。

例如，您可能可以在AI客户端中这样提示：“请将这个Figma链接 [您的Figma链接] 的设计转换为HTML代码。”，客户端会识别您的意图并调用F2C MCP Server的 'figma_to_html' 工具来完成任务。

信息

分类

开发者工具

访问项目