Superdesign MCP Claude Code

🚀 超級設計MCP服務器

超級設計MCP服務器是一個基於模型上下文協議（MCP）的服務器，它能將Superdesign——由@jasonzhou1993和@jackjack_eth開發的開源AI設計代理——以原生工具的形式集成到Claude Code中。該服務器就像一個“設計編排器”，能為你的集成開發環境（IDE）中的大語言模型（LLM）提供結構化的設計規範，讓你無需Anthropic API密鑰就能使用Superdesign強大的設計能力。

🚀 快速開始

安裝依賴

npm install

構建服務器

npm run build

集成到Claude Code

1. 將MCP服務器添加到Claude Code的配置中：

# 創建或編輯Claude Code的MCP設置文件
# 在macOS系統上：
mkdir -p ~/.claude-code
cp claude-mcp-config.json ~/.claude-code/mcp-settings.json

# 或者手動添加到現有的mcp-settings.json文件中：

示例 ~/.claude-code/mcp-settings.json 文件內容如下：

{
  "mcpServers": {
    "superdesign": {
      "command": "node",
      "args": ["/path/to/superdesign/dist/index.js"],
      "env": {}
    }
  }
}

2. 重啟Claude Code。

3. MCP服務器將在Claude Code中提供以下Superdesign編排工具：

   • superdesign_generate - 為Claude提供生成設計的規範。
   • superdesign_iterate - 為Claude提供改進現有設計的指令。
   • superdesign_extract_system - 為Claude提供從截圖中提取設計系統的指令。
   • superdesign_list - 列出工作區中所有已創建的設計。

開發模式運行

npm run dev

✨ 主要特性

• 無需API密鑰：直接利用Claude Code內置的大語言模型連接。
• 本地執行：作為MCP服務器完全在本地機器上運行。
• IDE集成：可無縫集成到Claude Code中（也可能與Cursor、Windsurf或其他支持MCP的IDE集成，但未經過測試）。
• 基於開源：基於Superdesign.dev這個開源AI設計系統構建。

📦 安裝指南

依賴安裝

npm install

服務器構建

npm run build

💻 使用示例

基礎用法

在Claude Code中配置好後，你可以使用自然語言調用Superdesign的功能，例如：

• "生成一個現代儀表盤的用戶界面設計"
• "創建3種不同版本的登錄頁面線框圖"
• "設計一個用於產品卡片的React組件"
• "為一家科技初創公司設計一個簡約的標誌"
• "改進儀表盤設計，使其間距更合理"
• "展示我所有設計的圖庫"

高級用法

superdesign_generate

返回供Claude Code生成設計的結構化規範：

• 用戶界面設計：完整的響應式界面。
• 線框圖：簡約的黑白布局。
• 組件：單個的用戶界面組件（HTML/React/Vue）。
• 標誌：SVG格式的標誌設計。
• 圖標：SVG格式的圖標設計。

參數：

• prompt：要創建內容的描述。
• design_type：設計類型（ui、wireframe、component、logo、icon）。
• variations：要生成的不同版本數量（1 - 5，默認值為3）。
• framework：組件使用的框架（html、react、vue）。

輸出：詳細的規範，包括Superdesign系統提示、文件命名模式和設計準則，供Claude Code執行。

superdesign_iterate

返回供Claude Code改進現有設計的迭代指令：

• 讀取現有的設計文件。
• 提供結構化的反饋應用指南。
• 通過Superdesign原則保持設計的一致性。

參數：

• design_file：現有設計文件的路徑。
• feedback：改進說明。
• variations：要創建的不同版本數量。

輸出：迭代規範，包括原始設計內容、要應用的反饋和Superdesign準則，供Claude Code執行。

superdesign_extract_system

返回供Claude Code從截圖中提取設計系統的指令：

• 為視覺設計模式提供分析框架。
• 指導提取調色板、排版和間距。
• 指定可重用設計系統的JSON結構。

輸出：提取規範和JSON模式，供Claude Code分析圖像並創建設計系統文件。

superdesign_list

列出工作區中所有Superdesign創建的設計：

• 顯示設計的不同版本。
• 顯示提取的設計系統。
• 展示文件組織情況。

superdesign_gallery

生成一個交互式的HTML圖庫，用於查看所有設計：

• 基於瀏覽器的圖庫 - 在默認瀏覽器中打開。
• 視覺預覽 - 在響應式網格中查看設計縮略圖。
• 交互式功能 - 點擊可全屏查看、複製文件路徑。
• 移動設備響應式 - 在桌面、平板和移動設備上均可使用。
• 自動發現 - 查找 design_iterations/ 目錄下的所有HTML/SVG文件。

參數：

• workspace_path：工作區目錄（可選，默認為當前目錄）。

輸出：包含嵌入式預覽和JavaScript交互的圖庫HTML文件。圖庫會自動在瀏覽器中打開，提供類似Superdesign畫布的體驗。

📚 詳細文檔

編排器的工作原理

這個MCP服務器作為一個“設計編排器”，而不是直接的生成器，其工作流程如下：

1. 用戶請求：例如“生成一個現代儀表盤的用戶界面”。
2. MCP服務器：返回詳細的規範，包括：
   • 完整的Superdesign系統提示和準則。
   • 確切的文件路徑和命名約定。
   • 特定設計類型的指令。
   • 要創建的不同版本數量。
3. Claude Code：接收規範並執行：
   • 生成實際的HTML/SVG/React代碼。
   • 將文件保存到指定位置。
   • 遵循所有Superdesign的設計原則。

文件組織

設計文件會自動保存到 superdesign/ 目錄（可見文件夾）中：

• design_iterations/ - 生成的設計文件（HTML/SVG文件）。
• design_system/ - 提取的設計系統文件（JSON文件）。

優點

• 無需配置API密鑰。
• 利用Claude Code現有的大語言模型能力。
• 保留Superdesign所有複雜的設計方法。
• 有合理的文件組織和命名約定。
• 支持完整的設計迭代工作流程。

🔧 技術細節

編排器的角色

該MCP服務器作為設計編排器，為Claude Code提供詳細的設計規範，Claude Code根據這些規範生成實際的設計代碼。

與Superdesign的關係

此MCP服務器是對Superdesign的補充集成。雖然Superdesign提供了一個可在多個編輯器中使用的IDE擴展，但這個MCP服務器通過以下方式特別增強了Claude Code的功能：

• 無需API密鑰：使用Claude Code內置的大語言模型連接。
• 提供原生工具集成：無需手動複製提示。
• 支持直接調用工具：實現無縫工作流程，無需複製粘貼。

與Superdesign擴展的區別

🔧 常見問題與解決方法

文件權限錯誤

如果你在運行MCP服務器時遇到權限錯誤，可以執行以下命令：

# 為構建後的文件添加執行權限
chmod +x dist/index.js

MCP工具未顯示

如果安裝後Superdesign工具未在Claude Code中顯示，可以按以下步驟操作：

1. 確保你已完全退出Claude Code（不僅僅是關閉窗口）。
2. 從終端重啟Claude Code。
3. 驗證服務器是否已註冊：claude mcp list。
4. 通過詢問Claude "你有哪些可用的工具？" 來檢查工具是否可用。

服務器註冊問題

如果服務器註冊失敗，可以執行以下命令：

# 移除並重新添加服務器
claude mcp remove superdesign -s user
claude mcp add --scope user superdesign /path/to/superdesign/dist/index.js

構建錯誤

確保你安裝了Node.js 16及以上版本：

node --version  # 版本號應不低於v16.0.0

📄 許可證

本項目遵循與原始Superdesign項目相同的許可證。有關許可證的詳細信息，請參考Superdesign倉庫。