Your AI agent's UI is mediocre-and here's how to fix it

If you’ve been building with Claude or Cursor for the last year, you’ve noticed a pattern. The code comes out clean. The logic is sound. But the interfaces? They look like 2015-era Bootstrap clones. Everything has the same rounded corners, arbitrary shadows that don’t communicate depth, and linear animations that feel robotic rather than organic.

AI agents are incredible at generating functional HTML and CSS, but they lack a fundamental concept: design intent. They can write the code to make a button blue, but they struggle to understand why that button needs a specific spring-based scale effect when pressed, or how its elevation should change relative to the background surface. They produce “zombie” interfaces-functional, but lifeless and fundamentally broken for high-end production use. This isn’t just an aesthetic problem; it’s a technical one involving accessibility, usability, and user agency.

I recently started using something called the UI/UX Excellence Prover via Vinkius to close this gap. It doesn’t generate code-that’s not its job. Instead, it acts as a design unit test for your agentic pipeline. You aren’t asking it to “make it look better”; you are asking it to validate that the generated component meets 2026-era standards across six specific pillars.

The Death of Flat Decoration

The first thing I noticed in most AI-generated layouts is what I call “flat decoration.” Agents love using box-shadow as an ornament. They’ll add a shadow to every card just because it looks “modern.” But shadows aren’t decorations; they are spatial communication tools.

A properly engineered interface uses elevation (levels 0 through 5) to communicate hierarchy. Level 0 is your base surface. Level 3 might be a modal overlay that physically sits closer to the user in Z-space. If everything has a shadow, nothing has importance.

When you run an agent’s output through the Prover (UI/UX Excellence Prover), it flags these arbitrary shadows. It forces the agent to define elevation semantically-using tokens that represent actual depth, much like how we use semantic HTML for structure.

Motion: From Linear Easing to Spring Physics

Most LLM outputs rely heavily on transition: ease-in-out. It’s predictable, it’s easy to write, and it feels dead. In a high-performance UI, motion should exist only to explain, guide, or confirm an action.

A page transition shouldn’t just fade; it should move in the direction of navigation. A button click shouldn’t just change color; it should have a subtle spring-based scale down (stiffness and damping) that mimics physical contact.

The Prover checks for this specifically. It looks for motion tokens-predefined durations and physics properties-rather than random millisecond values. If an animation doesn’t serve a communicative purpose, the tool marks it as gratuitous noise.

The 8-State Microinteraction Manifesto

This is where most developers (and agents) fail hardest. We tend to think in two states: default and clicked. But real production interfaces require much more granularity. A button that only has a “hover” state is an incomplete component.

A robust, professional interaction model requires at least eight distinct states:

• Idle: The baseline.
• Hover: Subtle visual feedback for pointer proximity.
• Active/Pressed: Physical confirmation of the click (the spring scale).
• Focus-visible: Essential for keyboard navigation (don’t skip this; it’s not “extra”).
• Disabled: Clear indication that the action is unavailable.
• Loading: The user needs to know the request is in flight (spinners or skeleton states).
• Success: Visual confirmation that the operation completed without error.
• Error: Immediate, non-intrusive feedback when something breaks.

If your agent generates a button that lacks a loading state or an error shake, it’s generating technical debt. The Prover identifies these missing states in the component logic and forces the agent to implement them using proper CSS/state management.

Moving Beyond Accessibility Theater

We’ve all seen “accessibility theater”-websites that boast WCAG 2.2 AA compliance but are completely unusable for someone relying on a screen reader or keyboard navigation because they lack aria-label on icon buttons or have broken focus rings. True accessibility is an engineering constraint, not a checklist item at the end of a sprint.

The Prover enforces WCAG 2.2 AAA standards by checking for high-contrast ratios (at least 4.5:1), proper focus-visible implementation, and neuro-inclusive features like prefers-reduced-motion fallbacks. It ensures that if an agent creates a complex interaction, it also provides the necessary semantic markers so the interface remains navigable under various user constraints.

The Principle of Calm UI

Finally, we need to talk about “Dark Patterns.” AI agents are often trained on data that includes everything from well