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."