AIDesigner MCP｜デザインシステムをClaude Codeで自動生成【2026年】

Claude Codeから直接デザインシステムを生成する時代へ

UIデザイン制作の現場では、カラーパレット・タイポ・スペーシング・コンポーネント仕様などを定義する「デザインシステム」の作成が必須です。しかし、ゼロから組み立てるには相当な時間がかかります。

そこで登場したのがAIDesigner MCP。Model Context Protocol（MCP）の仕様に沿って実装されたデザインアシスタントサーバで、Claude Codeから「ブランドカラー#3b82f6を基調にデザインシステムを作って」と依頼するだけで、設計トークン・コンポーネント案を自動生成できます。本記事では概要・機能・使い方・利用シーンを整理します。

MCP（Model Context Protocol）概要

MCPはAnthropicが2024年に公開したオープンプロトコルで、LLMアプリケーションと外部ツール/データソースを標準化された方法で接続する仕組みです。

• 標準化―どのLLMクライアントからも同じインターフェースで呼べる
• 分離設計―LLMロジックとツール実装が疎結合
• 多言語SDK―Python/TypeScript/Java等で実装可
• セキュリティ―ツール実行に明示的な許可フローあり
• エコシステム―公式・サードパーティMCPサーバが多数公開

Claude Code/Claude Desktopは標準でMCPに対応しており、claude mcp add コマンドで簡単に外部MCPサーバを追加できます。

AIDesigner の主な機能

AIDesigner MCPは、デザインシステム生成・UI設計支援に特化したツール群を提供します（実装により差あり、代表機能を整理）。

• カラーパレット生成―ベース色からアクセシビリティ準拠の階調を生成
• タイポグラフィスケール―見出し〜本文までのフォントサイズ階段
• スペーシングトークン―4/8pxベースの一貫した余白セット
• コンポーネント雛形―ボタン・カード・フォーム等のHTML/CSS/Tailwind出力
• ダーク/ライトモード対応―両モードのトークン同時生成
• WCAGコントラストチェック―AA/AAA準拠の自動判定
• Figma/コードへのエクスポート―JSON / CSS / Tailwind config 形式

設計システム生成のイメージ

AIDesignerが生成するアウトプットの一例（カラートークンJSON）。

{
  "color": {
    "brand": {
      "50":  "#eff6ff",
      "100": "#dbeafe",
      "500": "#3b82f6",
      "600": "#2563eb",
      "900": "#1e3a8a"
    },
    "neutral": {
      "0":   "#ffffff",
      "100": "#f5f7fa",
      "500": "#64748b",
      "900": "#0f172a"
    }
  },
  "typography": {
    "fontFamily": "Inter, sans-serif",
    "scale": {
      "xs": "12px","sm":"14px","base":"16px",
      "lg":"18px","xl":"20px","2xl":"24px"
    }
  },
  "spacing": {"1":"4px","2":"8px","4":"16px","8":"32px"}
}

これをそのままTailwind CSSのtailwind.config.jsやCSS変数に流し込めば、即プロジェクトで利用可能です。

Claude Codeでの呼び方

1. MCPサーバを追加

claude mcp add aidesigner npx -- -y aidesigner-mcp

※パッケージ名は実装により異なるため、利用するAIDesigner MCPの公式READMEを確認してください。

2. プロンプトで呼び出す

あなた: ブランドカラー#3b82f6を基調に、ECサイト向けの
       デザインシステムを生成して、tokens.jsonに保存して。
       ダークモードも含めて。

Claude: aidesigner.generate_palette を呼びます…
        aidesigner.generate_typography を呼びます…
        tokens.json に書き込みました。

3. 出力をプロジェクトに反映

生成された tokens.json をTailwind/CSS変数/Style Dictionaryに取り込めば、即プロジェクト全体に展開できます。

利用シーン

• 新規プロジェクトの初期セットアップ―ゼロからシステムを作る時間を大幅短縮
• プロトタイピング―複数案のカラーパレットを瞬時に試せる
• リブランディング―ブランドカラー変更時の全トークン再生成
• アクセシビリティ強化―既存色のWCAG適合チェック・代替色提案
• ダークモード対応の後付け―既存ライトテーマからダークセット自動生成
• 個人開発・MVP―デザイナー不在のフェーズで一貫したUIを担保

よくある質問

Q. AIDesigner MCPは無料？

A. 多くのMCPサーバはOSSで無料ですが、商用版や有料機能を提供する派生もあります。利用前にライセンスを確認してください。

Q. Claude Code以外でも使える？

A. MCP対応クライアント（Claude Desktop / Cursor等）であれば同様に利用可能です。

Q. Figmaに直接出力できる？

A. Figma連携機能を持つ実装もありますが、現状は「JSON出力→Figma側プラグインで取り込み」という二段構成が一般的です。

Q. ライセンスは？

A. MCPサーバの実装ごとに異なります。MITやApache 2.0が多いですが、必ず公式リポジトリで確認を。

Q. 既存デザインシステムに追加できる？

A. はい、不足するトークンや新コンポーネントだけ生成して既存システムに統合する使い方も可能です。

まとめ

• MCPはLLMと外部ツールを繋ぐ標準プロトコル
• AIDesigner MCPでカラー/タイポ/スペーシング自動生成
• Claude Codeから自然言語で呼び出し→tokens.jsonに保存
• 新規・リブランド・ダーク化・アクセシビリティ改善に有効

気になる方は公式サイト・ドキュメントで最新情報を確認してください。

Model Context Protocol公式を見る