Skip to main content
Glama

feuse-mcp

by Panzer-Jack

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

  1. Follow the existing code style

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

Deploy Server
A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

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.

  1. ✨ Features
    1. 🔧 Available Toolset (Continuously Updated)
      1. 🚀 Quick Start
        1. Configuration
      2. 🔧 For Code Contributors
        1. Setup
      3. 📁 Project Structure
        1. 🤝 Contributing
          1. Development Guidelines
        2. 📝 License
          1. 🙏 Acknowledgments

            Related MCP Servers

            • -
              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 -
            • -
              security
              F
              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 -
              107
              3
            • A
              security
              F
              license
              A
              quality
              An MCP server that provides web development tools including taking screenshots of screens, enabling AI agents to capture and analyze visual content during development.
              Last updated -
              2
              35
              10
            • A
              security
              A
              license
              A
              quality
              An MCP server providing web development tools such as screen capturing capabilities that let AI agents take and work with screenshots of the user's screen.
              Last updated -
              2
              35
              15
              MIT License
              • Apple

            View all related MCP servers

            MCP directory API

            We provide all the information about MCP servers via our MCP API.

            curl -X GET 'https://glama.ai/api/mcp/v1/servers/Panzer-Jack/feuse-mcp'

            If you have feedback or need assistance with the MCP directory API, please join our Discord server