Advertise
MCP.so
Sign In

Figma to Vue MCP Server

@Tomas-Jankauskas

Repository

Basic information

Category

Media & Design

Transports

stdio

Author

Tomas-Jankauskas

About Figma to Vue MCP Server

MCP server that generates Vue components from Figma designs following Hostinger's design system

#figma#vue#component-generator

Figma to Vue MCP Server config

No standard config provided

This server doesn't expose a parseable MCP config block in its README. See the repository for install instructions.

Repository

Figma to Vue MCP Server tools

Tool list not available yet

This listing does not currently have a tool list to display. This does not mean the server has no tools; check its documentation for supported capabilities.

We auto-extract tools from the README. The maintainer can list them under a ## Tools heading to populate this section.

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

Frequently asked questions

1

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.

2

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`.

3

What does the server output?

It returns a JSON object containing the generated Vue component code as a string.

4

What runtime does it require?

Node.js and npm. The server runs on port 3000 by default.

5

Do I need a Figma access token?

Yes. You must provide a valid Figma personal access token in the `FIGMA_ACCESS_TOKEN` environment variable.

Comments

More Media & Design MCP servers

Riddle Quiz Maker

Riddle.com

Creates and manages quizzes, polls, surveys, personality tests, forms, predictors, minigames and leaderboards on Riddle.com – with branching logic, custom design, live stats and embed code.

CoDesign

IMG.LY

Give your AI agent a real design engine. Create, edit and export real, editable designs from Claude Code, Codex, Cursor and more.

Your Move Exercise Video API

Your Move

Exercise videos, workouts and training programs for AI agents and apps: 1,413+ exercises with professional HD video, instructions and muscle data, plus workout and program generation and nutrition tools. Hosted MCP, no i

QR Planet QR Code MCP Server

qrplanet

QR Planet QR Code MCP Server - Hosted MCP server for QR Planet. Connect AI agents and MCP-compatible clients to create, update, design, route, and analyze dynamic QR Codes using your QR Planet API key.

1

TravelAnimator

Lascade-Co

MCP server and CLI for TravelAnimator — generate animated travel videos, itineraries, and trip media from Claude, Codex, or your terminal

Advertise