1D-Bench: 실제 환경에서 시각적 피드백을 활용한 반복적 UI 코드 생성을 위한 벤치마크

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

디자인-투-코드(Design-to-code)는 고품질 UI 디자인을 실행 가능한 프론트엔드 구현으로 변환하지만, 일관성 없는 데이터셋, 툴체인, 평가 프로토콜로 인해 그 발전 상황을 비교하기가 여전히 어렵다. 우리는 실제 이커머스 워크플로우에 기반한 벤치마크인 1D-Bench를 소개한다. 이 벤치마크의 각 인스턴스는 참조 렌더링과 추출 오류가 포함될 수 있는 추출된 중간 표현을 제공한다. 1D는 'one day(하루)'의 약자로, 하루 안에 디자인-투-코드 작업을 효율적으로 완료한다는 것을 의미한다. 모델은 이 두 가지를 모두 입력으로 받아 중간 표현을 구조적 단서로 활용하는 동시에 참조 렌더링을 기준으로 평가받는데, 이는 문자 그대로의 준수 여부보다는 중간 표현의 결함에 대한 강건성을 테스트하기 위함이다. 1D-Bench는 명시적인 컴포넌트 계층 구조를 갖춘 고정된 툴체인 하에서 실행 가능한 React 코드베이스를 생성하도록 요구하며, 모델이 실행 피드백을 사용하여 컴포넌트 수준의 편집을 반복적으로 적용하는 다중 라운드 설정을 정의한다. 상용 및 개방형 가중치(open-weight) 멀티모달 모델에 대한 실험에 따르면, 반복적인 편집은 일반적으로 렌더링 성공률을 높이고 종종 시각적 유사성을 개선하여 최종 성능을 향상시킨다. 나아가 우리는 합성된 복구 궤적 및 강화 학습 기반 편집을 활용한 사후 학습(post-training)에 대한 파일럿 연구를 수행했으며, 희소한 최종 보상과 높은 분산의 파일 수준 업데이트에서 기인할 수 있는 제한적이고 불안정한 성능 향상을 관찰했다.

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.