Repairing Responsive Layout Failures Using Retrieval Augmented Generation

2025-11-01

AI Summary

Responsive web pages frequently exhibit layout failures (RLFs) at specific breakpoints, and manual CSS debugging is inefficient and experience-dependent. This paper proposes an automated CSS repair method based on retrieval-augmented generation (RAG): first, parsing HTML/CSS to localize faulty elements; second, retrieving relevant Stack Overflow Q&A as domain-specific context; and third, prompting a large language model (LLM) to generate semantically sound and visually faithful CSS patches. Our key contribution lies in integrating authentic developer community knowledge into the RAG framework, enabling synergistic optimization between domain expertise and LLM capabilities. Experiments demonstrate an 88% repair accuracy rate. Engineer evaluations confirm that the generated patches effectively restore layout correctness while preserving visual aesthetics, significantly improving responsive debugging efficiency.

Technology Category

• Planning, Routing, and Scheduling: Replanning and Plan Repair
• Computer Vision: Adversarial Attacks & Robustness
• Natural Language Processing: Code Generation / Program Synthesis from Natural Language

Application Category

• Search and Retrieval-Augmented AI: Retrieval-Augmented Generation (RAG) and multi-modal RAG
• Responsible Web: Human-perceived consequences of algorithmic deployment on the web
• Web Mining and Content Analysis: Robustness and generalizability of Web mining methods

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.

Problem

• Automating repair of distorted responsive website layouts
• Reducing manual trial-and-error CSS adjustments
• Generating accurate CSS patches using retrieved knowledge

Innovation

• Retrieval-Augmented Generation for CSS repairs
• Leveraging Stack Overflow discussions for guidance
• Augmenting domain knowledge to generate CSS patches