Automating Mobile WEB App Prototyping from Wireframe Sketches

Abstrak

Manual development of mobile web app prototypes is time-consuming, costly, and error-prone, particularly in arranging UI elements. This study aims to develop an automated system based on Deep Learning that can directly convert wireframe sketches into HTML and Bootstrap CSS code. The system employs the YOLOv11 algorithm to detect UI elements in the wireframe sketches, which are then translated into a hierarchical structure using a Domain-Specific Language (DSL) as an intermediary between detection results and code generation. The UI elements arranged within the DSL structure are subsequently converted into HTML and Bootstrap CSS code using a template-based approach with the Bootstrap 5 framework, ensuring layout consistency with the original design. The results show that the system is capable of generating prototypes with an element conversion success rate exceeding 85%. Evaluations conducted with several respondents indicate that the system can accelerate the early design process of web applications, reduce manual errors, and optimize resource usage in software development. These findings highlight the potential of integrating DSL and Deep Learning to automate the generation of accurate and efficient web UI prototypes from wireframe sketches.