DOne: Decoupling Structure and Rendering for High-Fidelity Design-to-Code Generation

• URL: http://arxiv.org/abs/2604.01226v1
• Date: Thu, 12 Mar 2026 03:47:24 GMT
• Title: DOne: Decoupling Structure and Rendering for High-Fidelity Design-to-Code Generation
• Abstract summary: DOne is an end-to-end framework that decouples structure understanding from element rendering.<n>HiFi2Code is a benchmark featuring significantly higher layout complexity than existing datasets.<n>Human evaluations confirm a 3 times productivity gain with higher visual fidelity.
• Score: 35.535141410383325
• License: http://arxiv.org/licenses/nonexclusive-distrib/1.0/
• Abstract: While Vision Language Models (VLMs) have shown promise in Design-to-Code generation, they suffer from a "holistic bottleneck-failing to reconcile high-level structural hierarchy with fine-grained visual details, often resulting in layout distortions or generic placeholders. To bridge this gap, we propose DOne, an end-to-end framework that decouples structure understanding from element rendering. DOne introduces (1) a learned layout segmentation module to decompose complex designs, avoiding the limitations of heuristic cropping; (2) a specialized hybrid element retriever to handle the extreme aspect ratios and densities of UI components; and (3) a schema-guided generation paradigm that bridges layout and code. To rigorously assess performance, we introduce HiFi2Code, a benchmark featuring significantly higher layout complexity than existing datasets. Extensive evaluations on the HiFi2Code demonstrate that DOne outperforms exiting methods in both high-level visual similarity (e.g., over 10% in GPT Score) and fine-grained element alignment. Human evaluations confirm a 3 times productivity gain with higher visual fidelity.

Related papers

• Beyond Atomic Layouts: Compositional Design Understanding with Vision-Language Models [50.81272588822916]
  We introduce a new task, compositional layout understanding, and present CoDe, a dataset of 20K real-world multi-layer annotated layouts.<n>To address these challenges, we propose MASON, a post-training paradigm that integrates multimodal alignment (MA) and structural perception (SP)<n> MASON enhances element interpretation by grounding metadata-defined elements to their visual counterparts, while SP models layer-aware inter-element relationships.
  arXiv  Detail & Related papers  (2026-08-27T07:10:42Z)
• GVR-Coder: A Visual-Feedback Framework for Structured SVG Generation in Complex Document and Meeting Scenarios [11.811188580823126]
  We introduce DocMeetSVG-100K, a large-scale SVG dataset tailored for document authoring and meeting review scenarios.<n>At the model level, we propose GVR-Coder, a novel framework designed to generate high-quality logical diagrams from lengthy professional texts.<n>In addition, we introduce reinforcement learning from dual rendering feedback, a mechanism that provides implicit feedback through reward signals to jointly optimize structural complexity and visual aesthetics.
  arXiv  Detail & Related papers  (2026-07-30T11:47:50Z)
• Omni-I2C: A Holistic Benchmark for High-Fidelity Image-to-Code Generation [59.87131391492088]
  We present Omni-I2C, a benchmark designed to evaluate the capability of Large Multimodal Models (LMMs) in converting complex, structured digital graphics into executable code.<n>By incorporating authentic user-sourced cases, the benchmark spans a vast spectrum of digital content.<n>Our evaluation reveals a substantial performance gap among leading LMMs.
  arXiv  Detail & Related papers  (2026-03-18T09:10:04Z)
• Architecture-Aware Multi-Design Generation for Repository-Level Feature Addition [53.50448142467294]
  RAIM is a multi-design and architecture-aware framework for repository-level feature addition.<n>It shifts away from linear patching by generating multiple diverse implementation designs.<n>Experiments on the NoCode-bench Verified dataset demonstrate that RAIM establishes a new state-of-the-art performance.
  arXiv  Detail & Related papers  (2026-03-02T12:50:40Z)
• DesignAsCode: Bridging Structural Editability and Visual Fidelity in Graphic Design Generation [21.789797121277896]
  DesignAsCode is a novel framework that reimagines graphic design as a programmatic task using HTML/CSS.<n>DesignAsCode significantly outperforms state-of-the-art rendering baselines in both structural validity and aesthetic quality.
  arXiv  Detail & Related papers  (2026-02-06T05:10:19Z)
• VSA:Visual-Structural Alignment for UI-to-Code [29.15071743239679]
  We propose bfVSA (VSA), a multi-stage paradigm designed to synthesize organized assets through visual-text alignment.<n>Our framework yields a substantial improvement in code modularity and architectural consistency over state-of-the-art benchmarks.
  arXiv  Detail & Related papers  (2025-12-23T03:55:45Z)
• VCU-Bridge: Hierarchical Visual Connotation Understanding via Semantic Bridging [49.55286536996476]
  We present VCU-Bridge, a framework that operationalizes a human-like hierarchy of visual connotation understanding.<n>Building on this framework, we construct HVCU-Bench, a benchmark for hierarchical visual connotation understanding with explicit, level-wise diagnostics.
  arXiv  Detail & Related papers  (2025-11-22T17:01:03Z)
• MLLM-Based UI2Code Automation Guided by UI Layout Information [17.177322441575196]
  We propose a novel MLLM-based framework generating UI code from real-world webpage images, which includes three key modules.<n>For evaluation, we build a new benchmark dataset which involves 350 real-world websites named Snap2Code.
  arXiv  Detail & Related papers  (2025-06-12T06:04:16Z)
• GLDesigner: Leveraging Multi-Modal LLMs as Designer for Enhanced Aesthetic Text Glyph Layouts [53.568057283934714]
  We propose a Vision-Language Model (VLM)-based framework that generates content-aware text logo layouts.<n>We introduce two model techniques that reduce the computational cost for processing multiple glyph images simultaneously.<n>To support instruction tuning of our model, we construct two extensive text logo datasets that are five times larger than existing public datasets.
  arXiv  Detail & Related papers  (2024-11-18T10:04:10Z)
• Prototype2Code: End-to-end Front-end Code Generation from UI Design Prototypes [13.005027924553012]
  We introduce Prototype2Code, which achieves end-to-end front-end code generation with business demands. For Prototype2Code, we incorporate design linting into the workflow, addressing the detection of fragmented elements and perceptual groups. By optimizing the hierarchical structure and intelligently recognizing UI element types, Prototype2Code generates code that is more readable and structurally clearer.
  arXiv  Detail & Related papers  (2024-05-08T11:32:50Z)
• SGTR+: End-to-end Scene Graph Generation with Transformer [42.396971149458324]
  Scene Graph Generation (SGG) remains a challenging visual understanding task due to its compositional property. Most previous works adopt a bottom-up, two-stage or point-based, one-stage approach, which often suffers from high time complexity or suboptimal designs. We propose a novel SGG method to address the aforementioned issues, formulating the task as a bipartite graph construction problem.
  arXiv  Detail & Related papers  (2024-01-23T15:18:20Z)

This list is automatically generated from the titles and abstracts of the papers in this site.

This site does not guarantee the quality of this site (including all information) and is not responsible for any consequences.