DesignCoder: Hierarchy-Aware and Self-Correcting UI Code Generation with Large Language Models

TL;DR

DesignCoder is a hierarchical-aware, self-correcting framework that improves UI code generation from multimodal large language models, achieving higher accuracy, visual similarity, and code quality in front-end development.

Contribution

It introduces UI Grouping Chains and a hierarchical divide-and-conquer approach, along with a self-correction mechanism, to enhance code quality and understanding in automated UI code generation.

Findings

Outperforms state-of-the-art baselines in React Native code generation

Achieves significant improvements in visual similarity metrics (MSE, CLIP, SSIM)

Enhances code structure similarity metrics (TreeBLEU, Container Match, Tree Edit Distance)

Abstract

Multimodal large language models (MLLMs) have streamlined front-end interface development by automating code generation. However, these models also introduce challenges in ensuring code quality. Existing approaches struggle to maintain both visual consistency and functional completeness in the generated components. Moreover, they lack mechanisms to assess the fidelity and correctness of the rendered pages. To address these issues, we propose DesignCoder, a novel hierarchical-aware and self-correcting automated code generation framework. Specifically, we introduce UI Grouping Chains, which enhance MLLMs' capability to understand and predict complex nested UI hierarchies. Subsequently, DesignCoder employs a hierarchical divide-and-conquer approach to generate front-end code. Finally, we incorporate a self-correction mechanism to improve the model's ability to identify and rectify errors in the generated code. Extensive evaluations on a dataset of UI mockups collected from both open-source communities and industry projects demonstrate that DesignCoder outperforms state-of-the-art baselines in React Native, a widely adopted UI framework. Our method achieves a 37.63%, 9.52%, 12.82% performance increase in visual similarity metrics (MSE, CLIP, SSIM) and significantly improves code structure similarity in terms of TreeBLEU, Container Match, and Tree Edit Distance by 30.19%, 29.31%, 24.67%. Furthermore, we conducted a user study with professional developers to assess the quality and practicality of the generated code. Results indicate that DesignCoder aligns with industry best practices, demonstrating high usability, readability, and maintainability. Our approach provides an efficient and practical solution for agile front-end development, enabling development teams to focus more on core functionality and product innovation.