Apple-Hig-Designer

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

[English](README.md) | [简体中文](README_CN.md)

---

📸 Basic effect demonstration:

Single page design

"Creating iOS Page Transition Animations"

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

📸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

...