# Design Prover MCP

> Design Prover forces your AI agent to validate frontend design decisions before writing any code. It stops the common trap of repetitive, default-looking websites by demanding proof of intentional hierarchy, non-grid layouts, dramatic whitespace use, and unique color identities.

## Overview
- **Category:** productivity
- **Price:** Free
- **Tags:** frontend-design, ui-ux, visual-hierarchy, typography, structured-reasoning, decision-pivots, css-architecture

## Description

When you ask an AI client to build a landing page, it usually delivers something technically correct but emotionally void. The problem isn't the code; it’s that the agent only knows how to assemble defaults—the standard hero section, three feature cards in a row, safe blue buttons. It never makes hard design decisions.

This MCP forces your agent to pause and prove its architectural choices first. You tell it exactly what element needs to dominate the page (establishing hierarchy) and where the asymmetric columns must sit, breaking out of predictable card grids. You define specific hex codes for the color palette and map precise whitespace variations—where a cluster is tight, and where emptiness should be dramatic. Using Vinkius, you connect this MCP to your preferred AI client, giving it the necessary constraints to move beyond 'professional-looking' templates and build genuinely distinctive interfaces.

## Tools

### prove_design
This structured tool forces the agent to validate a design against five rules—hierarchy, layout, whitespace, typography, and color—to ensure it breaks common AI patterns.

## Prompt Examples

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

**Response:** 
```
Multiple rejections. (1) FLAT_HIERARCHY — what dominates? (2) CARD_GRID — 'feature cards' is the AI skeleton. (3) 'Modern and clean' describes every AI design ever made. What does this FEEL like? A cockpit? A magazine? Name the emotion, the density, the unexpected element. Redesign before writing code.
```

**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. Hierarchy: 96px metric vs 15px body = 6.4:1 ratio. Layout breaks grid: full-bleed hero, asymmetric columns, manifesto section. Whitespace contrast present. Type: two families (JetBrains Mono + Inter), dramatic scale. Color: dark + cyan = technical/premium. This design has decisions, not defaults. Build it.
```

**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. (1) FLAT_HIERARCHY — 'hero headline' is vague. Size? Font? Ratio? (2) CARD_GRID — 'hero + 3 cards + pricing' is the AI skeleton verbatim. (3) UNIFORM_SPACING — no whitespace contrast specified. (4) MUTED_TYPE — text-xl to text-4xl is Tailwind defaults, not design. (5) SAFE_PALETTE — blue-600 + gray-100 is the universal AI color kit. Fix all five.
```

## Capabilities

### Prove Visual Hierarchy
It forces the agent to name a single focal element that dominates the design with a clear size ratio, ensuring the user's eye path is intentional.

### Enforce Asymmetric Layout
The MCP prevents predictable card grids by requiring varied spatial relationships, like overlapping elements or full-bleed sections.

### Define Intentional Whitespace
It requires mapping the contrast between generous emptiness and tight data clusters; variation in space becomes a core design element.

### Mandate Dramatic Typography
The system validates specific font pairings and size contrasts, forcing the agent to use mixed families instead of default single-font scales.

### Establish Color Identity
It demands justification for specific hex color values, ensuring the palette conveys a unique mood or brand personality beyond 'corporate blue'.

## Use Cases

### Pitching a complex data product
A financial architect needs the AI to build a dashboard landing page. The agent initially uses uniform spacing and standard component boxes. Instead, using Design Prover, you force it to break the layout into full-bleed sections contrasting with narrow text blocks, achieving a premium, magazine-like feel.

### Developing a high-end editorial site
A publishing house needs an AI prototype. The agent keeps defaulting to simple card layouts and muted colors. You use Design Prover to mandate that the typography must feature a display serif font paired with body sans, instantly giving the design a sophisticated, literary weight.

### Building a technical SaaS site
An engineer needs to showcase complex metrics. The AI keeps centering everything and using generic components. You use Design Prover to specify that the primary metric must be huge (96px) against a dark background, achieving the immediate technical authority needed for trust.

### Prototyping a niche brand experience
A luxury goods startup needs a website. The agent suggests standard white backgrounds and blue accents. You use Design Prover to force specific color codes (like dark charcoal and burgundy) and overlapping elements, making the site feel bespoke and expensive.

## Benefits

- Stops the Card-Grid Trap: It forces asymmetric or overlapping layouts, eliminating the universal '3 cards in a row' pattern that plagues AI prototypes. You get true structural variation.
- Creates Visual Drama: By requiring the agent to name a single focal point with a specific size ratio (e.g., 5:1), it ensures the design has a clear reading path and intentional hierarchy.
- Defines Real Identity: Instead of allowing safe blue/gray palettes, this MCP demands justification for color hex codes, giving your brand an emotional edge—it’s not just 'professional,' it's *moody*.
- Controls Space Usage: It forces the distinction between generous emptiness and tight clusters. The variation in whitespace becomes a critical design decision, not an afterthought.
- Elevates Typography: You move past default single-font scaling by requiring mixed font families (e.g., serif display + sans body) and dramatic weight contrasts.

## How It Works

The bottom line is you get a rigorous checkpoint that ensures your AI client makes deliberate design choices instead of relying on default component libraries.

1. You run the `prove_design` tool and provide architectural constraints: specify the focal point's size ratio, define the layout rules (e.g., asymmetric columns), map whitespace variations, name specific type pairings, and justify the color hex codes.
2. The MCP analyzes these inputs and forces your AI agent to confirm that the design breaks common patterns like card grids or uniform spacing.
3. If all five decision pivots pass validation, the agent proceeds with writing HTML/CSS code based on genuinely intentional design decisions.

## Frequently Asked Questions

**What is the difference between using Design Prover and just asking for a 'modern layout'?**
Asking for 'modern' gives you defaults. Design Prover forces specific rules, like mandating mixed font families or asymmetric columns. It requires proof that the design has drama; it won't accept vague prompts.

**Can I use prove_design if my site is mostly text and no cards?**
Yes. The tool focuses on structural constraints, not components. You can mandate dramatic whitespace variation or a strong typographic ratio even if you have zero feature cards.

**Does Design Prover require me to know CSS details?**
No. You just need the design vocabulary: what color evokes 'cyberpunk,' what constitutes an asymmetric layout, and which element is the focal point. The MCP handles the technical enforcement.

**How many times should I run prove_design?**
You run it once per distinct frontend design concept before the agent writes any code. It acts as a single, critical gate check for your architectural intent.

**What client applications are compatible with using prove_design?**
It works across any MCP-compatible agent, including Claude, Cursor, VS Code, and Windsurf. Vinkius manages the connection; you just connect your preferred AI client to access the tool's validation methods.

**When running prove_design, what is the ideal format for my design prompt?**
Provide concrete, measurable constraints instead of vague adjectives. Instead of saying 'make it elegant,' specify details like 'a 96px headline on a dark charcoal background' or 'an asymmetric 70/30 column split.'

**If prove_design rejects my design, what should I focus on fixing?**
Focus intensely on breaking the AI defaults in your prompt. Review the rejection’s specific points—was it the Card Grid? Was the hierarchy flat? Address those five architectural failures directly for a successful second attempt.

**Does running prove_design impact the overall generation speed of my code?**
It adds a necessary validation step, but it doesn't slow down your final output significantly. Think of it as pre-flight checking; the time spent proving intent saves hours of manual refactoring later.

**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.