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.

// ✅ 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.

// ✅ 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.

// ✅ 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.

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.

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.

List {
    Section("Today") {
        ForEach(items) { item in
            NavigationLink {
                DetailView(item: item)
            } label: {
                HStack {
                    Image(systemName: item.icon)
                        .foregroundColor(.accentColor)
                    Text(item.title)
                }
            }
        }
    }
}
.listStyle(.insetGrouped)

List Styles:

• .plain - Edge-to-edge rows
• .insetGrouped - Rounded, inset sections (iOS default)
• .sidebar - For navigation sidebars

4. Sheet (Modal)

Present content modally.

struct ContentView: View {
    @State private var showSheet = false

    var body: some View {
        Button("Show Details") {
            showSheet = true
        }
        .sheet(isPresented: $showSheet) {
            DetailView()
                .presentationDetents([.medium, .large])
        }
    }
}

Sheet Detents:

• .medium - Half screen
• .large - Full screen
• Custom heights available

Form Controls

1. Button

Primary action control.

// Filled button (primary action)
Button("Continue") {
    // Action
}
.buttonStyle(.borderedProminent)

// Bordered button (secondary action)
Button("Cancel") {
    // Action
}
.buttonStyle(.bordered)

how to use apple-hig-designer
CursorClaude CodeClineCodexWindsurfGooseGitHub CopilotVS CodeGemini CLIKiloOpencodeKimi CLIRoo ClineAiderContinueZedBolt.newLovablev0Replit AgentSweepSmol DeveloperDevinCavemanAmpAntigravity
How to use apple-hig-designer on Cursor
AI-first code editor with Composer
1
Prerequisites
Before installing skills in Cursor, ensure your development environment meets these requirements:
›Cursor installed and configured on your development machine
›Node.js version 16.0+ with npm package manager (verify with node --version)
›Active project directory or workspace where you want to add apple-hig-designer
2
Execute installation command
Execute the skills CLI command in your project's root directory to begin installation:
$npx skills add https://github.com/jamesrochabrun/skills --skill apple-hig-designercopy
The skills CLI fetches apple-hig-designer from GitHub repository jamesrochabrun/skills and configures it for Cursor.
3
Select Cursor when prompted
The CLI will show a list of available agents. Use arrow keys to navigate and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ── always included ────
│   • Amp
│   • Antigravity
│   • Cline
│   • Codex
│ ●Cursor(selected)
│   • Cursor
│   • Windsurf
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/apple-hig-designer
Reload or restart Cursor to activate apple-hig-designer. Access the skill through slash commands (e.g., /apple-hig-designer) or your agent's skill management interface.
⚠
Security & Verification Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your development environment. Always verify the publisher's identity, review recent commits, and test in isolated environments before production deployment.
Additional Resources
›View source code on GitHub›Skills CLI documentation›Learn more about Cursor›What are agent skills?