Stats
Actions
Available In
Tags
UI UX Pro Max
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks.
The Pipeline
Every project follows this flow. Each command asks questions and guides you to the next step.
/create → /design-system → /export → /build → /review
(1) (2) (3) (4) (5)
context colors, fonts code/figma pages & audit
& goals components /pencil components
tokens
| Command | What it does | Run |
|---|---|---|
/create | Gathers project brief — type, audience, goals | Once |
/design-system | Generates complete design system — style, colors, fonts, tokens | Once |
/export | Exports to Code (any stack), Figma, or Pencil | Once per target |
/build | Builds pages, sections, and components | Repeat |
/review | Audits for accessibility, performance, UX | Repeat |
Design Tools
| Command | What it does |
|---|---|
/figma | Push designs to Figma Desktop via figma-bridge MCP |
/pencil | Create visual mockups in .pen files |
/design | Logo, CIP, icons, social photos |
/banner | Social media, ads, website heroes, print banners |
/slides | HTML presentations with Chart.js |
/brand | Brand voice, visual identity, messaging |
/styling | shadcn/ui components, Tailwind, dark mode |
/help | Full usage guide |
How Design System Generation Works
┌─────────────────────────────────────────────────────────────────┐
│ 1. USER REQUEST │
│ "Build a landing page for my beauty spa" │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 2. MULTI-DOMAIN SEARCH (5 parallel searches) │
│ • Product type matching (161 categories) │
│ • Style recommendations (84 styles) │
│ • Color palette selection (161 palettes) │
│ • Landing page patterns (34 patterns) │
│ • Typography pairing (73 font combinations) │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 3. REASONING ENGINE │
│ • Match product → UI category rules (161 rules) │
│ • Execute Decision_Rules against query │
│ • Apply style priorities (BM25 ranking) │
│ • Filter anti-patterns for industry │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 4. COMPLETE DESIGN SYSTEM OUTPUT │
│ Pattern + Style + Colors + Typography + Effects │
│ + Anti-patterns to avoid + Pre-delivery checklist │
└─────────────────────────────────────────────────────────────────┘
Example output:
