デザイントークンと MCP

Model Context Protocol は、AI アシスタントを外部のツールやデータに接続するためのオープン標準です。デザイントークンに適用すると、MCP サーバーがプロジェクトの最新のトークン値を AI コーディングエージェントに提供し、生成されるコンポーネントがモデルの創作した値ではなく実際のデザインシステムを参照するようになります。

何を解決するのか

コンポーネントを書く AI エージェントは、デザインの値をどこかから得なければなりません。ほかに手立てがなければ、学習で見たものを使います。よくある Tailwind の既定値、人気のパレット、もっともらしい余白です。

出力はコンパイルが通り、妥当に見え、そして間違っています。目に見えて間違ってはいない、そこが難しいところです。あなたの主要色ではなく、それに近い 16 進数なのです。

パレットをプロンプトに貼れば一つの会話は乗り切れます。次の会話には引き継がれず、チーム規模にも広がりません。

MCP が変えること

Model Context Protocol は、ツールとデータを AI アシスタントに公開するためのオープンな標準です。Cursor や Claude Code といったクライアントがサーバーに接続し、作業中にそのツールを呼び出せるようになります。

デザインシステムにとってこれは、プロンプトに何が入ったかに頼らず、必要になったその瞬間にエージェントが値を問い合わせられるということです。典型的なサーバーは次を公開します。

トークンの取得: 色・タイポグラフィ・余白・角丸・影・モーションの現在の値
コンポーネントの取得: 指定したコンポーネントの仕様
違反チェック: あるコード片について、どの値が直書きで、どのトークンがそれを置き換えるか
トークンの提案: システムが定義していない値を、でっち上げる代わりにエージェントが要求する経路

最後の一つは見た目以上に重要です。失敗の形を、黙って発明することから、人が答えられる明示的な要求へと変えます。

どうつなぐか

MCP クライアントは、サーバー名と接続方法を書いた小さな JSON 設定を読みます。Cursor ではプロジェクトの MCP 設定に、Claude Code では CLI から追加します。認証は通常、一つのプロジェクトに限定したトークンです。

つながってしまえば、エージェントは毎回の生成でデザインシステムを参照できます。プロンプトごとの貼り付けは不要です。

ルールファイルとの違い

Cursor のルールなどの仕組みは、静的なテキストをコンテキストに差し込みます。これは有効で、やる価値もありますが、そのテキストはスナップショットです。トークンが変わるまでは正しく、変わった後は自信たっぷりに誤りになります。

MCP サーバーは呼び出し時に読まれます。トークンが変われば、次の生成は誰がファイルを更新しなくても新しい値を見ます。

Flash DSM との関係

Flash DSM は、あなたが所有するどのデザインシステムについても上記のツールを公開する MCP サーバーを提供します。Cursor、Claude Code、あるいは限定トークンを持つ任意の MCP クライアントから接続できます。