apple-hig-designer

# Apple HIG Designer

A professional-grade frontend design skill that enables Claude Code to create interfaces following Apple's Human Interface Guidelines (HIG), achieving the quality standards of Apple's design team.

## When to Use This Skill

Activate this skill when users request:
- Apple-style or iOS/macOS-style interfaces
- HIG-compliant UI components
- SF Symbols integration
- San Francisco typography implementation
- Modern glass effects (optional, user must explicitly request)

**Trigger phrases:**
- "Design an Apple-style..."
- "Create a HIG-compliant..."
- "iOS/macOS style component"
- "苹果风格的界面"
- "符合 HIG 的设计"

---

## Core Design Principles

### The Four Pillars of Apple Design

1. **Clarity (清晰)**
   - Every element has a purpose
   - Eliminate unnecessary complexity
   - Users understand immediately without instructions
   - Use clear visual hierarchy

2. **Deference (尊重内容)**
   - UI elements support, not compete with content
   - Minimize chrome and visual noise
   - Let content be the hero
   - Use subtle backgrounds and borders

3. **Depth (层次)**
   - Create clear visual hierarchy through layers
   - Use shadows, blur, and translucency purposefully
   - Motion reinforces spatial relationships
   - Z-axis communicates importance

4. **Consistency (一致性)**
   - Familiar patterns across platforms
   - Predictable interactions
   - Unified visual language
   - Respect platform conventions

---

## Design System Specifications

### Typography System

**Font Family:** San Francisco (SF Pro)

```css
/* System Font Stack for Web */
:root {
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', SFMono-Regular, Menlo, Monaco, monospace;
}

/* Font Size Scale (iOS) */
--text-caption2: 11px;    /* Caption 2 */
--text-caption1: 12px;    /* Caption 1 */
--text-footnote: 13px;    /* Footnote */
--text-subhead: 15px;     /* Subheadline */
--text-body: 17px;        /* Body - Default */
--text-headline: 17px;    /* Headline (semibold) */
--text-title3: 20px;      /* Title 3 */
--text-title2: 22px;      /* Title 2 */
--text-title1: 28px;      /* Title 1 */
--text-large-title: 34px; /* Large Title */
```

**Typography Rules:**
- Use SF Pro Display for sizes ≥ 20pt
- Use SF Pro Text for sizes < 20pt
- Maintain consistent line-height (1.2-1.5)
- Use weight for hierarchy, not just size

### Color System

```css
/* Apple System Colors - Light Mode */
:root {
  /* Primary Colors */
  --system-blue: #007AFF;
  --system-green: #34C759;
  --system-indigo: #5856D6;
  --system-orange: #FF9500;
  --system-pink: #FF2D55;
  --system-purple: #AF52DE;
  --system-red: #FF3B30;
  --system-teal: #5AC8FA;
  --system-yellow: #FFCC00;

  /* Gray Scale */
  --system-gray: #8E8E93;
  --system-gray2: #AEAEB2;
  --system-gray3: #C7C7CC;
  --system-gray4: #D1D1D6;
  --system-gray5: #E5E5EA;
  --system-gray6: #F2F2F7;

  /* Semantic Colors */
  --label-primary: #000000;
  --label-secondary: rgba(60, 60, 67, 0.6);
  --label-tertiary: rgba(60, 60, 67, 0.3);
  --label-quaternary: rgba(60, 60, 67, 0.18);

  /* Backgrounds */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F2F2F7;
  --bg-tertiary: #FFFFFF;

  /* Separators */
  --separator: rgba(60, 60, 67, 0.29);
  --separator-opaque: #C6C6C8;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --system-blue: #0A84FF;
    --system-green: #30D158;
    --system-indigo: #5E5CE6;
    --system-orange: #FF9F0A;
    --system-pink: #FF375F;
    --system-purple: #BF5AF2;
    --system-red: #FF453A;
    --system-teal: #64D2FF;
    --system-yellow: #FFD60A;

    --system-gray: #8E8E93;
    --system-gray2: #636366;
    --system-gray3: #48484A;
    --system-gray4: #3A3A3C;
    --system-gray5: #2C2C2E;
    --system-gray6: #1C1C1E;

    --label-primary: #FFFFFF;
    --label-secondary: rgba(235, 235, 245, 0.6);
    --label-tertiary: rgba(235, 235, 245, 0.3);
    --label-quaternary: rgba(235, 235, 245, 0.18);

    --bg-primary: #000000;
    --bg-secondary: #1C1C1E;
    --bg-tertiary: #2C2C2E;

    --separator: rgba(84, 84, 88, 0.6);
    --separator-opaque: #38383A;
  }
}
```

### Spacing System

**8pt Grid System:**
```css
:root {
  --space-1: 4px;   /* Extra small */
  --space-2: 8px;   /* Small */
  --space-3: 12px;  /* Medium-small */
  --space-4: 16px;  /* Medium */
  --space-5: 20px;  /* Medium-large */
  --space-6: 24px;  /* Large */
  --space-8: 32px;  /* Extra large */
  --space-10: 40px; /* 2X large */
  --space-12: 48px; /* 3X large */
}
```

**Touch Target Requirements:**
- **iOS:** Minimum 44×44 points
- **visionOS:** Minimum 60 points tap area
- Always add sufficient padding for small visual elements

### Border Radius (Concentric Design)

```css
:root {
  /* Base radius values */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px; /* Capsule */
}

/* Concentric Rule: inner_radius + padding = outer_radius */
/* Example: 8px inner + 8px padding = 16px outer */
```

---

## Component Patterns

The following components should follow Apple HIG conventions. For complete CSS implementations, see [resources/design-tokens.css](resources/design-tokens.css) and [resources/ui-patterns.md](resources/ui-patterns.md). For React component examples, see [resources/components.jsx](resources/components.jsx).

### Buttons
- **Primary:** Capsule shape (`border-radius: 9999px`), `min-height: 44px`, system-blue background, white text, 600 weight
- **Secondary:** Same capsule shape, system-blue text on `rgba(0, 122, 255, 0.1)` background
- **Press feedback:** `scale(0.98)` on `:active`

### Glass Effect (Optional - Only When Requested)
- **Only use when user explicitly requests** glass/frosted effects
- Default designs should use solid backgrounds for readability and performance
- `backdrop-filter: blur(20px) saturate(180%)` with semi-transparent background
- Always provide non-glass fallback

###