广告合作
MCP.so
登录

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

常见问题

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.

评论

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

North Noir

North Noir

Make AI-drawn video from chat. Claude, Cursor or Claude Code plans the film, the model draws every frame in code at 30 fps, and you edit it on a timeline with narration, music and sound effects.

Lamina — On-brand product photos, video & try-ons

Lamina

Generate on brand product videos from Claude Code (or any assistant) in one line. Lamina turns a brief + your brand kit into finished product photos, video reels, and campaign banners - no prompt engineering; brand guard

Selfstorming

Selfstorm

Curated marketing libraries and an ideation engine for your AI. Connect Selfstorming to Claude, ChatGPT, Codex, Claude Code or Cursor and your assistant works from your project context plus: - 1,800+ award-winning campa

InstantClips

InstantStudioAI

InstantClips turns an e-commerce product into short-form vertical video for TikTok, Instagram Reels and Stories. Import a product from its page URL or photos, generate on-brand video ads, and manage brands/products throu

Katto

Katto

AI video clipping MCP server for scored, captioned vertical shorts, with 29 documented tools and dubbing in 19 languages. Hosted OAuth connection with a local installation option.

广告合作