# Toolkit Introduction
feuse-mcp provides a complete set of frontend development tools, focusing on Figma integration, API automation, and development workflow optimization.
## 🔧 Available Toolset (Continuously Updated)
| Tool Name | Category | Function Description | Input Parameters | Notes |
| ------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
| **Figma-To-Code** | Figma Integration | Generate frontend code based on explicit Figma style information, with PNG image assistance for identification and adjustment | `fileKey`, `nodeId`(optional) | Auto-adapts to local config (ESLint, etc.), supports responsive layout and component structure |
| **extract-svg-assets** | Asset Analysis | Analyze Figma DSL structure, automatically identify and call download tools to get SVG resources | `fileKey`, `nodeId`(optional) | Intelligently analyze Figma file structure, batch extract SVG icons and vector graphics |
| **extract-color-vars** | Design Tokens | Extract color variables from Figma DSL, output to specified CSS framework configuration files | `fileKey`, `nodeId`(optional) | Support UnoCSS, TailwindCSS or custom file format output |
| **similarity-figma** | Quality Detection | Get Figma prototype images and project page screenshots for similarity comparison analysis | `url`, `fileKey`, `nodeId`(optional) | Smart similarity scoring based on visual comparison, providing detailed difference analysis reports |
| **api-automation** | Development Tools | Understand backend interface documentation, automatically generate interface types, address constants, Mock data, etc. | `apiDocs` | Support multiple API documentation formats, generate complete frontend API toolchain |
| **initialize-project-standard** | Project Management | Analyze project structure, generate global project rules configuration for Copilot and Cursor | No parameters | Automatically generate project context and coding standards for intelligent programming assistants |
| **Download-Figma-Images** | Asset Management | Batch download SVG and PNG image resources from Figma by node ID | `fileKey`, `nodes[]`, `localPath` | Support imageRef processing, automatically create directory structure (underlying tool, for other MCP calls) |
| **download-svg-assets** | Asset Management | Download SVG vector resources from Figma files specifically by image or icon node ID | `fileKey`, `nodes[]`, `localPath` | Only process SVG format, support complex node structures (underlying tool, for other MCP calls) |
## Tool Category Description
### 🎨 Figma Integration
Directly interact with Figma API to achieve design-to-code conversion. These tools can understand Figma's design language and convert it into usable frontend code.
### 🖼️ Asset Management
Handle downloading and organizing static resources like images and icons. Support intelligent batch operations and automatically maintain project resource structure.
### 🎯 Quality Detection
Verify consistency between implementation results and design mockups. Through visual comparison and intelligent analysis, ensure development outcomes meet design requirements.
### 🛠️ Development Tools
Automation tools to improve development efficiency. Generate complete frontend development kits from API documentation, reducing repetitive work.
### 📁 Project Management
Project initialization and standardization configuration tools. Automatically analyze project architecture and generate appropriate development standards and configurations.
## Usage Scenarios
### Design-to-Code Workflow
1. Use `extract-color-vars` to generate design tokens
2. Use `Figma-To-Code` to obtain the DSL description structure of the Figma design
3. Automatically execute `Download-Figma-Images` to extract required icon resources to the specified directory
4. Use `similarity-figma` to verify the implementation results
### API Development Workflow
1. Use `api-automation` to parse backend API documentation
2. Automatically generate TypeScript type definitions
3. Generate API constants and request functions
4. Create Mock data for development testing
### Project Standardization Workflow
1. Use `initialize-project-standard` to analyze project structure
2. Generate Copilot/Cursor configuration files
3. Establish unified coding standards
4. Optimize development experience and code quality
