Design Systems Mcp

Design Systems MCP Server

権威あるデザインシステムの知識にインテリジェントにアクセスできる、AI 搭載の Model Context Protocol（MCP）サーバーです。W3C 標準、WCAG ガイドライン、デザインシステムの実践、そして汎用モデルでは対応できない 2025〜2026 年のエージェントインターフェースプロトコルに関する、厳選された 395 件のエントリーを収録しています。

🌐 ライブデモ： https://design-systems-mcp.southleft.com/

このサーバーを開発した理由

最先端のモデルは、Atomic Design、BEM、WCAG の達成基準についてはすでに知っています。しかし、MCP Apps が _meta["openai/outputTemplate"] から _meta.ui.resourceUri に移行したことや、A2UI が 2026 年 6 月に v1.0 候補版に到達したことを、常に正確に把握しているとは限りません。変化の速い仕様では、どのモデルの学習内容も、モデル自身には検知できない形で古くなっています。そのため、昨年のフィールド名を自信たっぷりに回答してしまいます。

このサーバーは、その問題を解決します。日付と出典が明記された一次情報からの抜粋コンテンツを提供し、小規模モデルの推測にも、最先端モデルが高コストでリアルタイムに再調査する方法にも勝ります。

機能

主な機能

• 🎯 ベクトル検索＋キーワード検索 - プラグイン可能な埋め込みモデルを備えた Supabase pgvector（Cloudflare Workers AI bge-m3 を使用。Workers プラン内でエッジネイティブに無料で利用でき、OpenAI も任意で使用可能）。埋め込みが利用できない場合も、Postgres の全文検索が機能します
• 📚 厳選された 395 件のエントリー - W3C 標準、WCAG 2.2、ARIA の実践、主要なデザインシステム、エージェントインターフェースプロトコルを収録
• 🚦 関連性の下限値 - IDF 加重スコアリングにより、対象を扱う情報がない場合は、関連性が近いだけのコンテンツを自信ありげに返さず、何も返しません
• 🚀 エッジ最適化 - グローバルに展開する Cloudflare Workers へのデプロイ

最新の更新

• 🤖 エージェントインターフェースの対応範囲（2026 年 8 月） - A2UI v1.0、MCP Apps SEP-1865、AG-UI、Sentient Design、生成型／一時的 UI、コンポーネント契約
• 🧪 評価ハーネス - scripts/eval-mcp.ts が、4 段階の難易度にわたって検索結果と内容の両方を評価します
• 🛡️ ソース信頼性バッジ - すべての回答で、出典を「一次情報」「権威ある情報」「参考情報」「例」「コミュニティ」に分類して示します
• 📖 あらゆる MCP クライアントに対応 - MCP 対応のあらゆるクライアント（Claude Desktop、Cursor、Windsurf、Codex など）で動作します
• 🏛️ 主要なデザインシステムを詳細に収録 - Carbon、Polaris、Atlassian、Material 3、Fluent、Spectrum、Nord、Mantine、shadcn/ui、Radix、Untitled UI のガイダンスとトークン構造を収録。プロパティ一覧だけではありません

開発者エクスペリエンス

• 🌐 セットアップ不要 - 公開 MCP エンドポイントをすぐに利用できます
• 🤖 AI チャットインターフェース - ナレッジベースに基づく自然言語の質疑応答を Cloudflare Workers AI（Llama 3.3 70B）経由でストリーミングします。OpenAI も API クレジットも不要です
• 🧪 ローカル開発 - ホットリロードに対応した完全なテスト環境
• 📝 充実したドキュメント - 主要なすべての MCP クライアント向けに、最新のセットアップガイドを用意しています

コンテンツライブラリ

厳選した395件のエントリーを収録：

エージェントインターフェースとAI（2025～2026年 — 汎用モデルが誤りやすい情報）

• A2UI Protocol v1.0（Google）— 隣接リスト形式のコンポーネント、カタログネゴシエーション、A2A バインディング
• MCP Apps / SEP-1865 — ui:// リソース、CSP メタデータ、ui/ メソッド名前空間、ホストのテーマ設定変数
• AG-UI イベントリファレンス、OpenAI Apps SDK から MCP Apps へのフィールドレベルの移行マップ
• Sentient Design（Josh Clark）— フレームワーク、三角形、徹底的に適応するエクスペリエンス
• 生成型・一時的 UI — Google Research の生成型 UI に関する論文、コンテンツとクローム
• コンポーネント契約とデータとしてのコンポーネント（Nathan Curtis、Christine Vallaure）
• AGENTS.md / SKILL.md / DESIGN.md — エージェント向けデザインシステムレイヤー
• Lovable、v0、Figma Make、Replit がそれぞれデザインシステムをどのように取り込むか
• 信頼できる情報源をめぐる議論：3つの陣営と、「コード主導かデザイン主導か」が本質的な用語ではない理由
• コンテキストベースのデザインシステム、コンポーネント契約、機械可読なドキュメント
• デザインシステムを Claude Code、Copilot、Cursor、Windsurf に届ける方法

標準と仕様

• W3C Design Tokens Community Group（DTCG）仕様
• WCAG 2.2 ガイドライン（A、AA、AAA レベル）
• WAI-ARIA Authoring Practices Guide（APG）
• W3C Web Content Accessibility Guidelines
• W3C のモバイルアクセシビリティ

デザインシステムのリソース

• Material Design 3（Google）
• Fluent Design System（Microsoft）
• Ant Design（Alibaba）
• Carbon Design System（IBM）
• Polaris（Shopify）
• Lightning Design System（Salesforce）
• Atlassian Design System
• Adobe Spectrum
• GitHub Primer
• Shopify Polaris

ツールとフレームワーク

• Figma デザインシステムガイド
• Style Dictionary ドキュメント
• Design Tokens Format Module
• Storybook のベストプラクティス

方法論とベストプラクティス

• Atomic Design の原則
• Design Systems Handbook
• コンポーネントアーキテクチャのパターン
• アクセシビリティの実装ガイド

クイックスタート

パブリック MCP サーバーを使用する（推奨）

インストールは不要です。任意の MCP クライアントをライブサーバーに接続してください。

https://design-systems-mcp.southleft.com/mcp

詳しい設定手順については、以下の「MCP クライアントへの接続」セクションをご覧ください。

ローカル開発

1. クローンとインストール

   git clone https://github.com/southleft/design-systems-mcp.git
   cd design-systems-mcp
   npm install
   

2. 環境を設定

   cp .dev.vars.example .dev.vars
   # Edit .dev.vars and add your credentials
   

3. 開発サーバーを起動

   npm run dev
   

   サーバーは http://localhost:8787 で利用できます。

MCP クライアントに接続する

以下からお使いの AI コーディングツールを選択し、セットアップ手順を確認してください。

claude mcp add --transport http design-systems https://design-systems-mcp.southleft.com/mcp

{
  "mcpServers": {
    "design-systems": {
      "type": "http",
      "url": "https://design-systems-mcp.southleft.com/mcp"
    }
  }
}

claude mcp list

{
  "mcpServers": {
    "design-systems": {
      "url": "https://design-systems-mcp.southleft.com/mcp"
    }
  }
}

{
  "design-systems": {
    "url": "https://design-systems-mcp.southleft.com/mcp",
    "description": "Design systems knowledge and best practices"
  }
}

{
  "mcpServers": [
    {
      "name": "design-systems",
      "url": "https://design-systems-mcp.southleft.com/mcp",
      "description": "Design systems knowledge base"
    }
  ]
}

{
  "mcp": {
    "servers": {
      "design-systems": {
        "url": "https://design-systems-mcp.southleft.com/mcp"
      }
    }
  }
}

{
  "mcpServers": {
    "design-systems": {
      "url": "http://localhost:8787/mcp"
    }
  }
}

接続に関するトラブルシューティング

サーバーが応答しませんか？

• URL が正しいことを確認してください：https://design-systems-mcp.southleft.com/mcp
• curl でテストしてください：curl https://design-systems-mcp.southleft.com/health
• クライアントがリモート MCP サーバーに対応していることを確認してください。

ツールが表示されませんか？

• 設定を変更した後、MCP クライアントを再起動してください。
• クライアントのログで接続エラーを確認してください。
• JSON の設定構文が正しいことを確認してください。

お困りですか？

• イシューを作成してください：GitHub Issues

利用可能な MCP ツール

このサーバーは AI アシスタント向けに以下のツールを提供します。

search_design_knowledge

意味的な理解に基づいて、ナレッジベース全体を検索します。

パラメーター：

• query（string、必須）- 検索クエリ
• category（string、任意）- カテゴリーで絞り込み
• tags（array、任意）- タグで絞り込み
• limit（number、任意）- 最大結果数（デフォルト：15）

例：

{
  "name": "search_design_knowledge",
  "arguments": {
    "query": "WCAG 2.2 color contrast requirements",
    "category": "guidelines",
    "limit": 5
  }
}

search_chunks

コンテンツチャンク内から特定の情報を検索し、詳細な回答を得ます。

パラメーター：

• query（string、必須）- 検索クエリ
• limit（number、任意）- 最大チャンク数（デフォルト：8）

例：

{
  "name": "search_chunks",
  "arguments": {
    "query": "W3C DTCG design tokens specification",
    "limit": 3
  }
}

browse_by_category

カテゴリ別に整理されたコンテンツを閲覧します。

カテゴリ： components、tokens、patterns、guidelines、workflows、general

パラメーター：

• category（文字列、必須）- 閲覧するカテゴリ

get_all_tags

フィルタリングや探索に利用できる、すべてのコンテンツタグを取得します。

API の使用例

API を直接テストする

ヘルスチェック：

curl https://design-systems-mcp.southleft.com/health

MCP ツール一覧：

curl -X POST https://design-systems-mcp.southleft.com/mcp \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/list"}'

検索クエリ：

curl -X POST https://design-systems-mcp.southleft.com/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 2,
    "method": "tools/call",
    "params": {
      "name": "search_chunks",
      "arguments": {"query": "design tokens", "limit": 3}
    }
  }'

AI チャットインターフェース（ストリーミング）：

/ai-chat エンドポイントは Server-Sent Events ストリームを返すため、コンテンツが段階的に表示されます。各イベントは data: {"t": "<chunk>"}\n\n で、event: done\ndata: {}\n\n で終了します。

curl -N -X POST https://design-systems-mcp.southleft.com/ai-chat \
  -H "Content-Type: application/json" \
  -d '{"message":"What are the WCAG 2.2 contrast requirements?"}'

ホストされたウェブ UI（/）はこのストリームを利用し、Markdown を段階的にレンダリングします。

コンテンツの追加

ウェブコンテンツの取り込み

# Single URL
npm run ingest:url https://material.io/components/buttons

# Bulk from CSV
npm run ingest:csv urls.csv

# Crawl entire website
npm run crawl:website https://polaris.shopify.com --max-depth 3

PDF コンテンツの取り込み

npm run ingest:pdf path/to/design-guide.pdf

ベクトル埋め込みの生成

npm run ingest:vectors

開発

使用可能なスクリプト

• npm run dev - ローカル開発サーバーを起動します
• npm run deploy - Cloudflare Workers にデプロイします
• npm run ingest:pdf <file> - PDF コンテンツを取り込みます
• npm run ingest:url <url> - ウェブコンテンツを取り込みます
• npm run ingest:csv <file> - CSV から一括で取り込みます
• npm run crawl:website <url> - ウェブサイト全体をクロールします
• npm run ingest:vectors - すべてのコンテンツの埋め込みを生成します
• npm run setup:supabase - Supabase データベースを初期化します
• npm run check:duplicates - 重複コンテンツを確認します

プロジェクト構成

design-systems-mcp/
├── src/
│   ├── index.ts                    # Main MCP server, transports, tool dispatch, embedded chat UI
│   ├── sse-session.ts              # SSE transport (Durable Object)
│   ├── streamable-http-handler.ts  # Streamable HTTP transport (/mcp)
│   ├── oauth-handler.ts            # OAuth flow
│   └── lib/
│       ├── content-manager.ts      # Content management
│       ├── search-handler.ts       # Vector + keyword search dispatch
│       ├── source-authority.ts     # Reliability tiers & APG disclaimers
│       └── ... (chunker, formatters, ingestion helpers)
├── content/
│   └── entries/              # Ingested content (JSON)
├── supabase/
│   └── migrations/           # SQL schema + RPC functions
├── scripts/
│   ├── ingestion/            # Content ingestion pipeline (URL, PDF, HTML, CSV, crawler)
│   └── build/                # Build helpers (manifest generation)
├── types/
│   └── content.ts           # TypeScript definitions
├── wrangler.jsonc          # Cloudflare Workers config
└── .dev.vars              # Local environment variables

デプロイ

Cloudflare Workers へのデプロイ

1. Cloudflare にログイン

   npx wrangler login
   

2. シークレットを設定

   npx wrangler secret put OPENAI_API_KEY
   npx wrangler secret put SUPABASE_URL
   npx wrangler secret put SUPABASE_SERVICE_KEY
   npx wrangler secret put SUPABASE_ANON_KEY
   

3. デプロイ

   npm run deploy
   

詳しい手順については、DEPLOYMENT.md を参照してください。

ベクトル検索のアーキテクチャ

このサーバーでは、本番環境向けの高品質なベクトル検索に Supabase を使用します。

• データベース： pgvector 拡張機能を備えた PostgreSQL
• 埋め込み： VECTOR_SEARCH_PROVIDER=cloudflare を介した Cloudflare Workers AI @cf/baai/bge-m3（1024 次元、エッジネイティブ、API キー不要）。OpenAI text-embedding-3-small（1536 次元）にも対応しています
• しきい値： 最適な再現率を実現する 0.15
• ハイブリッド検索： 意味ベクトルとテキストマッチングを組み合わせます
• パフォーマンス： 適切なインデックス設定により、100 ミリ秒未満でクエリを実行します

統計：

• 本番データベースに 395 件のエントリ
• 4,800 件以上のコンテンツチャンク。Cloudflare Workers AI によるエントリ単位のベクトル検索
• W3C 規格、WCAG ガイドライン、デザインシステムのドキュメント
• 権威ある新しいソースを定期的に追加して更新

トラブルシューティング

よくある問題

ベクトル検索が機能しない：

• 環境変数に設定された Supabase の認証情報を確認してください
• データベーステーブルが存在することを確認してください：npm run setup:supabase
• ログを確認してください：npx wrangler tail

コンテンツが見つからない：

• コンテンツが存在することを確認してください：npm run check:duplicates
• 埋め込みが生成されているか確認してください：コンテンツエントリの embedding フィールドを確認します
• ローカルで検索をテストしてください：npm run dev を実行し、curl コマンドを使用します

MCP 接続に失敗する：

• URL が正しく、アクセス可能であることを確認してください
• クライアントがリモート MCP サーバーに対応していることを確認してください
• curl でテストしてください：curl https://design-systems-mcp.southleft.com/health
• 設定を変更した後は MCP クライアントを再起動してください

ドキュメント

• DEPLOYMENT.md - 本番環境へのデプロイ
• CONTRIBUTING.md - 貢献方法とコンテンツの追加方法
• CREDITS.md - コンテンツのソースとクレジット表記

ライセンスとクレジット表記

ライセンス： MIT License - 個人利用および商用利用は無料です

コンテンツのクレジット表記： このプロジェクトは、多くの優れた制作者によるデザインシステムの知識をまとめたものです。すべてのオリジナルコンテンツの知的財産権は、それぞれの著者に帰属します。

• クレジット表記の一覧は CREDITS.md を参照してください
• 知見を共有する際は、必ずオリジナルのソースにリンクしてください
• 制作者のウェブサイトを訪問して、オリジナルの制作者を支援してください

セキュリティとプライバシー

• 機密データは保存されません。公開されているデザインシステムの知識のみを扱います
• 環境変数には Cloudflare secrets を使用します
• オープンソースで、監査が可能です
• プライバシーを重視し、ユーザーデータを収集しません
• 定期的にセキュリティアップデートを実施します

セキュリティ上の問題は、こちらに報告してください：GitHub Security

コントリビューション

コントリビューションを歓迎します。以下のようなご協力をお待ちしています。

• バグや問題の報告
• 新機能の提案
• デザインシステムのコンテンツの追加
• コードベースの改善
• ドキュメントの拡充

以下の手順に従ってください。

1. 既存のissueを確認します
2. 新しい issue を作成して話し合います
3. プルリクエストを送信します
4. コントリビューションガイドラインに従います

サポート

• Issue：GitHub Issues
• ディスカッション：GitHub Discussions
• ライブデモ：https://design-systems-mcp.southleft.com/

謝辞

知識を共有してくださったデザインシステムコミュニティに感謝します。

• Atomic Design の手法を提唱した Brad Frost
• W3C Design Tokens Community Group
• Web Accessibility Initiative (WAI)
• 取り組みをオープンに共有してくださるすべてのデザインチーム
• デザインシステムコミュニティの皆様

完全な一覧はCREDITS.mdをご覧ください。

Cloudflare Workers と Model Context Protocol を使用して ❤️ を込めて構築しました