figma-to-vue-mcp

figma-to-vue-mcp

4
developer_tools

The project is a Model Context Protocol server that converts Figma design files into Vue 3 components using Hostinger's design system. It supports responsive layouts and dynamic content by generating TypeScript components with BEM-style CSS. It is designed for developers who use Vue and Figma.

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

  1. Clone the repository and enter the directory
  2. Install dependencies
  3. Create a .env file with your Figma access token
  4. Start the server for development or production

Usage

Send a POST request to /generate-component with the required body to generate Vue component code based on Figma designs.

Development

  • Start development server with npm run dev
  • Build for production with npm run build
  • Run tests with npm test

Contributing

  1. Fork the repository
  2. Create your feature branch
  3. Commit your changes
  4. Push to the branch
  5. Open a Pull Request

License

MIT