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

文章主要内容和创新点

主要内容

本文针对多模态大型语言模型（MLLMs）在UI代码生成中存在的视觉一致性不足、功能完整性欠缺、缺乏代码正确性评估机制等问题，提出了一种名为DesignCoder的新型框架。该框架通过三个核心模块解决上述问题：

1. UI分组链（UI Grouping Chains）：将UI分割为多个子区域，提取语义信息并构建层级化的组件树，增强模型对复杂嵌套UI层级的理解；
2. 层级感知代码生成：基于组件树采用分治策略生成结构化组件代码和CSS样式，确保视觉一致性和响应式设计；
3. 自校正代码优化：通过视觉对比识别生成代码中的错误（如元素缺失、错位、失真），并进行针对性修复。

评估结果显示，在React Native框架下，DesignCoder在视觉相似度（MSE、CLIP、SSIM）和代码结构相似度（TreeBLEU、Container Match、Tree Edit Distance）上均显著优于现有基线方法，用户研究也证实其生成的代码在可用性、可维护性等方面更优。

创新点

1. 提出UI分组链（UI Grouping Chains）：利用多模态思