Files
SlipItIn/.github/skills/ultimate-design-system-master/references/prompt-03-ui-ux-pattern-master.md
Tim Krampitz 01046b01e4 Neue Skills, Referenzen & OpenWiki-Doku integriert
Umfangreiche Erweiterung der Skill-Bibliothek: Neue Skills für Humanisierung (Englisch/PT-BR), Design-Validierung, AI-SEO und Coolify-Deployment inkl. Regelwerke, Presets, Pattern-Referenzen, Testfälle und Automatisierungsskripte. Zusätzliche Skills für Revenue-Centric Design, Pier Cloud, OKF, Lebenslauf- und LinkedIn-Optimierung sowie zahlreiche Referenzdateien, Checklisten und YAML/JSON/Markdown-Templates. Einführung einer vollständigen OpenWiki-Dokumentation mit Architektur-, Domain- und Workflow-Beschreibungen, zentralem Index und automatisierten Updates. Modularer Aufbau, restriktive Lizenzen und umfassende Qualitäts- und Evaluationsmechanismen für alle neuen Inhalte.
2026-07-26 14:00:58 +02:00

2.3 KiB

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.