Figma to Vue MCP Server - MCP服务，MCP服务器，MCP教程

基本能力

产品定位

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. 克隆仓库并安装依赖：
   bash
git clone https://github.com/Tomas-Jankauskas/figma-to-vue-mcp.git
cd figma-to-vue-mcp
npm install

安装教程

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

或

npm start # 生产环境
```

调试方式

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