<div align="center">

<p align="center">
    <img src="https://github.com/user-attachments/assets/6f5a6011-9c4a-450d-8ebd-60b954dbc05f" alt="feuse-mcp" width="300px">
</p>

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.

<div align="center">
    <img src="https://img.shields.io/badge/node-%5E22.0.0-brightgreen" alt="license">
    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="license">
</div>
</div>  

English | [中文](README.zh.md)

## 📖 Documentation
[feuse-mcp Official Documentation](https://panzer-jack.github.io/feuse-mcp/en)

## ✨ Features
- 🎨 **Figma Integration**: Built-in integration with [Figma-Context-MCP](https://github.com/GLips/Figma-Context-MCP/discussions) 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](https://www.figma.com/developers/api#authentication).

```json
{
  "feuse-mcp": {
    "command": "npx",
    "args": ["feuse-mcp@latest"],
    "env": {
      "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
    }
  }
}
```

## 🔧 For Code Contributors

### Setup

```bash
# 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](https://www.figma.com/developers/api#authentication).

```json
{
  "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

1. Follow the existing code style
2. Update documentation as needed

## 📝 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

**If you have more interesting, fun, and cool ideas, please submit them in issues immediately ! ! !**

## 🙏 Acknowledgments

- [Figma-Context-MCP](https://github.com/GLips/Figma-Context-MCP/discussions) for providing Figma design analysis capabilities
- [fastmcp](https://github.com/punkpeye/fastmcp) for providing MCP rapid development framework
- All contributors and users of this project