apple-hig-designer

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
name: apple-hig-designer
description: Design iOS apps following Apple's Human Interface Guidelines. Generate native components, validate designs, and ensure accessibility compliance for iPhone, iPad, and Apple Watch.
---

# Apple HIG Designer

Design beautiful, native iOS apps following Apple's Human Interface Guidelines (HIG). Create accessible, intuitive interfaces with native components, proper typography, semantic colors, and Apple's design principles.

## What This Skill Does

Helps you design and build iOS apps that feel native and follow Apple's guidelines:
- **Generate iOS Components** - Create SwiftUI and UIKit components
- **Validate Designs** - Check compliance with Apple HIG
- **Ensure Accessibility** - VoiceOver, Dynamic Type, color contrast
- **Apply Design Principles** - Clarity, Deference, Depth
- **Use Semantic Colors** - Automatic dark mode support
- **Implement Typography** - San Francisco font system
- **Follow Spacing** - 8pt grid system and safe areas

## Apple's Design Principles

### 1. Clarity

**Make content clear and focused.**

Text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a focus on functionality drives the design.

```swift
// ✅ Clear, focused content
Text("Welcome back, Sarah")
    .font(.title)
    .foregroundColor(.primary)

// ❌ Unclear, cluttered
Text("Welcome back, Sarah!!!")
    .font(.title)
    .foregroundColor(.red)
    .background(.yellow)
    .overlay(Image(systemName: "star.fill"))
```

### 2. Deference

**UI helps people understand and interact with content, but never competes with it.**

The interface defers to content, using a light visual treatment that keeps focus on the content and gives the content room to breathe.

```swift
// ✅ Content-focused
VStack(alignment: .leading, spacing: 8) {
    Text("Article Title")
        .font(.headline)
    Text("Article content goes here...")
        .font(.body)
        .foregroundColor(.secondary)
}
.padding()

// ❌ Distracting UI
VStack(spacing: 8) {
    Text("Article Title")
        .font(.headline)
        .foregroundColor(.white)
        .background(.blue)
        .border(.red, width: 3)
}
```

### 3. Depth

**Visual layers and realistic motion convey hierarchy and help people understand relationships.**

Distinct visual layers and realistic motion impart vitality and facilitate understanding. Touch and discoverability heighten delight and enable access to functionality without losing context.

```swift
// ✅ Clear depth hierarchy
ZStack {
    Color(.systemBackground)

    VStack {
        // Card with elevation
        CardView()
            .shadow(radius: 8)
    }
}

// Using blur for depth
Text("Content")
    .background(.ultraThinMaterial)
```

## iOS UI Components

### Navigation Patterns

#### 1. Navigation Bar

**Top bar for navigation and actions.**

```swift
NavigationStack {
    List {
        Text("Item 1")
        Text("Item 2")
    }
    .navigationTitle("Title")
    .navigationBarTitleDisplayMode(.large)
    .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
            Button("Add") {
                // Action
            }
        }
    }
}
```

**Guidelines:**
- Use large titles for top-level views
- Use inline titles for detail views
- Keep actions relevant to current context
- Maximum 2-3 toolbar items

#### 2. Tab Bar

**Bottom navigation for top-level destinations.**

```swift
TabView {
    HomeView()
        .tabItem {
            Label("Home", systemImage: "house")
        }

    SearchView()
        .tabItem {
            Label("Search", systemImage: "magnifyingglass")
        }

    ProfileView()
        .tabItem {
            Label("Profile", systemImage: "person")
        }
}
```

**Guidelines:**
- 3-5 tabs maximum
- Use SF Symbols for icons
- Labels should be concise (one word)
- Never hide or disable tabs
- Don't use tab bar with toolbar in same view

#### 3. List

**Scrollable list of items.**

```swift
List {
    Section("Today")