Why AI-Generated UI Still Fails at UX
AI can generate polished interfaces in seconds. But interaction design still requires intent. Here's why modals expose the UX gap in AI-built apps.
AI has dramatically lowered the cost of shipping software. You can generate a polished interface in a weekend. The spacing feels right. The typography looks modern. Components are consistent. Vibe coding works.
But usability has not improved at the same pace as production.
AI is excellent at generating UI structure. It is not yet excellent at designing interaction. And nowhere is that gap more visible than in modals.
The AI UX Illusion
There's a well-documented UX principle called the Aesthetic–Usability Effect: when something looks beautiful, users assume it's easier to use.
AI-generated interfaces benefit heavily from this bias. They look production-ready almost instantly. That sets expectations high.
When the interaction underneath doesn't match that expectation, frustration compounds. Users don't think the interface is ugly. They think it's awkward. Or harder than it should be.
This is the hidden UX problem in many AI-built apps.
Where AI UX Patterns Break: The Modal
Recently, I reviewed a new AI-built SaaS app. The UI was clean and modern. It felt well assembled.
Then I clicked into a prompt.
A modal opened. Inside it was everything you would expect: a large preview, supporting text, metadata, secondary actions — and somewhere at the bottom, the primary action.
To complete the main task — copying the prompt — I had to scroll.
This is one of the most common UX pattern failures in AI-generated apps.
Scrollable Modals Signal Structural Problems
A modal is meant to focus attention and drive a clear decision. It temporarily interrupts the interface to simplify a moment.
When a modal scrolls, one of two things is usually true: either too much content has been forced into it, or the wrong UI pattern was chosen.
AI tends to choose a modal component first, stack content vertically, place the primary action at the bottom, and preserve default layout behavior. Technically, it works. But it isn't designed around intent.
Modals are constrained containers. They require prioritization. When hierarchy hasn't been deliberately designed, that lack of prioritization becomes obvious.
The Real Problem: Component-First Design
This isn't just about modals. It's about how AI constructs interfaces.
AI asks:
What usually goes inside this component?
Design asks:
What is the single most important action here?
That difference matters.
In the example above, the purpose of the modal was simple: copy the prompt. But the primary action was buried below the fold. That introduced cognitive friction (scanning for what matters), physical friction (scrolling in a confined space), and emotional friction ("Why is this harder than it looks?").
The UI was polished. The interaction hierarchy was not.
AI Is Strong at Structure. Weak at Intent.
AI excels at recognizing UI patterns, reproducing component libraries, and generating visually balanced layouts. It struggles with behavioral hierarchy, action prioritization, and contextual tradeoffs.
It assembles components convincingly. It does not inherently reason about user intent.
Modals expose this gap because they are small, focused environments. There is nowhere to hide poor prioritization inside a box designed for clarity.
This AI UX Problem Extends Beyond Modals
Modals are simply the cleanest example.
The same structural weakness appears in overloaded dashboards, tab systems that bury primary actions, dropdown-heavy interfaces, onboarding flows without behavioral sequencing, and empty states that fail to drive momentum.
The common thread is generated structure without deliberate hierarchy.
This is the same systemic shift discussed in Production Changed. UX Must Change Too. AI accelerates production. It does not accelerate judgment.
Modal Design Principles AI Rarely Applies
If you're building AI-generated apps, these principles matter:
A modal should rarely scroll.
If it does, consider a full page, side panel, or restructuring the content entirely. Modals are for focused actions, not content containers.
The primary action must be immediately visible.
No scrolling. No hunting. If the purpose is "Copy," that action should be dominant — in the header, fixed in view, or structurally elevated.
Layout expresses priority.
AI defaults to stacking. Design restructures. Use two-column layouts, fixed action bars, reduced visual noise, and intentional information tiers. Hierarchy is not spacing. Hierarchy is intent made visible.
The Hidden UX Debt in AI-Built Apps
AI makes it easy to ship interfaces that look complete. But usability friction often hides inside constrained containers, nested components, and secondary states.
Modals make that debt undeniable.
They reveal whether the interface was designed around user intent or generated around component defaults.
Before You Ship an AI-Generated Interface
Open every modal and ask:
- What is the single primary action?
- Can the user complete it instantly?
- Is anything unnecessary?
- Should this even be a modal?
If those answers are unclear, the UI may be polished — but the UX is unfinished.
Final Thought
AI can generate UI in seconds. It still cannot design interaction with judgment.
The risk isn't ugly software. The risk is beautiful software that hides friction. And friction compounds quickly — especially in small containers like modals.
If you're building AI-powered SaaS products, don't just review how it looks.
Review how it behaves.
That's where UX still lives.