Figma To Vue MCP

🚀 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 許可證。