要旨: 視覚言語モデル(VLM)はデザインからコードへの生成において有望さを示していますが、しばしば「全体的なボトルネック」に陥り、高レベルの構造階層と微細な視覚的詳細を整合させることに失敗して、レイアウトの歪みや一般的なプレースホルダーが生じがちです。このギャップを埋めるために、構造理解と要素レンダリングを切り離すエンドツーエンドのフレームワークであるDOneを提案します。DOneは、(1) 複雑なデザインを分解するための学習済みレイアウト分割モジュールを導入し、ヒューリスティックなクロッピングの限界を回避します;(2) UIコンポーネントの極端なアスペクト比と高密度さを扱うための、特化したハイブリッド要素リトリーバを導入します;そして(3) レイアウトとコードを橋渡しする、スキーマガイド付き生成パラダイムを導入します。性能を厳密に評価するために、既存データセットよりも大幅に高いレイアウトの複雑さを特徴とするベンチマークHiFi2Codeを導入します。HiFi2Codeに対する大規模な評価により、DOneは高レベルの視覚的類似性(例:GPT Scoreで10%以上)と微細な要素アラインメントの両方において、既存の手法を上回ることが示されています。人手による評価では、視覚的忠実度がより高いにもかかわらず、3倍の生産性向上が確認されています。
DOne:高忠実度のデザインからコード生成に向けた構造分離とレンダリングの分離
arXiv cs.CV / 2026/4/3
📰 ニュースSignals & Early TrendsIdeas & Deep AnalysisModels & Research
要点
- 本論文では、視覚言語アプローチにありがちなレイアウトの歪みを回避するため、構造理解と要素レンダリングを分離したエンドツーエンドのデザインからコード生成フレームワーク「DOne」を提案する。
- DOneは、学習済みのレイアウト分割モジュール、極端なアスペクト比/密度を持つUIコンポーネント向けのハイブリッド要素リトリーバ、そしてレイアウト表現とコード出力を結び付けるスキーマ誘導型生成アプローチを用いる。
- 高複雑度なUIをより良く評価するため、著者らは従来のデータセットよりも大幅にレイアウト複雑性が高いベンチマーク「HiFi2Code」を導入する。
- HiFi2Codeに関する実験では、DOneが既存手法に比べて高レベルの視覚的一致(GPT Scoreで10%超)と、微細な要素のアラインメントの両方を改善することが示される。
- 人手評価では、より高い視覚的忠実度を維持しつつ、およそ3倍の生産性向上が報告されており、指標の改善に留まらない実用的な利点が示唆される。




