AI SummaryA 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: 2. Deference (尊重内容)
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "apple-hig-designer" skill in my project. Please run this command in my terminal: # Install skill into your project mkdir -p .claude/skills/Apple-Hig-Designer && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/Apple-Hig-Designer/SKILL.md "https://raw.githubusercontent.com/axiaoge2/Apple-Hig-Designer/main/SKILL.md" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
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.
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
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 的设计" ---
The Four Pillars of Apple Design
• Clarity (清晰) • Every element has a purpose • Eliminate unnecessary complexity • Users understand immediately without instructions • Use clear visual hierarchy • Deference (尊重内容) • UI elements support, not compete with content • Minimize chrome and visual noise • Let content be the hero • Use subtle backgrounds and borders • Depth (层次) • Create clear visual hierarchy through layers • Use shadows, blur, and translucency purposefully • Motion reinforces spatial relationships • Z-axis communicates importance • Consistency (一致性) • Familiar patterns across platforms • Predictable interactions • Unified visual language • Respect platform conventions ---
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster