金大哥 - figma-to-vue-mcp MCP 详情

article

README

🚀 Figma 到 Vue MCP 服务器

这是一个模型上下文协议 (MCP) 服务器，其核心价值在于能够将 Figma 设计高效转换为符合 Hostinger 设计系统和 HComponents 要求的 Vue 3 组件，为前端开发提供了极大的便利。

🚀 快速开始

本服务器可将 Figma 设计无缝转换为 Vue 3 组件。以下是启动服务器的步骤：

克隆仓库:

git clone https://github.com/Tomas-Jankauskas/figma-to-vue-mcp.git
cd figma-to-vue-mcp

安装依赖项:

npm install

创建一个 .env 文件并添加你的 Figma 访问令牌:

FIGMA_ACCESS_TOKEN=your_figma_access_token
PORT=3000  # 可选，默认为 3000

启动服务器:

npm run dev  # 开发模式
# 或者
npm start    # 生产模式

✨ 主要特性

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

💻 使用示例

基础用法

向 /generate-component 发送 POST 请求，请求体如下:

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

服务器将返回:

{
  "component": "// 生成的 Vue 组件代码"
}

高级用法

使用 curl 工具发送请求的示例：

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: 运行测试

贡献指南

叉仓库
创建你的功能分支 (git checkout -b feature/amazing-feature)
提交更改 (git commit -m 'Add amazing feature')
推送到分支 (git push origin feature/amazing-feature)
打开 Pull Request

📄 许可证

本项目采用 MIT 许可证。

figma-to-vue-mcp