# Design Prover MCP for AI Agents AI Agent Connect

> Design Prover is an Connector that forces your AI agent to move beyond generic frontend templates. It requires the agent to justify specific design decisions like visual hierarchy, layout asymmetry, and typography ratios before it writes any code. Stop settling for the same 3-card grid and start building unique, intentional user interfaces.

## Overview
- **Category:** productivity
- **Price:** Free
- **Endpoint:** https://edge.vinkius.com/vk_preview_PeQ4D4927Jeny0kAawnz5h0U5bgjxG8rMJspLTyL/ai-agent-connect
- **Tags:** frontend-design, ui-ux, visual-hierarchy, typography, structured-reasoning, decision-pivots, css-architecture

## Description

Design Prover is an Connector that stops your AI agent from generating the same generic landing pages every single time. Most agents default to a safe skeleton: a hero section, three cards, and a blue button. This Connector forces the agent to think like a designer by requiring it to justify specific visual choices before it writes a single line of code. Instead of just assembling components, the agent has to prove it is making intentional decisions about hierarchy, layout, and typography. You will find this useful when you are looking for a unique brand identity rather than a stock template. Because it is part of the Vinkius catalog, you can plug it into your existing workflow to ensure your frontends actually have personality. It catches the common AI fingerprints like flat hierarchies and uniform spacing, forcing the agent to create dramatic contrast and unpredictable layouts. By requiring specific hex codes and font weight ratios, it ensures your project gets a distinct mood rather than a generic startup kit. You get a frontend that feels deliberate and professional because the agent had to prove its design logic first.

## Tools

### prove_design
This tool forces your agent to justify design decisions like hierarchy and layout before it writes any code. It identifies generic patterns and requires specific visual proofs to move forward.

## Prompt Examples

**Prompt:** 
```
Build a landing page for a project management SaaS. Make it modern and clean with feature cards.
```

**Response:** 
```
### Design Rejection

I cannot proceed with the current request because it follows the standard AI skeleton. Here is why:

*   **FLAT_HIERARCHY**: You haven't specified a focal point. Everything will have the same visual weight.
*   **CARD_GRID**: 'Feature cards' is the default AI skeleton. We need a different spatial relationship.
*   **SAFE_PALETTE**: 'Modern and clean' usually results in a generic blue/gray kit.

**Please provide:**
1. One specific focal point (e.g., a 96px metric).
2. A layout that isn't a grid (e.g., asymmetric columns).
3. A specific mood or hex code palette.
```

**Prompt:** 
```
Focal: metric '99.97%' at 96px mono bold on #0a0a0f. Layout: full-bleed dark hero, asymmetric 65/35 below, single-column manifesto section. Type: 96px/Jetbrains Mono + 15px/Inter. Color: #0a0a0f + #00d4ff cyan accent + #1a1a2e surfaces.
```

**Response:** 
```
### Verdict: DESIGN_READY

**Analysis:**
*   **Hierarchy**: 96px metric vs 15px body = 6.4:1 ratio. **Passed.**
*   **Layout**: Breaks grid with full-bleed hero and asymmetric columns. **Passed.**
*   **Typography**: Mixed families (JetBrains Mono + Inter) with dramatic scale. **Passed.**
*   **Color**: Dark + cyan = technical/premium mood. **Passed.**

This design has decisions, not defaults. I will begin writing the HTML and CSS now.
```

**Prompt:** 
```
Focal: hero headline. Layout: hero + 3 feature cards + pricing. Type: text-xl to text-4xl. Color: blue-600 primary, gray-100 background.
```

**Response:** 
```
### 5 Rejections

I cannot build this yet because it relies on defaults:

1.  **FLAT_HIERARCHY**: 'Hero headline' is too vague. What is the size ratio?
2.  **CARD_GRID**: 'Hero + 3 cards' is the universal AI skeleton.
3.  **UNIFORM_SPACING**: No contrast between whitespace and clusters defined.
4.  **MUTED_TYPE**: text-xl to text-4xl are Tailwind defaults, not a design choice.
5.  **SAFE_PALETTE**: blue-600 + gray-100 is the universal AI starter kit.

**Please redesign with specific decisions.**
```

## Capabilities

### Verify visual hierarchy
The agent must name a single focal point that dominates the page with a 3:1 scale ratio.

### Break card-grid patterns
It forces the agent to use asymmetric columns and overlapping elements instead of standard rows.

### Map whitespace contrast
The tool requires the agent to mix generous empty space with tight data clusters.

### Enforce typography ratios
It mandates specific font sizes and weight contrasts to create a clear reading path.

### Justify color identity
The agent must provide specific hex codes and explain the mood they create together.

## Use Cases

### Bespoke SaaS Landing Pages
A designer wants a landing page that doesn't look like a template. They use prove_design to force the agent to create an asymmetric, high-contrast layout.

### High-End Editorial Sites
A content creator needs a site with dramatic typography. They use prove_design to ensure the agent uses specific font weights and 5:1 size ratios.

### Unique Portfolio Layouts
A freelancer wants a portfolio that breaks the grid. They use prove_design to move the agent away from card grids toward overlapping elements.

### Cyberpunk Brand Identity
A developer needs a specific dark and neon look. They use prove_design to force the agent to use specific hex codes instead of a generic startup kit.

## Benefits

- Stop getting the same 3-card grid every time you ask for a landing page because prove_design catches that specific AI skeleton.
- Get dramatic visual hierarchy by forcing the agent to define one focal point with a 3:1 scale ratio instead of flat headlines.
- Achieve unique layouts with asymmetric columns and overlapping elements that move away from uniform padding and gap-6 defaults.
- Command attention with typography that uses specific weight contrasts and font pairings rather than just standard Tailwind scales.
- Build a distinct brand identity by requiring specific hex codes and intentional color relationships instead of a safe blue and gray palette.
- Save time on manual CSS tweaks because the agent is forced to plan the whitespace and layout drama before it starts coding.

## How It Works

The bottom line is that it turns your agent from a component assembler into an intentional designer.

1. Describe your desired design intent and the specific mood you want to achieve.
2. Run the tool to have the agent justify its design decisions against common AI defaults.
3. Receive a verdict of either a design ready signal or a list of specific design flaws to fix.

## Frequently Asked Questions

**What does Design Prover do for my frontend design?**
It forces your AI agent to think like a designer. Instead of just giving you a generic template, it requires the agent to prove it is making intentional choices about layout, typography, and color before it writes any code.

**Can Design Prover help me avoid generic AI landing pages?**
Yes. It specifically identifies and rejects the 'AI skeleton' of three cards in a row and standard blue buttons, forcing the agent to create unique, asymmetric, and high-contrast layouts.

**Does Design Prover work with any AI client?**
Yes, it works with any MCP-compatible client like Claude, Cursor, or Windsurf. You can use it to ensure your agent follows professional design standards regardless of which tool you prefer.

**How does Design Prover improve my typography?**
It mandates specific scale ratios, like a 3:1 or 5:1 difference between headlines and body text. This ensures your site has a clear reading path and dramatic visual hierarchy.

**Why does my AI always build the same 3-card grid?**
Because the agent defaults to the safest, most common pattern in its training data. Design Prover catches this default and forces the agent to describe a different spatial relationship for every section.

**Can I use Design Prover to create a specific brand identity?**
Absolutely. It requires the agent to justify specific hex codes and the mood they create together, moving you away from the 'startup kit' colors toward a unique brand personality.

**Does Design Prover generate HTML or CSS?**
No. Design Prover generates zero code. It forces the agent to make five concrete DESIGN DECISIONS — hierarchy, layout, whitespace, typography, color — before writing a single line of HTML. The decisions then guide the code. The tool catches AI patterns (card grids, uniform spacing, safe palette) and rejects until the design is intentional.

**Why does it reject card grids?**
Three cards in a row is the #1 fingerprint of AI-generated design. It's the default every model reaches for because it's safe and symmetrical. Professional design uses spatial tension: asymmetric columns where one is 2x wider, elements that overlap or break containers, full-bleed images next to narrow text columns, alternating between dense data sections and generous white space. Card grids are assembly, not design.

**What does a 3:1 hierarchy ratio mean?**
If your body text is 16px, your focal element should be at least 48px (3x) to create real visual dominance. AI agents typically use 32px headlines with 16px body — a 2:1 ratio that creates no drama. Professional design uses 5:1+ ratios: 72px display headlines, 120px metrics, oversized imagery. The bigger the ratio, the clearer the reading path.