For most of the history of software, every screen a user saw had been drawn by a designer first. Someone decided where the table went, which button was primary and what the empty state said. Generative UI design changes that. When the interface assembles itself around each AI answer, nobody draws the final screen. The designer designs the system that draws it.
This is the last post in my AI-Native, Explained series. I started with what AI-native design really means, then covered the autonomy dial and three AI UX patterns: wayfinders, governors and trust builders. Here I want to explain generative UI design in plain terms, what it asks of your design system, and how it changes the job.
What is generative UI design?
Generative UI is an interface that the AI composes at runtime to fit the answer it is giving. Instead of replying to every question with a paragraph, the system picks the right components from a design system, fills them with the answer’s data, and shows the result.
Generative UI design is the work of making that safe and useful: deciding which components exist, when each one should be used, and what the AI is never allowed to generate.
A simple example. Ask an assistant to compare three flights under a budget. A text-only reply describes each flight in a sentence, and you read it twice to compare three prices. A generative UI reply shows a small comparison card: three rows, the times, the prices, the best option marked and a Book button on each. Same data, very different effort for the user.
Figure 1 · One question, two answers
Text answer
The direct morning flight at 08:10 costs AED 1,480, while the evening flight at 21:40 is AED 1,620, and there is also a one-stop option at 11:25 for AED 1,190 that takes longer…
Generative UI answer
08:10 direct · AED 1,480 · Best
21:40 direct · AED 1,620
11:25, 1 stop · AED 1,190
Where you already see generative UI
Generative UI design is not a future idea. Tools such as v0 by Vercel turn a prompt into working interface code built from real components. Assistants increasingly answer with charts, tables, maps and cards instead of plain text. Developer frameworks now let an AI model return components rather than strings, so product teams can build this into their own apps.
The common thread is simple: the shape of the answer decides the shape of the interface. A forecast becomes a weather card. A comparison becomes a table. A how-to becomes a checklist the user can tick off.
What generative UI design asks of your design system
An AI cannot pick good components from a design system it cannot read. This is where generative UI design meets the first layer I described in the AI-native series: the machine-readable foundation. In practice it means three things.
1. Components with clear, typed inputs
Every component the AI may use needs a clear contract: what data it accepts, which fields are required, and what it does when data is missing. A comparison table that expects between two and five items and a label for each column is easy for an agent to fill correctly. A loosely defined “card” with twenty optional props is not.
2. Tokens, not hard-coded styles
Colour, spacing, type and radius should come from design tokens, so anything the AI composes still looks like your product. If the AI is allowed to choose raw hex values or pixel sizes, you lose consistency on the first day. The Design Tokens Community Group format is a good place to start if your tokens still live only in a design file.
3. Descriptions an agent can understand
Your documentation now has two readers: people and AI agents. Each component needs a short, plain description of what it is for and when not to use it. “Use for comparing two to five options on the same attributes. Do not use for a single item” is more useful to an agent than a page of visual guidelines.
Generative UI design means writing rules, not screens
Once components are readable, the most important design work moves into rules. These are the decisions a designer used to make screen by screen, written down so the system can make them every time.
- Selection rules: when comparing five or fewer options, use the comparison table; when there are more than three steps, use a checklist; when the answer is a single number with a trend, use a stat card.
- Constraints: never invent prices, dates or figures that are not in the data; never show more than one primary action; always label estimated values.
- Fallbacks: if the data does not fit any component cleanly, answer in text rather than forcing a broken layout.
- Accessibility rules: every generated chart has a text summary; every generated table has headers; colour is never the only signal.
Figure 2 · Generative UI design rules, written for the system
when comparing ≤ 5 options use ComparisonTable
when steps > 3 use Checklist
when one metric with a trend use StatCard
never invent prices, dates or numbers
fallback plain text when no component fits
Old patterns, rebuilt for AI
Generative UI design also changes some of the most familiar patterns in product design. Three are worth rethinking now.
Forms become smart fill. Instead of asking people to type what the system could already know, the AI pre-fills fields from context and asks the person to confirm. The form is still there, but the user’s job changes from entering data to checking it.
Error messages become soft refusals. When the AI cannot or should not do something, a blunt “Error” is the wrong answer. A good soft refusal explains what it cannot do, why, and what it can do instead, often with a suggestion chip to continue.
Submit buttons become recoverable agency. When the AI acts for the user, the final button is less about submitting and more about approving a plan, with a clear undo afterwards. This is the governor pattern from the previous post, applied to generated interfaces.
The designer’s new job in generative UI design
None of this removes the designer. It moves the designer’s effort to a higher level. In generative UI design, I see three shifts in the job.
- From screens to systems. The deliverable is a set of components, tokens and rules that produce good screens, not a fixed set of screens.
- From pixels to quality bars. Designers define what “good” means: limits, fallbacks, tone and the things the system must never do. Then they test generated output against those bars.
- From handoff to supervision. Instead of handing a file to developers once, designers review what the system generates over time, spot patterns that fail, and improve the rules.
This is the same idea that runs through the whole series. In an AI-native product, design moves upstream. You decide the foundation, the reasoning and the autonomy, and the interface follows.
A generative UI design checklist
Before you let an AI compose interfaces in your product, check these:
- Is every component the AI may use documented with typed inputs and a plain description?
- Do all generated layouts use design tokens, never raw values?
- Are there written rules for which component fits which kind of answer?
- Is there a text fallback when no component fits?
- Are there constraints on what the AI may never generate, such as invented numbers?
- Do generated charts and tables meet your accessibility rules?
- Does someone review generated output regularly and update the rules?
If you are not sure how close your product is, a short UX audit with an AI lens is a good starting point.
Wrapping up the series
Over eight episodes we went from a definition to a working toolkit: the removal test for AI-native products, three layers of AI-native design, the autonomy dial, wayfinders, governors, trust builders and now generative UI design. The common message is that AI does not make design less important. It makes the decisions behind the screens more important than the screens themselves.
Which answer in your product should become a component instead of a paragraph? I am discussing this in the final episodes of AI-Native, Explained on LinkedIn, and I would like to hear your examples. If you want help preparing your design system for AI, get in touch through chandrajith.in.
Frequently asked questions
What is generative UI design?
Generative UI design is designing the components, tokens and rules that let an AI build the right interface for each answer at runtime, instead of designing every screen in advance.
What is an example of generative UI?
Asking an assistant to compare three flights and getting a comparison card with prices and Book buttons, instead of a paragraph. Tools such as v0 by Vercel also turn prompts into interface code built from real components.
Does generative UI replace designers?
No. It moves the designer’s work from drawing screens to designing systems: components an AI can read, rules for choosing them, quality bars and regular review of what the system generates.
What does generative UI need from a design system?
Components with clear typed inputs, design tokens instead of hard-coded styles, plain descriptions an AI agent can understand, and written rules for when each component should and should not be used.
