テック技報最新号へ →
デザイン

トークン名ではなく「正しい使い方のコード例（ゴールデンセット）」をエージェントに渡す。レジストリ／MCPで配る

--primary のようなトークン名だけではAIには意味が伝わらない。「フォームの送信ボタンは bg-primary」のような実際のコード例をまとめて、エージェントが検索・取得できる形（レジストリ、MCP）で配る。

@shadcn · 投稿 2026-07-21
#AIデザイン#デザインシステム#コーディングエージェント#shadcn#MCP

どんな問題を解決するか / いつ使うか

デザインシステムやトークンを用意したのに、AIがそれを正しい場面で使ってくれないとき。チームで複数のエージェント／ツールに同じデザインシステムを守らせたいとき。

やり方

  1. トークンやpropsの一覧とは別に、「正解のコード例」集（ゴールデンセット）を作る。例：
html
<button className="bg-primary">保存</button>
<form>… <button type="submit" className="bg-primary">送信</button></form>

→ 「主要ボタンはこう作る」「フォームの送信ボタンは primary」という使う場面まで伝わる。

  1. 例はコンポーネント単位・ブロック単位でまとめ、エージェントが検索して必要なものだけをコンテキストに取り込めるようにする（shadcn の registry + CLI + skills 方式）。
  2. 配布はMCPサーバーにすると楽。Claude Code や Cursor にURLを1つ登録するだけで、トークン・禁止パターン・スニペットを参照させられる（relay のデザインシステムの例）。
  3. 可能なら、アクセシビリティ（WCAG）基準のうちデザインシステム側で守っている項目の対応表も一緒に公開・参照させる。
  4. 自社の分に加えて、外部のレジストリ（OSSのブロック集など）も同じ仕組みで取り込めるようにしておく。

注意点・対応状況

  • 例が古くなるとAIも古い書き方を真似する。デザインシステムを更新するたびにゴールデンセットも更新する。
  • ReUI Pro（shadcn/ui 向けのMCP＋スキル＋ブロック集）は一部有料。

出典

X の元の投稿を開く