結論
AIが生成したUIが「動くけれど、あと一歩」で止まることはよくあります。スマホで崩れる、状態が足りない、見た目が古い、といった惜しい出力です。こういうときは最初から作り直させるより、何がどう惜しいかを一文で指摘し、直してほしい方向を具体的に添える修正プロンプトを投げるほうが速く、コードも安定します。作り直しは前の良かった部分まで巻き戻すことがあるからです。
この記事は、実際にこのサイトのデータテーブルUIをAIに作らせる記事とフォームUIを作らせる記事を書いたときに出た、本物の惜しい出力と、それを直した修正プロンプトを素材にしています。想像で作った例ではありません。修正の型を3パターンに分けて、そのまま真似できる指示文とともに載せます。
作り直しより修正指示。「どこが・どう惜しいか・どう直すか」の3点を一文で渡すと、前の良かった実装を壊さずに直せる。
パターン1：スマホで崩れるレイアウトを直す
一番多い惜しい出力が、PC幅では整っているのにスマホ幅で崩れるものです。カードを横並び固定にしていて狭い画面で横スクロールが出る、テーブルの幅が画面を突き抜ける、といった崩れです。AIは指定がないと広い画面を前提に組むので、レスポンシブは後追いで指示することになります。
下は、AIが最初に返してきたカード一覧を狭い画面に置いたときの再現です。「修正前／修正後」を切り替えると違いが分かります（PCでも幅300pxの疑似スマホ画面で見えるようにしています）。
狭い画面でのカード一覧
青葉商事
取引中 / ¥128,000
みなと物産
保留 / ¥54,000
北陽エンジニア
取引中 / ¥980,000
修正前：3枚を横並び固定にしているため、狭い画面では折り返さず横スクロールが出ます。
これを直すのに、レイアウト全体を作り直させる必要はありません。崩れている条件と、どう振る舞ってほしいかだけを渡します。実際に投げた修正プロンプトがこれです。
症状：幅375pxで横スクロールが出る
今のカード一覧が、幅375pxのスマホで横スクロールになってしまいます。 カードの横並びは残したまま、画面幅が600px以下のときは縦積みにして、 各カードを画面幅いっぱい（横100%）に広げてください。 その他の実装は変えないでください。ポイントは3つあります。崩れる具体的な幅（375px）を書くこと、どう振る舞ってほしいか（600px以下で縦積み・幅100%）を数字で書くこと、そして「その他は変えないで」と範囲を狭めることです。最後の一文がないと、AIは親切心でついでに色やフォントまで作り替えて、直したい箇所以外が変わってしまいます。この指示で返ってきたのが上の「修正後」で、`flex-wrap` と幅指定だけがピンポイントで変わっていました。
パターン2：足りない状態を後から足す
次に多いのが、正常系だけ実装されていて、途中の状態が抜けている惜しい出力です。フォームUIの記事を書いたときも、送信は動くのに「送信中」の表示や二度押し防止がなく、送信後にエラー表示が残ったままになる、という抜けが出ました。これは間違いではなく、指示していなかったので実装されていないだけです。
状態の抜けは、足りない状態を名指しして、その状態でどう見えるべきかを書くと正確に埋まります。フォーム記事のとき、送信後にエラーの赤枠が残った件を直した修正プロンプトがこれです。
症状：送信後もエラー表示が残る
送信が完了してフォームをリセットしたあとも、 エラーの赤枠とエラーメッセージが残ってしまいます。 送信完了の処理の中で、全項目のエラー表示（赤枠とメッセージ）も 消してください。フォームの reset() は値を初期化するだけなので、 表示のクリアは別に必要です。原因も一言添えてください。ここでは「なぜそうなるか」を自分の言葉で軽く添えているのが効きます（reset()は値だけ戻す、という部分）。原因の見立てを渡すと、AIはこちらの理解に沿った直し方を選びやすく、見当違いの大改修になりにくいです。原因が分からないときは「原因も一言添えてください」と聞けば、直す前に理由を説明してくれます。状態の抜けは、フォームなら「入力前・エラー中・送信中・送信完了」、テーブルなら「読み込み中・0件・エラー」のように、UIが取りうる状態を並べて、抜けている状態を名指しするのが確実です。
パターン3：古い・素っ気ない見た目を今風にする
3つ目は、機能は合っているのに見た目が古い惜しい出力です。青いリンク色そのままのボタン、影も角丸もない四角い枠、詰まった余白。これも「かっこよくして」だけだと毎回テイストが変わってしまうので、参照する基準か、具体的なスタイル要素を指定するのがコツです。
データテーブルの記事で、最初に返ってきたテーブルが罫線だらけで素っ気なかったときに投げた修正プロンプトがこれです。抽象的な「おしゃれに」ではなく、変えてほしい要素を具体語で並べています。
症状：罫線だらけで古い印象
テーブルの見た目を、業務アプリで使える今風の体裁に整えてください。 - 縦罫線はなくし、行の下だけ薄いボーダーにする - ヘッダー行は薄いグレー背景にして太字 - 1行おきに薄い背景色（ゼブラ）を付ける - 行にホバーしたら背景色をうっすら変える - ステータスは文字ではなく丸みのあるバッジで表示 配色は青系のアクセント1色でまとめ、色を使いすぎないでください。デザインの修正指示は、感覚語（おしゃれ・かっこいい・今風）を1つだけ頭に置き、あとは「縦罫線をなくす」「行の下だけボーダー」「ゼブラ」「ホバー」「バッジ」のように、変える要素を名詞で列挙すると再現性が上がります。さらに「色を使いすぎない」「アクセントは1色」のような引き算の指示を足すと、AIが装飾を盛りすぎるのを防げます。この指示で出たテーブルの体裁は、この記事の関連事例やデータテーブルの記事のデモとほぼ同じ見た目に落ち着きました。
修正プロンプトが効く共通の型
3つのパターンに共通していた、修正指示を書くときの型をまとめます。作り直しではなく修正で直したいとき、この形に沿うと往復が減ります。
「どこが・どう惜しいか・どう直すか」を1文で渡す
「スマホで崩れる」だけでは足りず、「幅375pxで横スクロールが出るので、600px以下は縦積みにして幅100%」まで書きます。症状（どこが）・条件（どういうとき）・期待（どう直すか）の3点がそろうと、AIは推測せずに直せます。逆に「なんか変」「いい感じにして」は、こちらの意図が伝わらず作り直しに近い結果になりがちです。
直す範囲を狭める一文を添える
「その他の実装は変えないでください」「この関数だけ直してください」のように範囲を明示すると、直したい箇所以外を巻き込まずに済みます。これを書かないと、AIが良かれと思って別の部分まで作り替え、前は動いていた挙動が変わることがあります。修正は差分が小さいほど安全です。
原因の見立てを添える・分からなければ聞く
「reset()は値だけ戻すので表示は別に消す必要がある」のように、自分の理解を軽く渡すと、AIはその線で直します。原因が分からないときは「原因を一言説明してから直して」と頼めば、直す前に理由を出してくれるので、的外れな修正を早い段階で止められます。
惜しい出力が3回以上直らないときは、修正を重ねるより、最初の生成プロンプト自体に不足があるサインです。その場合はデータテーブル・フォームの記事で扱った「最初に書き切る指定」に戻って、生成プロンプトを整え直すほうが速く終わります。
まとめ
AI生成UIの惜しい出力は、作り直しではなく修正プロンプトで直すほうが速く、前の良かった実装も残せます。スマホで崩れるレイアウトは崩れる幅と期待する振る舞いを数字で、足りない状態は取りうる状態を並べて抜けを名指しで、古い見た目は変える要素を名詞で列挙して直す。どのパターンでも「どこが・どう惜しいか・どう直すか」を一文にし、直す範囲を狭める一言を添えるのが共通の型でした。
まずは手元の惜しい出力に対して、症状・条件・期待の3点を書き出してから修正プロンプトにしてみてください。修正が何度も空振りするなら、下の関連事例のプロンプトを土台に生成側から立て直すのが近道です。