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

This server cannot be installed

security - not tested

license - permissive license

quality - not tested

An MCP server that provides utilities for web developers to automate API integration, convert Figma designs to code, and optimize development workflows with tools for asset management and code generation.

Related MCP Servers

Lodestar MCP Server
kanlanc
-
security
F
license
-
quality
This is an MCP server that facilitates building tools for interacting with various APIs and workflows, supporting Python-based development with potential for customizable prompts and user configurations.
Last updated -
Python
MCP Project Orchestrator
sparesparrow
-
security
A
license
-
quality
An MCP server that assists with the orchestration of new software projects by applying standardized templates and best practices in design patterns and software architecture.
Last updated -
3
Python
MIT License
Marvel MCP
DanWahlin
A
security
A
license
A
quality
MCP Server for the Marvel Developer API, enabling interaction with characters and comics data.
Last updated -
7
89
7
TypeScript
MIT License
Figma MCP Server
sichang824
-
security
-
license
-
quality
A server implementation that enables interaction with Figma API through Model Context Protocol (MCP), supporting plugin and widget development with WebSocket communication capabilities.
Last updated -
2
TypeScript

View all related MCP servers