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 | δΈζ
feuse-mcp Official Documentation
- π¨ 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)
| 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) |
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"
}
}
}# Clone the repository
git clone https://github.com/your-username/feuse-mcp.git
cd feuse-mcp
# Install dependencies
pnpm install
# Build
pnpm buildAdd 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"
}
}
}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
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.
- Follow the existing code style
- Update documentation as needed
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 ! ! !
- Figma-Context-MCP for providing Figma design analysis capabilities
- fastmcp for providing MCP rapid development framework
- All contributors and users of this project