Figma To Vue MCP

🚀 Figma to Vue MCP Server

A Model Context Protocol (MCP) server that transforms Figma designs into Vue 3 components meeting Hostinger's design system and HComponents requirements.

✨ Features

• Convert Figma designs into Vue 3 components using TypeScript and <script setup> syntax.
• Automatically import and use HComponents when appropriate.
• Generate BEM-style CSS classes.
• Maintain design system consistency.
• Handle responsive layouts.
• Support component properties and dynamic content.

📦 Installation

1. Clone the repository:

git clone https://github.com/Tomas-Jankauskas/figma-to-vue-mcp.git
cd figma-to-vue-mcp

2. Install dependencies:

npm install

3. Create a .env file and add your Figma access token:

FIGMA_ACCESS_TOKEN=your_figma_access_token
PORT=3000  # Optional, default is 3000

4. Start the server:

npm run dev  # Development mode
# or
npm start    # Production mode

💻 Usage Examples

Basic Usage

Send a POST request to /generate-component with the following request body:

{
  "figmaUrl": "https://www.figma.com/file/[FILE_KEY]/[FILE_NAME]?node-id=[NODE_ID]",
  "componentName": "MyComponent"
}

The server will return:

{
  "component": "// Generated Vue component code"
}

Advanced Usage

Here is an example using curl:

curl -X POST http://localhost:3000/generate-component \
  -H "Content-Type: application/json" \
  -d '{
    "figmaUrl": "https://www.figma.com/file/abc123/MyDesign?node-id=1:1",
    "componentName": "YoutubeLinks"
  }'

📚 Documentation

Development

• npm run dev: Start the server with hot-reloading.
• npm run build: Build the production version.
• npm test: Run tests.

Contribution

1. Fork the repository.
2. Create your feature branch (git checkout -b feature/amazing-feature).
3. Commit your changes (git commit -m 'Add amazing feature').
4. Push to the branch (git push origin feature/amazing-feature).
5. Open a Pull Request.

📄 License

MIT