Figma To Vue MCP

Figma到Vue MCP服务器

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

特性

• 使用TypeScript将Figma设计转换为Vue 3组件 `` 语法
• 在适当的情况下自动导入和使用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. 打开拉取请求

许可证

麻省理工学院