MCPサーバーとは？

MCP（Model Context Protocol）サーバーは、コンポーネントの属性とデザイントークンの情報を取得するためのツールです。これにより、開発者はコンポーネントの利用可能な属性とデザインシステムのスタイル規則を迅速に把握することができます。

MCPサーバーの使い方は？

特定のコマンドを実行することで、コンポーネントの属性またはデザイントークンの情報を簡単に取得できます。わずか数ステップで使用を開始できます。

MCPサーバーは、コンポーネントの属性とデザイントークンの情報を迅速に取得する必要がある開発チームに適しており、特にフロントエンド開発者に便利です。

コンポーネントの属性を取得MCPサーバーを通じて、任意のコンポーネントの属性リストを簡単に取得できます。

デザイントークンを取得デザイントークンファイルから、色、フォント、間隔などの情報を抽出することができます。

利点

コンポーネントの属性とデザイントークンの取得プロセスを簡素化します。

開発効率を向上させ、重複作業を減らします。

複数の出力形式をサポートし、さまざまなプロジェクトに簡単に統合できます。

制限

設定と使用には一定の技術的な知識が必要です。

一部の特定のデザインシステムの要件をサポートしない場合があります。

依存関係をインストール

Deno実行環境がインストールされていることを確認してください。

サーバーを起動

提供されたスクリプトを使用してMCPサーバーを起動します。

APIを呼び出す

APIを通じてコンポーネントの属性またはデザイントークンを取得します。

ボタンコンポーネントの属性を取得ボタンコンポーネントの属性情報を取得する方法をデモンストレーションします。

色のデザイントークンを取得色のデザイントークンを取得する方法をデモンストレーションします。

MCPサーバーはどのプログラミング言語をサポートしていますか？

デザイントークンを生成するにはどうすればいいですか？

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

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

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

$ deno task debug-mcp

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

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

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

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

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

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