AIにUI実装を任せるなら「テキストだけ」は損をする ── Visual Promptingでスクショ併用したらFlutter移植の精度が上がった話

はじめに

iOSアプリ（Swift / SwiftUI）をFlutterに移植するとき、GitHub CopilotなどのAIコーディングツールを使った。

ロジック部分はわりとスムーズに移植できた。でもUIの初期アウトプットがひどかった。

「ラベルとボタンがただ縦に並んでいるだけ」のような、デザインが完全に欠落した状態のコードが出てきた。機能はするかもしれないが、とてもユーザーに見せられるものではない。

その問題を打開したのが、スクリーンショットをAIへの入力として併用するというアプローチだった。

---

何が起きていたか

テキスト指示だけだと「形」が伝わらない

最初はこんな感じのプロンプトを投げていた。

このSwiftUIのコードをFlutterに移植してください。
Material Designに準拠したUIにしてください。

コードも一緒に渡していた。でも出てきたのは、機能的には合っているけど、見た目は「とりあえず動く」レベルのUIだった。

問題は、テキストとコードだけでは「どう見えるべきか」が伝わらないことにあった。

SwiftUIのコードには .padding()や .cornerRadius()、.background()といった情報は含まれている。でもそれが画面上でどういう空気感を作っているか、余白のバランスや要素の重なり感、全体のトーンはコードからは読み取りにくい。

AIが出力したのは、コードを機械的に解釈した結果だった。

---

打開策：スクショを一緒に渡す

やったこと

iOS側で実装済みの画面のスクリーンショットを撮って、それをプロンプトと一緒にAIに渡した。

このSwiftUIの画面（スクリーンショット添付）をFlutterに移植してください。
レイアウト・余白・コンポーネントの選び方をできるだけ再現し、
Material Designに沿った実装にしてください。

これだけで、アウトプットの質が明確に変わった。

何が変わったか

• レイアウトの再現度が上がった 余白の感覚、要素の配置、カードの使い方など、画面の「構造」が伝わるようになった
• コンポーネントの選択が適切になった ただのContainerやTextの羅列ではなく、Card・ListTile・Dividerなど文脈に合ったWidgetを選んでくれるようになった
• デザインの「トーン」が近くなった フラットすぎず、かつ過剰装飾でもない、元のUIの空気感に近い出力になった

---

なぜ効くのか

このアプローチは Visual Prompting（ビジュアルプロンプティング） と呼ばれる手法だ。テキストだけでなく画像をAIへの入力として加えることで、言語化しにくい視覚的なコンテキストを伝える。

AIは画像を見ると、テキストやコードだけでは伝わらない「視覚的な情報」を補完できる。

コードは「何をするか」を伝える。スクショは「どう見えるか」を伝える。

UIの実装においては、この両方が揃って初めて「意図通りのもの」が出力される。片方だけだと、どうしても欠落が生まれる。

特にデザインのニュアンスや余白感、全体のバランスはコードや言語化では伝えにくい領域だ。スクショはそこを一発で埋めてくれる。

---

具体的な渡し方のコツ

実際にやってみて効果的だったポイントをまとめる。

1. 画面単位で渡す

1枚のスクショに複数の画面を詰め込まない。1画面 = 1スクショで渡す方が精度が高い。

2. 実機・シミュレータのスクショを使う

Xcodeのプレビューより、実際のシミュレータや実機のスクショの方が「本物に近い見た目」が伝わる。

3. 「再現してほしい部分」を言語化で補足する

「このカードのシャドウの感じを再現してほしい」「このボトムナビゲーションの構造を維持してほしい」など、特に重視したい箇所はテキストで補足すると精度が上がる。

4. 一発完成を期待しない

最初のアウトプットをベースに、細かい部分をテキストで修正指示していく。スクショは「初期精度を上げるためのもの」として使うのが現実的。

---

その後の使い方

この経験はFlutter移植だけで終わらなかった。

その後の継続的な改修でも、「新しい画面を作るとき、参考にしたいデザインのスクショを渡す」 というアプローチが定着した。

• 既存画面に新しいコンポーネントを追加するとき
• デザインを微調整するとき
• 別プラットフォームの画面と揃えたいとき

いずれも、スクショをAIへのインプットに加えることで、テキストだけの指示より明確に精度が上がっている。

---

まとめ

AIにUI実装を任せるとき、テキストとコードだけで指示しているなら、スクショを加えるだけで精度が上がる可能性がある。

• コードは「何をするか」を伝える
• スクショは「どう見えるか」を伝える

この2つを揃えることで、AIは意図通りのUIを出力しやすくなる。

特にクロスプラットフォーム移植や、既存デザインを別環境に再現したい場面では、試してみる価値がある。

---

wa/ri：https://wa-ri.ynetlabo.net/