Official Verified

apple-hig

Apple Human Interface Guidelines 实战参考。涵盖 macOS/iOS 设计规范、System Colors、排版层级、控件规格、布局间距、Dark Mode 适配、辅助功能和平台差异。适用于开发 macOS 桌面应用（Electron/SwiftUI/AppKit）和 iOS 应用时的 UI 设计决策。

skill-install — Terminal

Install via CLI (Recommended)

clawhub install openclaw/skills/skills/bingfoon/apple-hig

Download Source Code (.zip)

Apple Human Interface Guidelines 实战参考

从 Apple 官方 HIG 和生产级桌面应用实战中提炼的设计规范速查。

适用场景

macOS 桌面应用 UI 设计（Electron / SwiftUI / AppKit）
iOS 应用 UI 设计
需要"原生感"的跨平台应用
审计现有 UI 是否符合 Apple 设计语言

不适用

Android / Windows 应用（参考 Material Design / Fluent Design）
Web 专属设计（不追求 native 感）

1. 核心设计原则

Apple HIG 的三大支柱：

原则	含义	实践
Clarity（清晰）	文字可读、图标清晰、功能一目了然	用 SF 字体、标准图标、足够对比度
Deference（顺从）	UI 服务内容，不喧宾夺主	减少装饰、留白充足、动画克制
Depth（层次）	通过视觉层级传达结构	阴影、模糊、动画暗示前后关系

与其他平台的根本区别

Apple: 做减法，每一个像素都要有理由
Material: 做加法，用动效和色彩引导注意力
Fluent: 做透明，用 Acrylic/Mica 融入环境

2. 颜色系统

Apple System Colors

这些颜色在 Light/Dark 模式下自动适配，优先使用：

颜色	Light HEX	Dark HEX	用途
Blue	`#007AFF`	`#0A84FF`	主强调色、链接、可交互元素
Green	`#34C759`	`#30D158`	成功、确认
Orange	`#FF9500`	`#FF9F0A`	警告
Red	`#FF3B30`	`#FF453A`	错误、危险操作、删除
Purple	`#AF52DE`	`#BF5AF2`	辅助强调
Teal	`#5AC8FA`	`#64D2FF`	次要信息
Yellow	`#FFCC00`	`#FFD60A`	注意
Pink	`#FF2D55`	`#FF375F`	情感、收藏
Indigo	`#5856D6`	`#5E5CE6`	特殊强调

语义色

用途	Light	Dark
Label（主文字）	`#000000`	`#FFFFFF`
Secondary Label	`rgba(0,0,0,0.5)`	`rgba(255,255,255,0.55)`
Tertiary Label	`rgba(0,0,0,0.25)`	`rgba(255,255,255,0.25)`
Quaternary Label	`rgba(0,0,0,0.1)`	`rgba(255,255,255,0.1)`
Separator	`rgba(0,0,0,0.1)`	`rgba(255,255,255,0.1)`
Background（窗口）	`#FFFFFF`	`#1E1E1E`
Secondary BG	`#F5F5F5`	`#2C2C2E`
Tertiary BG	`#FFFFFF`	`#3A3A3C`

使用原则

✅ 用 System Colors 做交互元素的强调色
✅ 用语义色做文字、背景、分隔线
❌ 不要硬编码 #007AFF — 在 Dark Mode 下它应该变成 #0A84FF
❌ 不要用 System Colors 做静态数据展示（如参数值 "0.3"、"18s"）

铁律：主强调色严格保留给强交互元素（按钮、Checkbox 选中、Slider 填充段、Focus Ring），不用于静态文字/数值。

3. 排版

字体栈

font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;

macOS 上会自动使用 SF Pro，iOS 上使用 SF。不要手动指定 SF Pro 的 TTF 文件。

字号层级（macOS）

层级	字号	字重	颜色	用途
Large Title	26px	Bold	Label	页面大标题（iOS 常用，macOS 少用）
Title 1	22px	Regular	Label	区块标题
Title 2	17px	Regular	Label	次要标题
Title 3 / Headline	15px	Semibold	Label	工具栏标题、卡片标题
Body	13px	Regular	Label	正文、控件默认
Callout	12px	Regular	Label	注释文字
Subheadline	11px	Regular	Secondary Label	辅助说明
Footnote	10px	Regular	Tertiary Label	脚注、时间戳
Caption 1	10px	Regular	Tertiary Label	图片说明
Caption 2	10px	Medium	Tertiary Label	表格表头

字号层级（iOS）

Read Full Documentation on GitHub

Metadata

Author@bingfoon

Stars4473

Updated2026-05-01

View Author Profile

AI Skill Finder

Not sure this is the right skill?

Describe what you want to build — we'll match you to the best skill from 16,000+ options.

Find the right skill

Add to Configuration

Paste this into your clawhub.json to enable this plugin.

{
  "plugins": {
    "official-bingfoon-apple-hig": {
      "enabled": true,
      "auto_update": true
    }
  }
}

Safety NoteClawKit audits metadata but not runtime behavior. Use with caution.

Related Skills

fluent-design

Microsoft Fluent Design System 实战参考。涵盖 Windows 11 设计语言、Mica/Acrylic 材质、WinUI 3 控件规格、排版层级、布局模式、Dark Mode、辅助功能和 Electron 适配。适用于开发 Windows 桌面应用或需要 Windows 原生感的跨平台应用。

bingfoon 4473

material-design

Google Material Design 3 实战参考。涵盖 Material You 动态色彩、排版系统、组件规格、Shape 系统、Motion 规范、Dark Theme 适配和 Jetpack Compose/Flutter 对照。适用于 Android 应用、Web 应用和跨平台应用的 UI 设计决策。

bingfoon 4473

batch-processing-patterns

批量处理与长时任务编排模式。涵盖队列管理、并发调度、中断恢复、熔断器、远程任务轮询、进度报告和反风控策略。适用于批量文件处理、AI API 调用、爬虫和后台任务场景。

bingfoon 4473

zustand-patterns

Zustand 状态管理实战模式。涵盖 Store 设计规范、Slice 工厂复用、persist 持久化、可恢复任务持久化、Electron IPC 联动、Store 测试和常见陷阱。适用于 React + Zustand 项目。

bingfoon 4473