Apple Hig Designer

Apple-Hig-Designer is used to create interfaces that conform to Apple Hig principles and blend with various styles.

English | 简体中文

---

📸 Basic effect demonstration:

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."

Vercel: https://fashion-editorial.vercel.app/

🎯 Overview

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

📦 Installation

Method 1: User-level Installation (Recommended)

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/

Method 2: Project-level Installation

Copy to your project's .claude/skills directory:

mkdir -p .claude/skills
cp -r apple-hig-designer .claude/skills/

🚀 Usage

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?"

📁 File Structure

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

🎨 Features

| 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 |

📚 Resources

• Apple Human Interface Guidelines
• Apple Design Resources
• SF Symbols

🤝 Contributing

Contributions are welcome! Feel free to submit Issues and Pull Requests.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---