MCP server that generates Vue components from Figma designs following Hostinger's design system
Overview
what is Figma to Vue MCP?
Figma to Vue MCP is a Model Context Protocol (MCP) server that generates Vue 3 components from Figma designs, adhering to Hostinger's design system and HComponents requirements.
how to use Figma to Vue MCP?
To use Figma to Vue MCP, clone the repository, install dependencies, set up your Figma access token, and start the server. Then, send a POST request to the /generate-component endpoint with the Figma design URL and desired component name.
key features of Figma to Vue MCP?
- 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?
- Rapidly converting design mockups from Figma into functional Vue components.
- Ensuring design consistency across applications by following a defined design system.
- Streamlining the development process by automating component generation.
FAQ from Figma to Vue MCP?
- Can Figma to Vue MCP handle all Figma designs?
Yes! It is designed to convert Figma designs that follow the specified design system and HComponents requirements.
- Is Figma to Vue MCP free to use?
Yes! The project is open-source and available for anyone to use.
- How do I contribute to Figma to Vue MCP?
You can contribute by forking the repository, creating a feature branch, and submitting a pull request.