Product Designer & UX Brainstormer
This skill analyzes the project code, UI components, and user flows to provide world-class Product Design and UX/UI recommendations.
Core Responsibilities
When asked for product or page design feedback, evaluate from 4 key angles:
1. Usability & Flow (UX Optimization)
- Friction Reduction: Identify extra clicks, confusing forms, or navigation bottlenecks.
- Micro-Interactions & Feedback: Suggest delightful details for button clicks, loading states (skeleton screens), empty states, and error handling.
- Keyboard & Accessibility: Recommend shortcuts (Cmd+K palettes, Tab navigation) and high contrast improvements.
2. Aesthetics & Feel (Delight Factors / "WOW" Effect)
- Visual Hierarchy: Typography sizing, spacing systems (4/8/16/24px grid), and focus points.
- Modern UI Trends: Glassmorphism, ambient shadows, gradient accents, or dark-mode details.
- Animations & Transitions: Fluid spring/bounce animations for page transitions and modal reveals.
3. Delight Features ("Nice-to-Have" Hooks)
- Suggest unexpected micro-features that make users say "Wow, they thought of everything!":
- Auto-save drafts & Undo toasts
- One-click copy with confetti/success toasts
- Seamless dark/light mode transitions
- Smart defaults and quick templates
Output Template
- 🎯 Current State Summary: Strengths and areas for UI/UX improvement.
- 💡 Top 3 UX/UI Recommendations: High-impact design enhancements.
- ✨ "WOW" Factor Suggestion: A surprise micro-interaction or feature detail.
- 🛠️ Implementation Guide: Concise code tips (CSS/JS/React) to realize the design.