
AIでUIスタイリング入門
トークン・コンポーネント・ブロックが揃ったので、最後にこれらを 1つのページにまとめて可視化 します。
最初に用意していたプロンプトは「すごいしっかりした、コンポーネント定義までやる」内容でした。でも、よく見ると 分析確認には過剰 です。再利用のための実装定義まで入っている。
ここで便利なのが、AIに 「最小限のやり方は何ですか?」と問う やり方です。
動画ではこんなふうに聞いています。
「私はUIの分析が欲しいだけで、コンポーネントの要素の定義とかは求めていない。このプロンプトは分析に特化した最小限の内容になっていますか?」
返ってきたのは「鋭い質問です。このプロンプトは分析確認には過剰です」。 原プロンプトは「他で使い回す実装が主目的」だったので、分析だけなら 静的に並べて見せるだけでいい という結論に。
ここから学べるのは、AIへの指示で やりたいことをちゃんと伝える こと。「目的を果たすための最小限のやり方は?」と問えば、AIは過剰な提案を削って必要なところだけに絞ってくれる。
トークンも時間も節約できるし、出力もシンプルになる。これも今シリーズの大事な原則のひとつです。
完成した分析ページには、カラー、スペーシング、レディオス、リング、シャドウ、タイポグラフィといった トークン が並び、ロゴやボタンなどの コンポーネント、ヒーローヘッダーやテーブルなどの ブロック が一覧で書き出されます。
ただし、これだけ見ても「で、これがどこで使われているの?」が分かりません。
実際に活用するときは、左に分析結果、右に元のUI を並べて見るのがおすすめです。 動画でもこの並べ方をしながら、「タイポグラフィのボディはこの普通の文章の部分かな?多分14pxが当たってる」と確認していきます。
タイポグラフィを例にすると、こんな見方ができます。
並べて確認すると「タイトル系にはこれくらい」「本文にはこれくらい」のスケール感が体に入ります。これが 次に自分でUIを作るときの肌感 になる。
データがあるので、「なぜここの余白はこのくらい空いてるの?」のような質問をチャットで投げれば、AIから具体的な示唆も拾えます。
ここまでで「UI成り立っている要素」がトークン・コンポーネント・ブロックに分解されました。
注意点として、これを 毎回やるべき という話ではないです。本質は 要素ごとに見る視点を持つ こと。 一度この分解作業を経験すると、世の中のいろんなUIを「これってトークンレベルで言うと…」「このブロックは…」と分解的に見られるようになります。
世の中のUIを分析する目、盗む目を持つ。これが分解作業の最終的な狙いです。
スタイリング編はこれで一区切りです。次のクエストでは、ここで分解した結果を Figmaに持ち込む 工程に進みます。AIが理解しやすい形に整理しておくと、Figmaへの反映もAIに任せられるようになります。