AIでUIスタイリング入門
0%
1
AIでUI作成してデザインスキルは上がるのか？2
AIでUIスタイリングを生成する3
AIでスタイリングを分析する4
Figma MCPでデザインシステムの土台を作るAIでUIスタイリング入門
AIに頼めば、UIはそれっぽく出てきます。でも、その中身を見ずに「できた」で終わらせると、結局なにが起きているのか分からないままです。
色がどこに使われているのか。フォントサイズはどんな段階で組まれているのか。ボタンやカードはどう構造化されているのか。 こういうのを なんとなく以上に見られるようになる ためには、自分で分解できた方が早い。
そして、分解作業はAIに任せられる。AIは要素を整理して構造化するのが得意です。古文（顧問）として働かせて、結果を自分のインプットにする。これがこのクエストでやる中身です。
進める順番は4つに分かれています。
色・サイズ・余白・角丸・タイポなど、UIの 最小単位の変数 をJSONに整理します。 「どこにどの色が使われているか」「どのサイズがタイトルで使われているか」が、データとして読めるようになる。
ボタン、カード、メニューなど、再利用される部品 を抽出します。 ここで重要なのが「バリアンツ」、つまり同じ種類の部品の集合（プライマリー / セカンダリー、small / medium / large）をグループとしてまとめる視点。
ヘッダー、グローバルナビ、テーブルなど、意味的にまとまった構造単位 を抽出します。 ブロックは線で囲まれていなくても存在する単位なので、初心者ほど見落としがち。AIに整理させると、見えなかった構造が浮かび上がります。
トークン・コンポーネント・ブロックを 1ページに並べて可視化 します。 ここまでくると、あとは元のUIと並べて「これはどこに使われているか」を確認できる状態になります。
「自分で分析する方が学びになるのでは？」と思うかもしれません。たしかにそれは正しい。
でも、初心者がいきなり全部やろうとしても「どこから手をつければいいか分からない」になります。だからまずはAIに 教科書を作ってもらう イメージで進める。
AIは分析が得意。整理された結果を自分が 食べてインプットにする。それを次のアウトプットに使うことで、デザインスキルが筋肉のように育っていく。トレーニングと一緒です。
このクエストを終えると、UIを見たときに 要素の単位で見える目 が育ち始めます。
「あ、ここは同じトークンが使われている」「これはコンポーネントとして抽出できそう」「このブロックは意味的にまとまっている」のような視点。
世の中のいろんなUIを 盗む目 が手に入ります。自分でデザインする時にも、要素を意識して組み立てられるようになる。
次は実際に手を動かして、最初のステップ「トークンの抽出」をやります。プロンプトを投げて、AIにJSON形式で整理させる流れを実演していきます。