---
id: sm-mobile-ios-design
name: "mobile-ios-design"
url: https://skills.yangsir.net/skill/sm-mobile-ios-design
author: wshobson
domain: mobile
tags: ["ios-design", "ui/ux", "apple-human-interface-guidelines", "mobile-ui", "figma/sketch"]
install_count: 15500
rating: 4.50 (316 reviews)
github: https://github.com/wshobson/agents
---

# mobile-ios-design

> 专注于iOS移动应用设计，结合智能自动化和多智能体编排，优化设计流程，提升用户体验和开发效率。

**Stats**: 15,500 installs · 4.5/5 (316 reviews)

## Before / After 对比

### 移动iOS设计自动化，提升用户体验

## Readme

# mobile-ios-design

# 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:**

```
// Vertical stack with alignment
VStack(alignment: .leading, spacing: 12) {
    Text("Title")
        .font(.headline)
    Text("Subtitle")
        .font(.subheadline)
        .foregroundStyle(.secondary)
}

// Horizontal stack with flexible spacing
HStack {
    Image(systemName: "star.fill")
    Text("Featured")
    Spacer()
    Text("View All")
        .foregroundStyle(.blue)
}

```

**Grid Layouts:**

```
// Adaptive grid that fills available width
LazyVGrid(columns: [
    GridItem(.adaptive(minimum: 150, maximum: 200))
], spacing: 16) {
    ForEach(items) { item in
        ItemCard(item: item)
    }
}

// Fixed column grid
LazyVGrid(columns: [
    GridItem(.flexible()),
    GridItem(.flexible()),
    GridItem(.flexible())
], spacing: 12) {
    ForEach(items) { item in
        ItemThumbnail(item: item)
    }
}

```

### 3. Navigation Patterns

**NavigationStack (iOS 16+):**

```
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+):**

```
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:**

```
// Basic symbol
Image(systemName: "heart.fill")
    .foregroundStyle(.red)

// Symbol with rendering mode
Image(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:**

```
// Use semantic fonts
Text("Headline")
    .font(.headline)

Text("Body text that scales with user preferences")
    .font(.body)

// Custom font that respects Dynamic Type
Text("Custom")
    .font(.custom("Avenir", size: 17, relativeTo: .body))

```

### 5. Visual Design

**Colors and Materials:**

```
// Semantic colors that adapt to light/dark mode
Text("Primary")
    .foregroundStyle(.primary)
Text("Secondary")
    .foregroundStyle(.secondary)

// System materials for blur effects
Rectangle()
    .fill(.ultraThinMaterial)
    .frame(height: 100)

// Vibrant materials for overlays
Text("Overlay")
    .padding()
    .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 12))

```

**Shadows and Depth:**

```
// Standard card shadow
RoundedRectangle(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

```
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

Weekly Installs6.9KRepository[wshobson/agents](https://github.com/wshobson/agents)GitHub Stars31.5KFirst SeenJan 20, 2026Security Audits[Gen Agent Trust HubPass](/wshobson/agents/mobile-ios-design/security/agent-trust-hub)[SocketPass](/wshobson/agents/mobile-ios-design/security/socket)[SnykPass](/wshobson/agents/mobile-ios-design/security/snyk)Installed onclaude-code5.1Kopencode4.8Kgemini-cli4.7Kcodex4.7Kcursor4.2Kgithub-copilot4.1K

---
*Source: https://skills.yangsir.net/skill/sm-mobile-ios-design*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-mobile-ios-design/markdown*