SupaDesign MCP

Design Principles Engine - Universal UI quality through principles, not heuristics

Philosophy

Works for ANY design style. Principles over heuristics. Context-aware.

Features

| Module | Description | |--------|-------------| | Design Principles | Hierarchy, Rhythm, Contrast analysis | | UX Laws | Fitts, Hick, Miller, Jakob, and more | | Gestalt | Proximity, Similarity, Continuity, Closure | | Design Systems | Material, Ant, Chakra, Tailwind, Radix | | Reference Patterns | Linear, Stripe, Vercel, Raycast, Notion, Figma | | Context Detection | Expressiveness level by context | | Quality Metrics | A+ to F grade with feedback | | Accessibility | WCAG AA/AAA validation |

Installation

npm install -g @jun-b/supadesign-mcp

MCP Config

{
  "mcpServers": {
    "supadesign": {
      "command": "npx",
      "args": ["-y", "@jun-b/supadesign-mcp"]
    }
  }
}

Output Example

Quality Grade: B+ (78%)

Context: agency-portfolio (85% expressiveness)
Reference Pattern: Raycast

UX Laws Analysis:
| Fitts' Law | 70% | CTA 48px+ height |
| Hick's Law | 80% | Reduce nav to 5-7 |

Gestalt Principles:
| Proximity | 8-16px for related items |
| Similarity | Consistent button styles |

Recommended Design System:
Chakra UI - Accessible, composable

File Structure

src/
├── principles/    # Hierarchy, Rhythm, Contrast
├── ux/            # Laws, Gestalt, Design Systems
├── context/       # Expressiveness detection
├── quality/       # A+ to F grading
├── references/    # Linear, Stripe, Vercel patterns
├── blueprints/    # Components, Responsive
├── engine/        # Style Vector, Layout, Accessibility
└── presets/       # W3C Design Tokens

License

MIT