Figma to Vue MCP Server
@Tomas-Jankauskas
MCP server that generates Vue components from Figma designs following Hostinger's design system
Overview
What is 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.
How to use Figma to Vue MCP Server?
Clone the repository, install dependencies, create a .env file with a Figma access token, then start the server with npm run dev or npm start. Send a POST request to /generate-component with a JSON body containing figmaUrl and componentName.
Key features of Figma to Vue MCP Server
- 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
Use cases of Figma to Vue MCP Server
- Rapidly generating Vue 3 UI components from Figma mockups for Hostinger projects
- Maintaining design system consistency by automatically using HComponents
- Reducing manual coding effort for responsive, BEM-structured Vue components
- Prototyping interfaces with live Figma design data
FAQ from Figma to Vue MCP Server
What does Figma to Vue MCP Server do?
It takes a Figma design URL and a component name, then returns a Vue 3 component (with TypeScript, <script setup>, and HComponents) that matches the design.
How do I get started?
Clone the repo, run npm install, create a .env file with your FIGMA_ACCESS_TOKEN, then start the server with npm run dev.
What does the server output?
It returns a JSON object containing the generated Vue component code as a string.
What runtime does it require?
Node.js and npm. The server runs on port 3000 by default.
Do I need a Figma access token?
Yes. You must provide a valid Figma personal access token in the FIGMA_ACCESS_TOKEN environment variable.
