README.md

February 17, 2026 · View on GitHub

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"

Page Transitions

"Design a Mac-style chat page for web use."

macOS Chat

📸Style fusion design:

"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