Figma To Vue Mcp

Figma to Vue MCP Server

A Model Context Protocol (MCP) server that generates Vue 3 components from Figma designs, following Hostinger’s design system and HComponents requirements.

Features

Converts Figma designs to Vue 3 components with TypeScript and <script setup> syntax
Automatically imports and uses HComponents where appropriate
Generates BEM-style CSS classes
Preserves design system consistency
Handles responsive layouts
Supports component props and dynamic content

Setup

Clone the repository:

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

Install dependencies:

npm install

Create a .env file with your Figma access token:

FIGMA_ACCESS_TOKEN=your_figma_access_token
PORT=3000  # Optional, defaults to 3000

Start the server:

npm run dev  # For development
## or
npm start    # For production

Usage

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

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

The server will respond with:

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

Example

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