User-centred design is an iterative process that involves ideation, testing, and refinement to enhance usability, functionality, and overall user experience. However, there is still a need to code the final design. This transition from design to implementation is a time-consuming task. In this paper, we propose an approach and its supporting tool to generate a web application's front-end code from a prototype of its user interface. Our goal is to generate code that can be easily integrated into the overall application development. The results demonstrate that the proposed tool can achieve visual fidelity comparable to that of existing commercial plugins, while producing higher-quality code that better reflects the behaviour specified in the prototype.

 

@inproceedings{CastroC:2025,
 author = {J.P. Castro and J.C. Campos},
 title = {Automating Code Generation from User Interface Prototypes},
 booktitle = {2025 International Conference on Graphics and Interaction (ICGI)},
 publisher = {IEEE},
 pages = {1-8},
 year = {2025},
 doi = {10.1109/ICGI68463.2025.11302722},
 abstract = {User-centred design is an iterative process that involves ideation, testing, and refinement to enhance usability, functionality, and overall user experience. However, there is still a need to code the final design. This transition from design to implementation is a time-consuming task. In this paper, we propose an approach and its supporting tool to generate a web application's front-end code from a prototype of its user interface. Our goal is to generate code that can be easily integrated into the overall application development. The results demonstrate that the proposed tool can achieve visual fidelity comparable to that of existing commercial plugins, while producing higher-quality code that better reflects the behaviour specified in the prototype.}
}

Generated by mkBiblio 2.6.28