Apple-Hig-Designer is used to create interfaces that conform to Apple Hig principles and blend with various styles.
Single page design
"Creating iOS Page Transition Animations"
"Design a Mac-style chat page for web use."
"Please use your apple-hig-designer skills to choose a suitable framework and develop a complete responsive front-end project that incorporates a luxury brand aesthetic."
This apple-hig-designer enables you to design professional web and mobile interfaces that follow Apple's Human Interface Guidelines. It provides comprehensive knowledge about:
- SF Pro Typography system
- Apple System Colors with light/dark mode support
- 8pt Grid Spacing System
- Component Patterns (buttons, cards, inputs, etc.)
- Animation Guidelines with Apple-standard easing curves
Copy the skill to your Claude Code skills directory:
# Windows
xcopy /E /I "apple-hig-designer" "%USERPROFILE%\.claude\skills\apple-hig-designer"
# macOS / Linux
cp -r apple-hig-designer ~/.claude/skills/Copy to your project's .claude/skills directory:
mkdir -p .claude/skills
cp -r apple-hig-designer .claude/skills/After installation, Claude Code will automatically activate this skill when you perform the following actions:
Basic usage: Please tell Claude Code that you want to use apple-hig-designer.
Example
- "Design an Apple-style..."
- "Create a HIG-compliant..."
- "iOS-style components"
Advanced usage: Integrate apple-hig-designer with other styles, using apple-hig-designer as the basic design framework.
Example
"Using your apple-hig-designer skills and a cyberpunk aesthetic, could you help me develop a robot showcase page?"
"Using apple-hig-designer skills to blend other styles, how would you recommend a style for developing a blog-themed website?"
apple-hig-designer/
├── SKILL.md # Main skill definition
├── REFERENCE.md # Detailed HIG reference documentation
├── README.md # English documentation
├── README_CN.md # Chinese documentation
├── LICENSE # MIT License
└── resources/
├── components.jsx # React component examples
├── design-tokens.css # CSS custom properties
└── ui-patterns.md # UI pattern documentation
| Feature | Description |
|---|---|
| Typography | SF Pro font system with proper size thresholds |
| Colors | Complete Apple system color palette |
| Spacing | 8pt grid system implementation |
| Components | Buttons, cards, inputs, glass panels |
| Animations | Apple-standard cubic-bezier easing |
| Accessibility | WCAG AA compliant, reduced motion support |
| Dark Mode | Full light/dark mode support |
Contributions are welcome! Feel free to submit Issues and Pull Requests.
This project is licensed under the MIT License - see the LICENSE file for details.