AIへのUI指示は「App Bar + Drawer + Card Grid + Tabs」のようにUIパターン名で構造を伝える
「いい感じのダッシュボード」ではなく、使うUIパターンの名前を並べて構成を指示する。名前を知るためにUIパターン集を見ておく。
どんな問題を解決するか / いつ使うか
バイブコーディングで画面がのっぺりする・素人っぽくなるとき。
やり方
- UIパターンの名前を覚える。参考：The Component Gallery（2,500以上の実例）、@kawai_design のUIパターン辞典（ハンバーガーメニュー、カンバン、OTP入力、ボトムシートなど108種）。
- 指示を構造で書く。例：
App Bar + Drawer + Card Grid + Tabs 構成で、ユーザー管理画面を作って。
Card Grid は3列、Tabs は「全員 / 管理者 / 招待中」。- 細部（色・余白）はDESIGN.mdやデザインシステムに任せ、プロンプトでは構造に集中する。
注意点・対応状況
- 「20倍よくなる」は投稿者の表現。
出典
- 投稿者: @7_eito_7 (えいと) ／ 関連：@kawai_design
- 投稿: @7_eito_7 · 2026-02-28 / @kawai_design · 2026-03-24
- 投稿日: 2026-02-28 / 2026-03-24（JST）
- 収集日: 2026-10-09（JST）