Apple HigDesign Skill

v3.0.2

Apple 平台设计系统技能。覆盖 Apple Human Interface Guidelines (HIG)，包括设计原则（Hierarchy/Harmony/Consistency）、Typography（San Francisco/Dynamic Type）、 Color System（系统色/Liqu...

⭐ 0· 92·0 current·0 all-time

by@yhongm

OpenClaw Prompt Flow

Install with OpenClaw

Best for remote or guided setup. Copy the exact prompt, then paste it into OpenClaw for yhongm/apple-higdesign-skill.

Previewing Install & Setup.

Prompt PreviewInstall & Setup

Install the skill "Apple HigDesign Skill" (yhongm/apple-higdesign-skill) from ClawHub.
Skill page: https://clawhub.ai/yhongm/apple-higdesign-skill
Keep the work scoped to this skill only.
After install, inspect the skill metadata and help me finish setup.
Use only the metadata you can verify from ClawHub; do not invent missing requirements.
Ask before making any broader environment changes.

Command Line

CLI Commands

Use the direct CLI path if you want to install manually and keep every step visible.

OpenClaw CLI

Bare skill slug

openclaw skills install apple-higdesign-skill

ClawHub CLI

Package manager switcher

npx clawhub@latest install apple-higdesign-skill

Security Scan

VirusTotal

Benign

View report →

OpenClaw

Benign

high confidence

✓

Purpose & Capability

Name/description match the provided materials: this is a docs/reference skill for Apple HIG. It requests no binaries, env vars, or config paths, which is proportionate for a read-only design guidance skill.

✓

Instruction Scope

SKILL.md contains triggers, descriptive text, and reference content only. The runtime instructions are limited to offering Apple HIG guidance when triggered and do not instruct the agent to read unrelated files, access credentials, or send data to external endpoints.

✓

Install Mechanism

There is no install specification and no code to execute — the skill is instruction-only, so nothing is downloaded or installed on the host.

✓

Credentials

The skill declares no environment variables, credentials, or config paths. No sensitive access is requested or implied by the files and instructions.

✓

Persistence & Privilege

always is false and the skill is user-invocable; autonomous invocation is allowed by platform default but there are no high-privilege requests or signs of persistence beyond normal skill metadata.

Assessment

This skill is a local instructional/reference package that reproduces Apple HIG guidance; it does not request credentials or install software and appears safe to install. Things to consider before enabling: (1) the content is a curated copy of Apple HIG—verify it meets your accuracy and licensing expectations (the package claims MIT but references Apple's docs), (2) because the skill triggers on many Apple-design keywords it may be invoked automatically during relevant conversations—confirm you want that behavior, and (3) as with any content skill, treat its guidance as informational (verify against Apple's official docs for critical or legal decisions).

Like a lobster shell, security has layers — review code before you run it.

latestvk971en3sspbpxsrbx4k24w8hjh85czf5

92downloads

0stars

4versions

Updated 4d ago

v3.0.2

MIT-0

Apple Design System Skill

基于 Apple Human Interface Guidelines (2026)，覆盖所有 Apple 平台的设计规范。

设计原则

视觉基础

图标与品牌

组件设计规范

输入组件

容器组件

体验设计

快速参考

Apple 平台默认字号

平台	默认	最小
iOS/iPadOS	17pt	11pt
macOS	13pt	10pt
tvOS	29pt	23pt
visionOS	17pt	12pt

系统强调色

#007AFF (Blue) — iOS/macOS 默认强调色

iOS 触摸目标

最小 44×44pt（Apple HIG 规定）

按钮样式优先级

Filled Button → Tinted Button → Gray Button → Borderless Button

Dark Mode 背景色

#1C1C1E（不是纯黑 #000000）

SF Symbols 渲染模式

Monochrome → Hierarchical → Palette → Multicolor

布局规范

元素	边距/间距	备注
屏幕边缘	16pt	iOS 标准
组件间距	8pt	8pt 网格
列表 Cell 高度	44pt	触摸目标
导航栏高度	44pt	标准
TabBar 高度	49pt	iPhone

避坑指南

常见错误

错误做法	正确做法
❌ Dark Mode 用纯黑 `#000000`	✅ 用 `#1C1C1E`（Apple HIG 规定）
❌ macOS 使用 Dynamic Type	✅ macOS 不支持，仅 iOS/iPadOS 支持
❌ 用红绿组合传达信息	✅ 用蓝色+图标辅助，色盲友好
❌ visionOS 使用 3D 文字	✅ 用 billboarding + 2D 文字
❌ 触摸目标小于 44×44pt	✅ 最小 44×44pt
❌ 超链接用绿/蓝色组合	✅ 用统一蓝色 `#007AFF`
❌ SearchBar 不提供清除按钮	✅ 右滑显示 Clear 按钮
❌ Toggle 标签用 On/Off	✅ 用描述性标签如"深色模式"

版本陷阱

⚠️ Liquid Glass — 仅限 visionOS，iOS/macOS 不支持
⚠️ SF Symbols 渐变 — 仅 SF Symbols 7+ 支持，低版本设备 fallback
⚠️ SF Symbols 动画 — Variable Color 不适合表达深度感，应用 Hierarchical
⚠️ Dynamic Type — 大字号时布局可能截断，需测试所有尺寸

设计红线

❌ 不要硬编码系统颜色值（系统颜色值随版本浮动）
❌ 不要仅靠颜色传达信息（配合文字标签/图标）
❌ 不要忽略 Reduce Motion 设置（动画需考虑无障碍）
❌ 不要在 App Icon 用纯白背景（iOS 10+ 支持圆角裁切）

设计原则详解

3 大核心原则

1. UIKit一致性（UIKit Consistency）

使用平台原生组件和行为
遵循系统交互模式
支持系统级无障碍和暗模式

2. 清晰性（Clarity）

内容优先，信息层次分明
文字清晰可读，图标语义明确
动态字体支持（Dynamic Type）

3. 深度（Depth）

利用视觉层次和真实动效传达关系
导航层级清晰
毛玻璃和阴影表达空间感

平台哲学差异

平台	主要模式
iOS	多任务 + 手势导航
macOS	多窗口 + 菜单栏
tvOS	焦点驱动 + 远程
watchOS	表盘 + 复杂功能
visionOS	空间计算 + 手眼协作

Typography 详解

字体家族

用途	iOS/macOS	tvOS	watchOS
正文	SF Pro	SF Pro	SF Pro
标题	SF Pro Display	SF Pro Display	SF Pro Rounded
手写	SF Pro Text	—	SF Pro Rounded
等宽	SF Mono	SF Mono	SF Mono

Dynamic Type 级别

级别	中文基准	英文基准	应用
xSmall	13pt	13pt	辅助文字
Small	15pt	15pt	次要信息
Body	17pt	17pt	正文
Lead	22pt	20pt	副标题
Title	28pt	22pt	标题
xTitle	34pt	28pt	大标题
xxTitle	40pt	34pt	超大标题

字号层级示例

主标题 (Title)  —————————  28pt Bold
副标题 (Headline)  —————  17pt Semibold
正文 (Body)  ———————————  17pt Regular
说明 (Caption)  ————————  12pt Regular
辅助 (Footnote)  ———————  13pt Regular

Color System 详解

系统色彩语义

用途	iOS	macOS
主要文字	label	labelColor
次要文字	secondaryLabel	secondaryLabelColor
主色	tints/tintColor	controlAccentColor
背景	systemBackground	windowBackgroundColor
分组背景	systemGroupedBackground	controlBackgroundColor
强调色	systemBlue (#007AFF)	systemBlue

P3 广色域

支持 25% 色彩空间扩展
设计资源用 sRGB 交付，广色域用 Display P3
iPhone 7+ / iPad Pro / Mac 支持

SF Symbols 详解

图标分类

类别	数量	示例
UI 图标	150+	chevron, plus, xmark
多媒体	100+	play, pause, speaker
通信	80+	message, phone, mail
物体	200+	book, car, house
天气	50+	sun, cloud, rain

渲染模式

模式	效果	适用场景
Monochrome	单一颜色	默认图标
Hierarchical	单色分层透明度	visionOS 强调
Palette	最多 3 色	自定义主题
Multicolor	固有色	装饰性图标

常用图标速查

功能	SF Symbol
返回	chevron.left
关闭	xmark
菜单	line.3.horizontal
分享	square.and.arrow.up
收藏	heart / heart.fill
设置	gear
搜索	magnifyingglass
刷新	arrow.clockwise
删除	trash
编辑	pencil
添加	plus
相机	camera
照片	photo
地图	map
定位	location

组件详解

Button 按钮

样式优先级

Filled — 主要操作，强调色背景
Tinted — 次要操作，浅色背景+强调色文字
Gray — 第三操作，灰色背景
Borderless — 最低调，文字+图标

设计要点

触摸目标最小 44×44pt
按钮内边距最小 12pt
同组按钮间距至少 8pt
危险操作用 destructive 样式

Navigation 导航

iOS 导航模式

Navigation Bar — 分层内容，push/pop
Tab Bar — 扁平结构，切换视图
Toolbar — 页面内操作
Segmented Control — 同级切换

规范

Tab Bar 最多 5 个
Navigation Bar 显示当前层级标题
返回按钮始终可见
Sheet 支持 .medium / .large detents

Lists 列表

单元格结构

┌─────────────────────────────────┐
│  Leading    Title    Trailing   │
│  Icon    Primary   Secondary  Image │
│         Subtitle                 │
└─────────────────────────────────┘

交互

Swipe Actions — 左滑/右滑快捷操作
Drag & Drop — 拖拽排序
附件指示器 — disclosure chevron

Alerts 弹窗

类型

类型	样式	用途
Alert	模态	重要信息/确认
Action Sheet	底部弹出	多选项
Toast	自动消失	轻量反馈
Dialog	macOS	确认/输入

Accessibility 无障碍

核心要求

类型	要求
VoiceOver	所有元素可朗读
Dynamic Type	支持所有字体级别
对比度	文字 4.5:1 / 大字 3:1
触摸目标	最小 44×44pt
Reduce Motion	尊重系统设置

实现检查清单

平台差异化设计

iOS

核心特征

手势驱动：Swipe Back、Pull to Refresh、3D Touch/Haptic Touch
独立 App 沙箱
通知系统：Banner、Alert、Lock Screen
小组件：Home Screen Widgets
多任务：App Switcher、Slide Over、Split View（iPad）

设计要点

底部 Tab Bar 导航（≤5 个 Tab）
Navigation Bar 返回上一页
Modal Sheet 从底部滑出
触摸目标 ≥ 44×44pt
Safe Area 适配（刘海、Home Indicator）

iOS 特有组件

UINavigationController — 分层导航
UITabBarController — 底部切换
UITableView / UICollectionView — 列表/网格
UISegmentedControl — 分段选择
UISwitch — 开关控制
UIAlertController — 警告框

iPad

核心特征

Split View：分屏多任务
Slide Over：悬浮面板
多窗口：多实例 App
键盘/触控板支持
外接显示器支持

设计要点

侧边栏导航（Sidebar）
Toolbar 用于页面操作
Popover 用于上下文选项
拖拽跨 App 传输数据
支持拖拽调整大小的窗口

macOS

核心特征

窗口管理：最小化/最大化/关闭
菜单栏：App 菜单、系统菜单
Dock：应用启动器
多窗口并发
键盘快捷键优先

设计要点

不支持 Dynamic Type — 仅 iOS/iPadOS 支持
使用原生窗口样式
支持拖拽调整大小
菜单项 Keyboard Shortcut
Touch Bar 支持（MacBook Pro）

tvOS

核心特征

焦点驱动（Focus Engine）
远程控制/ Siri Remote
10-foot UI（远距离观看，屏幕距离用户 3 米）
屏幕大，文字需更大字号

10-Foot UI 设计规范

设计原则

原则	说明
简洁性	一屏只做一件事
层级清晰	信息优先级分明
颜色鲜明	对比度足够
字体足够大	远距离可读

字号层级

用途	字号	说明
大标题	54pt	屏幕标题
标题	38pt	分类标题
副标题	29pt	列表项标题
正文	24pt	描述文字
Caption	19pt	辅助说明

Focus Engine 焦点引擎

tvOS 独有的交互模型：用户用 Siri Remote 选择元素，焦点自动跟随。

焦点状态

状态	视觉变化
Unfocused	正常大小，100% 透明度
Focused	放大 1.1x，阴影加深，透明度 100%
Highlighted	按下时的反馈色

焦点导航规则

自动识别相邻元素
焦点按最近距离或阅读顺序跳转
水平/垂直网格自动推断

布局规范

规范	值
屏幕分辨率	1920×1080 / 3840×2160
安全区域	上下左右各 90pt
水平边距	96pt
列表项高度	120pt
Tab Bar 高度	96pt

深度与阴影

焦点元素通过阴影表达深度：

// 焦点元素阴影
Text("Focused Item")
    .shadow(color: .black.opacity(0.5), radius: 20, x: 0, y: 10)

// 未聚焦元素阴影
Text("Unfocused Item")
    .shadow(color: .black.opacity(0.3), radius: 8, x: 0, y: 4)

组件层级

组件	tvOS 控件	说明
导航	TabBar	底部标签切换
列表	List	水平滚动 Banner/Collection
详情	Detail	大图+描述+操作
菜单	Menu	弹出操作菜单

SwiftUI for tvOS

import SwiftUI
import TVUIKit

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem { Label("首页", systemImage: "house") }
            SearchView()
                .tabItem { Label("搜索", systemImage: "magnifyingglass") }
        }
    }
}

// 焦点状态
struct FocusableCard: View {
    @State private var isFocused = false

    var body: some View {
        VStack {
            Image("poster")
                .resizable()
                .aspectRatio(16/9, contentMode: .fit)
            Text("Title")
                .font(.title2)
        }
        .scaleEffect(isFocused ? 1.1 : 1.0)
        .animation(.easeInOut(duration: 0.2), value: isFocused)
        .focusable()
        .onFocusChange { focused in
            isFocused = focused
        }
    }
}

UIKit for tvOS

import UIKit
import TVUIKit

class CatalogViewController: UIViewController {
    private var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupCollectionView()
    }

    private func setupCollectionView() {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        layout.itemSize = CGSize(width: 400, height: 225)
        layout.minimumLineSpacing = 40

        collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.register(CatalogCell.self, forCellWithReuseIdentifier: "Cell")

        // 焦点行为
        collectionView.remembersFocused = true
    }
}

// UICollectionViewDelegateFocus
extension CatalogViewController: UICollectionViewDelegateFocus {
    func collectionView(_ collectionView: UICollectionView, didUpdateFocusIn context: UICollectionViewFocusUpdateContext, with coordinator: UIFocusAnimationCoordinator) {
        if let indexPath = context.nextFocusedIndexPath {
            coordinator.addCoordinatedAnimations {
                // 焦点动画
            }
        }
    }
}

避坑指南

错误做法	正确做法
❌ 小字体	✅ 最小 19pt Caption
❌ 密集布局	✅ 每屏一个主题
❌ 触摸交互	✅ 远程/语音/手势
❌ Hover 效果	✅ 焦点自动跟随
❌ 复杂导航	✅ 最多两层深度
❌ 窄边框	✅ 安全区域各 90pt

watchOS

核心特征

腕上设备，屏幕极小（40-45mm Series 10）
Digital Crown 滚动导航
Haptic 反馈（Tap、Click、Ritual）
续航优先，Always-On 显示

设计原则

1. 简洁性（Reduce）

每次只展示一个核心功能
避免长列表和复杂表单
单列式布局，信息垂直滚动

2. 上下文感知（Context）

基于时间和位置主动呈现信息
Glanceable：一瞥即知
Long-Look：通知展开显示详情

3. 实时性（Timely）

实时数据更新（心率、步数）
快捷操作（回复、支付）

Apple Watch HIG 核心规范

规范	要求
屏幕尺寸	40mm/44mm/45mm/46mm
基准字号	14pt（Body）
最小字号	10pt（Caption）
触控目标	最小 44×44pt
边距	12pt（水平）
Corner Radius	约 36pt（贴合屏幕）

布局模式

┌─────────────────────────┐
│        Status Bar        │  18pt
├─────────────────────────┤
│                         │
│       通知内容            │  主区域
│       (Long-Look)        │
│                         │
├─────────────────────────┤
│       Quick Actions      │  56pt
└─────────────────────────┘

颜色系统

类型	色值	用途
强调色	#FF9500	主要操作
成功色	#34C759	健康数据
警告色	#FF3B30	警报
背景	#000000	表盘背景

组件层级

组件	说明
WatchFace	表盘（Modular/Analog/...）
WatchWindow	全屏窗口
Alert	通知展开视图
Menu	快捷操作菜单
Picker	滚轮选择器

交互模式

模式	操作	反馈
Tap	点击按钮	Haptic Click
Swipe	上下滑动	Haptic Scroll
Long Press	长按编辑	Haptic Tap
Digital Crown	旋转滚动	Haptic Tick
Side Button	侧边按钮	Haptic Impact

SwiftUI for watchOS

// 基础页面
struct ContentView: View {
    var body: some View {
        VStack {
            Text("心率")
                .font(.caption)
            Text("72")
                .font(.largeTitle)
                .foregroundColor(.green)
        }
    }
}

// 列表导航
struct ListView: View {
    var body: some View {
        List {
            ForEach(items) { item in
                NavigationLink(destination: DetailView(item: item)) {
                    Text(item.name)
                }
            }
        }
    }
}

// Picker 滚轮
Picker("选择", selection: $selected) {
    Text("选项1").tag(0)
    Text("选项2").tag(1)
}
.pickerStyle(.wheel)

UIKit for watchOS

import WatchKit

class InterfaceController: WKInterfaceController {
    @IBOutlet weak var label: WKInterfaceLabel!

    override func awake(withContext context: Any?) {
        super.awake(withContext: context)
        label.setText("Hello Apple Watch")
    }

    @IBAction func buttonTapped() {
        WKInterfaceDevice.current().play(.click)
    }
}

避坑指南

错误做法	正确做法
❌ 多列布局	✅ 单列垂直滚动
❌ 长文本列表	✅ 精简内容，异步加载
❌ 复杂手势	✅ 点击+滚轮即可
❌ 忽略续航	✅ 减少后台刷新
❌ 与手机相同布局	✅ 专为小屏重设计

visionOS

核心特征

空间计算（Spatial Computing）
Eye + Hand 交互
3D 窗口/场景
沉浸式体验

设计规范

不支持 Dark Mode — 使用 Liquid Glass
Liquid Glass 材质（毛玻璃 + 透明度）
Billboarding：2D 文字始终面向用户
深度层级：场景中的 Z 轴位置
焦点：眼睛注视 + 手势确认

布局模式

Windows — 可拖动/调整的窗口
Volumes — 3D 容器
Spaces — 完全沉浸空间
Mixed Reality — 虚实结合

Animation 动效设计

核心原则

反馈 — 操作即时响应
连续性 — 状态平滑过渡
导航 — 引导用户理解层级
一致性 — 同类操作使用相同动效

动画类型

类型	用途	时长	曲线
系统动画	UI 状态变化	250-400ms	easeInOut
导航动画	页面切换	350-500ms	spring
手势动画	拖拽/缩放	实时	直接
载入动画	等待反馈	循环	linear

SwiftUI 动画

// 隐式动画
withAnimation(.easeInOut(duration: 0.3)) {
    isExpanded.toggle()
}

// 显式动画
Button("点击") {
    withSpring {
        offset.y -= 10
    }
}

// 过渡动画
Text("Hello")
    .transition(.opacity.combined(with: .scale))

UIKit 动画

// UIView.animate
UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseInOut) {
    view.transform = CGAffineTransform(scaleX: 1.1, y: 1.1)
}

// UIViewPropertyAnimator
let animator = UIViewPropertyAnimator(duration: 0.3, curve: .easeInOut) {
    view.center = newCenter
}
animator.startAnimation()

无障碍动画

检测 UIAccessibility.isReduceMotionEnabled
减少或禁用动画
提供静态替代

Spatial Layout 空间布局

布局基础

8pt 网格系统

所有间距是 8 的倍数
组件间距：8pt / 16pt / 24pt / 32pt
屏幕边距：16pt（iPhone）/ 20pt（iPad）

间距层级

用途	间距
紧凑	4pt
标准	8pt
中等	16pt
宽松	24pt
超宽	32pt+

iOS 布局规范

安全区域

顶部：Dynamic Island / 刘海
底部：Home Indicator
左右：屏幕圆角

visionOS 空间布局

窗口尺寸

最小宽度：320pt
默认高度：600pt
圆角：44pt

深度层级

Near：Z = 0（主窗口）
Mid：Z = -200（背景元素）
Far：Z = -500（装饰元素）

品牌与图标

App Icon

尺寸要求

平台	尺寸	备注
iPhone	180×180 (@3x)	60×60 (@1x)
iPad	167×167 (@2x)	83.5×83.5 (@1x)
App Store	1024×1024	唯一尺寸

设计规范

圆角：iOS 自动裁切
背景：避免纯白（iOS 10+ 圆角裁切）
内容居中，四周留白
测试在不同背景上的显示

Apple 品牌规范

可用

Apple Logo（SF Symbol: apple.logo）
产品名称拼写正确（iPhone、iPad、Mac）

禁止

Apple 彩虹 logo 变体
产品名称翻译
模仿 Apple 字体

输出格式规范

当使用本技能回答用户问题时，遵循以下格式：

回复结构

直接回答 — 一段简洁的话给出核心答案
规范引用 — 补充 HIG 相关条款（如适用）
设计建议 — 组件选用、视觉规范（如需）
避坑提醒 — 常见错误+正确做法

示例回复（按钮设计）

iOS 按钮首选 Filled 样式，背景用 #007AFF，文字白色，高度至少 44pt。若要次要操作，用 Tinted 按钮。macOS 避免 Dynamic Type，visionOS 用 Liquid Glass 材质。注意按钮之间至少留 8pt 间距。

禁用格式

❌ 不要显式分层（避免"第一层/第二层/框架分析"等字眼）
❌ 不要长篇引用原文，要内化为自己的话
❌ 不要包含代码实现（那是 ios-dev 技能的职责）
✅ 输出应是一段干净的话

来源

来源：Apple Human Interface Guidelines（2026-04-23 访问）

主页：https://developer.apple.com/design/human-interface-guidelines/

Typography：https://developer.apple.com/design/human-interface-guidelines/typography

Color：https://developer.apple.com/design/human-interface-guidelines/color

SF Symbols：https://developer.apple.com/design/human-interface-guidelines/sf-symbols

Components：https://developer.apple.com/design/human-interface-guidelines/components

Accessibility：https://developer.apple.com/design/human-interface-guidelines/accessibility

更新频率：随系统版本迭代（当前基于 2026）

Comments

Loading comments...