Feuse MCP - MCP Servers

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

MCP Servers