AutoStructGUI: Bridging Design and Implementation of GUI through Structured Layout Generation

Existing automatic graphical user interface (GUI) generation frameworks primarily focus on either GUI prototype generation or GUI code conversion, failing to achieve end-to-end functional GUI generation. This paper proposes a framework named AutoStructGUI that bridges the gap between layout prototype design and functional code implementation in the development of a GUI. The framework adopts trees as the representation of GUI layouts, exploits a Transformer architecture, and uses two schemes for the serialization of GUI layout trees, enabling both global and local generation of structured GUI layouts. This framework was developed as an Android Studio plug-in to facilitate GUI layout design and functional code generation. A user study was conducted to investigate the proposed framework against the conventional GUI creation procedure. The results confirmed that the proposed framework can significantly improve development efficiency, enhance user experience, and increase GUI layout quality. The code of the framework will be released upon the acceptance of the paper.