Feuse-mcp: Front-end Dev Tool for Figma-to-code, API Automation & Resource Mgmt

Feuse MCP

A front - end development toolset that provides practical functions such as Figma design - to - code conversion, API automation, and resource management to optimize the development process.

Developer tools Image and video processing #Design - to - Code #API Automation #Resource Management #Development Optimization .TypeScript

rating : 2.5 points

downloads : 1

update time : 2025-07-23

What is the Model Context Protocol (MCP) Server?

The MCP Server is a toolset for front - end developers, used for automated API integration, conversion of Figma designs to code, and optimization of the development process. It supports functions such as design analysis with Figma, API documentation parsing, asset management, and quality control.

How to use the Model Context Protocol (MCP) Server?

By configuring the MCP client and setting the Figma API key, you can use various tools for design conversion, API automation, and project management. Simply use simple commands to start the functions.

Applicable Scenarios

Suitable for front - end teams that need to quickly convert Figma designs into code, automatically process API documentation, manage design resources, and optimize the development process.

Main Features

Figma Design ConversionSupports automatic generation of front - end code from Figma files and extraction of design resources (such as SVG and PNG).

API AutomationAutomatically generates TypeScript interfaces, constants, and mock data based on API documentation to improve development efficiency.

Design Resource ManagementAutomatically downloads and organizes image resources in Figma, including SVG and PNG formats.

Similarity ComparisonCompares the generated code pages with the original Figma prototypes to ensure design consistency.

Project Standard GenerationGenerates global rule files for Copilot/Cursor based on the project structure to unify development specifications.

Color Variable ExtractionExtracts color variables from Figma and converts them into CSS or design token formats.

Advantages and Limitations

Advantages

Improve the efficiency of design - to - code conversion

Reduce the workload of manually writing API interfaces and Mock data

Unify project development specifications and improve collaboration efficiency

Support integration of multiple design and development tools

Limitations

Depends on the Figma API and requires a valid API key

Some functions may require additional configuration and learning costs

Support for complex design structures may be limited

How to Use

Get the Figma API Key

Visit [Figma Developer Settings](https://www.figma.com/developers/api#authentication) to create and obtain the API key.

Configure the MCP Client

Add the Figma API key to the MCP client configuration file and specify the location of the feuse - mcp tool.

Run the Tool

Select the appropriate tool according to your needs, such as extracting SVG resources from Figma files or generating API interfaces.

Usage Examples

Design - to - Code ConversionConvert UI designs in Figma files into React component code and extract relevant SVG icons at the same time.

API Interface AutomationGenerate TypeScript interfaces and Mock data based on the provided API documentation to speed up front - end development.

Frequently Asked Questions

What dependencies does the MCP Server require?

How to update the MCP tool?

Which design tools does MCP support?

Related Resources

feuse - mcp Official Documentation

Provides detailed usage instructions and API documentation for feuse - mcp.

Figma - Context - MCP

A Figma design analysis tool for MCP integration.

fastmcp Framework

An MCP rapid development framework for building MCP services.

🚀 Frontend Useful MCP (Model Context Protocol) Tools

Essential utilities for web developers to automate API integration, Figma design-to-code conversion, and development workflow optimization.

English | 中文

🚀 Quick Start

Configuration

Add the following to your MCP client configuration: Get your Figma API key from Figma Developer Settings.

{
  "feuse-mcp": {
    "command": "npx",
    "args": ["feuse-mcp@latest"],
    "env": {
      "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
    }
  }
}

✨ Features

🎨 Figma Integration: Built-in integration with Figma-Context-MCP for seamless Figma design-to-code conversion and automatic asset extraction.
📝 API Automation: Generate TypeScript interface types, API URL constants, mock data, and request functions from API documentation.
🖼️ Asset Management: Download SVG and PNG images from Figma files with an organized file structure.
🎯 Similarity Comparison: Compare generated code pages with original Figma prototypes for accuracy validation.
🛠️ Project Standards: Generate global specification guidance files for Copilot & Cursor based on the current project architecture.
🔧 Color Variables: Extract and convert Figma color variables to CSS/design tokens in specified standards (UnoCSS, TailwindCSS, or custom structures).

🔧 Available Toolset (Continuously Updated)

Tool Name	Category	Description	Input Parameters	Notes
Figma-To-Code	Figma Integration	Generate frontend code based on Figma styling info with PNG assistance	`fileKey`, `nodeId`(optional)	Auto-adapts to local configs (ESLint etc), supports responsive layouts
extract-svg-assets	Asset Analysis	Analyze Figma DSL structure and auto-extract SVG resources	`fileKey`, `nodeId`(optional)	Intelligent Figma file analysis, batch extraction of SVG icons/vectors
extract-color-vars	Design Tokens	Extract color variables from Figma DSL to CSS framework configs	`fileKey`, `nodeId`(optional)	Supports UnoCSS, TailwindCSS, or custom file format output
similarity-figma	Quality Control	Compare Figma prototypes with project page screenshots	`url`, `fileKey`, `nodeId`(optional)	Visual comparison with intelligent similarity scoring and detailed analysis
api-automation	Development Tools	Parse backend API docs and generate types, constants, mock data	`apiDocs`	Supports multiple API doc formats, generates a complete frontend API toolkit
initialize-project-standard	Project Management	Analyze project structure and generate Copilot/Cursor global rules	No parameters	Auto-generates intelligent coding assistant project context and standards
Download-Figma-Images	Asset Management	Batch download SVG and PNG image resources from Figma by node ID	`fileKey`, `nodes[]`, `localPath`	Supports imageRef handling, auto-creates directory structure (low-level tool for other MCPs)
download-svg-assets	Asset Management	Download SVG vector resources from Figma by image/icon node ID	`fileKey`, `nodes[]`, `localPath`	SVG format only, supports complex node structures (low-level tool for other MCPs)

🔧 For Code Contributors

Setup

# Clone the repository
git clone https://github.com/your-username/feuse-mcp.git
cd feuse-mcp

# Install dependencies
pnpm install

# Build
pnpm build

Add the following to your MCP client configuration: Get your Figma API key from Figma Developer Settings.

{
  "feuse-mcp": {
    "command": "npx",
    // Configure path
    "args": ["YOUR/PATH/TO/dist/main.cjs"],
    "env": {
      "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
    }
  }
}

📚 Documentation

feuse-mcp Official Documentation

📁 Project Structure

feuse-mcp/
├── src/
│   ├── main.ts              # Main entry point
│   ├── services/            # Core services
│   │   ├── figma/          # Figma integration
│   │   ├── similarity/     # Visual comparison
│   │   └── utility/        # Utility toolset
│   ├── types/              # TypeScript definitions
│   └── utils/              # Helper functions
├── docs/                   # Documentation
└── dist/                   # Built files

🤝 Contributing

Contributions are welcome! Feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.