トークン抽出から始める理由

UIを分解する時、最初に手をつけるのが トークン です。 色・サイズ・余白・角丸・タイポなど、UIの中で「分解しきれないスタイルの最小要素」を取り出す作業です。

ここを最初にやる理由はシンプルで、上の層（コンポーネント、ブロック）が トークンを参照して組まれている から。土台が見えていないと、上の層を分析しても「なぜこの色なのか」「なぜこのサイズなのか」が見えてきません。

動画では分析対象として パターンB（前回の動画で詳細指定で生成したUI）を使います。

トークン抽出のプロンプト

JSONで出力する理由

AIへの指示はシンプル。「このUIから全トークンをJSON形式で抽出して」と頼みます。 画面じゃなくJSONで出させる理由は2つ。

• **AIが読み込みやすい** — JSON形式はAIにとって理解しやすい構造
• **次のステップで使い回せる** — このJSONを使ってFigmaにVariablesを自動登録したり、別画面の生成にも転用できる

JSONって聞くと「13日の金曜日かよ」と構えてしまうかもしれませんが、難しくありません。整理してくれるAIに親しみやすい形式 だと思っておけば十分です。

ロール（役割）を必ず書かせる

ここが今回のキモです。

トークンを抽出するときに、色やサイズの値だけじゃなく「役割」も一緒に書かせる ようにします。たとえばこんな感じ。

• `text-muted`：補助テキスト、主要情報の階層を一段下げて誘導を作る
• `bg-primary`：主要アクションの背景色

役割が書いてあると、後から見返したときに「この色は何のために存在するか」がパッと分かる。役割なしでただ値だけ並んでいると「色は分かるけど何に使ってるの？」が拾えません。

AIに目的を伝えるコツ

プロンプトを投げる前に、もう一つ大事なポイントがあります。

「何のためにこの分析をするのか」を一緒に伝える。たとえば「素晴らしいデザインの使い手になるため」と書いておくと、AIは 目的に向けて配慮した結果 を返してくれます。

これは人間に対しても同じで、目的や前提を共有しておくと、相手はゴールに向かって考えてくれるようになる。AIも同じです。目的を伝えるとズレが減る。動画の中でも何度も触れられている重要なコツです。

実演の流れ

実際にClaude Codeにプロンプトを貼り付けます。

最初に「いきなり作るのではなく、計画の内容をすり合わせたい」と伝えると、AIから確認の質問が飛んできます。 データソース（スクリーンショットじゃなくHTMLを使う）、分析範囲（パターン比較のナビは除外）、スキーマの解釈、ロール書き方の最適化など。ここを 丁寧にすり合わせる ことで、出力の精度が上がります。

実行すると、タイポグラフィ、リング、シャドウ、余白、色などのトークンがJSON形式で並んで出力されます。

次回予告

次はコンポーネント（ボタン、カード等）とブロック（ヘッダー、ナビ等）の抽出です。ここではAIの結果を疑って修正するコツも一緒に紹介します。