Back to Details

apple-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Apple Design System & Human Interface Guidelines (HIG)

Apple设计系统与人机界面指南 (HIG)

This skill equips AI coding agents with the exact principles, visual specifications, component architectures, typography metrics, color tokens, motion curves, and automated compliance auditing defined by Apple's Human Interface Guidelines (HIG) across iOS, iPadOS, macOS, watchOS, visionOS, and modern Apple-grade Web UI.
此技能为AI编码代理提供了由**Apple人机界面指南（HIG）**定义的精确原则、视觉规范、组件架构、排版度量、颜色标记、运动曲线以及自动化合规审计，涵盖iOS、iPadOS、macOS、watchOS、visionOS和现代Apple级Web UI。

🎯 Operational Modes

🎯 操作模式

Mode 1 — Design & Build from Scratch

模式1 — 从零开始设计与构建

When tasked with creating new screens, apps, or web interfaces in Apple style:
  1. Choose the platform-native navigation paradigm (e.g. Bottom Tab Bar for iOS, Sidebar for macOS/iPad, Ornaments for visionOS).
  2. Establish the 8pt spatial grid and continuous squircle curvature (
    G2 continuity
    ).
  3. Apply the SF Pro / New York typography scale with optical tracking rules.
  4. Implement semantic Dynamic Colors (Light & OLED Dark mode) and Liquid Frosted Glass materials.
  5. Apply Apple spring physics (
    cubic-bezier(0.25, 1, 0.5, 1)
    ) and tactile active feedback (
    scale(0.97)
    ).
当需要以Apple风格创建新的屏幕、应用或Web界面时：
  1. 选择平台原生的导航范式（例如：iOS使用底部标签栏，macOS/iPad使用侧边栏，visionOS使用Ornaments）。
  2. 建立8pt空间网格和连续超椭圆曲率（
    G2连续性
    ）。
  3. 应用SF Pro / New York字体排版比例和光学字距规则。
  4. 实现语义化动态颜色（浅色和OLED深色模式）和液态磨砂玻璃材质。
  5. 应用Apple弹簧物理（
    cubic-bezier(0.25, 1, 0.5, 1)
    ）和触觉反馈（
    scale(0.97)
    ）。

Mode 2 — Apple HIG Compliance Audit & Scoring

模式2 — Apple HIG合规性审计与评分

When reviewing an existing codebase, mockup, or component:
  1. Run the audit tool 
    node skills/apple-design/scripts/audit-apple-design.mjs
    to perform automated static scanning with a 0–100 Scoring Rubric.
  2. Perform exact mathematical WCAG contrast checks and 44×44pt touch-target validations.
  3. Fill out the Apple HIG Audit Scorecard across the 5 core pillars.
  4. Deliver prioritized findings with Confidence Tagging:
    • 🟢 Tool-verified: Statistically measured via CLI tool (e.g., contrast ratio, button dimension, static CSS rules).
    • 🟡 Needs device test: Requires hardware interaction (e.g., Dynamic Type at 300%, Reduce Transparency toggle, VoiceOver speech hierarchy).
    • 🔴 Assumed: Contextual design trade-off or subjective aesthetic evaluation.
在审查现有代码库、原型或组件时：
  1. 运行审计工具 
    node skills/apple-design/scripts/audit-apple-design.mjs
    执行自动化静态扫描，采用0–100评分标准。
  2. 执行精确的数学WCAG对比度检查和44×44pt触摸目标验证。
  3. 在5个核心支柱维度上填写**Apple HIG审计评分卡**。
  4. 提供带置信度标记的优先级排序发现结果：
    • 🟢 工具验证：通过CLI工具进行统计度量（例如：对比度、按钮尺寸、静态CSS规则）。
    • 🟡 需要设备测试：需要硬件交互（例如：300%动态字体、降低透明度开关、VoiceOver语音层级）。
    • 🔴 假设：上下文设计权衡或主观审美评估。

🛠️ The Apple HIG Compliance CLI Engine

🛠️ Apple HIG合规性CLI引擎

The built-in audit engine (
skills/apple-design/scripts/audit-apple-design.mjs
) provides four subcommands:
bash
undefined
内置审计引擎（
skills/apple-design/scripts/audit-apple-design.mjs
）提供了四个子命令：
bash
undefined

1. Full Codebase Static Scan with 0-100 Scorecard (Default)

1. Full Codebase Static Scan with 0-100 Scorecard (Default)

npm run audit
npm run audit

or: node skills/apple-design/scripts/audit-apple-design.mjs [path]

or: node skills/apple-design/scripts/audit-apple-design.mjs [path]

2. WCAG Relative Luminance Contrast Ratio Check

2. WCAG Relative Luminance Contrast Ratio Check

node skills/apple-design/scripts/audit-apple-design.mjs contrast "#8E8E93" "#FFFFFF"
node skills/apple-design/scripts/audit-apple-design.mjs contrast "#8E8E93" "#FFFFFF"

-> Contrast Ratio: 3.26:1 [🔴 FAILED - Needs >= 4.5:1]

-> Contrast Ratio: 3.26:1 [🔴 FAILED - Needs >= 4.5:1]

3. Tap Target Sizing Validation (44x44 pt minimum)

3. Tap Target Sizing Validation (44x44 pt minimum)

node skills/apple-design/scripts/audit-apple-design.mjs target 32 32
node skills/apple-design/scripts/audit-apple-design.mjs target 32 32

-> Tap Target: 32x32 pt [🔴 FAILED - Minimum 44x44 pt]

-> Tap Target: 32x32 pt [🔴 FAILED - Minimum 44x44 pt]

4. Batch JSON Automated Verification

4. Batch JSON Automated Verification

node skills/apple-design/scripts/audit-apple-design.mjs batch audit.json
undefined
node skills/apple-design/scripts/audit-apple-design.mjs batch audit.json
undefined

Audit Scoring Rubric:

审计评分标准：

  • Base score: 100 points.
  • Point deduction: -10 points per violation.
  • Scorecard Classification:
    • 🟢 90 – 100 pts: Ship (Sẵn sàng phát hành) — Đạt chuẩn xuất sắc.
    • 🟡 70 – 89 pts: Cần sửa trước khi release (Fix before release) — Cần khắc phục trước khi đưa lên App Store / production.
    • 🔴 < 70 pts: Cần thiết kế lại (Systematic redesign required) — Vi phạm nghiêm trọng kiến trúc hoặc khả năng tiếp cận.
  • 基础分数：100分。
  • 扣分：每次违规扣10分。
  • 评分卡分类：
    • 🟢 90 – 100分：可以发布 — 达到优秀标准。
    • 🟡 70 – 89分：发布前需要修复 — 在上架App Store/生产环境之前必须修复。
    • 🔴 < 70分：需要系统性重新设计 — 严重违反架构或可访问性。

1. Core Design Philosophy

1. 核心设计理念

Apple interfaces are built upon three primary pillars:
  1. Clarity:
    • Text is legible at every size; icons are precise, distinct, and universally understood.
    • Adornments are subtle and purposeful. Content always takes visual priority over decorative Chrome.
    • Negative space (whitespace) provides breathing room and clarifies visual hierarchy.
  2. Deference:
    • Fluid motion, translucent materials, and crisp typography elevate content without competing with it.
    • Backgrounds defer to content; chrome recedes when the user is engaged in primary tasks.
  3. Depth:
    • Distinct visual layers, realistic lighting, specular highlights, and physical spring physics convey spatial hierarchy and tactile realism.
    • Elevations and materials communicate interactive affordances without harsh dropped shadows or abrasive outlines.
Apple界面建立在三大支柱之上：
  1. 清晰：
    • 文字在任何尺寸下都清晰易读；图标精确、独特且被普遍理解。
    • 装饰是微妙而有目的的。内容始终优先于装饰性界面元素。
    • 留白（空白区域）提供呼吸空间并明确视觉层级。
  2. 顺从：
    • 流畅的动效、半透明材质和清晰的字体让内容凸显而不与之竞争。
    • 背景顺从内容；当用户专注于主要任务时，界面装饰隐退。
  3. 深度：
    • 不同的视觉层次、逼真的光照、高光反射和物理弹簧动效传达了空间层级和触觉真实感。
    • 悬浮感和材质传达交互暗示，而非使用生硬的投影或粗糙的轮廓。

2. Universal Apple Design Tenets & Critical Rules

2. 通用Apple设计原则与关键规则

🚫 Forbidden Anti-Patterns (Never Do These)

🚫 禁止的反模式（绝不要这样做）

  • NO Purple/Violet On Dark Themes: Never use purple fonts or violet accent buttons on dark backgrounds. Use Apple System Blue (
    #0A84FF
    ) or semantic system tints.
  • NO Harsh Drop Shadows: Never use dense black un-diffused box shadows (
    box-shadow: 0 4px 10px rgba(0,0,0,0.5)
    ). Use multi-layered ambient diffusion (
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04)
    ).
  • NO Sharp / Geometric Corners: Never leave interactive controls, cards, or inputs with 0px radius or arbitrary non-continuous corners.
  • NO Untracked Large Typography: Never render large headings (>24px) without tight letter-spacing (-0.02em to -0.03em / -0.5px to -1.2px).
  • NO Non-Standard Touch Targets: Never create clickable elements smaller than 44×44 pt (iOS standard) or 28×28 pt (macOS compact pointer).
  • NO Plain Static CSS Transitions: Never use 
    ease-in-out
    for physical UI interactions; always use fluid spring physics or Apple easing curves.
  • 禁止在深色主题中使用紫色/紫罗兰：绝不要在深色背景上使用紫色字体或紫罗兰强调按钮。使用Apple系统蓝（
    #0A84FF
    ）或语义化系统色调。
  • 禁止生硬的投影：绝不要使用浓密黑色、未散射的盒阴影（
    box-shadow: 0 4px 10px rgba(0,0,0,0.5)
    ）。使用多层环境散射（
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04)
    ）。
  • 禁止尖锐/几何直角：绝不要让交互控件、卡片或输入框使用0px圆角或任意的非连续圆角。
  • 禁止大字号字体且不调整字距：绝不要在无紧凑字距（-0.02em至-0.03em / -0.5px至-1.2px）的情况下渲染大标题（>24px）。
  • 禁止非标准触摸目标：绝不要创建小于44×44 pt（iOS标准）或28×28 pt（macOS紧凑指针）的可点击元素。
  • 禁止普通的静态CSS过渡：绝不要在物理交互中使用
    ease-in-out
    ；始终使用流畅的弹簧物理或Apple缓动曲线。

3. Visual Foundations

3. 视觉基础

A. Typography System (San Francisco & New York)

A. 字体排版系统（San Francisco与New York）

  • Primary Interface Font: SF Pro (
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif
    )
  • Monospace Font: SF Mono (
    ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace
    )
  • Serif Font: New York (
    "New York", ui-serif, Georgia, Cambria, serif
    )
  • 主要界面字体：SF Pro（
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif
    ）
  • 等宽字体：SF Mono（
    ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace
    ）
  • 衬线字体：New York（
    "New York", ui-serif, Georgia, Cambria, serif
    ）

Typographic Scale & Optical Sizing Rules:

排版比例与光学尺寸规则：

StyleSize (pt/px)WeightLine HeightTracking / Letter Spacing
Large Title34pxBold (700)41px
-0.022em (-0.75px)
Title 128pxBold / SemiBold34px
-0.020em (-0.56px)
Title 222pxBold / SemiBold28px
-0.018em (-0.40px)
Title 320pxSemiBold (600)25px
-0.015em (-0.30px)
Headline17pxSemiBold (600)22px
-0.012em (-0.20px)
Body17pxRegular (400)22px
-0.010em (-0.17px)
Callout16pxRegular (400)21px
-0.008em (-0.13px)
Subheadline15pxRegular (400)20px
-0.005em (-0.08px)
Footnote13pxRegular (400)18px
0.000em (0.00px)
Caption 112pxRegular (400)16px
0.005em (+0.06px)
Caption 211pxRegular / Medium13px
0.010em (+0.11px)
样式字号 (pt/px)字重行高字距 / 字母间距
Large Title（大标题）34px粗体 (700)41px
-0.022em (-0.75px)
Title 1（标题1）28px粗体 / 半粗体34px
-0.020em (-0.56px)
Title 2（标题2）22px粗体 / 半粗体28px
-0.018em (-0.40px)
Title 3（标题3）20px半粗体 (600)25px
-0.015em (-0.30px)
Headline（大标题行）17px半粗体 (600)22px
-0.012em (-0.20px)
Body（正文）17px常规 (400)22px
-0.010em (-0.17px)
Callout（提示）16px常规 (400)21px
-0.008em (-0.13px)
Subheadline（副标题）15px常规 (400)20px
-0.005em (-0.08px)
Footnote（脚注）13px常规 (400)18px
0.000em (0.00px)
Caption 1（说明1）12px常规 (400)16px
0.005em (+0.06px)
Caption 2（说明2）11px常规 / 中等13px
0.010em (+0.11px)

4. Materials, Translucency & Specular Glass

4. 材质、半透明与镜面玻璃

Apple materials blur underlying content to create visual grounding while maintaining vibrancy:
css
/* Authentic Apple Ultra-Thin Frosted Glass Material */
.apple-material-ultrathin {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}

@media (prefers-color-scheme: dark), [data-theme="dark"] {
  .apple-material-ultrathin {
    background: rgba(28, 28, 30, 0.75);
    backdrop-filter: blur(25px) saturate(190%);
    -webkit-backdrop-filter: blur(25px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(255, 255, 255, 0.05) inset;
  }
}
Apple材质会模糊底层内容，以建立视觉落地感，同时保持活力：
css
/* Authentic Apple Ultra-Thin Frosted Glass Material */
.apple-material-ultrathin {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}

@media (prefers-color-scheme: dark), [data-theme="dark"] {
  .apple-material-ultrathin {
    background: rgba(28, 28, 30, 0.75);
    backdrop-filter: blur(25px) saturate(190%);
    -webkit-backdrop-filter: blur(25px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(255, 255, 255, 0.05) inset;
  }
}

5. Animation Physics (Apple Spring Curves)

5. 动画物理（Apple弹簧曲线）

Never use linear or standard ease curves for interactive UI. Use authentic Apple spring physics:
绝不要在交互式UI中使用线性或标准缓动曲线。使用真实的Apple弹簧物理：

Spring Parameters Reference:

弹簧参数参考：

  • Interactive / Tap feedback: 
    mass: 1, stiffness: 350, damping: 35
    (CSS approx: 
    cubic-bezier(0.25, 1, 0.5, 1)
    )
  • Sheet Presentation / Modal Slide: 
    mass: 1.2, stiffness: 280, damping: 28
    (CSS approx: 
    cubic-bezier(0.32, 0.72, 0, 1)
    )
  • Snappy Switch / Toggle: 
    mass: 0.8, stiffness: 450, damping: 30
css
/* Apple Native Motion Classes */
.apple-spring-interactive {
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.25s ease;
}

.apple-spring-interactive:active {
  transform: scale(0.965);
}
  • 交互/点击反馈：
    mass: 1, stiffness: 350, damping: 35
    （CSS近似：
    cubic-bezier(0.25, 1, 0.5, 1)
    ）
  • 面板呈现/模态滑动：
    mass: 1.2, stiffness: 280, damping: 28
    （CSS近似：
    cubic-bezier(0.32, 0.72, 0, 1)
    ）
  • 快速开关/切换：
    mass: 0.8, stiffness: 450, damping: 30
css
/* Apple Native Motion Classes */
.apple-spring-interactive {
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.25s ease;
}

.apple-spring-interactive:active {
  transform: scale(0.965);
}

6. Bundled Resources & Full Apple HIG Library

6. 附带资源与完整的Apple HIG库

  • Master HIG Documentation Catalog (INDEX.md): Full searchable index of all 172 guideline topics.
  • Apple HIG Audit Scorecard Template: Standard 5-pillar evaluation scorecard.
  • Assets & Presets: 
    • assets/apple-tokens.css
      : Complete CSS variable design token stylesheet.
    • assets/apple-components.css
      : Ready-to-use CSS components (Buttons, Glass cards, Segmented, Sheets).
    • assets/tailwind.preset.apple.js
      : Tailwind configuration preset.
    • assets/swiftui-cheat-sheet.md
      : Idiomatic SwiftUI patterns.
  • CLI Automation Tools: 
    • npm run audit
      : Scans codebases for Apple HIG violations and generates a 0–100 score.
    • npm run fetch-hig
      : Fetches/updates the entire Apple HIG documentation and illustrations from Apple CDN.
  • HIG主文档目录（INDEX.md）：所有172个指南主题的完整可搜索索引。
  • Apple HIG审计评分卡模板：标准的5支柱评估评分卡。
  • 资源与预设： 
    • assets/apple-tokens.css
      ：完整的CSS变量设计令牌样式表。
    • assets/apple-components.css
      ：即用型CSS组件（按钮、玻璃卡片、分段控件、面板）。
    • assets/tailwind.preset.apple.js
      ：Tailwind配置预设。
    • assets/swiftui-cheat-sheet.md
      ：惯用SwiftUI模式。
  • CLI自动化工具： 
    • npm run audit
      ：扫描代码库中的Apple HIG违规并生成0–100的分数。
    • npm run fetch-hig
      ：从Apple CDN获取/更新完整的Apple HIG文档和插图。