Design System Analyzer

🚀 デザインシステムのMCPサーバー

このプロジェクトには、コンポーネント属性とデザイントークン情報を提供するMCP（モデルコンテキストプロトコル）サーバーが含まれています。このサーバーを利用することで、コンポーネント属性やデザイントークンの情報を効率的に取得できます。

🚀 クイックスタート

✨ 主な機能

MCPサーバーは2つの主要なツールを提供しています。

• getComponentProps：コンポーネント属性情報を検索します。
• getTokens：トークンファイルからデザイントークン情報を取得します。

🔧 MCPサーバーのデバッグ

MCPサーバーをデバッグするには、以下の手順を実行します。

1. メモリdbgスクリプトを実行します。

$ deno task debug-mcp

このスクリプトは以下のことを行います。

• メモリ内のクライアント - サーバー接続を作成します。
• コンポーネント属性とトークンを検索するためのサンプル呼び出しを行います。
• 結果をコンソールに表示します。

異なるコンポーネントや特定のトークン要求をテストするために、デバッグスクリプトを変更することができます。

📦 デザイントークンの生成

デザイントークンは src/design-system/tokens ディレクトリ内のJSONファイルに保存されています。

• color.json：カラーパレットとテーマカラー
• typography.json：フォントファミリー、サイズ、ウェイト
• spacing.json：スペーシングスケール
• radius.json：マージン半径値

トークン生成の流れ

トークンは Style Dictionary を通じて処理され、以下のワークフローがあります。

1. tokens ディレクトリ内のJSONファイルでトークン値を定義します。
2. Style Dictionaryが src/design-system/style-dictionary/config.json の設定に基づいてこれらのトークンを処理します。
3. 出力形式は以下の通りです。
   • CSS変数（tokens.css）
   • JavaScriptモジュール（tokens.js）
   • TypeScript宣言（tokens.d.ts）

トークンを生成するには、以下のコマンドを実行します。

$ deno task build-tokens

生成されたファイルは src/design-system/style-dictionary/dist ディレクトリに保存され、コンポーネント内でインポートすることができます。