广告合作
MCP.so
登录

F2C MCP Server

@f2c-ai

代码仓库主页

基本信息

分类

其他

许可证

MIT

传输方式

stdio

作者

f2c-ai

关于 F2C MCP Server

F2C MCP Server

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

F2C MCP Server 配置

使用下面的配置,将此服务器添加到你的 MCP 客户端。

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

F2C MCP Server 工具

2

Generate UI code for a given node or the currently selected node in the Figma desktop app. Use the nodeId parameter to specify a node id. If no node id is provided, the currently selected node will be used. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2.

Generate an image for a given node or the currently selected node in the Figma desktop app. Use the nodeId parameter to specify a node id. If no node id is provided, the currently selected node will be used. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2. Also export Figma design images for visual verification and design fidelity validation. Essential for comparing generated code output against original designs, ensuring pixel-perfect implementation and catching visual discrepancies during the design-to-code process.

概览

What is F2C MCP Server?

A Model Context Protocol server that converts Figma designs to code using the F2C engine. It enables AI-powered coding tools (like Cursor) to access Figma design context, fetch node data, download images, and generate pixel-perfect HTML/CSS, React, or Tailwind CSS code.

How to use F2C MCP Server?

Configure the server in an MCP-supported IDE (e.g., Cursor, Trae, or Comate AI IDE). In the IDE chat, paste a Figma node link (copied from Figma’s layer panel) and enter your requirements such as fetching node data, downloading images, or converting to code.

Key features of F2C MCP Server

  • Pixel-perfect HTML/CSS generation from Figma designs
  • Multi‑framework support (React, CSS Modules, Tailwind CSS)
  • Integrates Figma design context for AI tool compatibility
  • Converts design nodes via Figma file URLs
  • Automates downloading Figma images to local assets

Use cases of F2C MCP Server

  • Fetching Figma node data and metadata in an AI coding assistant
  • Converting Figma design layers into production‑ready code
  • Downloading and localizing remote images from Figma
  • Streamlining design‑to‑code workflows in IDEs like Cursor or Trae

常见问题

1

What does F2C MCP Server do?

It is a Model Context Protocol server that converts Figma designs into code (HTML/CSS, React, Tailwind CSS) and provides design context to AI coding tools.

2

Does this server have any rate limits?

Yes. Due to Figma REST API rate limits, users may be affected. If so, the README recommends switching to `@f2c/mcp-plugin` for normal operation.

3

Where does the data (downloaded images, etc.) live?

The server automates downloading Figma images to local assets, so data is stored locally on your machine.

4

What dependencies or runtime does it require?

The server is distributed as an npm package (`@f2c/mcp`) and runs on Node.js (version indicated by the badge).

5

How does authentication work for the Figma API?

The README does not detail authentication; it states the server uses Figma REST API and can be configured in an MCP-supported IDE, implying the Figma API key is handled via the IDE or environment configuration.

评论

其他 分类下的更多 MCP 服务器

P

PickFu MCP

PickFu MCP is a Model Context Protocol (MCP) server that connects AI assistants, developers, marketers, product managers, and AI agents to PickFu's consumer research platform. It enables users to create surveys, conduct

Awesome Mlops

visenger

A curated list of references for MLOps

14.0K

Health by Dr Brad

Dr Brad Stanfield

Health by Dr Brad works out a health plan from your own results: which screening is due at your age, and evidence-based suggestions, each with the reason and the published guideline or study behind it. Your record is one

Volley.sh

Volley

A good sequence diagram can solve almost any communication problem in engineering. Volley lets your agent write them as plain text, with the real request and response payloads on every arrow. It checks its own syntax wi

Maestro

mobile-dev-inc

Painless E2E Automation for Mobile and Web

14.8K
广告合作