# UI/UX Excellence Prover MCP for AI Agents AI Agent Connect

> UI/UX Excellence Prover is a tool that forces AI agents to generate high-fidelity, accessible, and logically structured interfaces. It moves past basic styling to enforce 2026-era standards like spatial hierarchy, spring-based motion, and WCAG 2.2 AAA compliance. It catches common AI mistakes like flat decoration, dead buttons, and dark patterns, ensuring your UI feels like a premium product rather than a generic prototype.

## Overview
- **Category:** productivity
- **Price:** Free
- **Endpoint:** https://edge.vinkius.com/vk_preview_FQpw75jfl2IVRYLjTKN4BE0xRDUemcd0LH04PmBp/ai-agent-connect
- **Tags:** uiux, design-system, microinteractions, accessibility, motion-design, spring-animations, structured-reasoning, agentic-pipeline

## Description

When you ask an agent to build a dashboard or a mobile app, it often gives you something that looks fine but feels "off." It might use generic shadows that don't communicate depth, or animations that just look cool without actually helping the user understand what's happening. The UI/UX Excellence Prover changes that by acting as a senior design reviewer for your agent. It checks every component against a strict set of rules, ensuring your buttons have all eight necessary states, from hover to loading and error, and that your spacing follows a consistent 8px grid. Instead of just guessing if a layout is good, you get a verdict on whether the motion uses proper spring physics or if the accessibility meets AAA standards. It’s designed to stop your agent from taking shortcuts, like using infinite scroll where pagination would be better, or including "dark patterns" that trick users. By connecting this Connector through the Vinkius catalog, you ensure that every interface your agent builds feels intentional, polished, and ready for production. You won't have to worry about accessibility theater where a site looks okay but fails a screen reader. You get a system that enforces visual rhythm, modular typography, and natural stopping points. It's the difference between a prototype that looks like a demo and a product that feels like a finished experience.

## Tools

### validate_uiux_excellence
Runs a full audit on an interface to check spatial hierarchy, motion, rhythm, and accessibility. It returns specific verdicts on design flaws like flat decoration or dark patterns.

## Prompt Examples

**Prompt:** 
```
I'm building a login screen. Make sure it feels high-end and is accessible.
```

**Response:** 
```
To ensure a high-end feel and AAA accessibility, I'll apply the following standards:

**Visual & Spatial Hierarchy**
*   **Elevation:** Level 2 for the main card, Level 4 for the primary action button.
*   **Material:** Liquid Glass effect on the modal overlay.

**Interactions**
*   **Button States:** 8 states (Idle, Hover, Focus, Active, Loading, Success, Error, Disabled).
*   **Motion:** Spring physics (stiffness 400, damping 20) for button presses.

**Accessibility**
*   **Contrast:** Minimum 4.5:1 for all text.
*   **Labels:** `aria-label` on all icon buttons.
*   **Focus:** `focus-visible:ring` on all interactive elements.
```

**Prompt:** 
```
Design a card for a flight booking. It needs to show price and a 'book now' button.
```

**Response:** 
```
Here is the design specification for the flight card:

| Element | Design Rule | Specification |
| :--- | :--- | :--- |
| **Card Container** | Spatial Hierarchy | Elevation 1 with subtle blur |
| **Price Text** | Visual Rhythm | Modular scale (H3 weight) |
| **Book Now Button** | Microinteraction | 8-state logic + Spring physics |
| **Layout** | Rhythm | 8px base grid with 24px macro spacing |
| **Accessibility** | WCAG 2.2 AAA | High contrast + focus rings |
```

**Prompt:** 
```
Check this layout for any tricks that might annoy users.
```

**Response:** 
```
I've audited the layout for dark patterns and user friction. Here are the findings:

*   **❌ Detected:** Pre-checked travel insurance box. **Fix:** Remove default check to ensure user agency.
*   **❌ Detected:** Infinite scroll on the results page. **Fix:** Replace with a 'Load More' button to provide natural stopping points.
*   **❌ Detected:** Hidden 'Cancel' link in light gray text. **Fix:** Give 'Cancel' equal visual weight to 'Confirm'.
```

## Capabilities

### Validate spatial hierarchy
It checks for elevation levels 0-5 and Liquid Glass materiality to ensure depth communicates purpose.

### Audit motion systems
It ensures every animation uses spring physics and motion tokens to explain, guide, or confirm actions.

### Verify microinteraction states
It forces interactive elements to include all 8 required states like hover, focus, loading, and success.

### Check visual rhythm
It aligns all components to a strict 8px base grid and a modular typographic scale.

### Test for AAA accessibility
It validates every component against WCAG 2.2 AAA standards, including contrast and keyboard navigation.

### Detect dark patterns
It catches and flags tricks like pre-checked boxes, hidden costs, and forced infinite scrolls.

## Use Cases

### Building a dashboard
A designer asks the agent to build a KPI dashboard. The Connector catches the use of arbitrary shadows and tells the agent to use elevation levels 0-5 for better spatial hierarchy.

### Mobile app navigation
A developer wants a sidebar. The Connector ensures the slide-in motion uses specific damping and stiffness values rather than a basic CSS transition.

### Accessibility audit
A product manager wants to ensure a new form is accessible. The Connector checks for aria-labels and contrast ratios to meet AAA standards.

### E-commerce checkout
An agent builds a checkout flow. The Connector flags a "sneak into basket" dark pattern where insurance is pre-checked and tells the agent to fix it.

## Benefits

- Stop "Flat Decoration" by using validate_uiux_excellence to enforce semantic elevation and Liquid Glass materiality on every card and surface.
- Get purposeful motion by ensuring your agent uses spring physics instead of linear easing for every transition and interaction.
- Eliminate "Dead Interactions" by forcing buttons to include all 8 required states like loading, success, and error for clear feedback.
- Fix "Rhythm Collapse" automatically by aligning all components to a strict 8px base grid and a modular typographic scale.
- Guarantee "Neuro-Inclusive A11y" by validating every component against WCAG 2.2 AAA standards, not just basic compliance.
- Prevent "Dark Patterns" by catching pre-checked boxes, hidden costs, and forced infinite scrolls before they hit production.

## How It Works

The bottom line is you get production-ready UI specifications instead of generic, lifeless prototypes.

1. Provide your agent with a description of a component or a full UI layout.
2. The Connector analyzes the design against six pillars of mastery.
3. You get a specific verdict and a list of required fixes for the UI.

## Frequently Asked Questions

**What is the UI/UX Excellence Prover MCP?**
It is a design audit tool that forces your AI agent to follow professional UI/UX standards, including spatial hierarchy, motion physics, and accessibility rules.

**How does this help with accessibility?**
It ensures your AI-generated components meet WCAG 2.2 AAA standards by checking for contrast, aria-labels, and keyboard navigation automatically.

**Can it fix my button interactions?**
Yes, it enforces an 8-state interaction model for every button, ensuring you have states for hover, focus, loading, success, and error.

**Does it support dark mode?**
It ensures dark mode is implemented via surface lightness variation rather than simple color inversion, maintaining proper spatial hierarchy.

**What is a dark pattern in this context?**
The Connector identifies and flags deceptive designs like pre-checked boxes, hidden costs, and forced infinite scrolls that trick users.

**How does it handle motion?**
It replaces generic CSS animations with spring physics and motion tokens that explain, guide, or confirm user actions at 60fps.

**Does it generate UI designs or code?**
No. The agent designs or codes the interface. The tool VALIDATES that it meets 2026-era standards across six pillars: spatial hierarchy, spring motion, 8-state microinteractions, 8px rhythm, WCAG 2.2 AAA neuro-inclusive accessibility, and Calm UI principles. It coaches — not generates.

**Why 8 states per interactive element?**
Because a button without feedback is a dead rectangle. The 8 states (idle, hover, active, focus-visible, disabled, loading, success, error) cover every moment of interaction. Each state uses spring physics for natural transitions. Without all 8, users cannot perceive affordance, progress, or outcome.

**What is Calm UI and why does it matter?**
Calm UI is the 2026 shift from 'time on page' to 'time well spent'. It rejects dark patterns: infinite scroll without end states, auto-play media, fake urgency, hidden opt-outs. It implements intentional friction for destructive actions, progressive disclosure, and natural stopping points. Respect > engagement.