ページができたら最後に送る5行：読み込み中・空・エラー、ボタンの状態、フォームの誤り、送信の反応、開閉の動き
AIが作った画面は「正常に表示された状態」しか作られていないことが多い。完成後にこの5行を続けて送ると、触ったときの「AIが作った感」がかなり消える。
どんな問題を解決するか / いつ使うか
Claude Code や Codex で作った画面は、スクショでは整って見えても、ボタンを押しても反応がない、エラーが出ても何も表示されない、モーダルがパッと切り替わるだけ、といった「操作したときの粗さ」が残る。見た目の作り込みがひと通り終わったページに、仕上げの指示として送る。
やり方
ページが完成したら、次の5項目をそのまま1通で送る（英語の原文を日本語に置き換えたもの）。
- 読み込み中・データなし（空）・エラーの3つの状態を作る。見た目はアプリのほかの部分とそろえる。
- すべてのボタンに、ホバー・押した瞬間・押せないとき（disabled）の状態を付ける。
- フォームのエラーは、間違っている入力欄のすぐ下に表示する。
- 送信中・成功・失敗のそれぞれで、利用者に反応を返す。
- モーダル、ドロップダウン、タブの切り替えにトランジションを付ける。
注意点
- 5項目目で動きを足しすぎると、今度は「もたつき」が出る。付けた後は AIが作ったアプリの「もたつき」は動きの盛りすぎ。先に消して、残った動きだけを整えさせるプロンプト で削る方向に見直すとよい。
- 空の状態は、開発中のテストデータが入っていると確認できない。データ0件のアカウントで実際に開いて確かめる（公開前に、エージェントに「データが0件のとき」の画面を全部点検させ、空の状態を作らせる）。
- スマホ特有の違和感（タップ後にホバー色が残るなど）はこの5行では拾えない。公開前は AIで作ったサイトをスマホで触ると変になる10か所を、公開前にまとめて直させるプロンプト も併せて使う。
- Figma側で状態を先に洗い出したい場合は FigmaのAIエージェントで、既存画面から「読み込み中・空・エラー」などの抜けている状態を洗い出す。
関連
- アプリの全画面をライト・ダーク両方で巡回させ、ID付きの改善リストとBefore/Afterを出させるプロンプト
- ガイド：AI × デザイン（生成AI・コーディングエージェントに良いデザインを作らせる）