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.

翻译：平面设计生成需要在高度视觉保真度与细粒度结构可编辑性之间实现精妙平衡。然而，现有方法通常分裂为不可编辑的栅格图像合成或缺乏视觉内容的抽象布局生成。近期结合这两种方法的尝试虽试图弥合此鸿沟，却常因表达能力不足的表征和开环特性而受限于僵化的构图模式与无法解决的视觉失调（例如文本-背景冲突）。为应对这些挑战，我们提出DesignAsCode——一种将平面设计重新构想为使用HTML/CSS的程序化合成任务的全新框架。具体而言，我们引入“规划-实现-反思”流程，其中包含用于构建动态可变深度元素层级的语义规划器，以及通过迭代优化代码来修正渲染伪影的视觉感知反思机制。大量实验表明，DesignAsCode在结构有效性与美学质量方面均显著优于现有先进基线方法。此外，我们基于代码的原生表征解锁了多项高级能力，包括自动布局重定向、复杂文档生成（例如简历）以及基于CSS的动画效果。