Apple Hig Designer
Ship iOS and macOS screens that follow Apple Human Interface Guidelines with the right typography, symbols, and accessibility defaults.
Overview
Apple HIG Designer is an agent skill for the Build phase that produces Human Interface Guidelines–compliant iOS and macOS interface and component specifications.
Install
npx skills add https://github.com/axiaoge2/apple-hig-designer --skill apple-hig-designerWhat is this skill?
- Maps UI work to Apple Human Interface Guidelines patterns for iOS and macOS
- Specifies San Francisco typography scale and SF Symbols usage
- Embeds VoiceOver and Dynamic Type accessibility expectations in component guidance
- Supports optional modern visual effects without breaking HIG structure
- Produces design-system-ready component descriptions agents can implement
Adoption & trust: 1 installs on skills.sh; 121 GitHub stars; 3/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
What problem does it solve?
You want an Apple-native app but your agent keeps suggesting layouts, icons, and type that will feel off-platform or fail accessibility review.
Who is it for?
Indie developers building or polishing iOS/macOS apps who need consistent HIG language in agent-generated UI work.
Skip if: Teams targeting only web or Android Material UI, or when you already have a locked, audited design system with no Apple surface.
When should I use this skill?
Designing Apple-style UI, iOS/macOS interfaces, HIG-compliant components, or implementing design system specifications.
What do I get? / Deliverables
You get HIG-aligned screen and component specs with typography, SF Symbols, and accessibility notes ready to hand to implementation.
- HIG-oriented screen or component specification
- Typography and symbol usage notes
- Accessibility checklist for the proposed UI
Recommended Skills
Journey fit
Interface design and HIG-compliant component specs happen while you are building the product UI, before or alongside implementation. Frontend build work is where Apple-style layout, SF Symbols usage, and accessibility labels get defined for SwiftUI or cross-platform targets.
How it compares
Use for Apple platform HIG fidelity instead of generic "make it pretty" UI prompts that ignore SF Symbols and accessibility.
Common Questions / FAQ
Who is apple-hig-designer for?
Solo and indie builders shipping on Apple platforms who want agent help that respects Human Interface Guidelines rather than generic web UI patterns.
When should I use apple-hig-designer?
During Build frontend work when designing new screens, navigation, or components; also when validating that a prototype matches HIG before Ship and App Store review prep.
Is apple-hig-designer safe to install?
It is design guidance only—review the Security Audits panel on this Prism page and the skill source before installing any third-party skill in your agent.
SKILL.md
READMESKILL.md - Apple Hig Designer
MIT License Copyright (c) 2024 Apple HIG Designer Contributors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. --- name: apple-hig-designer 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. --- # 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 Col