コンポーネントを抽出する

トークンが揃ったら、次は コンポーネント の抽出です。ボタン、カード、メニュー、アバターなど、再利用される部品をAIに整理してもらいます。

プロンプトの前半はトークンと同じ。前回作った `token.json` を参照させて、「トークンからコンポーネントへつなぐ」形で指示します。 タスクは「再利用される部品を5から15個識別してJSONで出力」。トークンを参照したコンポーネントが組まれるので、上下のつながりが見える状態になります。

バリアンツでまとめる

ここで重要な視点が バリアンツ（variants）です。

バリアンツは「同じ種類のコンポーネントで、パターンが分かれているもの」をまとめる概念。たとえばボタンなら、プライマリー / セカンダリー / ターシャリーといった種類別。サイズなら、small / medium / largeといった寸法別。

これらを別々のコンポーネントとして扱うんじゃなく、ひとつのボタンの中のバリエーション として整理する。動画では「ルー大柴かお前は」と笑いながらreusableの概念を解説していますが、本質は「同じものはまとめる」というシンプルな話です。

AIの結果を疑って修正する

ここで実例として、AIが返してきた結果が バリアンツになっていない ケースが出てきます。ボタンがプライマリー、セカンダリー、アイコンと別々のコンポーネントとして並んでいる状態。

「これってバリアンツになってる？」と質問すると、AIは「ルール違反です」と認めて修正案を返してきます。

この瞬間が AIとの付き合い方の核心 です。AIが正しいとは限らない。自分に知識があるからこそ、結果を疑って「これおかしくない？」と聞ける。だからこそAIを古文（顧問）として雇い、最終判断は自分でする姿勢が要ります。

ブロックを抽出する

コンポーネントの次は ブロック です。

ブロックは「コンポーネントを組み合わせて作る、ページ内で意味的にまとまった構造単位」のこと。ヘッダー、グローバルナビ、リクエストカードのテーブル領域などが該当します。

ブロック理解は初心者ほど見落としがち

ブロックには線が引いてあるわけじゃないので、目に見えにくい単位です。動画では「真ん中でちゃんとブロックの中に入ってるけど、こういう目線って初心者ほど持ってない」と話しています。

実装したりオートレイアウトを組んだりすると徐々に身につくものですが、いきなりは難しい。だからこそAIに整理させて、「こういう捉え方ができますよ」を意味ごとに見せてもらう のが効きます。

プロンプトはコンポーネントとほぼ同じ。「ブロックとは：コンポーネントを組み合わせた、意味的にまとまった構造単位」と定義を渡して、同じパターンBのデザインで抽出させます。

待ち時間の運用Tips

こういう作業は トークンを結構消費 します。Claude CodeやCursorなど自分が使っているツールの プランやトークンリセットのタイミング を把握しておくとお得。

おすすめの運用は 作業の片手間 or 夜寝る前に投げておく こと。 ステップ1〜4のプロンプトを全部投げて「順番にやってくれていいよ、確認はあとでまとめて」とやれば、寝てる間にバッと進めてくれる。朝起きてチェックする運用です。

精度は多少下がるかもしれませんが、待ち時間をスキップできるのは大きい。

次回予告

トークン・コンポーネント・ブロックが揃いました。次は最後のステップ、これらを 分析一覧ページとしてまとめる 工程です。AIへの「最小限を問う」コツと、結果の見方も紹介します。