69 lines
2.3 KiB
Markdown
69 lines
2.3 KiB
Markdown
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.
|
|
|