DesignRepair: 基于大语言模型的双流设计指南感知前端修复
软件工程
2025-04-29 v2
摘要
大语言模型（LLM）的兴起通过Vercel的V0等工具简化了前端界面的创建，但也暴露了设计质量方面的挑战（例如可访问性和可用性）。现有的解决方案往往由于其局限性、泛化能力或数据依赖性而难以应对这些复杂性。此外，它们都没有检验LLM生成的UI设计质量。在这项工作中，我们提出了DesignRepair，一个新颖的双流设计指南感知系统，用于从代码层面和渲染页面层面两个方面检验和修复UI设计质量问题。我们采用成熟的Material Design作为知识库来指导这一过程。具体而言，我们首先构建了一个全面的知识库，将Google的Material Design原则编码为底层组件知识库和高层系统设计知识库。之后，DesignRepair利用LLM提取关键组件，并使用Playwright工具进行精确的页面分析，将这些与已建立的知识库对齐。最后，我们通过检索增强生成（Retrieval-Augmented Generation）结合最先进的LLM（如GPT-4），通过战略性的分而治之方法全面优化和修复前端代码。我们广泛的评估验证了该方法的有效性和实用性，在设计指南遵循性、可访问性和用户体验指标方面均表现出显著提升。
引用
@article{arxiv.2411.01606,
title = {DesignRepair: Dual-Stream Design Guideline-Aware Frontend Repair with Large Language Models},
author = {Mingyue Yuan and Jieshan Chen and Zhenchang Xing and Aaron Quigley and Yuyu Luo and Tianqi Luo and Gelareh Mohammadi and Qinghua Lu and Liming Zhu},
journal= {arXiv preprint arXiv:2411.01606},
year = {2025}
}
备注
2025 IEEE/ACM 47th International Conference on Software Engineering (ICSE)