論文の概要: DesignAsCode: Bridging Structural Editability and Visual Fidelity in Graphic Design Generation

• arxiv url: http://arxiv.org/abs/2602.17690v2
• Date: Mon, 23 Feb 2026 11:36:42 GMT
• ステータス: 翻訳完了
• システム内更新日: 2026-03-02 07:21:25.526588
• Title: DesignAsCode: Bridging Structural Editability and Visual Fidelity in Graphic Design Generation
• Title（参考訳）: DesignAsCode: グラフィックデザイン生成における構造的編集性と視覚的忠実性のブリッジ
• Authors: Ziyuan Liu, Shizhao Sun, Danqing Huang, Yingdong Shi, Meisheng Zhang, Ji Li, Jingsong Yu, Jiang Bian,
• Abstract要約: DesignAsCodeはHTML/CSSを使ったプログラミングタスクとしてグラフィックデザインを再定義する新しいフレームワークである。 DesignAsCodeは、構造的妥当性と美的品質の両方において、最先端のレンダリングベースラインを大幅に上回っている。
• 参考スコア（独自算出の注目度）: 21.789797121277896
• License: http://arxiv.org/licenses/nonexclusive-distrib/1.0/
• Abstract: Graphic design generation demands a delicate balance between high visual fidelity and fine-grained structural editability. However, existing approaches typically bifurcate into either non-editable raster image synthesis or abstract layout generation devoid of visual content. Recent combinations of these two approaches attempt to bridge this gap but often suffer from rigid composition schemas and unresolvable visual dissonances (e.g., text-background conflicts) due to their inexpressive representation and open-loop nature. To address these challenges, we propose DesignAsCode, a novel framework that reimagines graphic design as a programmatic synthesis task using HTML/CSS. Specifically, we introduce a Plan-Implement-Reflect pipeline, incorporating a Semantic Planner to construct dynamic, variable-depth element hierarchies and a Visual-Aware Reflection mechanism that iteratively optimizes the code to rectify rendering artifacts. Extensive experiments demonstrate that DesignAsCode significantly outperforms state-of-the-art baselines in both structural validity and aesthetic quality. Furthermore, our code-native representation unlocks advanced capabilities, including automatic layout retargeting, complex document generation (e.g., resumes), and CSS-based animation. Our project page is available at https://liuziyuan1109.github.io/design-as-code/.
• Abstract（参考訳）: グラフィックデザイン生成は、高い視覚的忠実度ときめ細かい構造的編集性の間の微妙なバランスを必要とする。 しかし、既存のアプローチは一般的に、編集不可能なラスタ画像合成と、視覚コンテンツのない抽象的なレイアウト生成のいずれかに分岐する。 これらの2つのアプローチの最近の組み合わせは、このギャップを埋めようとしているが、しばしば、表現力のない表現とオープンループの性質のために、厳密な構成スキーマと解決不可能な視覚的不協和(例えば、テキストとバックグラウンドの衝突)に悩まされている。 これらの課題に対処するために,HTML/CSSを用いたプログラミング合成タスクとしてグラフィックデザインを再定義する新しいフレームワークであるDesignAsCodeを提案する。 具体的にはPlan-Implement-Reflectパイプラインを導入し、動的で可変深さの要素階層を構築するためにSemantic Plannerと、描画アーティファクトの修正のためにコードを反復的に最適化するVisual-Aware Reflectionメカニズムを組み込んだ。 大規模な実験により、DesignAsCodeは、構造的妥当性と美的品質の両方において最先端のベースラインを著しく上回っている。 さらに、コードネイティブ表現は、自動レイアウト再ターゲティング、複雑なドキュメント生成(例:履歴書)、CSSベースのアニメーションなど、高度な機能をアンロックします。 私たちのプロジェクトページはhttps://liuziyuan1109.github.io/design-as-code/で公開されています。

関連論文リスト

• VSA:Visual-Structural Alignment for UI-to-Code [29.15071743239679]
  視覚テキストアライメントにより組織化された資産を合成するための多段階パラダイムであるbfVSA(VSA)を提案する。 私たちのフレームワークは、最先端のベンチマークよりもコードのモジュール化とアーキテクチャの一貫性を大幅に改善します。
  論文  参考訳（メタデータ） (2025-12-23T03:55:45Z)
• Rethinking Layered Graphic Design Generation with a Top-Down Approach [76.33538798060326]
  図形デザインは、アイデアやメッセージを伝えるのに不可欠である。デザイナーは通常、編集を簡単にするために、オブジェクト、背景、ベクトル化されたテキスト層に作業を整理する。 GenAI方式の登場により、ピクセルフォーマットにおける高品質なグラフィックデザインの無限の供給がよりアクセスしやすくなってきた。 これにもかかわらず、非層型設計は人間の設計を刺激し、レイアウトやテキストスタイルの選択に影響を与え、最終的に層型設計を導いた。 本稿では,AI生成したデザインを編集可能な階層化設計に変換する最初の試みとして,グラフィックデザイン生成フレームワークであるAccordionを提案する。
  論文  参考訳（メタデータ） (2025-07-08T02:26:08Z)
• CreatiDesign: A Unified Multi-Conditional Diffusion Transformer for Creative Graphic Design [69.83433430133302]
  CreatiDesignは、モデルアーキテクチャとデータセット構築の両方をカバーする、自動グラフィック設計のための体系的なソリューションである。 まず、異種設計要素の柔軟かつ正確な統合を可能にする統合されたマルチ条件駆動アーキテクチャを設計する。 さらに,各条件が指定された画像領域を正確に制御することを保証するため,マルチモーダルアテンションマスク機構を提案する。
  論文  参考訳（メタデータ） (2025-05-25T12:14:23Z)
• DesignDiffusion: High-Quality Text-to-Design Image Generation with Diffusion Models [115.62816053600085]
  デザインイメージをテキスト記述から合成するフレームワークであるDesignDiffusionを提案する。 提案するフレームワークは,ユーザプロンプトから直接テキストおよびビジュアルデザイン要素を合成する。 視覚テキストから派生した特徴的な文字埋め込みを利用して入力プロンプトを強化する。
  論文  参考訳（メタデータ） (2025-03-03T15:22:57Z)
• Advancing vision-language models in front-end development via data synthesis [30.287628180320137]
  本稿では,高品質な画像テキストデータを合成し,フロントエンド開発における多様な特徴を捉えた反射型エージェントワークフローを提案する。 このワークフローは、実際のプロジェクトから自己完結型フットノートA textbfself-完結型コードスニペットを抽出し、対応するビジュアルアウトプットをレンダリングし、設計要素を機能コードにリンクする詳細な記述を生成する。 私たちは、合成データセットに基づいてトレーニングされた大規模なビジョン言語モデルであるFlameを構築し、$textpass@k$メトリックを使用してReactコードを生成する効果を実証しています。
  論文  参考訳（メタデータ） (2025-03-03T14:54:01Z)
• MetaDesigner: Advancing Artistic Typography Through AI-Driven, User-Centric, and Multilingual WordArt Synthesis [65.78359025027457]
  MetaDesignerがLarge Language Models(LLM)を利用したアートタイポグラフィーのための変換フレームワークを導入 その基盤は、Pipeline、Glyph、Textureエージェントで構成されるマルチエージェントシステムであり、カスタマイズ可能なWordArtの作成をまとめてオーケストレーションしている。
  論文  参考訳（メタデータ） (2024-06-28T11:58:26Z)
• PosterLLaVa: Constructing a Unified Multi-modal Layout Generator with LLM [58.67882997399021]
  本研究では,グラフィックレイアウトの自動生成のための統合フレームワークを提案する。 データ駆動方式では、レイアウトを生成するために構造化テキスト(JSONフォーマット)とビジュアルインストラクションチューニングを用いる。 我々は,ユーザのデザイン意図に基づいて編集可能なポスターを生成する自動テキスト投稿システムを開発した。
  論文  参考訳（メタデータ） (2024-06-05T03:05:52Z)
• COLE: A Hierarchical Generation Framework for Multi-Layered and Editable Graphic Design [39.809852329070466]
  本稿では,これらの課題に対処するために設計された階層型生成フレームワークであるCOLEシステムを紹介する。 このCOLEシステムは、曖昧な意図のプロンプトを高品質な多層グラフィック設計に変換すると同時に、ユーザ入力に基づく柔軟な編集をサポートする。
  論文  参考訳（メタデータ） (2023-11-28T17:22:17Z)
• LeftRefill: Filling Right Canvas based on Left Reference through Generalized Text-to-Image Diffusion Model [55.20469538848806]
  leftRefillは、参照誘導画像合成のための大規模なテキスト・ツー・イメージ(T2I)拡散モデルを利用する革新的なアプローチである。 本稿では、参照誘導画像合成に大規模なテキスト・ツー・イメージ拡散モデル(T2I)を効果的に活用するための革新的なアプローチであるLeftRefillを紹介する。
  論文  参考訳（メタデータ） (2023-05-19T10:29:42Z)
• PosterLayout: A New Benchmark and Approach for Content-aware Visual-Textual Presentation Layout [62.12447593298437]
  コンテンツ対応視覚テキスト提示レイアウトは,所定のキャンバス上の空間空間を予め定義された要素にアレンジすることを目的としている。 本稿では,設計過程を模倣するためにレイアウトの要素を再編成する設計シーケンス形成(DSF)を提案する。 CNN-LSTMに基づく新しい条件生成対向ネットワーク(GAN)を提示し、適切なレイアウトを生成する。
  論文  参考訳（メタデータ） (2023-03-28T12:48:36Z)
• LayoutDETR: Detection Transformer Is a Good Multimodal Layout Designer [80.61492265221817]
  グラフィックレイアウトデザインは視覚コミュニケーションにおいて重要な役割を担っている。 しかし、手作りのレイアウトデザインは、スキルを要求し、時間がかかり、バッチプロダクションではスケールできない。 ジェネレーティブモデルは、設計自動化をスケーラブルにするために出現するが、デザイナの欲求に沿うデザインを作成することは、未だに容易ではない。
  論文  参考訳（メタデータ） (2022-12-19T21:57:35Z)
• Constrained Graphic Layout Generation via Latent Optimization [17.05026043385661]
  ユーザによって暗黙的に、あるいは明示的に、デザインセマンティクスを柔軟に組み込むことができるグラフィックレイアウトを生成します。 提案手法はトランスフォーマーアーキテクチャに基づく生成的レイアウトモデルに基づいており,レイアウト生成を制約付き最適化問題として定式化している。 実験では,1つのモデルを用いて,制約付きタスクと制約なしタスクの両方において,現実的なレイアウトを生成することができることを示す。
  論文  参考訳（メタデータ） (2021-08-02T13:04:11Z)

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

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