論文の概要: VSA:Visual-Structural Alignment for UI-to-Code

• arxiv url: http://arxiv.org/abs/2512.20034v1
• Date: Tue, 23 Dec 2025 03:55:45 GMT
• ステータス: 翻訳完了
• システム内更新日: 2025-12-24 19:17:49.740145
• Title: VSA:Visual-Structural Alignment for UI-to-Code
• Title（参考訳）: VSA:UIからコードへの視覚構造アライメント
• Authors: Xian Wu, Ming Zhang, Zhiyu Fang, Fei Li, Bin Wang, Yong Jiang, Hao Zhou,
• Abstract要約: 視覚テキストアライメントにより組織化された資産を合成するための多段階パラダイムであるbfVSA(VSA)を提案する。 私たちのフレームワークは、最先端のベンチマークよりもコードのモジュール化とアーキテクチャの一貫性を大幅に改善します。
• 参考スコア（独自算出の注目度）: 29.15071743239679
• License: http://creativecommons.org/licenses/by/4.0/
• Abstract: The automation of user interface development has the potential to accelerate software delivery by mitigating intensive manual implementation. Despite the advancements in Large Multimodal Models for design-to-code translation, existing methodologies predominantly yield unstructured, flat codebases that lack compatibility with component-oriented libraries such as React or Angular. Such outputs typically exhibit low cohesion and high coupling, complicating long-term maintenance. In this paper, we propose \textbf{VSA (VSA)}, a multi-stage paradigm designed to synthesize organized frontend assets through visual-structural alignment. Our approach first employs a spatial-aware transformer to reconstruct the visual input into a hierarchical tree representation. Moving beyond basic layout extraction, we integrate an algorithmic pattern-matching layer to identify recurring UI motifs and encapsulate them into modular templates. These templates are then processed via a schema-driven synthesis engine, ensuring the Large Language Model generates type-safe, prop-drilled components suitable for production environments. Experimental results indicate that our framework yields a substantial improvement in code modularity and architectural consistency over state-of-the-art benchmarks, effectively bridging the gap between raw pixels and scalable software engineering.
• Abstract（参考訳）: ユーザインターフェース開発の自動化は、集中的な手作業による実装を緩和することによって、ソフトウェアデリバリを加速する可能性がある。 設計からコードへの変換のための大規模マルチモーダルモデルの発展にもかかわらず、既存の方法論は主に、ReactやAngularのようなコンポーネント指向ライブラリとの互換性に欠ける、構造化されていないフラットなコードベースをもたらす。 このような出力は通常、低い凝集度と高い結合性を示し、長期維持を複雑にする。 本稿では,視覚的構造的アライメントを通じて,組織化されたフロントエンド資産を合成する多段階パラダイムである‘textbf{VSA(VSA)’を提案する。 提案手法ではまず空間認識変換器を用いて視覚入力を階層木表現に再構成する。 基本的なレイアウト抽出を超えて、繰り返し発生するUIモチーフを識別し、それらをモジュールテンプレートにカプセル化するアルゴリズムパターンマッチング層を統合します。 これらのテンプレートはスキーマ駆動の合成エンジンによって処理され、Large Language Modelは、プロダクション環境に適したタイプセーフでプロップ駆動のコンポーネントを生成する。 実験の結果、我々のフレームワークは、最先端のベンチマークよりもコードモジュラリティとアーキテクチャの一貫性が大幅に向上し、生のピクセルとスケーラブルなソフトウェアエンジニアリングのギャップを効果的に埋めることがわかった。

関連論文リスト

• Modular Layout Synthesis (MLS): Front-end Code via Structure Normalization and Constrained Generation [18.154715745625328]
  フロントエンドエンジニアリングの自動化は、開発サイクルを大幅に削減し、手動によるコーディングオーバーヘッドを最小化する。 現在のソリューションは、ReactやVue、Angularといった現代的なエコシステムをサポートしない、モノリシックなスクリプトを生成することが多い。 本稿では,視覚的理解と構造正規化を融合した階層型フレームワークであるMLSを紹介する。 MLSは既存のベースラインを大幅に上回り、コードの再利用性と複数のフレームワーク間の構造的整合性を確保する。
  論文  参考訳（メタデータ） (2025-12-22T03:24:11Z)
• PSD2Code: Automated Front-End Code Generation from Design Files via Multimodal Large Language Models [4.847776029952831]
  PSD2Codeは、PSDファイル解析とアセットアライメントを活用する新しいマルチモーダルアプローチで、プロダクション対応のReact+SCSSコードを生成する。 本稿では,PSDファイルから階層構造,層特性,メタデータを抽出するParseAlignパイプラインを提案する。 このシステムは制約ベースのアライメント戦略を採用し、生成した要素と設計リソース間の一貫性を保証する。
  論文  参考訳（メタデータ） (2025-11-06T03:20:27Z)
• ScreenCoder: Advancing Visual-to-Code Generation for Front-End Automation via Modular Multimodal Agents [40.697759330690815]
  ScreenCoderはモジュール型のマルチエージェントフレームワークで、タスクを3つの解釈可能なステージ(グラウンド、プランニング、生成)に分解する。 特殊エージェントにこれらの異なる責任を割り当てることで、我々のフレームワークはエンド・ツー・エンドのアプローチよりもはるかに高い堅牢性と忠実性を達成する。 提案手法は, レイアウト精度, 構造コヒーレンス, コード正確性において, 最先端の性能を実現する。
  論文  参考訳（メタデータ） (2025-07-30T16:41:21Z)
• Assemble Your Crew: Automatic Multi-agent Communication Topology Design via Autoregressive Graph Generation [91.17994756436259]
  大規模言語モデル(LLM)に基づくマルチエージェントシステム(MAS)は、多様な領域にわたる複雑な問題を扱うための強力なソリューションとして登場した。 既存のアプローチは、事前に定義されたエージェントセットとハードコードされた相互作用構造を持つテンプレートグラフ修正パラダイムに依存しているため、基本的に制限されている。 協調グラフをスクラッチから構築することで、このパラダイムを運用する新しい自己回帰モデルであるARG-Designerを提案する。
  論文  参考訳（メタデータ） (2025-07-24T09:17:41Z)
• DesignCoder: Hierarchy-Aware and Self-Correcting UI Code Generation with Large Language Models [17.348284143568282]
  DesignCoderは、階層的かつ自己修正の自動化コード生成フレームワークである。 複雑なネストUI階層を理解し予測するMLLMの能力を向上するUI Grouping Chainsを導入する。 また、生成したコードのエラーを特定し、修正するモデルの能力を改善するための自己補正機構も組み込んでいます。
  論文  参考訳（メタデータ） (2025-06-16T16:20:43Z)
• Structural Similarity-Inspired Unfolding for Lightweight Image Super-Resolution [88.20464308588889]
  効率的な画像SRのための構造類似インスパイアド・アンフォールディング(SSIU)法を提案する。 この方法は、構造的類似性に制約されたSR最適化関数の展開によって設計される。 我々のモデルは現在の最先端モデルより優れており、パラメータ数が低く、メモリ消費が減少している。
  論文  参考訳（メタデータ） (2025-06-13T14:29:40Z)
• ContextFormer: Redefining Efficiency in Semantic Segmentation [48.81126061219231]
  畳み込み法は、局所的な依存関係をうまく捉えるが、長距離関係に苦慮する。 ビジョントランスフォーマー(ViT)は、グローバルなコンテキストキャプチャでは優れるが、高い計算要求によって妨げられる。 我々は,リアルタイムセマンティックセグメンテーションの効率,精度,堅牢性のバランスをとるために,CNN と ViT の強みを活用したハイブリッドフレームワーク ContextFormer を提案する。
  論文  参考訳（メタデータ） (2025-01-31T16:11:04Z)
• EpiCoder: Encompassing Diversity and Complexity in Code Generation [66.43738008739555]
  既存のコード生成方法はシードデータとしてコードスニペットを使用する。 階層的なコード機能を中心に展開する,新しい機能ツリーベースの合成フレームワークを提案する。 我々のフレームワークは、生成されたコードの複雑さを正確に制御し、関数レベルの操作からマルチファイルのシナリオまで幅広い機能を実現する。
  論文  参考訳（メタデータ） (2025-01-08T18:58:15Z)

関連論文リストは本サイト内にある論文のタイトル・アブストラクトから自動的に作成しています。

指定された論文の情報です。
本サイトの運営者は本サイト（すべての情報・翻訳含む）の品質を保証せず、本サイト（すべての情報・翻訳含む）を使用して発生したあらゆる結果について一切の責任を負いません。