Happy slice of mcp pizzaMCP.pizza

f2c-mcp

MCP.Pizza Chef: f2c-ai

F2C reads a design straight from a Figma layer link and returns matching HTML and CSS, React components, CSS Modules or Tailwind, downloading the pictures used in the design into local files along the way. It is built for coding apps such as Cursor and Trae. Figma's own usage limits can get in the way, and when they do the project points you to its companion Figma plugin instead. The code has not been updated since November 2025.

Coding
Images/Design

Use This MCP server To

Turn a Figma screen into HTML and CSS Generate a React component from a design my designer sent Download every image used in a design Rebuild a mockup as a Tailwind page Check the exact spacing and colors a design uses

README

F2C MCP Server

MCP Server smithery badge npm version npm downloads github node

Due to Figma REST API rate limits, if you are affected, please switch to @f2c/mcp-plugin for normal operation.

English | 简体中文

A Model Context Protocol server for Figma Design to Code using F2C.

f2c-mcp-server MCP server

Features

f2c

  • 🎨 Pixel-Perfect HTML/CSS：F2C converts Figma designs to pixel-perfect HTML/CSS with precision.
  • ⚛️ Multi-Framework Support：F2C generates React, CSS Modules, and Tailwind CSS code for fast development.
  • 🧠 Figma Design Context：F2C integrates design context, ensuring compatibility with AI tools like Cursor.
  • 🔗 Figma File URL Parsing：F2C converts design nodes via Figma URLs, streamlining workflows.
  • 🖼️ Remote Image Localization：F2C automates downloading Figma images to local assets for efficiency.

How it works

f2c-mcp FAQ

Is this project still being updated?
Not lately — the code has not changed since November 2025. It still works, and the team points affected users to its own Figma plugin version.
Which apps does it work in?
Coding apps that support MCP servers, such as Cursor and Trae; the project also suggests Comate.
Do I need a Figma account?
Yes. You need access to the file, then right-click a layer in Figma and copy its link.
Can I use this to turn a designer's mockup into a real page?
Yes — paste the layer link and ask for HTML, React, CSS Modules, or Tailwind.
Why does it sometimes stop responding?
Figma limits how often a design can be read. The project's companion Figma plugin avoids that limit.
How hard is setup?
Easy — it installs through Smithery or a short config snippet, and there is a hosted address you can point at.