Feuse Mcp
About
Frontend Useful MCP Tools - Essential utilities for web developers to automate API integration and code generation
Details
- Author
- Panzer-Jack
- Downloads
- 297
- Categories
- Developer Tools, Frontend
Jump to
- 🎨 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
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
Feuse McpCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
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.
Figma-To-Code
基于获取的Figma明确的样式信息 并且在Png图片识别的辅助调整下（主要依据Figma明确的样式信息），并自动根据本地相关配置（如eslint等）来进行对应调整
Download-Figma-Images
Download SVG and PNG images used in a Figma file based on the IDs of image or icon nodes
similarity-figma
获取Figma原型图，请你结合项目源码并通过原型图与生成的代码页面的截图进行相似性比对
api-automation
理解后端接口文档自动生成接口类型、地址常量、mock数据、请求函数等
initialize-project-standard
针对用户指定项目进行分析，生成Copilot 和 cursor对应的全局项目规则
extract-color-vars
从Figma DSL文件中提取颜色变量，并输出在用户指定的文件中（比如unocss、tailwindcss或者自定义标准文件中等）
extract-svg-assets
分析figma SDL中的结构，并调用download-svg-assets工具下载Figma文件中使用的SVG资源
download-svg-assets
根据图像或图标节点的ID，仅下载Figma文件中使用的SVG资源
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"feuse mcp": {
"feuse-mcp": {
"command": "npx",
"args": [
"feuse-mcp@latest"
],
"env": {
"FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
}
}
}
}
}McpServers
{
"feuse-mcp": {
"command": "npx",
"args": [
"feuse-mcp@latest"
],
"env": {
"FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
}
}
}📖 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) |
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
