A Survey of techniques for Automatic Code Generation from User Interface Designs with Various Fidelities

Document Type : Original Article

Authors

1 Software Engineering, Faculty of Computers and Artificial Intelligence, Helwan University, Cairo, Egypt

2 Information Systems department. Faculty of Computers and Artificial Intelligence, Helwan University, Cairo, Egypt

Abstract

Graphical User Interface (GUI) visual nature makes it the most commonly used type of User Interface (UI), as it enables direct manipulation and interaction with software. Mockup-based design is a popular method for creating GUIs. This approach involves several steps, ultimately resulting in the development of a more detailed mockup and its subsequent implementation into code. Due to changing requirements, the design process often requires repeating these steps, which can be tedious and necessary modifications to the GUI code. Furthermore, converting a design into GUI code is a time-consuming task that can prevent developers from focusing on implementing the software's functionality and logic, making it costly. To address these challenges and allocate more time in building the application's functionality, automating the code generation process using sketches or GUI design images can be a viable solution. This comprehensive literature review presents an overview of various existing techniques and approaches that facilitate the automatic generation of source code from hand-drawn, high or low fidelity mockups and wireframes, utilizing diverse methods such as deep learning or computer vision.

Keywords

Main Subjects