コードからモックアップへ：AIが実行なしでアプリUIを可視化する仕組みと活用法

最近、GitHubで流行りのAIツールとかを片っ端から試すのにちょっとハマってて。だいたい手順は同じなんだよね。cloneして、インストールして、実行する、みたいな。Dockerコマンド一発で済むやつもあって便利だけど。

でも、多くのツールってUIがあるのに、ドキュメント見てもそれがどんな見た目なのか、いまいち分からないことが多い。じゃあ、とりあえず動かしてみればいいじゃんって話なんだけど…。

今回は、ちょっと違うことを試してみたくなったんだ。コードを実行するんじゃなくて、AIがコードを読むだけでUIを「逆算」できないかなって。つまり、アプリケーションを実行した時に、特定の画面がどんな見た目になるかをAIに「計算」させる感じ。これを個人的に「仮想スクリーンショット」って呼んでるんだけど。

これ、ただのスクリーンショットもどきじゃなくて、アプリを起動すらしてないのに、AIが操作フローの完全なシミュレーションを生成することだってできるかもしれない。

先說結論

先に言っちゃうと、Geminiにコードを食わせるだけで、UIのシミュレーションを生成できる。しかも、コードは一切実行せずに。驚くほど正確で、正直ちょっと引いたレベル。

例えば、あるアプリのコードを全部渡して生成させたのがこれ。左がコードを渡したプロンプトで、右が生成されたHTML。ほぼ本物と同じ見た目になってるのが分かると思う。

じゃあ、どうやるの？

正直、面白半分で始めたんだけど、考えてみたら色々と面白い使い道がありそう。チュートリアル用の画像を作ったり、製品のプレビューをサクッと生成したりとかね。

今回実験台にしたのは、Hugging Faceで見つけたシンプルなGradioアプリ。やったことは大体こんな感じ。

• AIにコードを渡して、「仮想スクリーンショット」をHTMLで作ってもらう。
• 画面の「一部だけ」を切り出して生成させる。
• 簡単なUIアニメーションも作らせてみる。

手順はすごくシンプル。

ステップ1：コードを手に入れる

まあ、これは基本だよね。まずアプリのソースコードをローカルに持ってくる。

$ git clone https://huggingface.co/spaces/mozilla-ai/surf-spot-finder

GitHubからcloneする場合、[Deepwiki]みたいなツールを使っても同じことができるかも。まだ試してないけど、Geminiと同じようにできるなら知りたいな。

ステップ2：コードを一つにまとめる

ここが地味にポイント。リポジトリ内の全ファイルを一個にまとめる。なんでかっていうと、AIにコピペで渡すのがめっちゃ楽になるから。僕は[Repomix]っていうオープンソースのツールを使ってる。オンラインでも試せるよ。

$ npx repomix . 

🔎  Security Check:
──────────────────
✔ No suspicious files detected.

📊  Pack Summary:
────────────────
  Total Files: 26 files
  Total Chars: 51,959 chars
 Total Tokens: 11,783 tokens
       Output: repomix-output.xml
     Security: ✔ No suspicious files detected

🎉  All Done!

これで、プロジェクト全体が1つのファイルにまとまった。

ステップ3：AIにHTMLを生成させる

いよいよ本番。準備したコードを使って、GoogleのAI Studio（今はGoogle AI Studioっていう名前じゃないかも…まあ、Geminiが使える場所ならどこでも）を開く。

いきなりスクリーンショットを要求するんじゃなくて、まず「このアプリにはどんな画面がある？」って聞いてみるのがおすすめ。そうすると、AIがコードベースからビューをリストアップしてくれる。

Generate a list of views in this app

そのあと、メイン画面か、AIが教えてくれた特定の画面を選んで、こんな感じのプロンプトを投げる。プロンプトの後ろに、さっきRepomixで作ったコードを貼り付けるだけ。

Create an HTML code that looks like a screenshot of this app's main view when the main window is open. You do not generate an image, but an HTML code resembling the screenshot. Here is the repo:

<ここにRepomixで生成したコードを貼り付け>

数秒待つと、HTMLコードが生成されるはず。それをコピーして、[html.onlineviewer.net]みたいなオンラインビューアに貼り付ければ…ほら、この通り。

結果は本当にすごくて、Hugging Faceで実際に動いてるアプリとほとんど見分けがつかない。これ、何回か試したけど、毎回かなり近い見た目になった。マジですごい。

もっと面白い使い方：部分生成とかアニメーションとか

これだけじゃない。もっと細かい指示もいける。

例えば、サイドバーだけを「仮想スクリーンショット」として生成させたり。

make virtual Screenshot showing only the sidebar

入力フィールドを赤い枠で強調させて、それぞれの説明を吹き出しで追加させたりもできる。

Highlight the input fields with red borders and use speech bubbles to explain their purpose.

さらに、「ユーザーが入力欄を順番に埋めていく操作をアニメーションにして」と頼めば、JavaScript付きのHTMLを生成して、簡単なインタラクションまで再現してくれる。コードを実行せずにここまでできるのは、本当に驚き。

他のAIだとどうなる？GPT-4o miniで試してみた

もちろん、他のモデルでも試したくなるよね。ってことで、OpenAIのGPT-4o miniでも同じことをやってみた。

結果は…うーん、ちょっと残念な感じ。Gradioアプリの右側、つまり出力部分しか生成されなくて、アプリ全体のビューにはならなかった。

僕が試した範囲での、ざっくりした比較はこんな感じかな。

なんでわざわざHTMLで？画像じゃダメなの？

「別に画像生成AIにスクリーンショットを作らせればいいじゃん？」って思うかもしれない。僕も試したよ。同じようにコードを渡して、「このアプリのスクリーンショット画像を生成して」って。

結果は…まあ、お察しの通り。全然似てない、謎のUIが出てきた。たぶん、UIコンポーネントの「意味」までは理解できても、それを正確なピクセルとして描画するのはまだ難しいんだろうね。

その点、HTMLはすごく柔軟。生成されたコードを見て、「あ、ここのマージンだけ直したいな」とか、「ボタンの色を変えたい」って時にテキストを直接編集できる。画像だと全部再生成だから、この手軽さは大きい。あと、さっき言ったみたいにJavaScriptでアニメーションを付け加えたりもできるしね。

これ、何がすごいの？で、限界は？

結局、今回の実験はGeminiみたいな巨大なコンテキストウィンドウを持つモデルが、どこまでやれるのかを試したかっただけなんだけどね。コードの機能だけじゃなく、その「見た目」まで分析できるっていうのは、本当にすごい能力だと思う。

もちろん限界もある。まず、コスト。Gemini Flashのプレビュー価格だと、100万トークン使っても15セントくらい…日本円で25円とか？まあ、缶コーヒーより安いけど、毎回デカいリポジトリを食わせてたら、それなりにかかる。この辺はGoogleの公式ドキュメントとかで最新の価格をチェックした方がいいかも。

それから、精度も100%完璧ってわけじゃない。時々、細かいディテールが違ったりする。でも、全体的な見た目は驚くほど近い。こういう実験、日本のQiitaとかZennみたいな技術ブログに投稿したら、結構面白い反応がありそうだなーなんて思ったり。

今後、モデルのコストがもっと下がって、推論能力が上がっていけば、デザイナーとかUI/UXのテスター、開発者にとって、めちゃくちゃ便利なツールになる可能性はあると思う。正直、ワクワクするよね。

もしこの方法で、何かアプリのUIを「召喚」できるとしたら、何を見てみたい？ 普段使ってるアプリとか、昔自分で作ったやつとか。よかったらコメントで教えてよ。