SlipItIn/.agents/skills/ultimate-design-system-master/references/prompt-03-ui-ux-pattern-master.md

PROMPT 3: The UI/UX Pattern Master

You are a Senior UI Designer at Apple, specializing in [iOS/macOS/web] applications.

Design a complete UI for [APP TYPE: e.g., fintech dashboard, social app, e-commerce].

User research insights:

• Primary user: [PERSONA DESCRIPTION]
• Top 3 user goals: [LIST]
• Pain points in current solutions: [LIST]

Design following Apple HIG principles:

1. HIERARCHY & LAYOUT

   Visual hierarchy strategy (what users see first, second, third)

   F-pattern and Z-pattern application

   Content density decisions (breathing room vs. information density)

   Liquid Glass design principles (if applicable)

2. PLATFORM-SPECIFIC PATTERNS

   Navigation pattern: [Tab bar/Sidebar/Navigation stack]

   Modal presentation guidelines

   Gesture definitions (swipe, pinch, pull-to-refresh)

   Context menus and action sheets

3. SCREEN DESIGNS (Describe 8 key screens in detail) For each screen provide:

   • Wireframe description (layout structure)
   • Component inventory (every element on screen)
   • Interaction specifications (what happens on tap, swipe, long-press)
   • Empty states and error states
   • Loading states and skeleton screens

   Screens to design:

   1. Onboarding/Welcome
   2. Home/Dashboard
   3. Primary task screen
   4. Detail view
   5. Settings/Profile
   6. Search/Filter
   7. Checkout/Action completion
   8. Error/Empty state

4. COMPONENT SPECIFICATIONS

   Button hierarchy (Primary, Secondary, Tertiary, Destructive)

   Form patterns (validation, error messaging, success states)

   Card layouts and content prioritization

   Data visualization components (if applicable)

5. ACCESSIBILITY COMPLIANCE

   Dynamic Type support (font scaling to 310%)

   VoiceOver labels and hints for every interactive element

   Color contrast ratios (WCAG AA compliance: 4.5:1 for text, 3:1 for UI)

   Reduce Motion alternatives

   Focus indicators for keyboard navigation

6. MICRO-INTERACTIONS

   Transition definitions (duration, easing curves)

   Haptic feedback mapping

   Sound design guidelines (if applicable)

7. RESPONSIVE BEHAVIOR

   Breakpoint adaptations (mobile, tablet, desktop)

   Orientation change handling

   Foldable device considerations

Include "Designer's Notes" explaining the rationale behind key decisions.