1D-Bench: A Benchmark for Iterative UI Code Generation with Visual Feedback in Real-World

📄 arXiv: 2602.18548v1 📥 PDF

作者: Qiao Xu, Yipeng Yu, Chengxiao Feng, Xu Liu

分类: cs.SE, cs.AI

发布日期: 2026-02-20

💡 一句话要点

提出1D-Bench基准，用于评估真实电商场景下基于视觉反馈的迭代UI代码生成

🎯 匹配领域: 支柱二：RL算法与架构 (RL & Architecture) 支柱九：具身大模型 (Embodied Foundation Models)

关键词: UI代码生成 Design-to-code 迭代编辑 视觉反馈 电商场景

📋 核心要点

  1. 现有Design-to-code方法缺乏一致的数据集、工具链和评估协议，难以进行有效比较和提升。
  2. 1D-Bench通过提供真实电商场景数据，并结合中间表示缺陷的鲁棒性评估，更贴近实际应用需求。
  3. 实验表明，迭代编辑能有效提升UI代码生成模型的性能，但基于强化学习的编辑策略仍面临挑战。

📝 摘要（中文）

本文提出了1D-Bench，一个基于真实电商工作流程的UI代码生成基准。每个实例提供参考渲染图和一个可能包含提取错误的中间表示。模型以两者作为输入，利用中间表示作为结构线索，并根据参考渲染图进行评估，从而测试模型对中间表示缺陷的鲁棒性，而非字面上的遵循。1D-Bench要求在固定工具链下生成可执行的React代码库，并定义了一个多轮设置，模型使用执行反馈迭代地应用组件级编辑。在商业和开源多模态模型上的实验表明，迭代编辑通常通过提高渲染成功率和视觉相似性来提高最终性能。此外，我们对使用合成修复轨迹进行后训练和基于强化学习的编辑进行了初步研究，但观察到有限且不稳定的收益，这可能源于稀疏的终端奖励和高方差的文件级更新。

🔬 方法详解

问题定义：Design-to-code旨在将高保真UI设计转化为可执行的前端代码，但现有方法在数据集、工具链和评估标准上不一致，导致难以公平比较和有效提升模型性能。此外，真实场景中从设计稿提取的中间表示（如组件树）可能存在错误，现有方法缺乏对这些错误的鲁棒性。

核心思路：1D-Bench的核心思路是构建一个更贴近真实应用场景的基准，包含真实电商数据、可能存在提取错误的中间表示，并采用基于参考渲染图的评估方式，从而更全面地评估模型的性能。此外，引入迭代编辑机制，允许模型根据执行反馈逐步优化生成的代码。

技术框架：1D-Bench基准包含以下关键组成部分： 1. 数据集：包含真实电商工作流程中的UI设计及其对应的React代码。 2. 中间表示：从UI设计中提取的组件树，可能包含提取错误。 3. 评估指标：基于参考渲染图的视觉相似度指标，以及渲染成功率。 4. 迭代编辑环境：允许模型进行多轮组件级编辑，并提供执行反馈。

关键创新：1D-Bench的关键创新在于： 1. 真实场景数据：使用真实电商数据，更贴近实际应用需求。 2. 中间表示缺陷鲁棒性评估：评估模型在中间表示存在错误时的性能。 3. 迭代编辑机制：允许模型根据执行反馈逐步优化生成的代码，更符合实际开发流程。

关键设计：1D-Bench的关键设计包括： 1. 固定工具链：使用统一的React工具链，保证实验的可重复性。 2. 组件级编辑：模型每次迭代只能编辑单个组件，降低了搜索空间。 3. 多轮迭代：模型可以进行多轮迭代，逐步优化生成的代码。 4. 奖励函数：在强化学习实验中，使用稀疏的终端奖励，鼓励模型生成更准确的代码。

📊 实验亮点

实验结果表明，迭代编辑能显著提高UI代码生成模型的性能，提升渲染成功率和视觉相似度。在商业和开源多模态模型上进行了评估，验证了1D-Bench的有效性。初步的强化学习实验虽然收益有限，但也为未来的研究方向提供了启示。

🎯 应用场景

该研究成果可应用于自动化UI代码生成、前端开发辅助工具等领域，能够提高前端开发效率，降低开发成本。通过迭代优化和视觉反馈，可以生成更符合设计要求的UI代码，提升用户体验。未来可进一步探索更有效的迭代编辑策略和强化学习方法，提升代码生成的质量和效率。

📄 摘要（原文）

Design-to-code translates high-fidelity UI designs into executable front-end implementations, but progress remains hard to compare due to inconsistent datasets, toolchains, and evaluation protocols. We introduce 1D-Bench, a benchmark grounded in real e-commerce workflows, where each instance provides a reference rendering and an exported intermediate representation that may contain extraction errors. 1D is short for one day, representing the efficient completion of design-to-code tasks in less than one day. Models take both as input, using the intermediate representation as structural cues while being evaluated against the reference rendering, which tests robustness to intermediate representation defects rather than literal adherence. 1D-Bench requires generating an executable React codebase under a fixed toolchain with an explicit component hierarchy, and defines a multi-round setting in which models iteratively apply component-level edits using execution feedback. Experiments on commercial and open-weight multimodal models show that iterative editing generally improves final performance by increasing rendering success and often improving visual similarity. We further conduct a pilot study on post-training with synthetic repair trajectories and reinforcement learning based editing, and observe limited and unstable gains that may stem from sparse terminal rewards and high-variance file-level updates.