What Is Generative UI? Five Things Designers Should Define Before Handing Screens to AI
What must you decide before an AI answer can become a card, form, or comparison view that leads to the next action? Five design questions for a first Generative UI.
Ask an AI to “make me a two-night, three-day travel itinerary,” and it can produce several convincing screens in seconds. The trouble starts the moment a user changes one date. The price cards disappear, filters shift, and the booking button means something different on every screen.
If that scene feels familiar, the answer is not a longer prompt. The point of Generative UI is not how quickly AI can make screens. It is designing boundaries so the product continues to behave like a product even as the interface changes.
This article explains what Generative UI is, where it departs from chatbot UI, and the five questions a designer new to AI should answer before building a first prototype. By the end, you should have a brief that can account for editing, undo, and accessibility—not just a pretty mock-up.
Generative UI turns an answer into the next action
Generative UI does not mean an AI producing arbitrary HTML. It is closer to assembling validated components—cards, forms, comparison tables, and charts—when they are needed, based on user intent, the current context, and data returned by tools.
Conventional chatbots usually answer different questions through the same text field and speech bubbles. A travel-comparison task, by contrast, can present a date picker and budget slider first; choosing among several options can begin with comparison cards and filters. It turns three rounds of questions in prose into one interaction on screen.
Vercel has published a Generative UI flow that connects tool-call results to React components, while Flutter introduces GenUI, which composes interfaces within an app-provided widget catalog and data model. It is more accurate to say that AI selects the interaction needed now and the product renders it safely than that AI “draws” a screen. Vercel AI SDK · Flutter GenUI
1. Is the user trying to finish one task right now?
Define a first GenUI too broadly—as an “AI travel app,” for example—and it quickly becomes a demo. Instead, choose one moment where the user asks follow-up questions three or more times: “Compare three itineraries within my budget and choose one,” for instance.
When the goal is clear, the interface changes too. Instead of a long recommendation, lead with cards that compare price, travel time, and rainy-day alternatives, plus controls that let the user change one variable at a time. The first Generative UI question is not “What should we generate?” but “What decision can the user make faster?”
2. How far may AI go in assembling the building blocks?
Give AI unrestricted code-generation authority and both the brand and the quality will wobble. The practical approach is to let it assemble only within the Lego box a designer has made.
Limit buttons, inputs, option cards, tables, alerts, and loading states to approved components. Lock down color, spacing, copy, and error treatment through tokens and rules. Google’s A2UI likewise centers declarative data and a trusted component catalog rather than executable HTML or JavaScript. This reduces both design inconsistency and UI-injection risk. Google A2UI
3. Where on the screen do evidence and uncertainty appear?
A recommended result is not trustworthy just because it looks polished. Volatile data such as prices, inventory, and policies need a source and a time checked; low-confidence suggestions need a visible “needs verification” state.
Here the designer is designing the basis for a decision, not just the shape of a card. A customer-interview summarizer should let someone open the original quotations and sample size underneath its conclusion card. Trust begins when users can do more than read the result: they can see why the recommendation appeared and correct it.
4. Are edit, retry, and undo right beside the result?
A generated result is a hypothesis, not an answer. A single “generate again” control is not enough. Users need to see which conditions they changed, edit parts of the result directly, and return to an earlier state.
For actions that are hard to reverse—payment, sharing, or deletion—an AI suggestion still needs a confirmation step. Apple’s generative-AI design guidance also recommends clearly signaling AI use and letting people edit, retry, and undo results. Good GenUI makes a user’s control more conspicuous than automation speed. Apple HIG
5. Does the product still work when AI fails?
Model latency, missing data, and ambiguous requests are not edge cases; they are the default scenario. While loading, show real progress. When information is insufficient, tell the user what to supply next. Leave a fixed interface that still enables the core task without the generative feature.
Accessibility follows the same principle. Do not inspect it only after generation; put labels, keyboard operation, focus order, contrast, and error-message policy into the component contract. You may generate many possible screens, but the blocks and behavior rules should remain few and testable.
Five lines are enough for a first prototype
You do not need to generate every screen from the start. Begin with this one-page brief.
- User goal: the one decision the user is trying to complete now
- Allowed components: the cards, inputs, tables, and charts AI may assemble
- Required evidence: data sources, timestamps, and uncertainty that must be shown
- User control: edit, retry, undo, and confirmation for consequential actions
- Failure path: the fixed UI for no data, latency, or error
Generative UI is not a technology that pushes designers out of screen-making. If anything, the more fluid the screen becomes, the more precisely you must define the next action this person needs now. Do not begin by making a chatbot a little flashier. Turn one repeated question into a card, form, or comparison view. That small shift is the most realistic place to start.