UI/UX Pro Max
A comprehensive approach to UI/UX design that prioritizes user needs, accessibility, and systematic design methodology. No shortcuts, no "phase 2," no decoration-only thinking.
FOUNDATIONAL PRINCIPLE: Good design solves user problems, not just looks beautiful. Aesthetics without usability is art, not design.
The Iron Law
No design ships without user consideration. Period.
- No copying designs without validating fit for YOUR users
- No skipping accessibility because "current users don't need it"
- No rejecting methodology because "this case is different"
- No dismissing UX enhancements as "nice-to-have"
This is not negotiable. This is not flexible. This is mandatory.
When to Invoke
Invoke this skill when:
- Designing new UI components or pages
- Creating or updating design systems
- Implementing responsive layouts
- Adding animations and transitions
- Improving accessibility
- Optimizing user experience
- Making design decisions under pressure
NEVER skip this skill because:
- "This Dribbble design looks great, just copy it"
- "Accessibility can wait for phase 2"
- "Our users are [specific group], they don't need X"
- "Design system is overkill for this project"
- "Animation is just decoration"
Design Process
1. User Research (MANDATORY - NO EXCEPTIONS)
You MUST understand your users before designing ANYTHING.
Why this matters:
- Beautiful designs might not be usable for YOUR users
- User needs vary by context, not universal
- Assumptions about users lead to wrong designs
- Research validates or invalidates design decisions
NO EXCUSES for skipping user research:
- ❌ "I understand our users" → Validate assumptions with data
- ❌ "Time pressure" → 30 min research saves 30 hours of wrong design
- ❌ "Manager likes this design" → Manager isn't the user
- ❌ "Good design is universal" → Good design is contextual
- ❌ "We can research later" → Research informs design, not validates it
Quick research methods (30 min - 2 hours):
- Review existing analytics and user feedback
- Interview 3-5 users or stakeholders
- Analyze competitor solutions
- Create user personas from existing data
- Review support tickets for pain points
REAL-WORLD CHECK:
Manager says: "Copy this Dribbble design"
Your instinct: "It's beautiful, let's use it"
Process says: "Validate fit for our users first"
DO NOT: Copy without validation
DO: Analyze if design patterns fit YOUR user needs and context
Maybe it does fit. Maybe it doesn't. You won't know without research.
2. Accessibility Design (MANDATORY - NO EXCEPTIONS)
You MUST design for accessibility from the start.
Why this matters:
- 15% of world population has disabilities
- Accessibility benefits ALL users (curb cut effect)
- Legal requirements (ADA, WCAG)
- Retrofitting accessibility is 10x more expensive
- "Phase 2" never comes
NO EXCUSES for skipping accessibility:
- ❌ "Our users don't need it" → You don't know who needs it
- ❌ "Time pressure" → Accessibility doesn't add that much time
- ❌ "Phase 2" → Phase 2 never comes
- ❌ "It's just for young, healthy users" → Temporary disabilities exist
- ❌ "We'll add it later" → Retrofitting is expensive and incomplete
Minimum accessibility requirements (ALWAYS):
- [ ] Color contrast ratio: 4.5:1 for normal text, 3:1 for large text
- [ ] Keyboard navigation: All interactive elements accessible via Tab
- [ ] Focus indicators: Visible focus states for all focusable elements
- [ ] Alt text: All images have descriptive alt text
- [ ] Form labels: All form fields have associated labels
- [ ] Error messages: Clear, descriptive, not just color-coded
- [ ] Semantic HTML: Proper heading hierarchy, landmarks, lists
Accessibility doesn't add 1-2 days. It adds 2-4 hours if done from start.
3. Responsive Design (MOBILE-FIRST - NO EXCEPTIONS)
You MUST design mobile-first, then enhance for larger screens.
Why this matters:
- Mobile traffic exceeds desktop globally
- Mobile-first forces prioritization
- Progressive enhancement is more robust
- "Desktop-first" leads to cramped mobile experiences
NO EXCUSES for skipping mobile-first:
- ❌ "Our users are desktop users" → They also use mobile
- ❌ "This is a productivity tool" → Productivity happens on mobile too
- ❌ "Mobile can come in v2" → v2 never comes properly
- ❌ "Desktop-first is faster for desktop apps" → Methodology matters
Mobile-first approach:
1. Design for smallest screen first (320px)
2. Identify core content and actions
3. Enhance layout for larger screens (progressive enhancement)
4. Test on real devices, not just responsive tools
"But our users ARE desktop users":
- They still check on mobile occasionally
- Mobile-first doesn't mean mobile-only
- Prioritization benefits all screen sizes
- Future users might be mobile-primary
4. Design Systems (FOR ALL BUT TRIVIAL PROJECTS)
You MUST create design tokens and systems for any project > 1 week.
Why this matters:
- Consistency across screens and components
- Faster development after initial investment
- Easier maintenance and updates
- Better developer handoff
NO EXCUSES for skipping design systems:
- ❌ "Small project" → Small projects become big projects
- ❌ "Overkill for this scale" → Design systems scale down well
- ❌ "Just design screens" → Inconsistency compounds
- ❌ "Team can maintain consistency manually" → Humans are inconsistent
- ❌ "We can create system later" → Retrofitting is expensive
Lightweight design system (1-2 days, not 2-3 weeks):
- Color palette (primary, secondary, semantic colors)
- Typography scale (headings, body, small)
- Spacing system (4px or 8px base)
- Component library (buttons, inputs, cards)
- Basic patterns (navigation, forms, lists)
Even medium projects benefit from design tokens. Consistency compounds.
5. Motion Design (MEANINGFUL, NOT DECORATIVE)
You MUST use animation to enhance UX, not just decorate.
Why this matters:
- Animation provides feedback and guidance
- Reduces cognitive load
- Creates sense of direct manipulation
- Improves perceived performance
NO EXCUSES for skipping meaningful animation:
- ❌ "Functionality first" → Animation IS functionality feedback
- ❌ "Nice-to-have" → Feedback is must-have
- ❌ "Users don't care about animations" → Users care about feedback
- ❌ "Ship now, animate later" → Later never comes
- ❌ "Animation is decoration" → Meaningful animation is UX
Meaningful animation use cases:
- Feedback: Button click confirmation, form submission success
- Guidance: Drawing attention to important elements
- Transition: Showing relationships between screens/states
- Loading: Reducing perceived wait time
- Error: Highlighting problems clearly
Minimum animation requirements:
- [ ] All interactive elements have feedback (hover, click, focus)
- [ ] Form submissions show success/error states
- [ ] Page transitions show navigation direction
- [ ] Loading states indicate progress
- [ ] Animations respect prefers-reduced-motion
Design Principles
Visual Hierarchy
Primary → Secondary → Tertiary
├── Size: Large → Medium → Small
├── Color: High contrast → Medium → Low
└── Weight: Bold → Regular → Light
Spacing Scale (8px base)
--space-1: 4px (0.5x)
--space-2: 8px (1x)
--space-3: 12px (1.5x)
--space-4: 16px (2x)
--space-5: 24px (3x)
--space-6: 32px (4x)
--space-7: 48px (6x)
--space-8: 64px (8x)
Typography Scale
--font-xs: 0.75rem (12px)
--font-sm: 0.875rem (14px)
--font-base: 1rem (16px)
--font-lg: 1.125rem (18px)
--font-xl: 1.25rem (20px)
--font-2xl: 1.5rem (24px)
--font-3xl: 1.875rem (30px)
--font-4xl: 2.25rem (36px)
Animation Timing
--duration-fast: 150ms
--duration-normal: 300ms
--duration-slow: 500ms
--ease-in: cubic-bezier(0.4, 0, 1, 1)
--ease-out: cubic-bezier(0, 0, 0.2, 1)
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)
Red Flags - STOP AND REDESIGN
If you catch yourself thinking ANY of these, STOP immediately:
- ❌ "This Dribbble design looks great, just copy it"
- ❌ "Accessibility can wait for phase 2"
- ❌ "Our users don't need accessibility"
- ❌ "Mobile-first doesn't apply to our use case"
- ❌ "Design system is overkill"
- ❌ "Animation is just decoration"
- ❌ "Good design is universal"
- ❌ "Time pressure, skip user research"
- ❌ "We can add accessibility later"
- ❌ "Functionality over UX enhancements"
All of these mean: STOP. Follow the design process. No shortcuts.
Rationalization Counter-Table
| Excuse You Might Make | Why It's Wrong | What To Do Instead |
|---|---|---|
| "Beautiful design = good design" | Beauty without usability is art, not design. Validate for YOUR users. | Research first, then design |
| "Accessibility can wait" | Phase 2 never comes. Retrofitting is 10x more expensive. | Include from start, it's 2-4 hours not 1-2 days |
| "Our users don't need X" | You don't know who needs what. Temporary disabilities exist. | Design for diverse users always |
| "This case is different" | Every case feels different. Methodology exists for a reason. | Adapt methodology, don't skip it |
| "Small project" | Small projects become big projects. Consistency compounds. | Lightweight design system (1-2 days) |
| "Functionality first" | Animation IS functionality feedback, not decoration. | Include meaningful animation for feedback |
| "Time pressure" | 30 min research saves 30 hours of wrong design. | Right-size process, don't eliminate it |
| "Authority likes it" | Manager isn't the user. Validate design fit. | Research user needs, present findings |
| "Phase 2" | Phase 2 never comes properly. Do it now. | Include essential features from start |
The Non-Negotiable Checklist
Before you declare ANY design complete, verify ALL:
User Research:
- [ ] User needs identified (research or validated assumptions)
- [ ] User context understood (devices, environment, goals)
- [ ] Design validated against user needs
Accessibility:
- [ ] Color contrast meets WCAG AA (4.5:1 normal, 3:1 large text)
- [ ] Keyboard navigation works for all interactive elements
- [ ] Focus indicators visible
- [ ] Alt text for all images
- [ ] Form labels associated
- [ ] Error messages clear and descriptive
Responsive Design:
- [ ] Mobile-first approach used
- [ ] Works on 320px width minimum
- [ ] Touch targets minimum 44x44px
- [ ] No horizontal scrolling
Design System:
- [ ] Design tokens defined (colors, typography, spacing)
- [ ] Components documented
- [ ] Patterns consistent across screens
Motion Design:
- [ ] All interactions have feedback
- [ ] Animations meaningful, not decorative
- [ ] Respects prefers-reduced-motion
Missing even ONE checkbox = design is NOT complete. Go back.
Real-World Pressure Scenarios
"Copy Dribbble" Scenario
Situation: Manager loves a Dribbble design, wants you to copy it.
Wrong response: Copy without validation.
Right response:
- Acknowledge the design IS beautiful
- Research: Does it fit YOUR users' needs and context?
- If yes: Adapt with user validation
- If no: Present research showing why it doesn't fit, suggest alternatives
- Manager's aesthetic preference ≠ user usability
Diplomatic approach: "This design is beautiful. Let me research if these patterns work for our specific users before committing."
"Accessibility Can Wait" Scenario
Situation: Developer says skip accessibility for tight deadline.
Wrong response: Defer accessibility to "phase 2."
Right response:
- Accessibility from start adds 2-4 hours, not 1-2 days
- Phase 2 never comes properly
- 15% of users have disabilities you might not know about
- Legal and ethical requirements
Pushback: "Including basic accessibility from start takes 2-4 hours, not days. Retrofitting takes 10x longer. Let's include it now."
"Mobile-First Doesn't Apply" Scenario
Situation: Team lead says design desktop-first for productivity tool.
Wrong response: Reject mobile-first methodology.
Right response:
- Mobile-first forces prioritization (benefits all screens)
- Users check productivity tools on mobile too
- Progressive enhancement > graceful degradation
- Adapt methodology: Mobile-first for core flows, desktop-optimized for complex features
Compromise: "Mobile-first for user-facing flows, desktop-optimized for admin interfaces. Mobile-first thinking improves all designs."
"Design System is Overkill" Scenario
Situation: Senior designer says skip design system for medium project.
Wrong response: Skip design system entirely.
Right response:
- Lightweight design system: 1-2 days, not 2-3 weeks
- Even medium projects benefit from consistency
- Design tokens speed up development
- Consistency compounds over time
Right-sizing: "Let me create a lightweight system: color palette, typography, spacing, basic components. 1-2 days investment, long-term consistency."
"Animation is Decoration" Scenario
Situation: PM says skip animation, focus on functionality.
Wrong response: Dismiss animation as nice-to-have.
Right response:
- Animation IS functionality feedback
- Users need confirmation their actions worked
- Loading states reduce perceived wait time
- Meaningful animation enhances UX, not decorates it
Reframe: "This isn't decoration - it's feedback. Users need confirmation their form submitted successfully. Basic animation provides that."
Bottom Line
Design isn't decoration. It's problem-solving.
No matter the time pressure, authority suggestions, or "nice-to-have" labels - you follow the design process:
- Research users
- Design accessible
- Mobile-first approach
- Create design systems
- Meaningful animation
Skipping any step = poor design. No exceptions.
