AI导哈

Figma转Vue组件生成器

一个将Figma设计转换为Vue 3组件的MCP服务器，遵循Hostinger的设计系统和HComponents要求。

  • by Tomas-Jankauskas
  • TypeScript
  • 本地部署
  • 10 星标
  • 更新于
在 GitHub 查看 Tomas-Jankauskas/figma-to-vue-mcp

使用说明

Figma到Vue MCP服务器

一个模型上下文协议（MCP）服务器，根据Hostinger的设计系统和HC组件要求，从Figma设计中生成Vue 3组件。

特性

  • 使用TypeScript将Figma设计转换为Vue 3组件 <script setup> 语法
  • 在适当的情况下自动导入和使用HC组件
  • 生成BEM样式的CSS类
  • 保持设计系统的一致性
  • 处理响应式布局
  • 支持组件道具和动态内容

设置

  1. 克隆存储库：
git clone https://github.com/Tomas-Jankauskas/figma-to-vue-mcp.git
cd figma-to-vue-mcp
  1. 安装依赖项：
npm install
  1. 创建一个 .env 使用您的Figma访问令牌的文件：
FIGMA_ACCESS_TOKEN=your_figma_access_token
PORT=3000  # Optional, defaults to 3000
  1. 启动服务器：
npm run dev  # For development
# or
npm start    # For production

用法

向发送POST请求 /generate-component 具有以下主体：

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

服务器将响应：

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

示例

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"
  }'

发展

  • npm run dev：使用热重载启动开发服务器
  • npm run build：为生产而建造
  • npm test：运行测试

贡献

  1. 分叉存储库
  2. 创建功能分支(git checkout -b feature/amazing-feature)
  3. 提交您的更改(git commit -m 'Add amazing feature')
  4. 推到分支(git push origin feature/amazing-feature)
  5. 打开拉取请求

许可证

麻省理工学院

相关 MCP