MCP Server LogoMCP Server
MCPsCategoriesDirectorySubmit
Submit
MCPsCategoriesDirectorySubmit
Submit

MCP Servers

A curated list of MCP Servers, featuring Awesome MCP Servers and Claude MCP integration.

Contact Us

[email protected]

About

Privacy PolicyTerms of Service

Resources

Model Context ProtocolMCP Starter GuideClaude MCP Servers

Community

GitHub

© 2026 mcpserver.cc © 2025 MCP Server. All rights reserved.

Privacy PolicyTerms of Service
  1. Home
  2. /Categories
  3. /Developer Tools
  4. /Figma To Vue Mcp
Figma To Vue Mcp

Figma To Vue Mcp

Created by Tomas-Jankauskas•a year ago
Visit Website

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

Developer Tools
figmavuecomponent-generatorMCP-server

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:
git clone https://github.com/Tomas-Jankauskas/figma-to-vue-mcp.git
cd figma-to-vue-mcp
  1. Install dependencies:
npm install
  1. Create a .env file with your Figma access token:
FIGMA_ACCESS_TOKEN=your_figma_access_token
PORT=3000  # Optional, defaults to 3000
  1. Start the server:
npm run dev  # For development
## or
npm start    # For production

Usage

Send a POST request to /generate-component with the following body:

{
  "figmaUrl": "https://www.figma.com/file/[FILE_KEY]/[FILE_NAME]?node-id=[NODE_ID]",
  "componentName": "MyComponent"
}

The server will respond with:

{
  "component": "// Generated Vue component code"
}

Example

curl -X POST http://localhost:3000/generate-component \
  -H "Content-Type: application/json" \
  -d '{
    "figmaUrl": "https://www.figma.com/file/abc123/MyDesign?node-id=1:1",
    "componentName": "YoutubeLinks"
  }'

Development

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

Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

MIT

Prerequisites

  • •Familiarity with the server domain
  • •Basic understanding of related technologies
  • •Knowledge of Developer Tools

Recommended Server

System_information_mcp

System_information_mcp

DevEnvInfoServer - Cursor MCP Server for Development Environment Information

Waldur Mcp Server

Waldur Mcp Server

Server implementing Model Context Protocol for Waldur

Adspirer Mcp Server

Adspirer Mcp Server

Model context Protocol (MCP) server for Adspirer

View more → →

Details

Created

March 06, 2025

Last Updated

March 07, 2025

Category

Developer Tools

Author

Tomas-Jankauskas

Share

More Server

Perplexity Mcp Server

Perplexity Mcp Server

This Model Context Protocol (MCP) server enables LLMs like Claude to perform internet research using the Perplexity API. It provides real-time, up-to-date information with source citations.

Mcp Crypto Price

Mcp Crypto Price

A Model Context Protocol (MCP) server that provides real-time cryptocurrency analysis via CoinCap's API. Enables Claude and other MCP clients to fetch crypto prices, analyze market trends, and track historical data.

Pty Mcp

Pty Mcp

An MCP tool server that provides a stateful terminal.

Mcp Mysql

Mcp Mysql