用代码生成可编辑的高保真设计,让设计像编程一样灵活可控。
DesignAsCode: Bridging Structural Editability and Visual Fidelity in Graphic Design Generation
- 将设计视为程序合成,用HTML/CSS生成可修改的视觉内容。
- 在结构正确性和美学质量上超越现有方法,解决图文冲突等问题。
- 支持自动布局适配、简历生成和动态动画,适合交互式设计场景。
图形设计生成需要在高视觉保真度与细粒度结构可编辑性之间取得平衡。然而,现有方法通常分为不可编辑的位图合成或缺乏视觉内容的抽象布局生成。近期结合方法虽试图弥合这一差距,但常因表达能力弱和开环特性导致构图僵化、视觉不协调(如文字与背景冲突)。为此,我们提出DesignAsCode,一种将图形设计重构为程序化合成任务的新框架,使用HTML/CSS实现。具体包括:规划-执行-反思三阶段流程,引入语义规划器构建动态、多层级元素结构,以及视觉感知反馈机制优化代码以修正渲染缺陷。大量实验表明,DesignAsCode在结构有效性与美学质量上显著优于基线。其原生代码表示还支持自动布局重定向、复杂文档生成(如简历)及基于CSS的动画。项目页面见https://liuziyuan1109.github.io/design-as-code/。
原文摘要 · Abstract (English)
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 optimizes the code to rectify rendering artifacts. Extensive experiments demonstrate that DesignAsCode significantly outperforms 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/.
Thank you to arXiv for use of its open access interoperability. PaperDance 不是 arXiv 官方产品;中文卡片由大模型生成,请以原文为准。