Apple Hig Designer
A Agent Skill for designing professional interfaces following Apple Human Interface Guidelines 一项用于设计苹果前端交互界面的代理技能
Install
git clone https://github.com/axiaoge2/Apple-Hig-DesignerInstall command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →Apple-Hig-Designer
Apple-Hig-Designer is used to create interfaces that conform to Apple Hig principles and blend with various styles.
📸 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
"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
🤝 Contributing
Contributions are welcome! Feel free to submit Issues and Pull Requests.
📄 License
Similar plugs
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local…
Why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman.
