Apple Hig Designer

Design Apple-style iOS/macOS interfaces following Human Interface Guidelines. Creates HIG-compliant components with SF Symbols, San Francisco typography, and proper accessibility. Supports optional modern effects. Use when designing Apple-style UI, iOS/macOS interfaces, HIG-compliant components, or implementing design system specifications.

212 stars 23 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add axiaoge2/Apple-Hig-Designer --skill apple-hig-designer
Manual install
git clone --depth 1 https://github.com/axiaoge2/Apple-Hig-Designer.git /tmp/Apple-Hig-Designer
mkdir -p ~/.claude/skills
cp -r /tmp/Apple-Hig-Designer/. ~/.claude/skills/apple-hig-designer

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Apple HIG Designer

A professional-grade frontend design skill that enables Claude Code to create interfaces following Apple's Human Interface Guidelines (HIG), achieving the quality standards of Apple's design team.

## When to Use This Skill

Activate this skill when users request:
- Apple-style or iOS/macOS-style interfaces
- HIG-compliant UI components
- SF Symbols integration
- San Francisco typography implementation
- Modern glass effects (optional, user must explicitly request)

**Trigger phrases:**
- "Design an Apple-style..."
- "Create a HIG-compliant..."
- "iOS/macOS style component"
- "苹果风格的界面"
- "符合 HIG 的设计"

---

## Core Design Principles

### The Four Pillars of Apple Design

1. **Clarity (清晰)**
   - Every element has a purpose
   - Eliminate unnecessary complexity
   - Users understand immediately without instructions
   - Use clear visual hierarchy

2. **Deference (尊重内容)**
   - UI elements support, not compete with content
   - Minimize chrome and visual noise
   - Let content be the hero
   - Use subtle backgrounds and borders

3. **Depth (层次)**
   - Create clear visual hierarchy through layers
   - Use shadows, blur, and translucency purposefully
   - Motion reinforces spatial relationships
   - Z-axis communicates importance

4. **Consistency (一致性)**
   - Familiar patterns across platforms
   - Predictable interactions
   - Unified visual language
   - Respect platform conventions

---

## Design System Specifications

### Typography System
Read the full skill on GitHub

Details

Skill name
apple-hig-designer
License
MIT
Repo updated
17 February 2026

FAQ

What does the Apple Hig Designer skill do?

Design Apple-style iOS/macOS interfaces following Human Interface Guidelines. Creates HIG-compliant components with SF Symbols, San Francisco typography, and proper accessibility. Supports optional modern effects. Use when designing Apple-style UI, iOS/macOS interfaces, HIG-compliant components, or implementing design system specifications.

How do I install the Apple Hig Designer skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add axiaoge2/Apple-Hig-Designer --skill apple-hig-designer. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Apple Hig Designer popular?

It lives in axiaoge2/Apple-Hig-Designer, which has 212 GitHub stars and 23 forks.

Related skills

Diorama

196

sloemo01/diorama

Use when building a pixel diorama in Three.js — one-prompt autonomous builds with staged systems, detailed props, real animation, and social/service choreography.

Frontend & Design15

2dimg2motion

239

WU-HAOTIAN34/2dimg2motion

Use when a user provides one baseline image and requests game animation frames, sprite sequences, attack/walk/idle/hit/death/casting motion, transparent PNG frames, a spritesheet, keyframe prompts, or consistent whole-character pose animation.

Frontend & Design11

Code Brand Film

181

nutllwhy/code-brand-film

Produce a short brand film or product promo (10-60s, typically 15s) entirely as code: one static HTML page with a paused GSAP timeline that a renderer seeks frame by frame, plus a music score synthesized in Python. Use when the user wants a 品牌宣传片, 广告片, 宣传动画, 产品短片, 发布会开场视频, brand film, promo video, product teaser, logo animation, or a generated ad spot — especially when they ask for 高级感 / 艺术感 / 电影感 / 别像模板, or when an existing video "looks like AI made it" or "too simple" and needs to be redone properly. Also use when a film already exists and needs a score, a soundtrack, background music, or 配乐

Frontend & Design23

Claude Design

213

jiji262/claude-design-skill

Produce thoughtful, high-fidelity design artifacts in HTML — landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visual explorations. Use whenever the user asks to design, mock up, prototype, visualize, storyboard, or explore UI options — including phrases like "make a deck", "design a landing page", "prototype this flow", "animate this concept", "build a pitch deck", "create a poster", "visualize this idea", or "design something for a brand". Enforces fact verification (WebSearch before assuming a product exists or its version), the Core Asset Protoco

Frontend & Design33

Blcaptain Style Skill

178

dososo/blcaptain-style-skill

当用户需要把内容(文章、笔记、截图、数据、产品说明)做成中文图文卡片组图时使用——小红书 / Rednote 3:4 竖图、公众号封面、社交卡。提供三套独家视觉语言(静纸 Still Paper本手记 / Signal Proof 证据层 / Bridge Canvas 跨平台桥),由 Claude 读懂内容、自己撰写 brief.json,交给确定性引擎渲染出第一眼惊艳、一眼可辨、国内开箱即用的图文组图。

Frontend & Design16

UX Writing

249

content-designer/ux-writing-skill

Create user-centered, accessible interface copy (microcopy) for digital products including buttons, labels, error messages, notifications, forms, onboarding, empty states, success messages, and help text. Use when writing or editing any text that appears in apps, websites, or software interfaces, designing conversational flows, establishing voice and tone guidelines, auditing product content for consistency and usability, reviewing UI strings, or improving existing interface copy. Applies UX writing best practices based on four quality standards — purposeful, concise, conversational, and clear

Frontend & Design28

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.