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仓库。