DesignAsCode: Bridging Structural Editability and Visual Fidelity in Graphic Design Generation
提出DesignAsCode框架，利用HTML/CSS实现结构可编辑性与视觉保真度的平衡，实验显示优于现有方法。
核心发现
方法论
本文提出的DesignAsCode框架采用Plan-Implement-Reflect管线，结合语义规划器（Semantic Planner）和视觉感知反思机制（Visual-Aware Reflection），实现图形设计的程序化合成。具体而言，语义规划器基于专业设计语料库（如Crello数据集）提取设计推理序列和内容结构，动态构建多层次元素树结构，避免固定模板限制。实现模块将抽象计划转化为可执行的HTML/CSS代码，利用多模态大模型（如GPT-5）结合图像检索或生成，填充视觉资产。反思机制则通过多轮渲染和视觉模型（如CLIP）检测渲染中的视觉不协调（如文字背景冲突），并迭代优化HTML/CSS代码，确保最终设计既结构合理，又视觉美观。该流程充分利用网页标准的表达能力，支持丰富的视觉效果和复杂布局，突破传统模板和固定架构的限制。
关键结果
- 在Crello标准测试集（546例）上，DesignAsCode在结构有效性（Val）达0.9521，视觉一致性（Clip）0.6287，整体优于DeepSeek-R1和Qwen-8B，且在美学指标（如色彩和布局）方面表现优异。其生成的设计在用户主观评分中平均排名第一，显示出强大的视觉和结构兼容性。
- 在更广泛的测试集（Broad，500例）中，DesignAsCode在有效性（Val=0.9905）、可读性（Rea=0.0911）和色彩一致性（Color=67.63）等指标上显著优于基线模型，特别是在复杂布局和多样内容场景中表现出极强的适应能力。
- 通过消融实验验证，HTML表示、语义规划器和视觉反思机制各自对性能提升起到了关键作用。去除任何一环都导致设计质量明显下降，验证了整体框架的协同效应。
研究意义
该研究突破了图形设计自动化的两大瓶颈：一是实现结构化、可编辑的设计表达，二是确保高视觉保真度。传统方法多在像素级或抽象布局间徘徊，难以兼顾专业设计需求。DesignAsCode利用网页标准的表达能力，将设计过程转化为程序合成，不仅提升了设计的可控性和可调性，还实现了自动化的复杂布局生成和视觉优化。这对工业界的广告、出版、UI设计等领域具有深远影响，有望推动设计流程的智能化和个性化发展。同时，框架的可扩展性也为未来实现动画、交互和动态内容提供了基础。
技术贡献
本文的核心技术创新在于提出基于HTML/CSS的程序化设计合成框架，结合语义规划器和视觉感知反思机制，形成闭环优化流程。具体贡献包括：1）将图形设计任务正式定义为HTML/CSS代码生成问题，突破传统像素或模板限制；2）引入专业设计语料库的知识蒸馏，提升语义规划的专业性和多样性；3）设计多轮视觉反思机制，利用CLIP等模型检测渲染中的视觉不协调，实现自动修正；4）实现支持复杂层级结构、多样样式和丰富视觉效果的设计生成，极大丰富了表达空间。该方法在保证结构可编辑性的同时，显著提升了视觉质量，超越了现有的端到端生成模型。
新颖性
本研究首次将网页标准（HTML/CSS）作为图形设计的程序化表达媒介，系统性地结合语义推理与视觉优化，形成闭环设计流程。相较于以往的文本到图像或布局模型，DesignAsCode实现了结构可编辑性与视觉保真度的双重保障，填补了行业内在高质量、可编辑设计生成方面的空白。其创新点在于将设计任务转化为代码合成问题，利用网页技术的表达力，突破了传统方法在样式丰富性和布局复杂性上的限制。同时，视觉反思机制引入了深度视觉感知，确保设计的审美一致性和内容协调性。这一体系的提出，为自动化设计提供了全新的技术路径。
局限性
- 当前模型对复杂视觉效果（如高级渐变、滤镜、动画等）的支持仍有限，未来需增强CSS样式的表达能力以实现更丰富的视觉效果。
- 反思机制依赖于预训练视觉模型（如CLIP），在极端视觉冲突或特殊风格场景中可能表现不足，需引入更专业的视觉感知模型。
- 生成速度和计算成本较高，尤其在多轮反思优化中，实时性仍需提升以满足工业应用的需求。
未来方向
未来将重点扩展模型的视觉表达能力，支持更丰富的动画和交互效果，提升生成效率，探索端到端训练策略以降低计算成本。此外，将引入用户交互反馈机制，实现人机协同优化，增强设计的个性化和多样性。还计划结合生成对抗网络（GAN）和强化学习，进一步提升设计的创新性和适应性，推动自动化设计走向工业化应用。
AI 总览摘要
在数字内容日益丰富的今天，自动化高质量图形设计成为行业发展的关键需求。传统方法多依赖于像素级的图像生成或抽象布局预测，难以兼顾设计的结构可编辑性与视觉效果。本文提出的DesignAsCode框架，创新性地将图形设计任务转化为程序合成问题，利用HTML/CSS作为表达媒介，实现了结构可编辑性与视觉保真度的双重突破。
该框架采用Plan-Implement-Reflect的管线设计，结合专业设计语料库，动态构建多层次元素树，避免模板限制。语义规划器（Semantic Planner）通过知识蒸馏提取设计推理，指导布局生成；实现模块将抽象计划转化为可执行的HTML/CSS代码，支持复杂布局和丰富样式；视觉反思机制（Visual-Aware Reflection）则通过多轮渲染和视觉模型检测，自动修正渲染中的视觉不协调问题，确保设计的审美一致性。
实验结果显示，DesignAsCode在多个公开数据集上均优于现有最先进模型，在结构有效性、视觉一致性和美学指标上表现出色。其生成的设计不仅具有高度的结构可调性，还达到了专业设计的视觉水平，为广告、UI、出版等行业提供了强大的自动化工具。未来，作者计划扩展模型的视觉表达能力，提升生成效率，并引入用户交互机制，推动自动化设计的产业化应用。这一研究为图形设计的智能化提供了全新思路，开启了程序化合成在创意产业中的广阔前景。
深度分析
研究背景
随着深度学习技术的发展，图像生成模型（如Rombach et al., 2022的Stable Diffusion）在视觉内容生产中取得了巨大成功，但其生成的图像多为非编辑的像素图，难以满足专业设计的结构调整需求。同时，布局预测模型（如Gupta et al., 2021）能够生成抽象的空间布局，但缺乏细节和视觉效果，难以直接用于高质量设计。近年来，结合图像生成与布局模型的研究（如Zhang et al., 2025b）试图弥合二者差距，但仍存在表达力不足、结构刚性和视觉不协调的问题。传统的设计自动化工具多依赖模板和手工调节，效率低、缺乏灵活性。随着网页技术的发展，HTML/CSS作为表达媒介的潜力逐渐被重视，成为实现高效、可控设计的理想方案。
核心问题
现有的图形设计自动化方法在结构可编辑性和视觉效果之间难以兼顾。像素级的图像生成虽具高保真，但缺乏后续编辑能力，限制了设计的灵活性。布局预测模型虽能提供结构框架，但多为抽象表示，难以直接用于视觉呈现。结合两者的尝试（如文本到图像+布局预测）存在表达力不足、模板限制和视觉冲突等问题，导致生成的设计难以达到专业水平。如何在保证设计结构可调的同时，提升视觉效果，成为行业亟待解决的核心难题。
核心创新
本研究的创新点主要体现在以下几个方面：1）提出基于HTML/CSS的程序化设计合成，将设计任务转化为代码生成问题，突破传统像素和模板限制，支持丰富的样式和复杂布局；2）引入语义规划器，结合专业设计语料库，动态构建多层次元素树，避免固定模板的刚性，增强结构多样性；3）设计多轮视觉反思机制，利用视觉模型检测渲染中的视觉不协调（如文字背景冲突），并自动优化HTML/CSS代码，确保设计的视觉一致性和审美品质；4）实现支持复杂层级、多样样式和丰富视觉效果的设计生成，极大丰富了表达空间。这一体系将结构可编辑性与视觉保真度融合，为自动化设计提供了全新技术路径。
方法详解
- �� 设计生成作为HTML代码生成问题，将用户指令映射到可执行的HTML/CSS代码，利用网页标准表达丰富的视觉样式和复杂布局。
- �� 语义规划器（Semantic Planner）接受自然语言指令，结合设计知识库，提取布局推理序列、元素分组、图像层提示和文本规格，构建多层次元素树结构，避免模板刚性。
- �� 实现模块根据规划输出，将抽象布局转化为HTML/CSS代码，通过检索或生成视觉资产，填充元素树，形成初步设计。
- �� 视觉反思机制在多轮迭代中，渲染HTML，利用视觉模型检测不协调（如文字背景色冲突），并自动优化HTML/CSS代码，逐步提升设计质量。
- �� 最终输出具有丰富样式、复杂层级和高视觉质量的设计，支持动画和交互扩展。
实验设计
采用Crello（546例）和Broad（500例）两个公开数据集进行评估，比较对象包括DeepSeek-R1、Qwen-8B、GPT-5等最先进模型。指标涵盖结构有效性（Val）、布局一致性（Ali）、可读性（Rea）、语义匹配（CLIP）等，结合主观评分（由gpt-4o评估）。在Crello上，DesignAsCode在Val、Clip、色彩和布局指标上均优于对比模型，平均排名第一。在Broad数据集上，表现出更强的适应性和复杂场景处理能力。通过消融实验验证各模块的重要性，显示HTML表示、语义规划和视觉反思机制对性能提升至关重要。
结果分析
实验结果显示，DesignAsCode在结构有效性（Val=0.9521）和视觉一致性（Clip=0.6287）方面显著优于基线模型，整体性能优越。其生成的设计在用户主观评分中排名第一，特别是在复杂布局和多样内容场景中表现出色。消融实验表明，去除HTML表示或视觉反思机制都导致性能下降，验证了框架的协同作用。此外，模型在动画和复杂样式支持方面也表现出潜力，为未来扩展提供基础。
应用场景
该方法适用于广告海报、UI界面、出版物封面等场景，用户只需提供简洁的文本指令，即可自动生成高质量设计稿。其优势在于支持快速迭代、个性化定制和多样化布局，极大提升设计效率。未来可结合交互式界面，让设计师与模型协同优化，实现个性化定制和风格迁移。长远来看，该技术有望推动自动化设计普及，降低专业门槛，赋能中小企业和个人创作者，推动创意产业的数字化转型。
局限与展望
目前模型在支持极端视觉效果（如高级渐变、滤镜、动画）方面仍有限，需进一步增强CSS样式表达能力。视觉反思机制依赖预训练模型（如CLIP），在特殊风格或极端视觉冲突场景中表现不足，可能导致优化效果不理想。此外，生成过程较为复杂，计算成本较高，实时性仍需提升以满足工业应用需求。未来需优化算法效率，增强模型的泛化能力，并探索端到端训练策略，降低硬件依赖。
通俗解读 非专业人士也能看懂
想象你在一家非常先进的工厂里工作，这个工厂可以自动帮你设计出漂亮的海报或网页。以前，你需要用画图软件一遍遍调整每个元素，比如文字、图片、背景，既费时又难保证每次都完美。而现在，这个工厂用一种特殊的“语言”——就像写程序一样，把设计的想法写成代码，然后工厂就能自动生成你想要的样子。这个“语言”其实是网页用的HTML和CSS，工厂通过理解你的描述，自动排版、上色、加动画，甚至还能自己检查哪里不协调，比如文字看不清或颜色不搭配，然后自动修正。这样一来，设计变得既灵活又高效，就像有一个聪明的助手帮你打理一切，让你专注于创意，而不用担心技术细节。
简单解释 像给14岁少年讲一样
想象你在玩一个超级厉害的游戏，你可以告诉游戏里的角色你想要的场景，比如“一个热闹的派对，有很多人跳舞，背景是彩色的灯光”。游戏会根据你的描述，自动帮你搭建出这个场景。以前，你得用复杂的工具一遍遍调整每个角色的位置、灯光和颜色，特别麻烦。而现在，这个游戏用一种特别的“写作方式”——就像写作文一样，把你的想法写成一段代码，游戏就能理解并自动生成场景。它还能自己检查场景是否合理，比如灯光太暗或人物重叠，然后自动调整。这样一来，你只需要专注你的想法，游戏帮你把它变成了真实的画面。这个技术就像有一个聪明的助手，帮你快速创造出漂亮的场景，省时又有趣！
术语表
HTML/CSS (超文本标记语言/层叠样式表)
网页的基础技术，用于定义网页的结构和样式。HTML定义内容结构，CSS控制外观效果。
作为设计的程序化表达媒介，本文利用HTML/CSS实现复杂布局和丰富视觉效果。
语义规划器 (Semantic Planner)
基于自然语言理解和设计知识库，生成设计布局的推理序列和内容结构。
用于指导布局树的构建，确保设计符合内容语义和专业规范。
视觉反思机制 (Visual-Aware Reflection)
利用视觉模型检测渲染效果中的不协调，并自动优化HTML/CSS代码。
确保生成设计在视觉上具有高一致性和审美品质。
闭环优化 (Closed-loop Optimization)
通过多轮渲染、检测和修正，逐步提升设计质量的过程。
实现结构与视觉的同步优化，避免单向流程带来的不协调。
多模态大模型 (Multimodal Large Model)
结合文本、图像等多种模态信息的深度学习模型，如GPT-5。
用于生成和填充设计中的视觉资产，支持复杂布局的实现。
知识蒸馏 (Knowledge Distillation)
从大规模模型中提取高层次推理能力，训练轻量模型。
用于提升语义规划器的专业性和多样性。
多轮渲染 (Multi-round Rendering)
多次将HTML/CSS代码转化为图像，检测视觉效果，逐步优化。
实现设计的视觉一致性和美学提升。
视觉模型 (Visual Model)
如CLIP，用于理解和评估图像与文本的语义一致性。
在反思机制中检测设计中的视觉不协调。
复杂布局 (Complex Layout)
多层次、多区域、多样式的排版结构。
支持丰富的设计表达，超越简单模板。
CSS动画 (CSS Animation)
利用CSS实现网页元素的动态效果。
作为设计的扩展能力，支持动画和交互。
开放问题 这项研究留下的未解疑问
- 1 尽管模型在静态设计生成方面表现出色，但在动态交互和动画效果的自动生成上仍存在不足。如何结合深度学习与动画技术，自动生成符合内容和审美的动态效果，是未来的重要方向。
- 2 当前模型对极端视觉风格（如超现实、极简、复杂渐变）支持有限，如何增强CSS样式表达能力，支持更多视觉风格，是技术发展的关键。
- 3 多轮反思机制的效率仍需提升，尤其是在大规模设计生成场景中，如何降低计算成本，实现实时优化，是亟待解决的问题。
- 4 模型在处理极端复杂布局（如多层嵌套、动态交互元素）时，仍存在稳定性和一致性问题，未来需要引入更强的结构推理能力。
- 5 如何结合用户反馈和交互，形成自适应、个性化的设计流程，也是未来研究的重要方向。
应用场景
近期应用
自动广告海报生成
广告公司可以输入简洁的描述，模型自动生成符合品牌风格的海报，节省设计时间，提高效率。
UI界面快速原型
开发者提供功能需求，模型快速生成多样化界面布局，辅助设计和评审。
出版物封面设计
出版社利用模型自动生成封面设计方案，满足多样化审美和内容需求。
远期愿景
智能设计助手
未来模型可作为设计师的智能助手，提供个性化建议和自动优化，推动创意产业数字化转型。
全流程自动化设计平台
结合动画、交互和动态内容，打造端到端的自动化设计解决方案，降低行业门槛，赋能中小企业。
原文摘要
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/.
参考文献 (20)
Igd: Instructional Graphic Design With Multimodal Layer Generatio
Yadong Qu, Hongtao Xie, Yongdong Zhang 等
High-Resolution Image Synthesis with Latent Diffusion Models
Robin Rombach, A. Blattmann, Dominik Lorenz 等
LayoutVAE: Stochastic Scene Layout Generation From a Label Set
Akash Abdu Jyothi, Thibaut Durand, Jiawei He 等
Decoupled Weight Decay Regularization
I. Loshchilov, F. Hutter
Improving
N. Loader
LayoutGAN: Generating Graphic Layouts with Wireframe Discriminators
Jianan Li, Jimei Yang, Aaron Hertzmann 等
Billion-Scale Similarity Search with GPUs
Jeff Johnson, Matthijs Douze, H. Jégou
Improved Denoising Diffusion Probabilistic Models
Alex Nichol, Prafulla Dhariwal
Learning Transferable Visual Models From Natural Language Supervision
Alec Radford, Jong Wook Kim, Chris Hallacy 等
Variational Transformer Networks for Layout Generation
Diego Martín Arroyo, Janis Postels, Federico Tombari
Chain of Thought Prompting Elicits Reasoning in Large Language Models
Jason Wei, Xuezhi Wang, Dale Schuurmans 等
Composition-aware Graphic Layout GAN for Visual-textual Presentation Designs
Min Zhou, Chenchen Xu, Ye Ma 等
Adding Conditional Control to Text-to-Image Diffusion Models
Lvmin Zhang, Anyi Rao, Maneesh Agrawala
PosterLayout: A New Benchmark and Approach for Content-Aware Visual-Textual Presentation Layout
Hsiao-An Hsu, Xiangteng He, Yuxin Peng 等
SDXL: Improving Latent Diffusion Models for High-Resolution Image Synthesis
Dustin Podell, Zion English, Kyle Lacey 等
LayoutPrompter: Awaken the Design Ability of Large Language Models
Jiawei Lin, Jiaqi Guo, Shizhao Sun 等
COLE: A Hierarchical Generation Framework for Multi-Layered and Editable Graphic Design
Peidong Jia, Chen-Xuan Li, Yuhui Yuan 等
SVGDreamer: Text Guided SVG Generation with Diffusion Model
Ximing Xing, Haitao Zhou, Chuang Wang 等
被引用 (4)
CommerceVibe: Learning to Design E-Commerce Creatives as Executable Visual Code via Dual-Feedback Reinforcement Learning
TransAnyText: Translating Arbitrary Text in E-commerce Images via Structured Visual Generation
AutoDesign: Meta-Harness Optimization for Long-Horizon Agentic Design
Research on the Visual Rhythm and Emotional Communication Mechanism of Dynamic Graphic Design in the Digital Media Era