AIに伝わるUI語彙、全103個。名前を知るだけで、指示精度が劇的に変わる。
21件のコンポーネント
クリックでアクションを起こすUI。Primary / Secondary / Ghost等のバリエーション
ボタンのバリエーション使い分け（Primary/Ghost/Outline）ができてると『デザイン理解してるな』になる。
テキストを1行入力する欄
入力欄のデザイン（角丸、フォーカス色、エラー表示）でフォーム全体の印象が決まる。
複数行のテキスト入力欄
テキストエリアが自動リサイズするだけで『お、考えられてるな』ってなる。
プルダウンで選択肢から1つ選ぶ
基本中の基本。ただしブラウザデフォルトのままだとダサい。スタイリング必須。
ON/OFFを複数選択できるチェック欄
フォームの基本要素。カスタムスタイルにするだけで一段上に見える。
ON/OFFをトグルで切り替えるUI
チェックボックスの代わりにスイッチを使うだけでモダンアプリ感が出る。
カレンダーから日付を選択する入力UI
テキスト入力で日付を打たせるのは論外。ピッカーがあって初めてまともなフォーム。
複数の選択肢から1つだけ選ぶ丸ボタン
セレクトボックスより選択肢が一目瞭然。3〜5個の選択肢ならこっちの方が直感的。
ドラッグで数値を調整するバー
数値入力をスライダーにするだけでインタラクティブなアプリ感が出る。
ファイルをドラッグ&ドロップまたはクリックで選択してアップロード
ドラッグ&ドロップ対応のアップロードは『最新のアプリだ』感を即座に与える。
テキスト入力で絞り込みながら選択できるUI
選択肢が多い時にセレクトより圧倒的に使いやすい。ユーザー思いの設計。
入力途中で候補が自動表示されるUI
Google検索みたいなサジェスト。これがあると『体験が考えられてる』と感じる。
6桁の認証コードを1文字ずつ個別のボックスに入力するUI
セキュリティ画面が本格的に見える。2FA対応アプリの証。
+−ボタン付きの数値入力フィールド
ECサイトの数量変更の定番。ブラウザデフォルトの矢印より圧倒的にUXが良い。
★をクリック/タップして評価を入力するUI
レビュー機能の定番入力。インタラクティブな星は触ってて楽しい。
ツリー構造から選択するセレクトUI
階層データの入力に特化したUI。業務アプリ感が強い。
階層型の連動セレクト（都道府県→市区町村→町名）
住所入力やカテゴリ分類で使う。連動する絞り込みは使い心地が良い。
左右のリスト間で項目を移動するUI
権限管理・メンバー割当の定番。管理画面の本格度が伝わる。
@を入力するとユーザー候補が出るテキスト入力
SlackやNotionで見るやつ。コラボレーション機能の象徴。
色を視覚的に選択するUI
カスタマイズ機能がある = ユーザーに自由度を与えてる。SaaS的な本気度。
時刻を選択するUI
Date Pickerと合わせて使うと予約系アプリの完成度が一気に上がる。