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

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

MCP Config

`json
{
"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