AIコーディングエージェントへのUIプロンプトの書き方

1. 部品の名前からではなく、ユーザーの目的から始める

だれが何の作業を終えたいのか、なぜ大事なのかを書きます。UI用語は、その動きが役割に合ってから使います。部品の名前は解決策のひとつであって、プロダクトの目的ではありません。

• 弱い例:美しいグラスモーフィズムのダッシュボードを追加して。
• よりいい例:サポート担当が、未解決のチケットを見つけ、緊急度を知り、今のフィルターを保ったまま次のチケットを開けるようにする。

2. 動き、状態、範囲を説明する

何をすると画面が開くか、操作ごとに何が変わるか、どう閉じるか、何を保存したままにするかを説明します。該当する場合は、読み込み中、空の状態、エラー、成功、再試行、キャンセル、権限がない状態も入れましょう。

3. 動きでパターンを選び、そのあとで見た目とアニメーションを決める

画面の姿は思い浮かぶのに名前がわからないときは、このアトラスを使いましょう。似たパターンを比べてから選びます。動き、見た目、アニメーションは別々に決めるようにすると、見た目の希望で製品の動きが知らないうちに変わってしまいません。

4. エージェントが確かめられる合格条件を書く

大事なルールは、見てわかる合否チェックにします。該当する場合は、キーボード操作、フォーカスの見える化、状態の読み上げ、小さい画面、拡大、動きを減らす設定、読み込み、失敗、再試行、データの保存も入れましょう。

5. コードを頼む前に、プロジェクトの背景を伝える

今使っている技術、デザインシステム、再利用できる部品、データの入手元、ルート、対象のファイル名を伝えます。変えてはいけないものも伝えます。それでもエージェントは、編集前に本物のプロジェクトとテストを確認すべきです。

6. 決めごとが見えるようにプロンプトを組み立てる

うまくいく順番は、目指す結果、ユーザーと状況、動き、状態、内容とデータ、見た目の方向性、アクセシビリティ、プロジェクトの制約、合格条件、そしてやらないこと。決めきれていないことや疑問は、隠さずに明記しましょう。

• 目指す結果:この仕事が終わったら、だれが何をできるようになっているか。
• 動きと状態:流れはどう始まり、どう変わり、どう終わり、失敗したらどうなり、どう復帰するか。
• 確認方法:結果がうまくいっていると、どんな証拠でわかるか。