iOS Human Interface Guidelines Design Skill

This skill guides creation of native iOS app interfaces that feel intuitive, consistent, and aligned with Apple’s design philosophy.

Core Design Principles

Apple’s iOS design philosophy rests on three foundational principles:

1. Clarity

Every element must be legible and purposeful. Typography, iconography, and spacing communicate hierarchy and focus.

2. Deference

The interface should never overshadow the content. The UI exists to support user tasks, not distract from them.

3. Depth

Layering, transitions, and realistic motion provide hierarchy and spatial relationships.

Scoring

Goal: 10/10. When reviewing or creating iOS interfaces or SwiftUI/UIKit code, rate them 0-10 based on adherence to the principles below. A 10/10 means full alignment with all guidelines; lower scores indicate gaps to address. Always provide the current score and specific improvements needed to reach 10/10.

Screen Sizes & Layout

iPhone Screen Sizes (Design Points)

Best Practice: Design for smaller screens first (375pt width).

Page Layout Structure

┌─────────────────────────────────┐
│         Status Bar (59pt)       │
├─────────────────────────────────┤
│         Nav Bar Row 1 (44pt)    │
├─────────────────────────────────┤
│         Nav Bar Row 2 (58pt)    │  ← Large title (optional)
├─────────────────────────────────┤
│         Content Area            │
├─────────────────────────────────┤
│         Tab Bar (49pt)          │
├─────────────────────────────────┤
│       Home Indicator (34pt)     │
└─────────────────────────────────┘

Safe Areas

Critical: UI components must not overlap with hardware features (notch, Dynamic Island, home indicator).

VStack { Text("Content") }  // Default: respects safe area

VStack { Color.blue }.ignoresSafeArea()  // Extend beyond

Quick Reference: Component Spacing

Touch Target Min:     44 × 44pt
Screen Edge Margin:   16-20pt
List Row Height:      44pt minimum
Standard Spacing:     8 / 16 / 24pt

Common Pitfalls

Don’t:

• Override standard gestures (swipe back, pull refresh)
• Use touch targets smaller than 44pt
• Ignore safe areas
• Force Android patterns (top tab bar, hamburger menus)
• Neglect Dark Mode
• Use low contrast text

Do:

• Use native components
• Test on real devices
• Support Dynamic Type
• Test with VoiceOver enabled
• Preview in both light and dark modes

Detailed Reference Files

Core Design:

• references/typography.md — Text styles, font sizes, Dark Mode typography
• references/navigation.md — Tab bar, navigation bar, modals, search patterns, split views
• references/components.md — Buttons, lists, input controls, menus, confirmation dialogs
• references/colors-depth.md — Semantic colors, Dark Mode, contrast ratios
• references/gestures.md — Standard gestures, haptics, animations
• references/accessibility.md — VoiceOver, Dynamic Type, checklist
• references/app-icons.md — Icon sizes, shape, guidelines

Input & System Integration:

• references/keyboard-input.md — Keyboard types, input accessory views, hardware keyboard support
• references/privacy-permissions.md — Permission request timing, pre-permission screens, handling denial
• references/widgets-extensions.md — Widget sizes, App Clips design, Live Activities
• references/system-integration.md — Siri, Shortcuts, Handoff, drag-drop, universal links

Resources

• Apple Human Interface Guidelines
• SF Symbols
• Apple Design Resources (Figma/Sketch)
• WWDC Design Sessions