一句话：提出 DesignRepair，用代码与渲染页面双流视角结合 Material Design 知识库和 RAG，让 LLM 修复前端 UI 设计质量问题
LLM 生成前端界面（如 Vercel v0）虽便捷，却带来可访问性、可用性等设计质量隐患，现有方法受限于关注面窄、泛化性差或数据依赖，也少有工作考察 LLM 生成 UI 的设计质量。本文提出 DesignRepair，从代码与渲染页面两个视角检查并修复 UI 设计质量问题，以 Google Material Design 为知识库，构建底层组件知识库与高层系统设计知识库；随后用 LLM 抽取关键组件、用 Playwright 精确分析页面并与知识库对齐，最后以检索增强生成结合 GPT-4 等先进模型，通过分而治之策略整体精修前端代码。大量评估验证了方法的有效性与实用性，在规范遵循度、可访问性和用户体验指标上均有显著提升。
The rise of Large Language Models (LLMs) has streamlined frontend interface creation through tools like Vercel's v0, yet surfaced challenges in design quality (e.g., accessibility, and usability). Current solutions, often limited by their focus, generalisability, or data dependency, fall short in addressing these complexities. Moreover, none of them examine the quality of LLM-generated UI design. In this work, we introduce DesignRepair, a novel dual-stream design guideline-aware system to examine and repair the UI design quality issues from both code aspect and rendered page aspect. We utilised the mature and popular Material Design as our knowledge base to guide this process. Specifically, we first constructed a comprehensive knowledge base encoding Google's Material Design principles into low-level component knowledge base and high-level system design knowledge base. After that, DesignRepair employs a LLM for the extraction of key components and utilizes the Playwright tool for precise page analysis, aligning these with the established knowledge bases. Finally, we integrate Retrieval-Augmented Generation with state-of-the-art LLMs like GPT-4 to holistically refine and repair frontend code through a strategic divide and conquer approach. Our extensive evaluations validated the efficacy and utility of our approach, demonstrating significant enhancements in adherence to design guidelines, accessibility, and user experience metrics.
DOI 原文 ·
@inproceedings{paperbot8755,
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},
booktitle = {ICSE},
year = {2025},
doi = {10.1109/icse55347.2025.00109}
}