Repairing Responsive Layout Failures Using Retrieval Augmented Generation

TL;DR

This work tackles Responsive Layout Failures (RLFs) in responsive web design by introducing ReDeFix, a Retrieval-Augmented Generation framework that uses Stack Overflow as a knowledge base to guide LLM-driven CSS repairs. The system localizes RLFs with LocaliCSS, retrieves context-rich developer solutions from SO via a BM25–semantic ensemble, and generates iterative CSS patches with a structured prompt and CoT reasoning, validating patches before acceptance. Empirical results show an 88% repair accuracy across 43 RLFs on 13 webpages, with engineers preferring repaired layouts 85% of the time and finding 70% aesthetically pleasing. The work demonstrates that coupling LLM-based repair with community knowledge improves repair quality while preserving layout design, suggesting practical value for automated web layout maintenance and avenues for refining aesthetics-aware repairs.

Abstract

Responsive websites frequently experience distorted layouts at specific screen sizes, called Responsive Layout Failures (RLFs). Manually repairing these RLFs involves tedious trial-and-error adjustments of HTML elements and CSS properties. In this study, an automated repair approach, leveraging LLM combined with domain-specific knowledge is proposed. The approach is named ReDeFix, a Retrieval-Augmented Generation (RAG)-based solution that utilizes Stack Overflow (SO) discussions to guide LLM on CSS repairs. By augmenting relevant SO knowledge with RLF-specific contexts, ReDeFix creates a prompt that is sent to the LLM to generate CSS patches. Evaluation demonstrates that our approach achieves an 88\% accuracy in repairing RLFs. Furthermore, a study from software engineers reveals that generated repairs produce visually correct layouts while maintaining aesthetics.

Figures (2)

• Figure 1: Overview of ReDeFix
• Figure 2: Example Prompt