AI Prototyper: A Figma Plugin for Decomposition-Based GUI Prototyping with LLMs

2026-07-16

AI Summary

This work addresses the time-intensive nature of GUI prototyping and its reliance on specialized expertise, particularly the limited support existing tools offer for efficiently evolving non-code artifacts during iterative requirement changes. The authors propose an automated approach leveraging Retrieval-Augmented Generation (RAG) and human-AI collaboration: it first parses user-provided natural language inputs—supporting Chinese, English, and Thai—to extract GUI design features, then retrieves relevant components from a custom library of 32 base elements to generate editable Figma prototypes with automatic layout. Built on the Gemini 2.5 Flash large language model and a new Node.js/Express architecture, the system incorporates a user-adjustable feature refinement step prior to prototype generation. Preliminary evaluation shows that users produce more prototypes within a fixed timeframe, and expert assessments across nine quality dimensions significantly favor the generated outputs over manually crafted ones.

Abstract

Graphical user interface (GUI) prototyping remains a time-consuming activity that demands both design expertise and considerable manual effort. As GUI prototypes are non-code artifacts that evolve alongside requirements throughout the development cycle, automating their generation is directly relevant to software maintenance and evolution. We present AI Prototyper, an open-source Figma plugin that automates GUI prototyping through a decomposition and retrieval-augmented generation (RAG) pipeline. Given a natural-language description of a desired screen, such as a login page or a product detail card, the plugin decomposes the request into discrete GUI features, retrieves matching components from a custom 32-primitive library, and renders each component as a fully editable Figma layer with auto-layout. The pipeline uses Gemini 2.5 Flash as its LLM back-end and a Node.js/Express service. Unlike existing decomposition-based tools, AI Prototyper introduces a human-in-the-loop editing step that lets users review, modify, or extend the generated feature list before rendering, uses a different technology stack and LLM family, and supports multilingual input, producing correctly labelled interfaces in Thai, English, and Mandarin Chinese. In a preliminary evaluation, participants using AI Prototyper completed more prototypes in a fixed time window than those working manually, and expert practitioners rated the AI-generated prototypes higher across nine quality dimensions. A demonstration video is available at https://youtu.be/pRoFAH7MQaE. The source code and component library are available at https://github.com/tongsalangsingha/AI-prototyper-tool

Problem

• GUI prototyping
• automation
• software maintenance
• human-in-the-loop
• multilingual interface

Innovation

• decomposition-based prototyping
• retrieval-augmented generation (RAG)
• human-in-the-loop editing
• multilingual GUI generation
• Figma plugin