Hidayat, Fajrul
Unknown Affiliation

Published : 1 Documents Claim Missing Document
Claim Missing Document
Check
Articles

Found 1 Documents
Search

Automating Mobile WEB App Prototyping from Wireframe Sketches Hidayat, Fajrul; Herumurti, Darlis
Dinasti International Journal of Education Management And Social Science Vol. 7 No. 1 (2025): Dinasti International Journal of Education Management and Social Science (Octob
Publisher : Dinasti Publisher

Show Abstract | Download Original | Original Source | Check in Google Scholar | DOI: 10.38035/dijemss.v7i1.5408

Abstract

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.