User interface (UI) design is a difficult yet important task for ensuring the usability, accessibility, and aesthetic qualities of applications. In our paper, we develop a machine-learned model, UIClip, for assessing the design quality and visual relevance of a UI given its screenshot and natural language description. To train UIClip, we used a combination of automated crawling, synthetic augmentation, and human ratings to construct a large-scale dataset of UIs, collated by description and ranked by design quality. Through training on the dataset, UIClip implicitly learns properties of good and bad designs by i) assigning a numerical score that represents a UI design's relevance and quality and ii) providing design suggestions. In an evaluation that compared the outputs of UIClip and other baselines to UIs rated by 12 human designers, we found that UIClip achieved the highest agreement with ground-truth rankings. Finally, we present three example applications that demonstrate how UIClip can facilitate downstream applications that rely on instantaneous assessment of UI design quality: i) UI code generation, ii) UI design tips generation, and iii) quality-aware UI example search.

翻译：用户界面（UI）设计是确保应用程序可用性、可访问性和美学质量的重要且具有挑战性的任务。本文提出了一种机器学习模型UIClip，用于根据UI的截图和自然语言描述评估其设计质量与视觉相关性。为训练UIClip，我们结合自动爬取、合成增强和人工评分方法，构建了一个大规模UI数据集，该数据集通过描述进行整理并按设计质量排序。通过在数据集上的训练，UIClip通过以下方式隐式学习优劣设计的属性：i）为UI设计的相关性和质量分配数值评分，ii）提供设计建议。在将UIClip及其他基线模型的输出与12位人类设计师评分的UI进行比较的评估中，我们发现UIClip与真实排序的一致性最高。最后，我们展示了三个示例应用，说明UIClip如何促进依赖即时评估UI设计质量的下游应用：i）UI代码生成，ii）UI设计建议生成，以及iii）质量感知型UI示例搜索。