From Design Critique to Editable HTML: LLM-Based Transformation of UI Feedback into Front-End Edits

Abstract

Natural-language design critique contains concrete instructions about spacing, hierarchy, component styling, content, and usability, yet front-end generation is usually evaluated as one-shot reconstruction. This study evaluates critique-conditioned HTML editing on the Apple ML-RLDF designer-feedback corpus. The analysis uses all 1,499 records across four feedback modalities: 152 comment-conditioned HTML pairs, 181 region-grounded critique pairs, 1,098 designer ranking pairs, and 68 direct designer edit pairs. The 333 critique-conditioned outputs are measured with normalized HTML and DOM-tag edit distance, visible-text preservation, class-level changes, structural similarity, pixel error, color similarity, edge overlap, and an eight-category detectable realization score. Ranking pairs train description-grouped pairwise preference models, with exact screenshot overlap removed before transfer scoring. Comment-conditioned pages changed more code than grounded pages (mean normalized distance 0.122 versus 0.090; p = 0.013), while their visual similarity remained comparable (mean SSIM 0.703 versus 0.720; p = 0.380). Direct designer edits produced a mean SSIM of 0.731, and SSIM did not differ across the three edit modalities (Kruskal-Wallis p = 0.468). Detectable realization averaged 0.705 for comments and 0.702 for grounded critique. Spacing and component requests were implemented most consistently, whereas hierarchy and accessibility requests were rarely accompanied by corresponding semantic changes. The strongest ranking model reached 53.7% description-grouped accuracy, and its transfer probabilities stayed near 0.5. The results show that critique-conditioned HTML editing can preserve page identity while making targeted source changes, but ranking-derived preference is too weak to serve as a stand-alone quality measure.