Vextra MCP

🚀 Vextra MCP 服務器

Vextra MCP 服務器是一個基於 模型上下文協議（MCP） 的強大工具，可對 Vextra、Figma、Sketch、SVG 等設計文件進行處理和解析，為 AI 助手（如 Cursor）提供通過 MCP 協議訪問和操作設計文件的能力。

🚀 快速開始

安裝依賴

npm install

開發模式

npm run dev

構建生產版本

npm run build
npm start

✨ 主要特性

• 🎨 多格式支持：支持 .vext、.sketch、.fig、.svg 文件格式。
• 📊 佈局信息提取：從設計文件中提取詳細的佈局和結構信息。
• 🖼️ 圖像渲染：將設計節點渲染為圖像。
• 📋 頁面信息查詢：獲取頁面結構和元數據。
• 🔄 實時通信：支持 SSE（服務器發送事件）和 HTTP 通信。
• 🌐 Cursor 集成：與 Cursor AI 助手無縫集成。

📦 安裝指南

1. 配置 Cursor

在 Cursor 中添加以下 MCP 配置：

{
  "Vextra MCP": {
    "url": "http://localhost:8080/sse",
    "messageUrl": "http://localhost:8080/messages",
    "type": "sse",
    "headers": {
      "Accept": "text/event-stream",
      "Cache-Control": "no-cache"
    }
  }
}

2. 服務器配置

服務器默認在 http://localhost:8080 啟動，支持以下端點：

• GET /sse - SSE 連接端點
• POST /messages - HTTP 消息端點

📚 詳細文檔

API 工具

1. 獲取 Vextra 數據

從設計文件中獲取佈局信息和結構數據。 參數：

• filePath（必需）：本地文件路徑
• pageId（可選）：頁面 ID
• nodeId（可選）：節點 ID
• depth（可選）：遍歷深度限制

示例：

獲取完整文件信息
/path/to/file.sketch

獲取特定頁面
/path/to/file.sketch/pageId

獲取特定節點
/path/to/file.sketch/pageId/nodeId

2. 獲取 Vextra 圖像

將設計節點渲染為圖像。 參數：

• filePath（必需）：本地文件路徑
• pageId（必需）：頁面 ID
• nodeIds（必需）：節點 ID 數組
• format（可選）：圖像格式（png、jpg、svg）
• scale（可選）：縮放比例

3. 獲取 Vextra 頁面信息

從文件中獲取頁面結構和元數據。 參數：

• filePath（必需）：本地文件路徑

返回：

• 頁面 ID 和名稱
• 節點數量統計
• 頁面結構概述

💻 使用示例

基礎用法

在 Cursor 中，你可以這樣使用：

解析設計文件
/path/to/file.sketch

獲取特定頁面信息
/path/to/file.sketch/pageId

從頁面中提取所有圖像
從 /path/to/file.sketch 的第一頁提取所有圖像

高級用法

分析大文件時限制深度
從 /path/to/large-file.sketch 獲取佈局信息，深度限制為 2 層

批量處理
獲取 /path/to/design.fig 中所有頁面的縮略圖

🔧 技術細節

項目結構

src/
├── data/           # 數據處理模塊
│   ├── export/     # 數據導出相關
│   ├── source/     # 數據源處理
│   └── vextra.ts   # Vextra 服務核心
├── mcp/            # MCP 工具實現
│   ├── get_vextra_data.ts
│   ├── get_vextra_images.ts
│   └── get_vextra_pagesinfo.ts
├── middlewares/    # 中間件
└── server.ts       # 服務器入口點

技術棧

• Node.js + TypeScript - 核心運行環境
• Express.js - Web 服務器框架
• @modelcontextprotocol/sdk - MCP 協議支持
• @kcaitech/vextra-core - Vextra 核心庫
• skia-canvas - 圖像渲染引擎
• Rollup - 構建工具

開發指南

環境要求

• Node.js >= 16.0.0
• npm >= 8.0.0

開發腳本

npm run dev       # 開發模式
npm run build     # 構建生產版本
npm start         # 啟動生產服務器

📄 許可證

本項目採用 AGPL - 3.0 許可證，詳情請參閱 LICENSE 文件。

作者

KCai Technology

相關鏈接

• Vextra 官方網站
• 模型上下文協議
• Cursor AI

如果您有任何問題或建議，請通過 GitHub Issues 與我們聯繫。