スタンフォード大・ジョージア工科大・マイクロソフト・DeepMindの研究者らは共同で、スクリーンショットからHTMLとCSSのコードをGPT-4やGemini Proなどで生成するプロンプト手法を考案しました。

さらに本タスクでGemini Proに匹敵する新しいオープンソースモデルも開発されました。

背景

ウェブアプリケーションを作るのは一般に難しい仕事で、アイデア通りに実装できないこともしばしばあります。その理由は、ウェブサイトのデザインを実際に機能するコードで作るのが難しいためです。レイアウトを理解した上で、構造化されたコードを作成するには、専門的なスキルを要します。

もしデザインから自動的にコードを生成できれば、フロントエンド開発の民主化と言えます。しかし、自然言語からのコード生成は進歩している一方で、ユーザーインターフェース(UI)デザインからのコード生成はあまり注目されていません。

UIには多様な視覚的・テキスト的要素があり、自動コード生成には様々な課題があります。これまでにもいくつかの試みはありましたが、単純な例に限定されていて、実際のフロントエンド開発に役立つものではありませんでした。

一方で最近、高い性能を持つマルチモーダルLLMが台頭しています。代表例はGPT-4VやGemini（そして新たにClaude3も）です。UIデザインのスクリーンショットを入力として、望むウェブページにレンダリングできるHTMLコードを出力するという、全く新しいパラダイムが実現可能になりました。研究者らは、このようなタスクを「Design2Code」と呼び、現在利用可能なマルチモーダルモデルを用いてベンチマークを行い、フロントエンドエンジニアリングの自動化がどこまで進んでいるかを理解することにしました。また、その過程で、効果的なプロンプト手法と新しいモデルの開発を行いました。

以下で詳しく紹介します。