UI/UX Pro Max

This skill provides professional-grade UI/UX design guidance, focusing on modern aesthetics, accessibility, and consistency.

Capabilities

1. Design System Generation

Can generate a complete design system including:

• Colors: Primary, secondary, semantic, and neutral palettes (OKLCH/HSL).
• Typography: Font pairings, scales, and line heights.
• Spacing: Consistent spacing grids (4px/8px rule).
• Components: Variations for buttons, inputs, cards, etc.

2. Design Patterns

• Glassmorphism: Backdrop filters, transluscent layers.
• Bento Grid: Grid-based layouts for dashboards and landing pages.
• Neumorphism: Soft UI shadows (use sparingly).
• Dark Mode: High contrast, desaturated colors for eye comfort.

3. Review & Refactor

• Check for accessibility (WCAG contrast ratios).
• Identify “generic” designs and suggest premium alternatives.
• Validate responsive behavior across devices.

Rules of Thumb

• Whitespace: More is usually better. Give content room to breathe.
• Consistency: Use variables for everything (colors, spacing, radius).
• Feedback: Every interaction (hover, click, focus) needs visual feedback.
• Motion: Use subtle micro-animations (200-300ms) to make the UI feel alive.

When to Use

• “Make this page look more premium.”
• “Design a dashboard for this data.”
• “Improve the UX of this form.”
• “Create a dark mode theme.”