スタンフォード大・ジョージア工科大・マイクロソフト・DeepMindの研究者らは共同で、スクリーンショットからHTMLとCSSのコードをGPT-4Vなどで生成するプロンプト手法を考案しました。
さらに本タスクでGemini Proに匹敵する新しいオープンソースモデルも開発されました。
“Design2Code: How Far Are We From Automating Front-End Engineering?”
■プロンプト手法の実験の結果
– GPT-4VとGemini Proで有効だった
– 生成物の49%が元のページと置き換え可能
– 64%が元より良いデザインと評価された
■プロンプト手法
スクリーンショットとともに、ページソースからテキスト要素を抜き出して下記のように指示を出します。
※日本語訳版テンプレートの例
あなたはHTMLとCSSに精通したエキスパートのウェブ開発者です。私はウェブページのスクリーンショットを提供します。あなたの仕事は、提供されたウェブサイトを再現する単一のHTMLファイルを返すことです。以下の点に注意してください:
– CSSコードはすべてHTMLファイル内に含めてください。
– 外部ファイルへの依存関係を想定しないでください。
– 動的な相互作用のためのJavaScriptは含める必要はありません。
– 要素のサイズ、テキスト、位置、色、および全体的なレイアウトに注意を払ってください。
HTML+CSSファイルのコンテンツで応答してください。
[ここに抽出したテキスト要素を追加]■オープンソースモデルについて
研究チームが新たに開発したDesign2Code-18Bは、ウェブデザインのスクリーンショットからHTMLとCSSのコードを直接生成するタスク (Design2Codeタスク) において商用モデルのGemini Pro Visionと同等の性能を達成したとのこと。
