What is Generative UI?
UI (User Interface) = the buttons, menus, and screens you see in an app.
Generative UI = instead of one fixed layout that everyone sees, the app builds its own layout based on what YOU are trying to do right now.
Simple analogy: a restaurant menu is static UI. A personal chef who asks what you feel like and cooks exactly that is Generative UI.
The core shift: In the old way, designers controlled the layout. In Generative UI, designers control the system that builds the layout. The outputs are no longer fully predictable, and that is both the power and the challenge.
Why it matters now: AI models are smart enough to understand intent. Design systems are mature enough to assemble components. And users now expect apps to adapt to them, not the other way around.
Pattern 1: Intent-Driven Layout Assembly
The app rearranges itself around your goal.
What it is: The app reads what you are trying to do and assembles the tools and info that matter most for that goal, dynamically, not from a fixed template.
Real example: Notion AI. Say "I need to write a proposal", and it surfaces a template picker, related docs, and a writing assistant, not the default home screen.
Design tip: Map your top 5–10 user goals. For each goal, define which components belong on screen. Build rules, not static layouts.
Pattern 2: Contextual Component Injection
Tools appear when you need them. They disappear when you don't.
What it is: Components pop into the interface the moment they become relevant, then vanish when the context changes. They didn't exist on screen before.
Real example: Figma's sidebar. It shows typography controls when you select text, fill controls when you select a shape, automatically.
Design tip: Map every user flow and mark the exact moment each tool is needed. Design smooth entry/exit animations so things don't feel jumpy.
Pattern 3: Adaptive Navigation
Your menu reorders itself based on how you actually use the app.
What it is: Navigation adapts to your role, your workflow, and your habits. The things you use most float to the top automatically.
Real example: Linear's sidebar reorders projects based on recent activity; your most active projects appear first.
Design tip: Instrument your navigation data first. You can't adapt what you haven't measured.
Pattern 4: Smart Empty States
What it is: AI-powered empty screens that generate personalised starting points based on who you are and what you typically need.
Real example: Canva for new users generates design template suggestions based on your stated profession, not a blank white canvas.
Design tip: Design 3–5 starting suggestions, not just one. Give users a sense of the space.
Pattern 5: Real-Time Layout Optimisation
The app watches how you work and quietly adjusts.
What it is: The interface observes where your attention goes, what you click, and what you ignore, and makes micro-adjustments to bring the most useful elements closer.
Real example: Superhuman's toolbar reorders formatting tools based on which ones you use most.
Design tip: Never change something the user is actively interacting with. Adjust during pauses, not mid-action.
Pattern 6: AI-Augmented Forms
Only the fields you need appear. The rest stay hidden.
What it is: Instead of showing every possible field, the app shows only the ones relevant to your specific situation, and pre-fills what it can.
Real example: Stripe's payment form. Business fields only appear for business customers. Personal fields only appear for individuals.
Design tip: Always show users what was pre-filled and make it easy to edit. Surprise pre-fills feel sneaky.
Pattern 7: Semantic Search with Visual Results
Search that gives you answers, not just a list of links.
What it is: AI-powered search that understands what you mean, and returns a structured answer with the information and actions you actually need.
Real example: Notion AI search for "Q3 marketing budget" returns the document, a summary of key numbers, the last editor, and an Open button, not just a link.
Design tip: Classify search queries by type: navigation (find a thing), research (learn about it), action (do something). Each type deserves a different result layout.
Pattern 8: Predictive Interface Scaffolding
Your next step is ready before you take it.
What it is: Based on what you just did, the app pre-loads and positions the tools and screens most likely to be needed next, so your next action feels instant.
Real example: Linear pre-positions the "create issue" panel after you close a completed issue, because 68% of users do exactly that within 30 seconds.
Design tip: Analyse your user flows to find high-probability next steps. Build graceful fallbacks for when the prediction is wrong.
Are You Ready for Generative UI? Self-Check
5 yes/no questions:
- Do you have a modular component library?
- Can you name your users' top 5 goals?
- Do you track which navigation items each user actually uses?
- Can your backend serve personalised data in under 200ms?
- Do your components work in isolation, not depending on each other?
If you answered No to 3 or more: start with one pattern and build from there.
The Golden Rule
Get the PDFGenerative UI should make users feel like the app understands them, not like it is being clever at their expense. Every generated layout should be more useful than a static one would have been. If it isn't, the pattern is wrong for that moment.