DesignCoder: Hierarchy-aware and self-correcting UI code generation with large language models

Yunnong Chen

doi:10.1016/j.infsof.2026.108214

DesignCoder: Hierarchy-aware and self-correcting UI code generation with large language models

2026-06-08

0

PRE

AI

Y

Yunnong Chen

X

Xinyu Yu

S

Shixian Ding

Y

Yingying Zhang

C

Chengwei Shi

J

Jingzhou Du

L

Liuqing Chen *

DOI：10.1016/j.infsof.2026.108214

Original

Original request for help

Save

Abstract

En 中文

• Proposes DesignCoder, a mockup-centric framework that integrates MLLM reasoning with deterministic structural priors for UI code generation. • Introduces a UI Grouping Chain to distill noisy metadata into coherent functional regions and recover logical component trees. • Implements a vision-guided self-correction loop that aligns rendered outputs with design intent to iteratively repair visual and structural defects. • Demonstrates superior performance on 300 high-fidelity mockups, reducing visual error (MSE) by 37.6% and improving structural similarity (TreeBLEU) by 30.2%. • Validates practical value through a user study, showing significant improvements in code readability and maintainability for industrial workflows.

DesignCoder: Hierarchy-aware and self-correcting UI code generation with large language models

Abstract

Journal

Organization

Cited Papers

Citing Papers