Feuse MCP Server for Figma Design-to-Code Conversion

feuse-mcp

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 | 中文

📖 Documentation

feuse-mcp Official Documentation

✨ 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 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 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 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)

🚀 Quick Start

Configuration

Add 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"
    }
  }
}

🔧 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 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"
    }
  }
}

📁 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.

Development Guidelines

Follow the existing code style
Update documentation as needed

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

If you have more interesting, fun, and cool ideas, please submit them in issues immediately ! ! !

🙏 Acknowledgments

Figma-Context-MCP for providing Figma design analysis capabilities
fastmcp for providing MCP rapid development framework
All contributors and users of this project