AIにUI実装を依頼するプロンプトの作り方

進め方

1. 最初に、作る画面の目的、想定ユーザー、完了条件を書く。例: 設定画面で通知設定を安全に変更できるようにする。
2. 次に、通常時、入力中、エラー、読み込み中、空状態、成功時など必要な状態を列挙する。
3. 使用する技術、既存デザイン、禁止したい表現、レスポンシブ条件、アクセシビリティ条件を具体的に渡す。
4. 最後に、検証コマンド、確認したい画面幅、キーボード操作、フォーカスリング、本文のはみ出し確認を依頼に含める。

よくある失敗

• ・高級感、いい感じ、モダンなど曖昧な見た目だけを伝え、画面の目的や状態を伝えない。
• ・エラーや空状態を指定せず、成功時だけの静的なUIを作らせてしまう。
• ・既存コンポーネントやデザインルールを伝えず、プロジェクト内のUIと異なる実装を生成させる。