Feuse Mcp

What is Feuse Mcp?

Feuse Mcp is a Model Context Protocol server that bridges Figma designs and frontend code, offering tools for design-to-code conversion, API automation, asset management, and project standardization. It is intended for developers and teams looking to streamline the workflow from Figma prototypes to production-ready code.

How to use Feuse Mcp?

Feuse Mcp provides a set of tools accessible through the Model Context Protocol, enabling operations like Figma-to-code generation, SVG extraction, color variable conversion, and API documentation parsing. Users integrate these tools into their development environment via MCP configuration, with detailed setup guidance available in the official documentation.

Key features of Feuse Mcp

• 🎨 Figma Integration: Seamless Figma design-to-code conversion and automatic asset extraction
• 📝 API Automation: Generate TypeScript interface types, API URL constants, mock data, and request functions
• 🖼️ Asset Management: Download SVG and PNG images from Figma files with 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 project architecture
• 🔧 Color Variables: Extract and convert Figma color variables to CSS/design tokens in UnoCSS, TailwindCSS, or custom standards

Use cases of Feuse Mcp

• Convert Figma design layers into frontend code with responsive layout support and local config adaptation
• Automatically extract SVG icons and vector assets from Figma files for reuse in development
• Parse backend API documentation to generate TypeScript types, constants, mock data, and request functions
• Compare final project pages against original Figma prototypes using visual similarity scoring
• Generate Copilot and Cursor global rule files that align the coding assistant with your project's architecture

FAQ from Feuse Mcp

What tools does Feuse Mcp provide?

Feuse Mcp includes eight tools: Figma-To-Code, extract-svg-assets, extract-color-vars, similarity-figma, api-automation, initialize-project-standard, Download-Figma-Images, and download-svg-assets, each serving a specific function from asset extraction to code generation.

Does Feuse Mcp support TailwindCSS or UnoCSS?

Yes, the extract-color-vars tool can output color variables in standards such as UnoCSS, TailwindCSS, or custom structures.

How does Feuse Mcp integrate with Figma?

Feuse Mcp uses the Figma-Context-MCP library to access Figma file data, enabling design-to-code conversion, SVG/PNG asset extraction, and visual comparison.

Where can I find detailed documentation?

The full documentation is available at the Feuse Mcp official site: https://panzer-jack.github.io/feuse-mcp/en.

What are the input requirements for the Figma tools?

All Figma-related tools require a fileKey parameter, and some accept an optional nodeId. The api-automation tool requires an apiDocs parameter. No authentication or transport details are specified in the README.