Your AI agent’s UI is mediocre—and here’s how to fix it
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 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.
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.
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.
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.
Finally, we need to talk about ‘Dark Patterns.’ AI agents are often trained on data that includes everything from well-designed Apple interfaces to highly manipulative e-commerce sites full of fake urgency and infinite scrolling. Without guardrails, an agent might inadvertently build a ‘roach motel’—an interface designed to trick users into actions they didn’t intend.
The Prover promotes the concept of ‘Calm UI.’ It looks for intentional friction in destructive actions (like deleting data) and flags dark patterns like pre-checked boxes or hidden opt-outs. The goal is a design that respects user agency—where information is disclosed progressively, not all at once to overwhelm the user.
You don’t need to rewrite your entire agentic pipeline. If you are using Cursor, Claude Desktop, or any MCP-capable client, you just connect the server via Vinkius. You grab a token, paste it in, and suddenly your coding assistant has a ‘design critic’ sitting next to it.
You aren’t asking the AI to ‘be more creative.’ You are giving it an automated validator that asserts: “This component must have 8 states,” “This motion must use spring physics,” and “This spacing must follow an 8px grid.”
It turns design from a subjective, high-level conversation into a verifiable engineering requirement. If you’re tired of shipping interfaces that look like generic AI templates, start treating your UI/UX as a set of testable assertions.
You can find the server setup here: https://vinkius.com/mcp/uiux-excellence-prover
MCPs are the music of AI Agents. We built the catalog. Discover Vinkius MCP Catalog.
Fuente: Artículo original