🚀 Figma 到 Vue MCP 服务器

这是一个模型上下文协议 (MCP) 服务器，其核心价值在于能够把 Figma 设计轻松转换为符合 Hostinger 设计系统以及 HComponents 要求的 Vue 3 组件，极大提升了从设计到开发的效率。

🚀 快速开始

本服务器可将 Figma 设计转换为 Vue 3 组件，以下是快速开始的步骤。

✨ 主要特性

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

📦 安装指南

1. 克隆仓库：

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

2. 安装依赖项：

npm install

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

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

4. 启动服务器：

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

💻 使用示例

基础用法

向 /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：运行测试。

贡献流程

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

📄 许可证

本项目采用 MIT 许可证。