# Apple Hig Designer

> Design Apple-style iOS/macOS interfaces following Human Interface Guidelines. Creates HIG-compliant components with SF Symbols, San Francisco typography, and proper accessibility. Supports optional modern effects. Use when designing Apple-style UI, iOS/macOS interfaces, HIG-compliant components, or implementing design system specifications.

- **Type:** Skill
- **Install:** `agentstack add skill-axiaoge2-apple-hig-designer-apple-hig-designer`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [axiaoge2](https://agentstack.voostack.com/s/axiaoge2)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [axiaoge2](https://github.com/axiaoge2)
- **Source:** https://github.com/axiaoge2/Apple-Hig-Designer

## Install

```sh
agentstack add skill-axiaoge2-apple-hig-designer-apple-hig-designer
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

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

---

## Animation Guidelines

### Timing Functions

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

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

### Interaction Feedback

```css
/* 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)

```html

􀣋

  

```

---

## Accessibility Requirements

### Color Contrast
- **Normal text:** 4.5:1 minimum (WCAG AA)
- **Large text:** 3:1 minimum
- **Interactive elements:** Clearly distinguishable states

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

### Semantic HTML
```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

```jsx
/**
 * 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](https://developer.apple.com/design/human-interface-guidelines)
- [Apple Design Resources](https://developer.apple.com/design/resources/)
- [SF Symbols](https://developer.apple.com/sf-symbols/)
- [Apple Fonts](https://developer.apple.com/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](https://github.com/axiaoge2)
- **Source:** [axiaoge2/Apple-Hig-Designer](https://github.com/axiaoge2/Apple-Hig-Designer)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-axiaoge2-apple-hig-designer-apple-hig-designer
- Seller: https://agentstack.voostack.com/s/axiaoge2
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.