GUI prototyping serves as one of the most valuable techniques for enhancing the elicitation of requirements and facilitating the visualization and refinement of customer needs. While GUI prototyping has a positive impact on the software development process, it simultaneously demands significant effort and resources. The emergence of Large Language Models (LLMs) with their impressive code generation capabilities offers a promising approach for automating GUI prototyping. Despite their potential, there is a gap between current LLM-based prototyping solutions and traditional user-based GUI prototyping approaches which provide visual representations of the GUI prototypes and direct editing functionality. In contrast, LLMs and related generative approaches merely produce text sequences or non-editable image output, which lacks both mentioned aspects and therefore impede supporting GUI prototyping. Moreover, minor changes requested by the user typically lead to an inefficient regeneration of the entire GUI prototype when using LLMs directly. In this work, we propose GUIDE, a novel LLM-driven GUI generation decomposition approach seamlessly integrated into the popular prototyping framework Figma. Our approach initially decomposes high-level GUI descriptions into fine-granular GUI requirements, which are subsequently translated into Material Design GUI prototypes, enabling higher controllability and more efficient adaption of changes. To efficiently conduct prompting-based generation of Material Design GUI prototypes, we propose a retrieval-augmented generation approach to integrate the component library. Our preliminary evaluation demonstrates the effectiveness of GUIDE in bridging the gap between LLM generation capabilities and traditional GUI prototyping workflows, offering a more effective and controlled user-based approach to LLM-driven GUI prototyping. Video: https://youtu.be/C9RbhMxqpTU

翻译：图形用户界面原型设计作为提升需求获取效率、促进客户需求可视化与细化的关键技术手段，在软件开发过程中具有重要价值。尽管GUI原型设计对软件开发流程产生积极影响，但其同时需要投入大量人力与资源。具备卓越代码生成能力的大语言模型的出现，为自动化GUI原型设计提供了前景广阔的技术路径。然而当前基于LLM的原型设计解决方案与传统用户导向的GUI原型设计方法之间存在显著差距：传统方法能够提供可视化原型呈现与直接编辑功能，而LLM及相关生成方法仅能产生文本序列或不可编辑的图像输出，缺乏上述两个关键维度，从而制约了其对GUI原型设计的有效支持。此外，当用户提出细微修改需求时，直接使用LLM通常会导致整个GUI原型低效地重新生成。本研究提出GUIDE——一种深度融合于流行原型设计框架Figma的新型LLM驱动GUI生成分解方法。该方法首先将高层级GUI描述分解为细粒度GUI需求，随后将其转化为遵循Material Design规范的GUI原型，从而实现更高的可控性与更高效的变更适配。为有效实现基于提示的Material Design GUI原型生成，我们提出检索增强生成机制以集成组件库。初步评估表明，GUIDE能有效弥合LLM生成能力与传统GUI原型设计流程之间的鸿沟，为LLM驱动的GUI原型设计提供了更高效且可控的用户导向解决方案。演示视频：https://youtu.be/C9RbhMxqpTU