Design Apple-style iOS/macOS interfaces following Human Interface Guidelines. Creates HIG-compliant components with SF Symbols, San Francisco typography, and proper accessibility.
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.
Activate this skill when users request:
Trigger phrases:
Clarity (清晰)
Deference (尊重内容)
Depth (层次)
Consistency (一致性)
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:
/* 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;
}
}
8pt Grid System:
: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:
: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 */
The following components should follow Apple HIG conventions. For complete CSS implementations, see resources/design-tokens.css and resources/ui-patterns.md. For React component examples, see resources/components.jsx.
border-radius: 9999px), min-height: 44px, system-blue background, white text, 600 weightrgba(0, 122, 255, 0.1) backgroundscale(0.98) on :activebackdrop-filter: blur(20px) saturate(180%) with semi-transparent background--bg-tertiary), border-radius: 16px, subtle box-shadow--bg-secondary outer with --bg-tertiary inner items, separated by --separatormin-height: 44px, --bg-secondary background, border-radius: 12pxbox-shadow: 0 0 0 4px rgba(0, 122, 255, 0.3)height: 49px + safe-area padding.prominent style on trailing sidelarge (100%), medium (50%)rgba(0,0,0,0.4)border-radius: 14px: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);
}
:root {
--duration-instant: 100ms; /* Micro-interactions */
--duration-fast: 200ms; /* Hover, focus states */
--duration-normal: 300ms; /* Standard transitions */
--duration-slow: 500ms; /* Complex animations */
}
/* 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);
}
<!-- Using SF Symbols via system font -->
<span class="sf-symbol" aria-label="Settings"></span>
<!-- Or use equivalent system icons -->
<svg class="icon" aria-hidden="true">
<use href="#icon-gear"></use>
</svg>
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
<!-- Always use semantic elements -->
<button type="button">Action</button>
<nav aria-label="Main navigation">...</nav>
<main role="main">...</main>
When generating Apple-style UI code, always include:
/**
* 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 (
<button
className={`btn btn-${variant}`}
{...props}
>
{children}
</button>
);
};
Before finalizing any design output, verify:
This skill ensures Claude Code produces interfaces that meet Apple's exacting design standards, creating cohesive, accessible, and beautiful user experiences.