論文の概要: PSD2Code: Automated Front-End Code Generation from Design Files via Multimodal Large Language Models

• arxiv url: http://arxiv.org/abs/2511.04012v1
• Date: Thu, 06 Nov 2025 03:20:27 GMT
• ステータス: 翻訳完了
• システム内更新日: 2025-11-07 20:17:53.285451
• Title: PSD2Code: Automated Front-End Code Generation from Design Files via Multimodal Large Language Models
• Title（参考訳）: PSD2Code:多モード大言語モデルによる設計ファイルからのフロントエンドコードの自動生成
• Authors: Yongxi Chen, Lei Chen,
• Abstract要約: PSD2Codeは、PSDファイル解析とアセットアライメントを活用する新しいマルチモーダルアプローチで、プロダクション対応のReact+SCSSコードを生成する。 本稿では,PSDファイルから階層構造,層特性,メタデータを抽出するParseAlignパイプラインを提案する。 このシステムは制約ベースのアライメント戦略を採用し、生成した要素と設計リソース間の一貫性を保証する。
• 参考スコア（独自算出の注目度）: 4.847776029952831
• License: http://arxiv.org/licenses/nonexclusive-distrib/1.0/
• Abstract: Design-to-code generation has emerged as a promising approach to bridge the gap between design prototypes and deployable frontend code. However, existing methods often suffer from structural inconsistencies, asset misalignment, and limited production readiness. This paper presents PSD2Code, a novel multi-modal approach that leverages PSD file parsing and asset alignment to generate production-ready React+SCSS code. Our method introduces a ParseAlignGenerate pipeline that extracts hierarchical structures, layer properties, and metadata from PSD files, providing large language models with precise spatial relationships and semantic groupings for frontend code generation. The system employs a constraint-based alignment strategy that ensures consistency between generated elements and design resources, while a structured prompt construction enhances controllability and code quality. Comprehensive evaluation demonstrates significant improvements over existing methods across multiple metrics including code similarity, visual fidelity, and production readiness. The method exhibits strong model independence across different large language models, validating the effectiveness of integrating structured design information with multimodal large language models for industrial-grade code generation, marking an important step toward design-driven automated frontend development.
• Abstract（参考訳）: 設計プロトタイプとデプロイ可能なフロントエンドコードのギャップを埋めるための有望なアプローチとして、設計からコード生成が登場した。 しかし、既存の手法は構造上の不整合、資産のミスアライメント、生産準備不足に悩まされることが多い。 本稿では、PSDファイル解析とアセットアライメントを利用した、プロダクション対応のReact+SCSSコードを生成する、新しいマルチモーダルアプローチであるPSD2Codeを提案する。 本稿では,PSDファイルから階層構造,層特性,メタデータを抽出するParseAlignGenerateパイプラインを提案する。 システムは、生成した要素と設計リソースの整合性を保証する制約ベースのアライメント戦略を採用し、構造化されたプロンプト構造は、制御性とコード品質を向上させる。 包括的評価は、コード類似性、視覚的忠実性、生産準備性など、既存のメソッドよりも大幅に改善されていることを示す。 この手法は、異なる大規模言語モデル間で強力なモデル独立性を示し、構造設計情報と産業レベルのコード生成のためのマルチモーダルな大規模言語モデルの統合の有効性を検証し、設計駆動の自動化フロントエンド開発に向けた重要なステップを示す。

関連論文リスト

• Every Step Counts: Decoding Trajectories as Authorship Fingerprints of dLLMs [63.82840470917859]
  本稿では,dLLMの復号化機構をモデル属性の強力なツールとして利用できることを示す。 本稿では、デコードステップ間の構造的関係を捉え、モデル固有の振る舞いをよりよく明らかにする、DDM(Directed Decoding Map)と呼ばれる新しい情報抽出手法を提案する。
  論文  参考訳（メタデータ） (2025-10-02T06:25:10Z)
• ScreenCoder: Advancing Visual-to-Code Generation for Front-End Automation via Modular Multimodal Agents [40.697759330690815]
  ScreenCoderはモジュール型のマルチエージェントフレームワークで、タスクを3つの解釈可能なステージ(グラウンド、プランニング、生成)に分解する。 特殊エージェントにこれらの異なる責任を割り当てることで、我々のフレームワークはエンド・ツー・エンドのアプローチよりもはるかに高い堅牢性と忠実性を達成する。 提案手法は, レイアウト精度, 構造コヒーレンス, コード正確性において, 最先端の性能を実現する。
  論文  参考訳（メタデータ） (2025-07-30T16:41:21Z)
• LOCOFY Large Design Models -- Design to code conversion solution [0.0]
  本稿では,デザインからコードへのシームレスな変換を実現するために,デザインとWebページに特化して訓練された大規模デザインモデルを紹介した。 データエンジニアリングと適切なモデルアーキテクチャの修正を取り入れたトレーニングと推論パイプラインを開発した。 提案モデルでは, 新規なプレビューマッチスコア測定値を用いて, エンド・ツー・エンドの設計・コード変換精度を実証した。
  論文  参考訳（メタデータ） (2025-07-22T03:54:57Z)
• 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)
• Elucidating the Design Space of Multimodal Protein Language Models [69.3650883370033]
  マルチモーダルタンパク質言語モデル(PLM)は、シーケンスとトークンに基づく構造情報を統合する。 本稿では,マルチモーダルPLMの設計空間を体系的に解明し,その限界を克服する。 我々の進歩はよりきめ細かな監督にアプローチし、トークンベースのマルチモーダルPLMが堅牢な構造モデリングを実現することを実証する。
  論文  参考訳（メタデータ） (2025-04-15T17:59:43Z)
• EpiCoder: Encompassing Diversity and Complexity in Code Generation [66.43738008739555]
  既存のコード生成方法はシードデータとしてコードスニペットを使用する。 階層的なコード機能を中心に展開する,新しい機能ツリーベースの合成フレームワークを提案する。 我々のフレームワークは、生成されたコードの複雑さを正確に制御し、関数レベルの操作からマルチファイルのシナリオまで幅広い機能を実現する。
  論文  参考訳（メタデータ） (2025-01-08T18:58:15Z)
• GLDesigner: Leveraging Multi-Modal LLMs as Designer for Enhanced Aesthetic Text Glyph Layouts [53.568057283934714]
  本稿では,コンテンツ対応のテキストロゴレイアウトを生成するVLM(Vision-Language Model)ベースのフレームワークを提案する。 本稿では,複数のグリフ画像を同時に処理するための計算コストを削減する2つのモデル手法を提案する。 本モデルでは,既存の公開データセットの5倍の広義のテキストロゴデータセットを2つ構築する。
  論文  参考訳（メタデータ） (2024-11-18T10:04:10Z)
• PosterLLaVa: Constructing a Unified Multi-modal Layout Generator with LLM [58.67882997399021]
  本研究では,グラフィックレイアウトの自動生成のための統合フレームワークを提案する。 データ駆動方式では、レイアウトを生成するために構造化テキスト(JSONフォーマット)とビジュアルインストラクションチューニングを用いる。 我々は,ユーザのデザイン意図に基づいて編集可能なポスターを生成する自動テキスト投稿システムを開発した。
  論文  参考訳（メタデータ） (2024-06-05T03:05:52Z)
• Prototype2Code: End-to-end Front-end Code Generation from UI Design Prototypes [13.005027924553012]
  ビジネスニーズでエンドツーエンドのフロントエンドコード生成を実現するPrototype2Codeを紹介します。 Prototype2Codeでは、設計リンティングをワークフローに組み込んで、断片化された要素や知覚グループの検出に対処する。 階層構造を最適化し、UI要素の型をインテリジェントに認識することで、Prototype2Codeはより読みやすく構造的にクリアなコードを生成する。
  論文  参考訳（メタデータ） (2024-05-08T11:32:50Z)

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

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