![[2602.17690] DesignAsCode: Bridging Structural Editability and Visual Fidelity in Graphic Design Generation](https://arxiv.org/static/browse/0.3.4/images/arxiv-logo-fb.png){kind=logo}
[2602.17690] DesignAsCode: Bridging Structural Editability and Visual Fidelity in Graphic Design Generation
Summary
The paper presents DesignAsCode, a framework that enhances graphic design generation by integrating structural editability with visual fidelity through a programmatic approach using HTML/CSS.
Why It Matters
This research addresses the limitations of current graphic design generation methods, which often compromise either visual quality or editability. By proposing a novel framework, it opens new avenues for creating dynamic and visually appealing designs, which can significantly impact fields like web design and digital content creation.
Key Takeaways
- DesignAsCode offers a programmatic approach to graphic design using HTML/CSS.
- It introduces a Plan-Implement-Reflect pipeline for improved design generation.
- The framework outperforms existing methods in structural validity and aesthetic quality.
- It enables advanced capabilities like automatic layout retargeting and CSS animations.
- The research highlights the importance of balancing editability and visual fidelity in design.
Computer Science > Graphics arXiv:2602.17690 (cs) [Submitted on 6 Feb 2026] Title:DesignAsCode: Bridging Structural Editability and Visual Fidelity in Graphic Design Generation Authors:Ziyuan Liu, Shizhao Sun, Danqing Huang, Yingdong Shi, Meisheng Zhang, Ji Li, Jingsong Yu, Jiang Bian View a PDF of the paper titled DesignAsCode: Bridging Structural Editability and Visual Fidelity in Graphic Design Generation, by Ziyuan Liu and 7 other authors View PDF HTML (experimental) 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 outper...