OpenClaw

apple-hig

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

bingfoon0 source installs☆ 0 Repository starsv1.0.0

View source ↗Installation SKILL.md ↗

Installation

Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.

SkillHub CLI

skillhub install bingfoon/apple-hig

Inspect the source and compatibility requirements, then follow its installation steps.

Give your agent the source link and ask it to inspect instructions and dependencies before explaining the installation steps.

View source ↗Guides

Skill instructions

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`

使用原则

✅...

Source information

Source: github
Repository: openclaw/skills
Path: skills/bingfoon/apple-hig
Version: 1.0.0
Commit: 4b159511832a499a33d3cd4def14e7761e364a02
Classification source: rules
Status: active
Visibility: public

These signals come from indexed source analysis and may lag behind changes. Check the current source files.

Extracted content

SKILL.md

# 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` |

### 使用原则

```
✅...