GUIS2Code: A Computer Vision Tool to Generate Code Automatically from Graphical User Interface Sketches

It is a typical task for front-end developers to repetitively transform the graphical user interface model provided by the designer into code. Automatically converting the design draft provided by the designer into code can simplify the task of the front-end engineer and avoid a lot of simple and repetitive work. In this paper, we propose GUIS2Code using deep neural network, which is trained on the datasets of the design drafts to detect the UI elements of the input sketches and generate corresponding codes through the UI parser. Our method can generate code for three different platforms (i.e., iOS, Android, and Web). Our experimental results illustrates that GUIS2Code achieves an average GUI-component classification accuracy of 95.04% and generates code that can restore the target sketches more accurately while exhibiting reasonable code structure.