Sketch MCP Server

🚀 Sketch MCP 服務器

Sketch MCP 服務器是一個基於模型上下文協議（MCP）的 Sketch 文件處理服務器，專為 AI 工具設計，可智能分析 Sketch 設計文件並生成代碼。

🚀 快速開始

命令行啟動

# 啟動 MCP 服務器（標準輸入輸出模式）
sketch-mcp-server

# 或者使用 npx
npx sketch-mcp-server

AI 工具集成

此服務器適用於以下 AI 開發環境：

• Trae AI：作為 Sketch 文件分析的 MCP 服務器。
• Cursor：配置為從設計到代碼工作流程的 MCP 工具。
• Claude Desktop：用於 Sketch 文件處理和分析。

Trae AI 配置示例

在 Trae AI 中添加 MCP 服務器配置：

{
  "mcpServers": {
    "sketch-mcp-server": {
      "command": "npx",
      "args": ["sketch-mcp-server"]
    }
  }
}

✨ 主要特性

• 🎨 Sketch 文件分析：全面解析 Sketch 文件，提取節點、樣式、層級結構和完整信息。
• 🚀 智能令牌優化：最多可減少 90% 的令牌消耗，顯著降低 AI 調用成本。
• 🔍 智能查詢系統：擁有 16 個專業工具，可高效發現和分析設計元素。
• 🎯 符號組件支持：具備完整的符號主組件和實例處理能力。
• 🖼️ 視覺渲染：將設計節點渲染為 SVG/PNG 圖像，以便 AI 分析。
• 📊 詳細統計分析：對文檔和節點進行全面統計。
• 🔧 CLI 工具支持：支持直接使用 npx 調用，無需安裝。

📦 安裝指南

全局安裝（推薦）

npm install -g sketch-mcp-server

使用 npx（無需安裝）

npx sketch-mcp-server

本地項目安裝

npm install sketch-mcp-server

💻 使用示例

基礎用法

// 1. 加載 Sketch 文件
{
  "name": "loadSketchByPath",
  "arguments": {
    "path": "/path/to/design.sketch"
  }
}

// 2. 獲取智能摘要（節省 80 - 90% 的令牌）
{
  "name": "getNodesSummary",
  "arguments": {
    "groupBy": "type",
    "includeStats": true,
    "maxSamples": 5
  }
}

// 3. 獲取特定節點的詳細信息
{
  "name": "getMultipleNodeInfo",
  "arguments": {
    "nodeIds": ["button-id", "text-id"]
  }
}

// 4. 將節點渲染為圖像
{
  "name": "renderNodeAsBase64",
  "arguments": {
    "nodeId": "button-id",
    "format": "svg"
  }
}

高級用法

// 使用字段過濾減少數據量
{
  "name": "getDocumentStructure",
  "arguments": {
    "fields": ["id", "name", "type", "children"],
    "maxDepth": 3,
    "summaryMode": false
  }
}

// 按樣式分組的智能摘要
{
  "name": "getNodesSummary",
  "arguments": {
    "groupBy": "style",
    "includeStats": true,
    "maxSamples": 3
  }
}

🛠️ 工具列表

📁 文件加載工具

📊 文檔結構工具

🎯 節點查詢工具

🔍 詳細信息工具

🔄 符號組件工具

🎨 可視化工具

💡 令牌優化策略

數據量對比

推薦工作流程

1. 🔍 快速分析：使用 getNodesSummary 瞭解整體設計結構。
2. 📋 結構分析：使用字段過濾的 getDocumentStructure 獲取層級關係。
3. 🎯 詳細信息：根據需要獲取特定節點的詳細信息。
4. 👁️ 視覺驗證：渲染關鍵組件以確認效果。

🎯 工具選擇指南

🔧 技術細節

環境要求

• Node.js >= 16.0.0
• npm 或 yarn

本地開發

# 克隆項目
git clone https://github.com/mater1996/sketch-mcp-server.git
cd sketch-mcp-server

# 安裝依賴
npm install

# 構建項目
npm run build

# 運行測試
npm test

# 啟動開發服務器
npm run start:mcp

可用腳本

npm run build          # 將 TypeScript 編譯為 JavaScript
npm run test           # 運行測試套件
npm run test:coverage  # 運行測試並生成覆蓋率報告
npm run start          # 啟動 HTTP 服務器
npm run start:mcp      # 啟動 MCP 標準輸入輸出服務器
npm run release        # 發佈新版本
npm run release:dry    # 模擬發佈過程

📚 詳細文檔

如需詳細的 API 文檔，請參考 工具使用指南。

開發標準

• 使用 TypeScript 編寫代碼。
• 遵循現有的代碼風格。
• 為新功能添加測試。
• 更新相關文檔。

📄 許可證

本項目採用 MIT 許可證。

🤝 貢獻

歡迎貢獻代碼！請隨時提交 Pull Request。

📞 支持

如果您遇到任何問題或有疑問，請：

1. 查看 文檔。
2. 搜索現有的 問題。
3. 如有需要，創建新問題。