DOne: Decoupling Structure and Rendering for High-Fidelity Design-to-Code Generation

该论文提出了名为 DOne 的端到端框架，通过解耦结构理解与元素渲染，并引入学习式布局分割、混合元素检索及模式引导生成等创新机制，有效解决了现有视觉语言模型在设计转代码任务中因无法兼顾高层结构与细节而导致的布局失真问题，在新增的高保真基准 HiFi2Code 上显著提升了生成代码的视觉保真度与开发效率。

要点

这篇文章介绍了一个名为 DOne 的新系统，它的核心任务是：把一张网页设计图（比如设计师画的草图或截图），自动变成可以运行的网页代码（HTML/CSS）。

为了让你更容易理解，我们可以把“设计图变代码”这个过程想象成**“装修房子”**。

1. 以前的“装修队”遇到了什么麻烦？（痛点）

在 DOne 出现之前，现有的 AI 工具（就像以前的装修队）在把设计图变成房子时，经常犯两个大错，被称为"整体瓶颈"：

• 错把结构当细节： 它们要么只盯着墙上的画（细节）看，结果把房子的梁柱结构（整体布局）搞歪了；要么只画了个大概的框架，却忘了贴瓷砖、装开关（丢失了具体的图标、按钮等细节）。
• 顾此失彼： 就像装修师傅，如果让他一次性把整栋别墅的图纸都背下来再施工，他脑子会乱，要么把客厅和卧室的位置搞反，要么把昂贵的进口瓷砖换成了普通的纸板。

结果就是： 生成的网页要么布局歪歪扭扭，要么缺胳膊少腿，看起来像个“山寨版”。

2. DOne 是怎么解决这个问题的？（核心方案）

DOne 的聪明之处在于，它不再让 AI“一口吃成个胖子”，而是把装修过程拆成了三个专业的步骤，就像组建了一个分工明确的超级装修团队：

第一步：请了一位“空间规划师”（布局分割模块）

• 以前： 装修师傅直接对着整张图纸发呆，试图一次性理解所有东西。
• 现在： DOne 先派一位“空间规划师”进场。他不管墙上的画是什么，他只做一件事：把大房子切分成几个明确的功能区。
  • 比如：“这里是客厅（Header）”，“那里是卧室（Sidebar）”，“中间是餐厅（Main Content）”。
  • 比喻： 就像把一张复杂的披萨，先切成几块大的扇形，确保每一块的位置和大小都是对的，而不是试图一次性把上面的所有配料都画出来。

第二步：请了一位“寻宝猎人”（元素检索模块）

• 以前： 师傅们经常找不到具体的装饰品，或者随便拿个替代品（比如用个红方块代替一个精致的 Logo）。
• 现在： DOne 派了一位“寻宝猎人”。他的任务是在设计图中精准地找到每一个小零件：那个小小的图标、那个特定的按钮、那张高清的产品图。
  • 他不仅找到它们，还把它们单独打包，贴上标签，确保在后续施工中不会弄丢，也不会用错。
  • 比喻： 就像在装修前，先把所有需要的螺丝、把手、灯具都从仓库里精准地找出来，放在手边，而不是等到砌墙时才发现少了一个把手。

第三步：请了一位“总设计师”（Schema 引导生成）

• 以前： 师傅们直接开始砌墙，经常砌到一半发现结构不对，得拆了重来。
• 现在： DOne 让“总设计师”先画一张详细的施工蓝图（JSON 结构）。
  • 这张蓝图结合了第一步的“分区”和第二步的“零件”。它明确告诉 AI：“在客厅区域（分区），要安装那个找到的门把手（零件），并且要放在这个坐标上。”
  • 最后，AI 只需要根据这张蓝图去“填肉”（写代码），而不需要再费脑子去想“房子结构该怎么搭”。
  • 比喻： 就像先有了精确的 3D 模型和物料清单，工人只需要按图施工，把砖块和瓷砖贴上去，既快又准。

3. 效果怎么样？（成果）

为了证明 DOne 真的厉害，作者们还做了一个**“高难度装修考试”**（叫 HiFi2Code 数据集），里面的房子结构特别复杂，零件特别多。

• 考试结果： DOne 的成绩比以前的所有方法都高出一大截（比如视觉相似度提高了 10% 以上）。
• 人类评价： 让真正的程序员和设计师来挑刺，大家一致认为 DOne 做出来的网页最像原版，而且工作效率提高了 3 倍。以前需要一天才能改好的代码，现在用 DOne 可能只要 3 小时。

总结

简单来说，DOne 就是给 AI 装上了“分步思考”的大脑。

它不再试图一次性搞定所有事情，而是学会了：

1. 先分块（把大房子切开）；
2. 再找料（把零件找齐）；
3. 最后按图施工（精准组装）。

这种方法让 AI 从“只会画草图的学徒”变成了“能搞定复杂豪宅的资深装修队”，真正实现了从设计图到高质量代码的“高保真”转换。

技术摘要

DOne 论文技术总结

1. 研究背景与问题定义

Design-to-Code (设计转代码) 是将视觉设计稿（如 Figma、Sketch 截图）自动转换为可执行前端代码（HTML/CSS）的关键技术。尽管视觉语言模型（VLMs）在此领域展现了潜力，但现有方法面临严重的**“整体瓶颈”（Holistic Bottleneck）**：

• 结构还原与细节丢失的矛盾：现有模型难以同时兼顾高层级的页面结构（如导航栏、侧边栏、内容区的层级关系）和细粒度的视觉细节（如图标、Logo、具体文本）。
• 常见失败模式：
  1. 层级解析错误：误判语义关系（如将侧边栏识别为内容块），导致文档结构混乱。
  2. 细粒度元素丢失：图标、Logo 等离散资产常被通用占位符替代或直接忽略，降低视觉真实度。
  3. 整体处理过载：将复杂页面作为单一图像输入 VLM，超出了模型的处理能力，导致在结构完整性和局部细节之间被迫取舍。

2. 方法论：DOne 框架

为了解决上述问题，作者提出了 DOne，一个端到端的框架，核心思想是解耦结构理解与元素渲染。该框架采用分层策略，包含三个关键阶段：

2.1 网页布局分割 (Layout Segmentation)

• 目标：将整页截图分解为语义有意义的子区域（如 Header, Sidebar, Main Content），打破“整体瓶颈”。
• 模型：基于 RT-DETR (Real-Time DEtection TRansformer) 训练了一个专门的布局分割模型。
• 优化：引入了后处理算法（区域框优化），通过计算 IoU（交并比）和置信度比较，消除重叠区域，确保布局结构的清晰和非重叠。
• 数据支持：构建了大规模数据集 WebSeg，包含 30,000 张带有详细语义区域标注的设计稿，用于训练分割模型。

2.2 细粒度视觉元素检索 (Fine-Grained Element Retrieval)

• 挑战：UI 元素具有极端的长宽比（如导航栏）、高密度（如底部小图标）以及功能性与通用物体的语义差异。
• 策略：提出了一种混合检测策略，结合两种模型的优势：
  • DETR：利用其注意力机制处理依赖全局上下文的大型结构（如导航栏、Hero 图）。
  • YOLOv10：利用其基于锚框的高效性处理高密度、小尺寸元素（如图标、按钮）。
• 实现：根据元素类别动态选择模型输出，确保所有细粒度资产（图标、Logo）被准确识别并提取，存入资源库供后续使用。

2.3 模式引导的代码生成 (Schema-Guided Generation)

• 核心创新：引入**布局模式（Layout Schema）**作为中间表示（Intermediate Representation），解耦结构推理与代码实现。
• 流程：
  1. Schema 生成：基于分割的区域和检测到的元素，生成一个分层的 JSON 蓝图。该蓝图明确定义了 DOM 层级结构和元素的空间位置，强制 VLM 将细粒度资产逻辑地嵌套在父容器中。
  2. 代码合成：VLM 接收 Schema 和视觉资产，生成最终的 HTML/Tailwind CSS 代码。
• 优势：这种两阶段方法防止了 VLM 直接生成代码时产生的“结构幻觉”（Structural Hallucinations），确保生成的代码在结构上严格遵循设计，同时精准还原视觉细节。

3. 关键贡献

1. DOne 框架：提出了一种统一了学习式布局分割、细粒度元素检索和模式引导生成的分层框架，有效解决了 VLM 在复杂 UI 生成中的整体瓶颈。
2. 新数据集发布：
   • WebSeg：用于训练布局分割模型的大规模数据集。
   • HiFi2Code：一个高保真评估基准，包含 200 个现代网页，具有比现有数据集（如 Design2Code, Web2Code）更高的布局复杂度、元素密度和结构嵌套深度。
3. 性能突破：通过大量实验证明，DOne 在视觉保真度和开发者生产力上显著优于现有方法。

4. 实验结果

在 HiFi2Code 基准上的评估显示：

• 高层视觉相似度：DOne 在 GPT Score 上比现有最佳方法（DCGen）提升了 10% 以上，CLIP Score 达到 0.7435。
• 细粒度对齐：在颜色匹配（Color Match）和位置匹配（Position Match）等指标上表现优异，证明了其能精准还原视觉资产而非仅生成线框。
• 人类评估：
  • 视觉保真度：在开发者偏好投票中，DOne 以 58.6% 的得票率远超其他方法（次高为 23.3%）。
  • 生产力提升：在受控实验中，使用 DOne 完成任务的平均时间从 9.81 分钟缩短至 3.18 分钟，实现了 3 倍 的效率提升，且生成的代码视觉更忠实于原稿。

5. 意义与展望

• 学术意义：揭示了直接端到端生成复杂 UI 代码的局限性，提出了“解耦 + 中间表示”的新范式，为 VLM 在结构化任务中的应用提供了新思路。
• 工业价值：显著降低了非专家的技术门槛，并大幅提升了专业开发者的迭代效率，使得从设计稿到生产级代码的自动化成为可能。
• 局限性：当前元素检索器依赖固定的 UI 组件分类，未来可探索开放词汇检测；此外，动态交互（如 JS 动画）的处理仍是未来挑战。

总结：DOne 通过“分而治之”的策略，成功将复杂的 Design-to-Code 任务分解为结构理解、元素提取和受控生成三个子任务，显著提升了生成代码的结构准确性和视觉保真度，是目前该领域最具突破性的工作之一。