RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/Panzer-Jack/feuse-mcp below:

GitHub - Panzer-Jack/feuse-mcp: Frontend Useful MCP Tools

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)

🔧 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)

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 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"
    }
  }
}

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4