🤖 AI Summary
Existing design-to-code approaches lack a unified benchmark and exhibit insufficient robustness to errors in intermediate representations. This work proposes 1D-Bench, the first benchmark grounded in real-world e-commerce workflows, which requires models to iteratively generate executable React code compatible with a fixed toolchain, guided by potentially flawed intermediate representations and reference renderings. The study introduces a novel iterative evaluation paradigm that combines visual feedback with defective intermediate representations, prioritizing robustness under structural noise over literal consistency. The proposed method integrates multimodal large language models, component-level editing, execution-feedback-driven iterative refinement, and post-training with reinforcement learning based on synthetically generated repair trajectories. Experiments demonstrate that iterative editing substantially improves rendering success rates and visual similarity, whereas reinforcement learning yields only marginal gains due to sparse rewards and high variance.
📝 Abstract
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.