次の状況に対してボトムシート (Bottom Sheet)をデザインしてください: 電話のマップフィルターは、ドラッグ可能なシートで開きます。覗き見したり、完全に開いたり、閉じたりできます。視覚面では控えめな方向性としてグラスモーフィズム (Glassmorphism)を使用し、フィードバックには春のアニメーション (Spring Animation)を使用してください。意味的なHTML、キーボードアクセス、可視フォーカス、動きの削減サポート、およびプロジェクトの既存ルールを維持してください。
UIの言葉を明確なビルドリクエストに変える
UIが何をするか、見た目、動作を選んでください。そして、開発者やAIコーディングヘルパーへの明確なリクエストをコピーしてください。
Start with your own situation
Open request builder Build a request you can hand off.
Choose what the UI does, how it looks, and how it moves. Then copy a clear request that includes states, accessibility needs, and checks for done.
次の状況に対してコマンドパレット (Command Palette)をデザインしてください: Command-K を押して、「チームメイトを招待」と入力し、一覧からそのアクションを実行。視覚面では控えめな方向性としてミニマリズム (Minimalism)を使用し、フィードバックには動きの軽減 (Reduced Motion)を使用してください。意味的なHTML、キーボードアクセス、可視フォーカス、動きの削減サポート、およびプロジェクトの既存ルールを維持してください。
次の状況に対してフォームの検証 (Form Validation)をデザインしてください: パスワードがルールに違反している場合、ページはフィールドの横に説明を表示します。スクリーンリーダーはそのメッセージを該当フィールドに関連付けることができます。視覚面では控えめな方向性としてネオブルータリズム (Neobrutalism)を使用し、フィードバックにはマイクロインタラクション (Microinteraction)を使用してください。意味的なHTML、キーボードアクセス、可視フォーカス、動きの削減サポート、およびプロジェクトの既存ルールを維持してください。
次の状況に対してインスペクター (Inspector)をデザインしてください: チャートを選択すると、軸、色、ラベル用のインスペクターが開きます。キャンバスは表示されたままです。視覚面では控えめな方向性としてリキッドガラス (Liquid Glass)を使用し、フィードバックにはトランジション (Transition)を使用してください。意味的なHTML、キーボードアクセス、可視フォーカス、動きの削減サポート、およびプロジェクトの既存ルールを維持してください。
次の状況に対してサインインフォーム (Sign-In Form)をデザインしてください: お客さんは、メールとパスワードでログインします。パスワードは画面に表示したり、パスワード管理アプリから貼り付けたりできます。パスワードを忘れても、今の場所を失わずにやり直せます。視覚面では控えめな方向性としてスイススタイル (Swiss Style)を使用し、フィードバックには入る、出る & クロスフェード (Enter, Exit & Crossfade)を使用してください。意味的なHTML、キーボードアクセス、可視フォーカス、動きの削減サポート、およびプロジェクトの既存ルールを維持してください。
次の状況に対して空、エラー＆成功状態 — 学習バンドル (Empty, Error & Success State — Learning Bundle)をデザインしてください: 新しいプロジェクトリストは、最初の項目を作る方法を説明するよ。ネットワークがつながらないときは Retry が表示されて、フィルターは保存されたままになるよ。視覚面では控えめな方向性としてクレイモルフィズム (Claymorphism)を使用し、フィードバックにはイージング (Easing)を使用してください。意味的なHTML、キーボードアクセス、可視フォーカス、動きの削減サポート、およびプロジェクトの既存ルールを維持してください。