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

1. Deference (尊重内容)

• UI elements support, not compete with content
• Minimize chrome and visual noise
• Let content be the hero
• Use subtle backgrounds and borders

1. Depth (层次)

• Create clear visual hierarchy through layers
• Use shadows, blur, and translucency purposefully
• Motion reinforces spatial relationships
• Z-axis communicates importance

1. Consistency (一致性)

• Familiar patterns across platforms
• Predictable interactions
• Unified visual language
• Respect platform conventions

---

Design System Specifications

Typography System

Font Family: San Francisco (SF Pro)

/* 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 ): navigates to subview
• Grouped style: 10px border-radius, inset separators start at 60px

---

Animation Guidelines

Timing Functions

:root {
  /* Apple's preferred easing */
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in: cubic-bezier(0.42, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);

  /* Spring-like easing */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

Duration Scale

:root {
  --duration-instant: 100ms;  /* Micro-interactions */
  --duration-fast: 200ms;     /* Hover, focus states */
  --duration-normal: 300ms;   /* Standard transitions */
  --duration-slow: 500ms;     /* Complex animations */
}

Interaction Feedback

/* Press feedback */
.interactive {
  transition: transform var(--duration-instant) var(--ease-out);
}

.interactive:active {
  transform: scale(0.97);
}

/* Hover glow */
.interactive:hover {
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15);
}

---

SF Symbols Integration

Rendering Modes

1. Monochrome: Single color for all layers
2. Hierarchical: Opacity variations for depth
3. Palette: Custom colors per layer
4. Multicolor: Apple's intrinsic symbol colors

Usage Guidelines

• Toolbar/Navigation: Use outline variant
• Tab Bar: Use fill variant
• Match text size: Symbols auto-align with SF font
• Provide text alternatives: Always include aria-label

Web Implementation (Icon Font Alternative)

􀣋

  

---

Accessibility Requirements

Color Contrast

• Normal text: 4.5:1 minimum (WCAG AA)
• Large text: 3:1 minimum
• Interactive elements: Clearly distinguishable states

Motion

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Semantic HTML

Action
...
...

---

Output Format

When generating Apple-style UI code, always include:

1. Complete, runnable code (CSS/React/Vue)
2. Light/Dark mode support via CSS custom properties
3. Design rationale explaining HIG compliance
4. Responsive breakpoints for different devices
5. Accessibility attributes (aria-*, role, etc.)

Default Behavior

• Use solid backgrounds by default for better readability
• Glass/blur effects only when user explicitly requests
• Always provide non-glass fallback for browsers without backdrop-filter support

Example Output Structure

/**
 * Apple HIG Compliant Component
 *
 * Design Decisions:
 * - Uses SF Pro system font stack for native feel
 * - 44pt minimum touch target for accessibility
 * - Capsule shape for primary actions (HIG recommendation)
 * - Solid background for optimal readability
 * - Supports prefers-color-scheme for auto theming
 */

const AppleButton = ({ children, variant = 'primary', ...props }) => {
  return (
    
      {children}
    
  );
};

---

Best Practices Checklist

Before finalizing any design output, verify:

• [ ] Typography: Using SF Pro with correct size thresholds
• [ ] Colors: System colors with Light/Dark variants
• [ ] Spacing: Following 8pt grid
• [ ] Touch targets: Minimum 44×44pt
• [ ] Border radius: Concentric relationships maintained
• [ ] Animations: Using Apple-standard easing curves
• [ ] Accessibility: WCAG AA compliant, reduced motion support
• [ ] Consistency: Matches platform conventions
• [ ] Backgrounds: Solid by default, glass only when requested

---

Additional Resources

Local References (read these for detailed implementations)

• For complete design patterns and real-world examples, see [REFERENCE.md](REFERENCE.md)
• For CSS custom properties and design tokens, see [resources/design-tokens.css](resources/design-tokens.css)
• For React component templates, see [resources/components.jsx](resources/components.jsx)
• For detailed UI pattern documentation, see [resources/ui-patterns.md](resources/ui-patterns.md)

External References

• Apple Human Interface Guidelines
• Apple Design Resources
• SF Symbols
• Apple Fonts

---

This skill ensures Claude Code produces interfaces that meet Apple's exacting design standards, creating cohesive, accessible, and beautiful user experiences.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: axiaoge2
• Source: axiaoge2/Apple-Hig-Designer
• License: MIT

Install and usage instructions live in the source repository linked above.