DesignAsCode: Bridging Structural Editability and Visual Fidelity in Graphic Design Generation

TL;DR

This work proposes DesignAsCode, a novel framework that reimagines graphic design as a programmatic synthesis task using HTML/CSS, incorporating 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.

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/.

Figures (15)

• Figure 1: Generation results from DesignAsCode. Our method achieves superior visual fidelity across various design types (e.g., banner, flyer, menu, and resume). Furthermore, by utilizing HTML/CSS as the backend representation, it supports rich visual effects and ensures full editability for image, text, layout, color, and font attributes.
• Figure 2: Comparison of three mainstream approaches. (a) Text-to-Image. It Lacks editability. (b) Layout generation. While creating editable design, it suffers from poor visual harmonious and put heavy burden on human to prepare design assets. (c) Our editable design generation. It formulates graphic design as a programmatic synthesis using HTML/CSS, thus achieving structural editability and high visual fidelity at the same time.
• Figure 3: Overall framework of our approach.
• Figure 4: Qualitative experimental results. The leftmost column displays the input text prompts. The top three rows demonstrate the results on the Crello test set, while the bottom three rows show the results on the Broad test set.
• Figure 5: Structural Editing and Adaptation. Code generation enables (Top) global theme switching via CSS variables and (Bottom) content-aware layout retargeting, where elements automatically reflow to fit new aspect ratios.