UI は「App Bar + Drawer + Card Grid + Tabs」のように部品の名前で指示する
「おしゃれに」「プロっぽく」と頼むより、画面を構成する UI 部品の名前で構造を指定する方が、AI の出す画面がまとまる。部品の名前は The Component Gallery（実在するデザインシステムの部品例を集めたサイト）で覚える。
どんな時に使う？
- バイブコーディングで作った画面が、毎回ありがちな見た目になる
- 頭の中の画面イメージを、言葉でうまく伝えられない
手順
- The Component Gallery（component.gallery/ ）で、Navigation・Drawer・Tabs・Card・Accordion・Breadcrumbs などの部品名と、各デザインシステムでの実例を見る
- 作りたい画面を部品の組み合わせで書く。例: 「App Bar + 左に Drawer + 中央に Card Grid + 上部に Tabs の構成で」
- 部品ごとの中身（Card に何を出すか、Tabs の項目）を続けて書く
- 使っているデザインシステム（MUI、shadcn/ui など）があれば、その部品名に合わせる
注意点
- 部品名はデザインシステムごとに少しずつ違う（Drawer / Sheet / Side panel など）。プロジェクトで使う名前に揃え、用語集に書いておくと毎回ぶれない
- 画像から作る場合は Codex で「画像を作ってから UI を実装する」6ステップ（再現用プロンプトを書かせるのが肝）、承認したモックから Issue を起こす流れは UI は「画像モック→承認→Issue→並列実装」の順で作らせる
出典
- X の投稿より: @7_eito_7 · 2026-02-28