Skip to content
Shortcut

Menu

Show guidance for
esc

Show guidance for

Generative UI

Designing interfaces that are composed dynamically around user intent.

Craft guidance

This is a fast-moving area. The terms below have no agreed definitions; they are working concepts. What vendors say they have built is cited to their own pages.

What is changing

Traditional software

  1. Designer creates a fixed interface

  2. User learns how to navigate it

Generated interfaces

  1. User expresses intent

  2. System determines an appropriate interface

  3. Interface is composed from components

Designer takeawayInterfaces may increasingly be generated around what someone is trying to do, instead of predefined as a fixed set of screens. That makes component systems, interaction rules, content hierarchy and design constraints matter more, because a model needs structured design context to produce something coherent.

Four working concepts

Conversational UI
The person communicates mainly through conversation.
For example. A chat assistant that answers in text.
Generative UI
The system creates or composes an interface for the request.
For example. A comparison question answered with a side-by-side view built for it.
Adaptive UI
An existing interface changes with context.
For example. A dashboard that reorders itself for a role or a device.
Agentic UI
The interface supports or represents an AI system that can take actions.
For example. A panel showing what an agent is doing, with a way to stop it.

One product can be several of these at once. They are useful for asking which problem you are designing for, not for classifying products.

What has shipped

OpenAIAINew capabilityNewRelevant to adaptive interfaces, generative ui, all devices

GPT-6 brings Intelligent UI to ChatGPT

What changed
OpenAI says GPT-6 in ChatGPT can answer with interactive interfaces: text, graphics, buttons, forms and charts, chosen to fit the question. A comparison may appear side by side; a simple question still gets text. OpenAI says a library of native components and a compiler render the interface as the model generates it.
Why it matters
The interface is composed around what the person asked, not laid out in advance. OpenAI says a component library gives each response a familiar foundation while the model decides how the pieces fit. That is a design system keeping generated screens coherent.
What to do
Nothing in your product has to change. Ask ChatGPT the same comparison question twice and note what stays the same between the two interfaces. Then ask what your own component library would need to tell a model to do this well.
How to use it, and what to watch for

Use it for

  • Seeing generated interfaces in a shipping product
  • Studying which elements stay fixed across responses
  • Quick one-off tools, such as a calculator or bill splitter

Be careful with

  • Assuming a generated interface is accessible
  • Treating it as a pattern library: it changes per request
  • Reading more into it than OpenAI states; it says the model's design judgment still needs work

Try this workflowAsk for a comparison, an explanation and a calculator. For each, list the components used, how state is shown, and what you could not predict before it rendered.

Questions for designers

  • What happens when the interface changes every time?
  • How does the user build familiarity?
  • Which elements should remain predictable?
  • How should accessibility be preserved?
  • How does a design system constrain generated UI?
  • Who decides hierarchy: designer or model?
  • How should generated interfaces communicate state?
  • How do you test an interface that is not always identical?

Generative UIDesign System LibraryDesign TokensAccessibilityAI-look signals

Source

A design system for AI experiences already exists

Atlassian publishes Rovo UI, which it calls the AI voice of its design language. Two of its eight interaction guidelines speak directly to generated interfaces: content and form are dynamic, and make it easy to “pop the hood” so people can see system state and how an outcome was produced.

Atlassian Design System profile

Official source

Why the design system matters more

  1. Design system

  2. Tokens

  3. Components

  4. Behaviour

  5. Documentation

  6. AI context

  7. Generated or reviewed UI

A model composes from what it has been given. OpenAI describes a library of components that gives each response a familiar foundation. Uber’s agent writes accurate specs because it reads real token names and variants. Atlassian found that without structured guidance, agents produced outdated patterns and invented components.

The common thread: the design system is becoming the instructions a model follows, as well as the reference people read. Where the system is vague, the output is generic.

Read the three case studiesDesign Tokens cheat sheetAI-look signals

What designers now have to decide

Predictability
Decide what must never move: navigation, primary actions, destructive actions, where errors appear.
Components
A model composes from what it is given. Gaps in the library become invented components.
Tokens
Named, purpose-based tokens are instructions a model can follow. Raw values are not.
Accessibility
Build it into the components, because nobody reviews each generated screen.
State and trust
People need to see what the system is doing, and how an outcome was produced.
User control
Offer a way back to plain text, and a way to undo what a generated control did.
Testing
You cannot review every output. Test the components, the rules and a sample of results.

Accessibility cheat sheet