Generating complete user interface code using large-scale language models (LLMs) is difficult. User interfaces are complex, and their implementation often consists of multiple interrelated files that specify the content of each screen, the navigation flow between screens, and the data model used throughout the application. It’s difficult to create a single prompt for LLM that contains enough detail to generate a complete user interface, but even then you often end up with one large, hard-to-understand file that contains all the screens that are generated. This paper introduces Athena, a prototype application generation environment. This environment shows how the use of shared intermediate representations such as app storyboards, data models, and GUI skeletons can help developers iteratively interact with LLM to create complete user interfaces. These intermediate representations also scaffold LLM’s code generation process, producing code that is organized and structured into multiple files while limiting errors. We evaluated Athena in a user study and found that 75% of participants preferred our prototype over a common chatbot-style baseline for app prototyping.
