<p>Mind wandering is a widespread issue in online learning environments, often triggered by the lack of real-time supervision and interactive engagement. To address this challenge, this study proposes a visual design-based intervention model that dynamically adjusts interface elements to help learners maintain attention and reduce cognitive distraction. The model integrates five core visual components—color, layout, typography, imagery, and animation—supported by real-time eye-tracking data to monitor attentional shifts and trigger adaptive interventions. A three-phase experimental design was implemented: (1) testing the impact of individual visual elements; (2) validating the intervention model’s real-time functionality; and (3) evaluating learning performance and user feedback. Quantitative measures, such as fixation duration and pupil diameter, were analyzed alongside qualitative data from questionnaires and interviews. Results showed that color-based interventions were most effective in capturing attention, layout and typography optimization reduced cognitive load, and animation repetition and speed adjustments aided in short-term attention recovery. Although statistical significance was not achieved in t-test results, box plot trends and participant feedback indicated an overall reduction in mind wandering. The model was well-received for its non-intrusive and adaptive approach, and participants offered constructive suggestions for improving intervention rhythm and personalization. This study contributes to both theory and practice by deepening the understanding of visual design’s role in attention regulation and providing a scalable, user-friendly intervention framework for online learning platforms. Future research will focus on enhancing model personalization, validating long-term effects, and expanding multimodal data sources to improve detection accuracy.</p>