Superdesign MCP Claude Code

🚀 Superdesign MCPサーバー

このMCP（Model Context Protocol）サーバーは、@jasonzhou1993 と @jackjack_ethによるオープンソースのAIデザインエージェントである Superdesign を、Claude Codeのネイティブツールとして提供します。このサーバーは「デザインオーケストレーター」として機能し、IDEのLLMが実行するための構造化された仕様を提供します。これにより、Anthropic APIキーを必要とせずに、Superdesignの高度なデザイン機能を利用することができます。

✨ 主な機能

• APIキー不要：Claude Codeの組み込みLLM接続を直接利用します。
• ローカル実行：MCPサーバーとして完全にあなたのマシン上で実行されます。
• IDE統合：Claude Codeとシームレスに統合されます（Cursor、Windsurf、またはその他のMCP互換IDEとの統合も可能性がありますが、未検証です）。
• オープンソースベース：オープンソースのAIデザインシステムである Superdesign.dev をベースに構築されています。

📦 インストール

1. 依存関係をインストールします：

npm install

2. サーバーをビルドします：

npm run build

📚 ドキュメント

Claude Codeとの統合

1. Claude Codeの設定にMCPサーバーを追加します：

# 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 - デザインシステムをスクリーンショットから抽出するための指示を返します。
   • superdesign_list - ワークスペース内のすべての作成されたデザインをリストします。

開発

開発モードで実行します：

npm run dev

利用可能なSuperdesignツール

superdesign_generate

Claude Codeがデザインを生成するための構造化された仕様を返します：

• UIデザイン：完全なレスポンシブインターフェース
• ワイヤーフレーム：最小限の白黒レイアウト
• コンポーネント：個々のUIコンポーネント（HTML/React/Vue）
• ロゴ：SVGロゴデザイン
• アイコン：SVGアイコンデザイン

パラメーター：

• prompt：作成するものの説明
• design_type：デザインのタイプ（ui、wireframe、component、logo、icon）
• variations：生成するバリエーションの数（1 - 5、デフォルトは3）
• framework：コンポーネントのフレームワーク（html、react、vue）

出力：Claude Codeが実行するための、Superdesignシステムプロンプト、ファイル命名パターン、およびデザインガイドラインを含む詳細な仕様。

superdesign_iterate

Claude Codeが既存のデザインを改善するための反復指示を返します：

• 既存のデザインファイルを読み取ります。
• 構造化されたフィードバック適用ガイドラインを提供します。
• Superdesignの原則を通じてデザインの一貫性を維持します。

パラメーター：

• design_file：既存のデザインファイルのパス
• feedback：改善指示
• variations：作成するバリエーションの数

出力：Claude Codeが実行するための、元のデザインコンテンツ、適用するフィードバック、およびSuperdesignガイドラインを含む反復仕様。

superdesign_extract_system

Claude Codeがスクリーンショットからデザインシステムを抽出するための指示を返します：

• ビジュアルデザインパターンの分析フレームワークを提供します。
• カラーパレット、タイポグラフィ、スペーシングの抽出をガイドします。
• 再利用可能なデザインシステムのJSON構造を指定します。

出力：Claude Codeが画像を分析してデザインシステムファイルを作成するための抽出仕様とJSONスキーマ。

superdesign_list

ワークスペース内のすべてのSuperdesign作成物をリストします：

• デザインの反復を表示します。
• 抽出されたデザインシステムを表示します。
• ファイルの組織化を表示します。

superdesign_gallery

すべてのデザインを表示するためのインタラクティブなHTMLギャラリーを生成します：

• ブラウザベースのギャラリー - デフォルトのブラウザで開きます。
• ビジュアルプレビュー - レスポンシブグリッドでデザインのサムネイルを表示します。
• インタラクティブ機能 - クリックして全画面表示、パスをコピーできます。
• モバイル対応 - デスクトップ、タブレット、およびモバイルで動作します。
• 自動検出 - design_iterations/内のすべてのHTML/SVGファイルを見つけます。

パラメーター：

• workspace_path：ワークスペースディレクトリ（オプション、デフォルトは現在のディレクトリ）

出力：埋め込みプレビューとJavaScriptインタラクションを含むギャラリーHTMLファイル。ギャラリーは自動的にブラウザで開き、Superdesignのようなキャンバス体験を提供します。

オーケストレーターの動作原理

このMCPサーバーは、直接的な生成器ではなく、デザインオーケストレーターとして動作します：

1. ユーザー要求：「モダンなダッシュボードUIを生成して」
2. MCPサーバー：以下を含む詳細な仕様を返します：
   • 完全なSuperdesignシステムプロンプトとガイドライン
   • 正確なファイルパスと命名規則
   • デザインタイプ固有の指示
   • 作成するバリエーションの数
3. Claude Code：仕様を受け取り、以下を行います：
   • 実際のHTML/SVG/Reactコードを生成します。
   • ファイルを指定された場所に保存します。
   • すべてのSuperdesignデザイン原則に従います。

Claude Codeでの使用方法

設定後、自然言語でClaude Codeを通じてSuperdesignを使用することができます：

使用例：

• 「モダンなダッシュボードUIデザインを生成して」
• 「ログインページのワイヤーフレームを3つのバリエーションで作成して」
• 「製品カードのReactコンポーネントをデザインして」
• 「テックスタートアップのミニマリストなロゴを作成して」
• 「ダッシュボードデザインを間隔を改善して反復させて」
• 「私のすべてのデザインのギャラリーを表示して」

要件：

• MCPサポート付きのClaude Code
• APIキー不要（Claude Codeの既存のLLM接続を使用）

ファイルの組織化： デザインは自動的に superdesign/ ディレクトリ（可視フォルダ）に保存されます：

• design_iterations/ - 生成されたデザイン（HTML/SVGファイル）
• design_system/ - 抽出されたデザインシステム（JSONファイル）

利点：

• APIキーの設定不要
• Claude Codeの既存のLLM機能を利用
• Superdesignの高度なデザイン方法論を維持
• 適切なファイルの組織化と命名規則
• 完全なデザイン反復ワークフローのサポート

既知の問題とトラブルシューティング

ファイルパーミッションエラー

MCPサーバーを実行する際にパーミッションエラーが発生した場合：

# ビルドされたファイルに実行権限を追加します
chmod +x dist/index.js

MCPツールが表示されない場合

インストール後にClaude CodeにSuperdesignツールが表示されない場合：

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との関係

このMCPサーバーは、@jasonzhou1993 と @jackjack_eth による Superdesign の補完的な統合を提供します。

Superdesignは複数のエディタで動作するIDE拡張機能を提供しますが、このMCPサーバーはClaude Codeを以下の点で強化します：

• APIキー不要 - Claude Codeの組み込みLLM接続を使用します。
• ネイティブツール統合 - 手動でのプロンプトコピーが不要です。
• 直接的なツール呼び出し - コピー＆ペーストなしでシームレスなワークフローを実現します。

これは、Claude Code APIプロバイダーサポートに関するコミュニティの要望に対応しています（Superdesign Issue #3 を参照）。

違い

📄 ライセンス

このプロジェクトは、元のSuperdesignプロジェクトと同じライセンスに従います。ライセンスの詳細については、Superdesignリポジトリ を参照してください。