Figma to Vue MCP Server
About
MCP server that generates Vue components from Figma designs following Hostinger's design system
Explore
- 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
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 with your Figma access token:
FIGMA_ACCESS_TOKEN=your_figma_access_token
PORT=3000 # Optional, defaults to 3000
4. Start the server:
```bash
npm run dev # For development
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
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 with your Figma access token:
FIGMA_ACCESS_TOKEN=your_figma_access_token
PORT=3000 # Optional, defaults to 3000
4. Start the server:
```bash
npm run dev # For development
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
