広告掲載
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.

コメント

「メディアとデザイン」の他のコンテンツ

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

EveryGen AI MCP Server

EveryGen AI

EveryGen AI MCP Server lets AI assistants create videos, images, voiceovers, music and complete multi-shot films. Connect your EveryGen AI account, describe what you want, review the credit quote and approve the creation

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.

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.

JSON2Video

JSON2Video

Official JSON2Video MCP server. Video API for automated video production at scale: render videos from templates with AI voiceovers, subtitles and AI images. Remote server with OAuth (https://mcp.json2video.com/mcp) or lo

広告掲載