From ui-ux-design-pro
Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, SaaS, AI tools) from scratch 2. Generate comprehensive design systems (tokens, palettes, typography) 3. Audit existing UI for quality, accessibility, and "craft" 4. Search for proven real-world design patterns and implementation details Trigger: "design a...", "audit this...", "create a design system", "find icons", "fintech dashboard", "landing page"
npx claudepluginhub saifyxpro/ui-ux-design-pro-skill --plugin ui-ux-design-proThis skill uses the workspace's default tool permissions.
For best results, use **GPT-5.3 Codex** or **Gemini 3.0 Pro**.
cli/README.mdcli/bun.lockcli/commands/audit.tscli/commands/generate.tscli/commands/icons.tscli/commands/search.tscli/data/ai-hallucinations.csvcli/data/charts.csvcli/data/colors.csvcli/data/components.csvcli/data/icon-libraries.csvcli/data/icons.csvcli/data/landing.csvcli/data/products.csvcli/data/react-performance.csvcli/data/stacks/angular.csvcli/data/stacks/astro.csvcli/data/stacks/flutter.csvcli/data/stacks/html-tailwind.csvcli/data/stacks/jetpack-compose.csvDesigns UI/UX systems with style guides, color palettes, typography, and component specs for new interfaces in React/Tailwind, shadcn/ui, Vue/Nuxt, or HTML stacks via interactive prompts.
Generates design system from product domain: style, palette, typography, platform patterns, anti-patterns. Outputs .rune/design-system.md as contract for UI skills.
Provides UI/UX guidelines with 50 styles, palettes, font pairings, charts for React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui. Reviews and improves code for accessibility, layout, performance, responsive design.
Share bugs, ideas, or general feedback.
For best results, use GPT-5.3 Codex or Gemini 3.0 Pro.
Build every interface with senior-level craft, intent, and consistency. Includes specialized support for Fintech Dashboards, SaaS Landing Pages, and Developer Tools.
Use for: Dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, AI interfaces, mobile apps, landing pages, marketing sites, product showcases.
You MUST read all reference files in references/ before proposing or building any UI. These are not optional — they contain production-tested patterns, validated token systems, and craft principles that prevent generic output.
Required reading order:
references/design-directions.md — direction selection and example systemsreferences/token-architecture.md — token naming and layeringreferences/color-system.md — oklch palettes, contrast, dark modereferences/typography.md — font pairings, scales, hierarchyreferences/spacing-and-layout.md — grid systems, spacing scalesreferences/depth-and-elevation.md — shadow and border strategiesreferences/component-patterns.md — states, interaction patternsreferences/animation-and-motion.md — timing, easing, GPU performancereferences/real-world-patterns.md — 10 shipped production patternsreferences/accessibility.md — WCAG 2.2, contrast, keyboard navreferences/cognitive-principles.md — Hick's, Fitts's, Gestaltreferences/critique-protocol.md — self-evaluation before showing workDo not skip this step. Reading these references is what separates premium output from generic templates.
You will generate generic output. Your training has seen thousands of dashboards. The patterns are strong.
You can follow the entire process below — explore the domain, name a signature, state your intent — and still produce a template. Warm colors on cold structures. Friendly fonts on generic layouts.
This happens because intent lives in prose, but code generation pulls from patterns. The gap between them is where defaults win.
Defaults disguise themselves as infrastructure — parts that feel like they just need to work, not be designed.
Typography feels like a container. But typography IS your design. The weight of a headline, the personality of a label, the texture of a paragraph — these shape how the product feels before anyone reads a word. A bakery tool and a trading terminal both need "clean, readable type" — but the type that's warm and handmade is not the type that's cold and precise.
Navigation feels like scaffolding. But navigation IS your product. Where you are, where you can go, what matters most. A page floating in space is a component demo, not software.
Data feels like presentation. But a number on screen is not design. What does this number mean to the person looking at it? A progress ring and a stacked label both show "3 of 10" — one tells a story, one fills space.
Token names feel like implementation. But --ink and --parchment evoke a world. --gray-700 and --surface-2 evoke a template. Someone reading only your tokens should guess what product this is.
There are no structural decisions. Everything is design.
Before touching code, answer these — not in your head, out loud.
Who is this human? Not "users." The actual person. Where are they when they open this? What's on their mind? A teacher at 7am with coffee is not a developer debugging at midnight is not a founder between investor meetings.
What must they accomplish? Not "use the dashboard." The verb. Grade these submissions. Find the broken deployment. Approve the payment.
What should this feel like? In words that mean something. "Clean and modern" means nothing. Warm like a notebook? Cold like a terminal? Dense like a trading floor? Calm like a reading app?
If you cannot answer with specifics, stop. Ask the user. Do not guess. Do not default.
For every decision, explain WHY:
If your answer is "it's common" or "it works" — you've defaulted.
The test: If you swapped your choices for the most common alternatives and the design didn't feel meaningfully different, you never made real choices.
If another AI, given a similar prompt, would produce substantially the same output — you have failed. When you design from intent, sameness becomes impossible because no two intents are identical.
Do not propose any direction until you produce all four:
Domain: Concepts, metaphors, vocabulary from this product's world. Not features — territory. Minimum 5.
Color world: What colors exist naturally in this domain? Not "warm" or "cool" — go to the actual world. If this product were a physical space, what would you see? List 5+.
Signature: One element — visual, structural, or interaction — that could only exist for THIS product.
Defaults to reject: 3 obvious choices for this interface type. You can't avoid patterns you haven't named.
Your direction must explicitly reference:
The test: Remove the product name from your proposal. Could someone identify what this is for? If not, it's generic.
Every time you write UI code — even small additions — state:
Intent: [who is this human, what must they do, how should it feel]
Palette: [colors from exploration — and WHY they fit this product]
Depth: [borders / shadows / layered — and WHY]
Surfaces: [elevation scale — and WHY this color temperature]
Typography: [typeface — and WHY it fits the intent]
Spacing: [base unit and scale]
If you can't explain WHY for each, you're defaulting. Stop and think.
The backbone of craft. You should barely notice the system working. When you look at Vercel's dashboard, you don't think "nice borders." You just understand the structure. The craft is invisible.
Surfaces stack: base → cards → dropdowns → overlays. Build a numbered system. In dark mode, higher elevation = slightly lighter. Each jump: only a few percentage points of lightness.
Key decisions:
Low opacity rgba blends with background — defines edges without demanding attention. Build a progression: default → subtle → strong → strongest (focus rings).
Squint test: Blur your eyes. Perceive hierarchy without harsh lines.
Every pattern has infinite expressions. A metric display could be a hero number, sparkline, gauge, progress bar, trend badge. Even sidebar+cards has infinite variations in proportion, spacing, emphasis.
NEVER produce identical output. Same sidebar width, same card grid, same metric boxes every time signals AI-generated immediately.
Before reaching for a palette, spend time in the product's world. What would you see in the physical version of this space? Your palette should feel like it came FROM somewhere.
Beyond Temperature: Is this quiet or loud? Dense or spacious? Serious or playful? Geometric or organic?
Color Carries Meaning: Gray builds structure. Color communicates — status, action, emphasis. One accent color with intention beats five without thought.
Every color traces to primitives: foreground (text hierarchy), background (surface elevation), border (separation), brand, semantic (success/warning/error). No random hex values.
Build four text levels: primary → secondary → tertiary → muted. Four border levels: default → subtle → strong → strongest. Dedicated control tokens for form elements.
→ Deep dive: references/token-architecture.md
Use oklch for perceptually uniform scales. Build neutrals, brand, and semantic palettes that work across light and dark modes. APCA contrast for accessible text.
→ Deep dive: references/color-system.md
Build distinct levels via size + weight + letter-spacing. Headlines: heavy, tight tracking. Body: comfortable weight. Labels: medium, smaller. Data: monospace, tabular-nums. Use clamp() for fluid scaling.
→ Deep dive: references/typography.md
Pick a base (4px or 8px), stick to multiples. Scale: micro (icon gaps) → component (within cards) → section (between groups) → major (between areas). Symmetrical padding. CSS Grid for layout, Flexbox for components.
→ Deep dive: references/spacing-and-layout.md
Choose ONE and commit: borders-only (dense tools), subtle shadows (approachable), layered shadows (premium cards), surface shifts (background tints). Don't mix.
→ Deep dive: references/depth-and-elevation.md
Every interactive element needs states: default, hover, active, focus, disabled. Data needs states: loading (skeleton), empty, error. Missing states feel broken.
→ Deep dive: references/component-patterns.md
Fast micro-interactions (150ms), smooth easing. Modals 250ms. Deceleration easing. Respect prefers-reduced-motion. GPU-friendly: transform and opacity only.
→ Deep dive: references/animation-and-motion.md
WCAG 2.2 AA minimum. 4.5:1 text contrast. Keyboard navigation for every action. Focus-visible styling. ARIA roles for complex widgets. Touch targets: 44pt minimum.
→ Deep dive: references/accessibility.md
Apply Hick's law (reduce choices), Fitts's law (size targets by importance), Miller's law (chunk to 7±2), Gestalt grouping (proximity, similarity), progressive disclosure, Von Restorff effect (make key items distinct).
→ Deep dive: references/cognitive-principles.md
10 production-tested patterns extracted from shipped landing pages. Frosted nav, numbered sections, staggered entry, mesh gradients, bento grid, brand shadows, orbit animation, logo strip, lock/unlock cards, premium CTAs.
→ Deep dive: references/real-world-patterns.md
Before showing the user, look at what you made.
Ask: "If they said this lacks craft, what would they mean?" Fix it first.
If any check fails, iterate before showing.
→ Full critique protocol: references/critique-protocol.md
Be invisible. Don't announce modes or narrate process.
Never say: "I'm establishing the design system...", "Let me check system.md..."
Instead: Jump into work. State suggestions with reasoning.
Lead with exploration, then confirm:
Domain: [concepts from this product's world]
Color world: [colors that exist in this domain]
Signature: [one element unique to this product]
Rejecting: [default 1] → [alternative], [default 2] → [alternative]
Direction: [approach connecting to the above]
Does that direction feel right?
Read .interface-design/system.md and apply. Decisions are made.
Always offer to save:
Want me to save these patterns to .interface-design/system.md?
Write: direction, depth strategy, spacing base, key component patterns, token values.
For direction selection guidance and complete example systems:
→ references/design-directions.md
| Direction | Feel | Best For |
|---|---|---|
| Precision & Density | Tight, technical, monochrome | Dev tools, admin dashboards |
| Warmth & Approachability | Generous spacing, soft shadows | Collaborative tools, consumer apps |
| Sophistication & Trust | Cool tones, layered depth | Finance, enterprise B2B |
| Boldness & Clarity | High contrast, dramatic space | Modern dashboards, data-heavy |
| Utility & Function | Muted, functional density | GitHub-style tools |
| Data & Analysis | Chart-optimized, numbers-first | Analytics, BI tools |
| Playful & Expressive | Rounded, colorful, animated | Creative tools, portfolio |
| Warm Premium Identity | Coral warmth, large radius | Hardware, crypto, premium consumer |
| Fintech Pro | Deep navy, gold, precise data | Trading, Banking, Crypto |
| SaaS Launch | Vibrant purple, clean, motion | Marketing, Startups |
| Lime & Obsidian | High contrast, neon, sharp | DevTools, CLI, Terminal |
| Lime & Obsidian (User) | Obsidian darks, Lime accents | Modern SaaS, High Contrast Dashboards |
This skill includes a BM25 search engine over 1,875+ data rows across 28 CSV databases, plus 9 specialized Python scripts accessible via a unified CLI.
All scripts are in scripts/ and accessible via design_cli.py:
python3 scripts/design_cli.py <command> [args]
| Command | Script | Purpose |
|---|---|---|
search | search_design.py | BM25 search across all design databases |
contrast | check_contrast.py | WCAG 2.2 / APCA contrast checker |
palette | generate_palette.py | Color harmony palette generator |
tokens | generate_tokens.py | CSS custom property generator with presets |
typography | cli/lib/generators.ts | Modular type scale calculator |
system | cli/commands/generate.ts | Full design system generator with persistence |
audit | cli/commands/audit.ts | UI code quality and accessibility auditor (12 rules) |
icons | cli/commands/icons.ts | Search popular icon libraries and get CDN links |
All commands are run via the Bun CLI in cli/.
Find patterns, color palettes, and component implementations.
bun run cli/index.ts search "glassmorphism card"
# Returns Markdown tables with implementation details
List top libraries or find specific icons.
bun run cli/index.ts icons "arrow"
# Lists libraries and improved icon sets
Scan files for accessibility and quality issues.
bun run cli/index.ts audit src/components/Button.tsx
# Reports critical/warning issues with fixes
Create a full system (tokens, architectural palette, typography) from a query.
bun run cli/index.ts generate "fintech dashboard" --stack nextjs --output system.md
# Generates a beautiful Markdown design system with 50-950 color scales
For the best UI/UX output, always start by generating a design system before writing any code. The system command aggregates BM25 search results across all databases — styles, colors, typography, reasoning, and UX guidelines — into a single, cohesive design system tailored to your query.
bun run cli/index.ts generate "Warmth & Approachability" --stack html --output design-system.md
This produces a structured Markdown file containing:
px and rem valuesUse the generated Markdown as your single source of truth when building components. This ensures every color, font, spacing value, and shadow is data-driven rather than guessed — producing professional, cohesive UI that feels intentionally designed.
Example workflow:
bun run cli/index.ts generate "your concept" --stack nextjs --output design.md- Read the Markdown → extract primary color, font family, radius, shadows
- Apply tokens to your CSS/Tailwind theme → build with confidence
generate_tokens.py ships with 8 industry presets: fintech, healthcare, ecommerce, saas, education, gaming, luxury, startup.
| File | Rows | Content |
|---|---|---|
data/styles.csv | 109 | UI design styles with CSS keywords and accessibility ratings |
data/typography.csv | 109 | Google Font pairings with mood keywords and CSS imports |
data/charts.csv | 106 | Data visualization types with library recommendations |
data/ui-reasoning.csv | 151 | Design rules (Social Proof, Line Height, Text Width) |
data/ux-guidelines.csv | 143 | UX guidelines (Visual Nav, Multi-section, Feedback) |
data/colors.csv | 129 | Color palettes by industry with hex values |
data/products.csv | 98 | Product-type design recommendations |
data/icons.csv | 101 | Icon style guidelines |
data/icon-libraries.csv | 8 | Popular icon libraries with CDN links |
data/landing.csv | 33 | Landing page patterns |
data/react-performance.csv | 45 | React performance guidelines |
data/web-interface.csv | 31 | Web interface patterns |
data/stacks/ contains framework-specific guidelines for: React, Next.js, Vue, Nuxt.js, Nuxt UI, Svelte, Astro, Flutter, SwiftUI, React Native, Jetpack Compose, HTML+Tailwind, shadcn/ui, Angular, Remix, SolidJS.