DesignAsCode:在图形设计生成中弥合结构可编辑性与视觉保真度
DesignAsCode: Bridging Structural Editability and Visual Fidelity in Graphic Design Generation
AI总结:
DesignAsCode 通过 HTML/CSS 程序化合成方法,实现了图形设计生成中结构可编辑性与视觉保真度的平衡,提升了设计质量和生成能力。
摘要:
图形设计生成需要在高视觉保真度和细粒度结构可编辑性之间取得微妙的平衡。然而,现有方法通常分为非可编辑的位图图像合成或缺乏视觉内容的抽象布局生成。最近的这两种方法的结合试图弥合这一差距,但往往由于其不 expressive 的表示和开环性质,导致刚性的 composition 模式和无法解决的视觉不协调(例如文本与背景的冲突)。为了解决这些挑战,我们提出了 DesignAsCode,一种新的框架,将图形设计重新想象为一个程序合成任务,使用 HTML/CSS。具体来说,我们引入了一个计划-实施-反思的流程,包括一个语义计划器来构建动态、可变深度的元素层次结构,以及一个视觉感知的反思机制,该机制通过迭代优化代码来纠正渲染瑕疵。广泛的实验表明,DesignAsCode 在结构有效性和审美质量方面都显著优于最先进的基线。此外,我们的代码原生表示解锁了高级能力,包括自动布局重新定位、复杂文档生成(例如简历)和基于 CSS 的动画。我们的项目页面可在 https://liuziyuan1109.github.io/design-as-code/ 上找到。
英文摘要:
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/.
机构、总结、中文摘要均由AI分析而来,可能存在错误,请以论文正文为准。