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

コーディングエージェント向けのデザインシステムは「要点を集めたリファレンス・トークンのJSON・禁止パターン・用語集」で組み、成熟度を段階でチェックする

エージェントに守らせるデザインシステムを、要点をまとめたCLAUDE.md、JSONのトークン、AI向けの禁止パターン、用語の定義に分ける。コンポーネント一覧と禁止例を見比べるShowcaseも作り、整備がどの段階まで進んでいるかをチェックリストで確かめる。

@tsubotax · 投稿 2026-03-15
#AIデザイン#デザインシステム#ClaudeCode#CLAUDE.md

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

Claude Code / Cursor にデザインシステム通りのUIを書かせたいが、何から整えればいいかわからないとき。

やり方

  1. CLAUDE.md（または AGENTS.md）に要点だけのクイックリファレンスを置く：よく使うトークン、コンポーネント名、絶対に守るルール。
  2. デザイントークンはJSONで定義し、コードからもAIからも同じ値を参照する。
  3. AI向けの禁止パターン（やりがちなNG例）を、OK例と並べて定義する。
  4. 用語の意味をそろえる：「カード」「パネル」「セクション」など、デザインシステムで使う言葉の定義をガイドラインにまとめ、AIと人の解釈のずれをなくす。
  5. コンポーネントのデモ一覧と禁止パターンを見比べられるShowcaseページを作る（人のレビュー用、AIのスクショ確認用）。
  6. 成熟度チェックリスト（5段階）で、「どの順番で何を整えればAIがデザインシステム通りに書くか」を確かめ、次にやることを決める。

注意点・対応状況

  • チェックリストの中身はリンク先のリポジトリを参照（CSVには概要のみ）。

出典

X の元の投稿を開く