FindMCP Logo FindMCP.info
Figma to Vue MCP Server

Figma to Vue MCP Server

site icon
2025.02.25 3
TypeScript设计到代码转换Vue 组件生成前端开发工具开发效率
Figma to Vue MCP Server 是一个基于 Model Context Protocol (MCP) 的服务，用于将 Figma 设计转换为 Vue 3 组件，遵循 Hostinger 的设计系统和 HComponents 要求。该服务能够自动生成符合设计规范的 Vue 组件，并支持动态内容和响应式布局。
View on GitHub

Overview

基本能力

产品定位

Figma to Vue MCP Server 是一个设计到代码的转换工具，专注于将 Figma 设计高效转换为 Vue 3 组件，适用于前端开发流程中的设计系统实现。

核心功能

  • 将 Figma 设计转换为 Vue 3 组件，支持 TypeScript 和 <script setup> 语法
  • 自动导入并使用 HComponents
  • 生成 BEM 风格的 CSS 类
  • 保持设计系统的一致性
  • 处理响应式布局
  • 支持组件属性和动态内容

适用场景

  • 前端开发团队需要快速将 Figma 设计转换为可用的 Vue 组件
  • 设计系统维护者需要确保设计规范在代码中的一致性
  • 开发人员需要自动化生成组件代码以提高开发效率

工具列表

  • npm run dev: 启动开发服务器，支持热重载
  • npm run build: 构建生产环境代码
  • npm test: 运行测试

常见问题解答

  • 如何获取 Figma 访问令牌？ 需要在 Figma 账户中生成访问令牌，并将其配置在 .env 文件中。
  • 如何指定服务器端口？ 在 .env 文件中设置 PORT 环境变量。

使用教程

使用依赖

  1. 确保已安装 Node.js 和 npm
  2. 克隆仓库并安装依赖：
git clone https://github.com/Tomas-Jankauskas/figma-to-vue-mcp.git
cd figma-to-vue-mcp
npm install

安装教程

  1. 创建 .env 文件并配置 Figma 访问令牌：
FIGMA_ACCESS_TOKEN=your_figma_access_token
PORT=3000  # 可选，默认为 3000
  1. 启动服务器：
npm run dev  # 开发环境
# 或
npm start    # 生产环境

调试方式

  1. 发送 POST 请求到 /generate-component 端点，检查返回的组件代码是否正确。
  2. 使用 npm test 运行测试，确保功能正常。
  3. 开发模式下使用 npm run dev 进行实时调试。

许可证

该项目遵循 MIT 开源许可条款。