Figma to Vue MCP Server

@Tomas-Jankauskas

代码仓库

基本信息

分类

媒体与设计

传输方式

stdio

作者

Tomas-Jankauskas

关于 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 配置

暂无标准配置

该服务器的 README 中没有可解析的 MCP 配置块，请前往代码仓库查看安装说明。

代码仓库

Figma to Vue MCP Server 工具

工具列表暂未提供

当前收录暂时没有可展示的工具列表，不代表服务没有工具。请查阅项目文档了解支持的能力。

工具是从 README 中自动提取的。维护者可以在 ## Tools 标题下列出工具,即可填充这部分内容。

概览

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

常见问题

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.

媒体与设计分类下的更多 MCP 服务器

agent-media

Hosted MCP server (OAuth, no API keys) that makes short drama series (micro-dramas, sitcoms, K-drama style, any language) and other short vertical videos from Claude, ChatGPT or Codex, with the same cast every episode.

transcribe.so

Transcribe YouTube videos, podcasts, meetings and media links into speaker-labelled, timestamped transcripts, then search who said what, ask questions answered with timestamped citations, pull chapters and paste-ready ti

Aura AI

auraai.app

Access 20+ AI video and image models from Google, OpenAI, xAI, ByteDance, and more. Generate and edit videos with Veo 3.1, Sora 2, Seedance, Kling O3, and images with FLUX, Nano Banana, Seedram 4, GPT Image — all in one

Instagram + TikTok Downloader & Transcriber

IYIA

Instagram + TikTok content tools inside your AI: download HD posts/reels/carousels, view Instagram stories anonymously, AI-transcribe videos (100+ languages, SRT/VTT/TXT). Requires a Repost PRO subscription.

PromptWise

PromptWise is an AI creative studio: 40+ image, video and audio models in one place. Connect the PromptWise MCP to generate images, videos and audio from your AI assistant.