Mobile Ios Design

by wshobson46891e7e60daNo licenseListed Oct 8, 2026Updated Oct 8, 2026

Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles.

Instructions onlyDesign & Creative Software Development

AI-generated overview

Guides iOS interface design and SwiftUI implementation using Apple's Human Interface Guidelines.

What it does: This skill provides guidance on Apple's Human Interface Guidelines and SwiftUI patterns for building native iOS apps. It covers stack and grid layouts, navigation with NavigationStack and TabView, SF Symbols, Dynamic Type, semantic colors and materials, shadows, and accessibility. It also lists best practices and common pitfalls such as layout, performance, navigation, dark mode, and accessibility issues.
When to use it: Use it when designing iOS interfaces, building SwiftUI views and layouts, implementing iOS navigation patterns, or making apps conform to Apple design principles. It also fits work on adaptive layouts, SF Symbols, system typography, accessibility, gestures, Dynamic Type, and Dark Mode.
Requirements: No scripts or special tooling are required; it is instructions and reference material only. The referenced SwiftUI code targets iOS 16 and later APIs, and applying it assumes an iOS development environment such as Xcode.

iOS Mobile Design

Master iOS Human Interface Guidelines (HIG) and SwiftUI patterns to build polished, native iOS applications that feel at home on Apple platforms.

When to Use This Skill

Designing iOS app interfaces following Apple HIG
Building SwiftUI views and layouts
Implementing iOS navigation patterns (NavigationStack, TabView, sheets)
Creating adaptive layouts for iPhone and iPad
Using SF Symbols and system typography
Building accessible iOS interfaces
Implementing iOS-specific gestures and interactions
Designing for Dynamic Type and Dark Mode

Core Concepts

1. Human Interface Guidelines Principles

Clarity: Content is legible, icons are precise, adornments are subtle Deference: UI helps users understand content without competing with it Depth: Visual layers and motion convey hierarchy and enable navigation

Platform Considerations:

iOS: Touch-first, compact displays, portrait orientation
iPadOS: Larger canvas, multitasking, pointer support
visionOS: Spatial computing, eye/hand input

2. SwiftUI Layout System

Stack-Based Layouts:

swift

// Vertical stack with alignmentVStack(alignment: .leading, spacing: 12) {    Text("Title")        .font(.headline)    Text("Subtitle")        .font(.subheadline)        .foregroundStyle(.secondary)}
// Horizontal stack with flexible spacingHStack {    Image(systemName: "star.fill")    Text("Featured")    Spacer()    Text("View All")        .foregroundStyle(.blue)}

// Vertical stack with alignmentVStack(alignment: .leading, spacing: 12) {    Text("Title")        .font(.headline)    Text("Subtitle")        .font(.subheadline)        .foregroundStyle(.secondary)}
// Horizontal stack with flexible spacingHStack {    Image(systemName: "star.fill")    Text("Featured")    Spacer()    Text("View All")        .foregroundStyle(.blue)}

Grid Layouts:

swift

// Adaptive grid that fills available widthLazyVGrid(columns: [    GridItem(.adaptive(minimum: 150, maximum: 200))], spacing: 16) {    ForEach(items) { item in        ItemCard(item: item)    }}
// Fixed column gridLazyVGrid(columns: [    GridItem(.flexible()),    GridItem(.flexible()),    GridItem(.flexible())], spacing: 12) {    ForEach(items) { item in        ItemThumbnail(item: item)    }}

// Adaptive grid that fills available widthLazyVGrid(columns: [    GridItem(.adaptive(minimum: 150, maximum: 200))], spacing: 16) {    ForEach(items) { item in        ItemCard(item: item)    }}
// Fixed column gridLazyVGrid(columns: [    GridItem(.flexible()),    GridItem(.flexible()),    GridItem(.flexible())], spacing: 12) {    ForEach(items) { item in        ItemThumbnail(item: item)    }}

3. Navigation Patterns

NavigationStack (iOS 16+):

swift

struct ContentView: View {    @State private var path = NavigationPath()
    var body: some View {        NavigationStack(path: $path) {            List(items) { item in                NavigationLink(value: item) {                    ItemRow(item: item)                }            }            .navigationTitle("Items")            .navigationDestination(for: Item.self) { item in                ItemDetailView(item: item)            }        }    }}

struct ContentView: View {    @State private var path = NavigationPath()
    var body: some View {        NavigationStack(path: $path) {            List(items) { item in                NavigationLink(value: item) {                    ItemRow(item: item)                }            }            .navigationTitle("Items")            .navigationDestination(for: Item.self) { item in                ItemDetailView(item: item)            }        }    }}

TabView (iOS 18+):

swift

struct MainTabView: View {    @State private var selectedTab = 0
    var body: some View {        TabView(selection: $selectedTab) {            Tab("Home", systemImage: "house", value: 0) {                HomeView()            }
            Tab("Search", systemImage: "magnifyingglass", value: 1) {                SearchView()            }
            Tab("Profile", systemImage: "person", value: 2) {                ProfileView()            }        }    }}

struct MainTabView: View {    @State private var selectedTab = 0
    var body: some View {        TabView(selection: $selectedTab) {            Tab("Home", systemImage: "house", value: 0) {                HomeView()            }
            Tab("Search", systemImage: "magnifyingglass", value: 1) {                SearchView()            }
            Tab("Profile", systemImage: "person", value: 2) {                ProfileView()            }        }    }}

4. System Integration

SF Symbols:

swift

// Basic symbolImage(systemName: "heart.fill")    .foregroundStyle(.red)
// Symbol with rendering modeImage(systemName: "cloud.sun.fill")    .symbolRenderingMode(.multicolor)
// Variable symbol (iOS 16+)Image(systemName: "speaker.wave.3.fill", variableValue: volume)
// Symbol effect (iOS 17+)Image(systemName: "bell.fill")    .symbolEffect(.bounce, value: notificationCount)

// Basic symbolImage(systemName: "heart.fill")    .foregroundStyle(.red)
// Symbol with rendering modeImage(systemName: "cloud.sun.fill")    .symbolRenderingMode(.multicolor)
// Variable symbol (iOS 16+)Image(systemName: "speaker.wave.3.fill", variableValue: volume)
// Symbol effect (iOS 17+)Image(systemName: "bell.fill")    .symbolEffect(.bounce, value: notificationCount)

Dynamic Type:

swift

// Use semantic fontsText("Headline")    .font(.headline)
Text("Body text that scales with user preferences")    .font(.body)
// Custom font that respects Dynamic TypeText("Custom")    .font(.custom("Avenir", size: 17, relativeTo: .body))

// Use semantic fontsText("Headline")    .font(.headline)
Text("Body text that scales with user preferences")    .font(.body)
// Custom font that respects Dynamic TypeText("Custom")    .font(.custom("Avenir", size: 17, relativeTo: .body))

5. Visual Design

Colors and Materials:

swift

// Semantic colors that adapt to light/dark modeText("Primary")    .foregroundStyle(.primary)Text("Secondary")    .foregroundStyle(.secondary)
// System materials for blur effectsRectangle()    .fill(.ultraThinMaterial)    .frame(height: 100)
// Vibrant materials for overlaysText("Overlay")    .padding()    .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 12))

// Semantic colors that adapt to light/dark modeText("Primary")    .foregroundStyle(.primary)Text("Secondary")    .foregroundStyle(.secondary)
// System materials for blur effectsRectangle()    .fill(.ultraThinMaterial)    .frame(height: 100)
// Vibrant materials for overlaysText("Overlay")    .padding()    .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 12))

Shadows and Depth:

swift

// Standard card shadowRoundedRectangle(cornerRadius: 16)    .fill(.background)    .shadow(color: .black.opacity(0.1), radius: 8, y: 4)
// Elevated appearance.shadow(radius: 2, y: 1).shadow(radius: 8, y: 4)

// Standard card shadowRoundedRectangle(cornerRadius: 16)    .fill(.background)    .shadow(color: .black.opacity(0.1), radius: 8, y: 4)
// Elevated appearance.shadow(radius: 2, y: 1).shadow(radius: 8, y: 4)

Quick Start Component

swift

import SwiftUI
struct FeatureCard: View {    let title: String    let description: String    let systemImage: String
    var body: some View {        HStack(spacing: 16) {            Image(systemName: systemImage)                .font(.title)                .foregroundStyle(.blue)                .frame(width: 44, height: 44)                .background(.blue.opacity(0.1), in: Circle())
            VStack(alignment: .leading, spacing: 4) {                Text(title)                    .font(.headline)                Text(description)                    .font(.subheadline)                    .foregroundStyle(.secondary)                    .lineLimit(2)            }
            Spacer()
            Image(systemName: "chevron.right")                .foregroundStyle(.tertiary)        }        .padding()        .background(.background, in: RoundedRectangle(cornerRadius: 12))        .shadow(color: .black.opacity(0.05), radius: 4, y: 2)    }}

import SwiftUI
struct FeatureCard: View {    let title: String    let description: String    let systemImage: String
    var body: some View {        HStack(spacing: 16) {            Image(systemName: systemImage)                .font(.title)                .foregroundStyle(.blue)                .frame(width: 44, height: 44)                .background(.blue.opacity(0.1), in: Circle())
            VStack(alignment: .leading, spacing: 4) {                Text(title)                    .font(.headline)                Text(description)                    .font(.subheadline)                    .foregroundStyle(.secondary)                    .lineLimit(2)            }
            Spacer()
            Image(systemName: "chevron.right")                .foregroundStyle(.tertiary)        }        .padding()        .background(.background, in: RoundedRectangle(cornerRadius: 12))        .shadow(color: .black.opacity(0.05), radius: 4, y: 2)    }}

Best Practices

Use Semantic Colors: Always use .primary, .secondary, .background for automatic light/dark mode support
Embrace SF Symbols: Use system symbols for consistency and automatic accessibility
Support Dynamic Type: Use semantic fonts (.body, .headline) instead of fixed sizes
Add Accessibility: Include .accessibilityLabel() and .accessibilityHint() modifiers
Use Safe Areas: Respect safeAreaInset and avoid hardcoded padding at screen edges
Implement State Restoration: Use @SceneStorage for preserving user state
Support iPad Multitasking: Design for split view and slide over
Test on Device: Simulator doesn't capture full haptic and performance experience

Common Issues

Layout Breaking: Use .fixedSize() sparingly; prefer flexible layouts
Performance Issues: Use LazyVStack/LazyHStack for long scrolling lists
Navigation Bugs: Ensure NavigationLink values are Hashable
Dark Mode Problems: Avoid hardcoded colors; use semantic or asset catalog colors
Accessibility Failures: Test with VoiceOver enabled
Memory Leaks: Watch for strong reference cycles in closures

Source and attribution

Source:wshobson/agentsinplugins/ui-design/skills/mobile-ios-designat commit46891e7

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Mobile Ios Design

iOS Mobile Design

When to Use This Skill

Core Concepts

1. Human Interface Guidelines Principles

2. SwiftUI Layout System

3. Navigation Patterns

4. System Integration

5. Visual Design

Quick Start Component

Best Practices

Common Issues

Source and attribution

More from wshobson/agents

Uv Package Manager

Web Component Design

Python Type Safety

Visual Design Foundations

Responsive Design

Python Resource Management

More in Design & Creative

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Playground