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

• URL: http://arxiv.org/abs/2602.17690v2
• Date: Mon, 23 Feb 2026 11:36:42 GMT
• Title: DesignAsCode: Bridging Structural Editability and Visual Fidelity in Graphic Design Generation
• Abstract summary: 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.
• Score: 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/.

Related papers

• Editable Visual Design [32.993324966532235]
  We propose Editable Visual Design, a new paradigm driven by a Coding Agent.<n>We designate the creative brain'' for requirement comprehension, task planning, and aesthetic judgment.<n>Agent Design Replay faithfully reproduces the creative and reasoning trajectory akin to that of professional human designers.
  arXiv  Detail & Related papers  (2026-09-03T16:10:12Z)
• CreatiParser: Generative Image Parsing of Raster Graphic Designs into Editable Layers [48.779823303618734]
  We propose a hybrid generative framework for rendering graphic design parsing.<n>It decomposes a design image into editable text, background, and sticker layers.<n>Text regions are parsed using a vision-language model into a text design protocol.<n>Background sticker layers are generated using a multi-branch diffusion architecture.
  arXiv  Detail & Related papers  (2026-04-21T16:20:19Z)
• DOne: Decoupling Structure and Rendering for High-Fidelity Design-to-Code Generation [35.535141410383325]
  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.
  arXiv  Detail & Related papers  (2026-03-12T03:47:24Z)
• EvoDiagram: Agentic Editable Diagram Creation via Design Expertise Evolution [46.35311453619801]
  EvoDiagram is an agentic framework that generates object-level editable diagrams via an intermediate canvas schema.<n>EvoDiagram employs a coordinated multi-agent system to decouple semantic intent from rendering logic.<n>We further release CanvasBench, a benchmark consisting of both data and metrics for canvas-based diagramming.
  arXiv  Detail & Related papers  (2026-02-20T11:11:02Z)
• 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)
• Rethinking Layered Graphic Design Generation with a Top-Down Approach [76.33538798060326]
  Graphic design is crucial for conveying ideas and messages. Designers usually organize their work into objects, backgrounds, and vectorized text layers to simplify editing.<n>With the rise of GenAI methods, an endless supply of high-quality graphic designs in pixel format has become more accessible.<n>Despite this, non-layered designs still inspire human designers, influencing their choices in layouts and text styles, ultimately guiding the creation of layered designs.<n>Motivated by this observation, we propose Accordion, a graphic design generation framework taking the first attempt to convert AI-generated designs into editable layered designs.
  arXiv  Detail & Related papers  (2025-07-08T02:26:08Z)
• CreatiDesign: A Unified Multi-Conditional Diffusion Transformer for Creative Graphic Design [69.83433430133302]
  CreatiDesign is a systematic solution for automated graphic design covering both model architecture and dataset construction.<n>First, we design a unified multi-condition driven architecture that enables flexible and precise integration of heterogeneous design elements.<n> Furthermore, to ensure that each condition precisely controls its designated image region, we propose a multimodal attention mask mechanism.
  arXiv  Detail & Related papers  (2025-05-25T12:14:23Z)
• DesignDiffusion: High-Quality Text-to-Design Image Generation with Diffusion Models [115.62816053600085]
  We present DesignDiffusion, a framework for synthesizing design images from textual descriptions.<n>The proposed framework directly synthesizes textual and visual design elements from user prompts.<n>It utilizes a distinctive character embedding derived from the visual text to enhance the input prompt.
  arXiv  Detail & Related papers  (2025-03-03T15:22:57Z)
• Advancing vision-language models in front-end development via data synthesis [30.287628180320137]
  We propose a reflective agentic workflow that synthesizes high-quality image-text data to capture the diverse characteristics of front-end development.<n>This workflow automates the extraction of self-containedfootnoteA textbfself-contained code snippet from real-world projects, renders the corresponding visual outputs, and generates detailed descriptions that link design elements to functional code.<n>We build a large vision-language model, Flame, trained on the synthesized datasets and demonstrate its effectiveness in generating React code via the $textpass@k$ metric.
  arXiv  Detail & Related papers  (2025-03-03T14:54:01Z)
• MetaDesigner: Advancing Artistic Typography Through AI-Driven, User-Centric, and Multilingual WordArt Synthesis [65.78359025027457]
  MetaDesigner introduces a transformative framework for artistic typography, powered by Large Language Models (LLMs)<n>Its foundation is a multi-agent system comprising the Pipeline, Glyph, and Texture agents, which collectively orchestrate the creation of customizable WordArt.
  arXiv  Detail & Related papers  (2024-06-28T11:58:26Z)
• PosterLLaVa: Constructing a Unified Multi-modal Layout Generator with LLM [58.67882997399021]
  Our research introduces a unified framework for automated graphic layout generation.<n>Our data-driven method employs structured text (JSON format) and visual instruction tuning to generate layouts.<n>We develop an automated text-to-poster system that generates editable posters based on users' design intentions.
  arXiv  Detail & Related papers  (2024-06-05T03:05:52Z)
• COLE: A Hierarchical Generation Framework for Multi-Layered and Editable Graphic Design [39.809852329070466]
  This paper introduces the COLE system - a hierarchical generation framework designed to address these challenges. This COLE system can transform a vague intention prompt into a high-quality multi-layered graphic design, while also supporting flexible editing based on user input.
  arXiv  Detail & Related papers  (2023-11-28T17:22:17Z)
• LeftRefill: Filling Right Canvas based on Left Reference through Generalized Text-to-Image Diffusion Model [55.20469538848806]
  LeftRefill is an innovative approach to harness large Text-to-Image (T2I) diffusion models for reference-guided image synthesis. This paper introduces LeftRefill, an innovative approach to efficiently harness large Text-to-Image (T2I) diffusion models for reference-guided image synthesis.
  arXiv  Detail & Related papers  (2023-05-19T10:29:42Z)
• PosterLayout: A New Benchmark and Approach for Content-aware Visual-Textual Presentation Layout [62.12447593298437]
  Content-aware visual-textual presentation layout aims at arranging spatial space on the given canvas for pre-defined elements. We propose design sequence formation (DSF) that reorganizes elements in layouts to imitate the design processes of human designers. A novel CNN-LSTM-based conditional generative adversarial network (GAN) is presented to generate proper layouts.
  arXiv  Detail & Related papers  (2023-03-28T12:48:36Z)
• LayoutDETR: Detection Transformer Is a Good Multimodal Layout Designer [80.61492265221817]
  Graphic layout designs play an essential role in visual communication. Yet handcrafting layout designs is skill-demanding, time-consuming, and non-scalable to batch production. Generative models emerge to make design automation scalable but it remains non-trivial to produce designs that comply with designers' desires.
  arXiv  Detail & Related papers  (2022-12-19T21:57:35Z)
• Constrained Graphic Layout Generation via Latent Optimization [17.05026043385661]
  We generate graphic layouts that can flexibly incorporate design semantics, either specified implicitly or explicitly by a user. Our approach builds on a generative layout model based on a Transformer architecture, and formulates the layout generation as a constrained optimization problem. We show in the experiments that our approach is capable of generating realistic layouts in both constrained and unconstrained generation tasks with a single model.
  arXiv  Detail & Related papers  (2021-08-02T13:04:11Z)

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.