apple-hig-designer

Apple HIG Designer

专业级前端设计技能，让 Claude Code 能够创建符合 Apple 人机界面指南（HIG）的界面，达到 Apple 设计团队的质量标准。

何时使用此技能

当用户提出以下需求时，启用此技能：

• Apple 风格或 iOS/macOS 风格的界面
• 符合 HIG 的 UI 组件
• 集成 SF Symbols
• 实现 San Francisco 字体
• 现代玻璃效果（可选，用户必须明确提出）

触发短语：

• “设计一个 Apple 风格的……”
• “创建一个符合 HIG 的……”
• “iOS/macOS 风格组件”
• “苹果风格的界面”
• “符合 HIG 的设计”

---

核心设计原则

Apple 设计的四大支柱

1. 清晰（Clarity）

   • 每个元素都有其用途
   • 消除不必要的复杂性
   • 用户无需说明即可立即理解
   • 使用清晰的视觉层级

2. 尊重内容（Deference）

   • UI 元素应支持内容，而非与内容争夺注意力
   • 尽量减少界面装饰和视觉干扰
   • 让内容成为焦点
   • 使用微妙的背景和边框

3. 层次（Depth）

   • 通过图层创建清晰的视觉层级
   • 有目的地使用阴影、模糊和半透明效果
   • 动效强化空间关系
   • Z 轴传达重要性

4. 一致性（Consistency）

   • 跨平台使用熟悉的模式
   • 交互行为可预测
   • 统一的视觉语言
   • 遵循平台惯例

---

设计系统规范

字体系统

字体系列： San Francisco（SF Pro）

/* System Font Stack for Web */
:root {
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', SFMono-Regular, Menlo, Monaco, monospace;
}

/* Font Size Scale (iOS) */
--text-caption2: 11px;    /* Caption 2 */
--text-caption1: 12px;    /* Caption 1 */
--text-footnote: 13px;    /* Footnote */
--text-subhead: 15px;     /* Subheadline */
--text-body: 17px;        /* Body - Default */
--text-headline: 17px;    /* Headline (semibold) */
--text-title3: 20px;      /* Title 3 */
--text-title2: 22px;      /* Title 2 */
--text-title1: 28px;      /* Title 1 */
--text-large-title: 34px; /* Large Title */

字体规则：

• 字号 ≥ 20pt 时使用 SF Pro Display
• 字号 < 20pt 时使用 SF Pro Text
• 保持一致的行高（1.2-1.5）
• 使用字重而非仅靠字号来体现层级

颜色系统

/* Apple System Colors - Light Mode */
:root {
  /* Primary Colors */
  --system-blue: #007AFF;
  --system-green: #34C759;
  --system-indigo: #5856D6;
  --system-orange: #FF9500;
  --system-pink: #FF2D55;
  --system-purple: #AF52DE;
  --system-red: #FF3B30;
  --system-teal: #5AC8FA;
  --system-yellow: #FFCC00;

  /* Gray Scale */
  --system-gray: #8E8E93;
  --system-gray2: #AEAEB2;
  --system-gray3: #C7C7CC;
  --system-gray4: #D1D1D6;
  --system-gray5: #E5E5EA;
  --system-gray6: #F2F2F7;

  /* Semantic Colors */
  --label-primary: #000000;
  --label-secondary: rgba(60, 60, 67, 0.6);
  --label-tertiary: rgba(60, 60, 67, 0.3);
  --label-quaternary: rgba(60, 60, 67, 0.18);

  /* Backgrounds */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F2F2F7;
  --bg-tertiary: #FFFFFF;

  /* Separators */
  --separator: rgba(60, 60, 67, 0.29);
  --separator-opaque: #C6C6C8;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --system-blue: #0A84FF;
    --system-green: #30D158;
    --system-indigo: #5E5CE6;
    --system-orange: #FF9F0A;
    --system-pink: #FF375F;
    --system-purple: #BF5AF2;
    --system-red: #FF453A;
    --system-teal: #64D2FF;
    --system-yellow: #FFD60A;

    --system-gray: #8E8E93;
    --system-gray2: #636366;
    --system-gray3: #48484A;
    --system-gray4: #3A3A3C;
    --system-gray5: #2C2C2E;
    --system-gray6: #1C1C1E;

    --label-primary: #FFFFFF;
    --label-secondary: rgba(235, 235, 245, 0.6);
    --label-tertiary: rgba(235, 235, 245, 0.3);
    --label-quaternary: rgba(235, 235, 245, 0.18);

    --bg-primary: #000000;
    --bg-secondary: #1C1C1E;
    --bg-tertiary: #2C2C2E;

    --separator: rgba(84, 84, 88, 0.6);
    --separator-opaque: #38383A;
  }
}

间距系统

8pt 网格系统：

:root {
  --space-1: 4px;   /* Extra small */
  --space-2: 8px;   /* Small */
  --space-3: 12px;  /* Medium-small */
  --space-4: 16px;  /* Medium */
  --space-5: 20px;  /* Medium-large */
  --space-6: 24px;  /* Large */
  --space-8: 32px;  /* Extra large */
  --space-10: 40px; /* 2X large */
  --space-12: 48px; /* 3X large */
}

触控目标要求：

• iOS： 最小 44×44 点
• visionOS： 最小 60 点点击区域
• 始终为较小的视觉元素添加足够的内边距

圆角（同心设计）

:root {
  /* Base radius values */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px; /* Capsule */
}

/* Concentric Rule: inner_radius + padding = outer_radius */
/* Example: 8px inner + 8px padding = 16px outer */

---

组件模式

以下组件应遵循 Apple HIG 惯例。完整的 CSS 实现请参阅 resources/design-tokens.css 和 resources/ui-patterns.md。React 组件示例请参阅 resources/components.jsx。

按钮

• 主要按钮： 胶囊形状（border-radius: 9999px），min-height: 44px，系统蓝色背景、白色文本、600 字重
• 次要按钮： 同样采用胶囊形状，在 rgba(0, 122, 255, 0.1) 背景上使用系统蓝色文本
• 按下反馈： 在 :active 状态应用 scale(0.98)

玻璃效果（可选——仅在用户提出要求时使用）

• 仅在用户明确要求玻璃/磨砂效果时使用
• 默认设计应使用纯色背景，以确保可读性和性能
• 使用半透明背景搭配 backdrop-filter: blur(20px) saturate(180%)
• 始终提供非玻璃效果的备用方案

卡片

• 默认： 纯色背景（--bg-tertiary）、border-radius: 16px、轻微的 box-shadow
• 分组样式： 外层使用 --bg-secondary，内部项目使用 --bg-tertiary，并以 --separator 分隔

输入框

• min-height: 44px，使用 --bg-secondary 背景，border-radius: 12px
• 聚焦状态：box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.3)

标签栏

• 固定在底部，height: 49px + 安全区域内边距
• 每个标签的触控目标至少为 44x44pt
• 始终显示文本标签（不能仅显示图标）
• 选中状态使用填充式 SF Symbols，未选中状态使用描边式
• 支持通知徽标（红色椭圆形，白色文本）

工具栏

• 分为三个区域：前导（返回/标题）、居中（工具）、尾随（操作）
• 最多包含 3 组项目
• 使用不带边框的 SF Symbols
• 主要操作在尾随区域使用 .prominent 样式
• 返回按钮：圆形，仅显示符号（不显示文本）

表单页

• 停靠位置：large（100%）、medium（50%）
• 包含拖动指示器（36x5px，居中）
• 完成按钮：右上角；取消按钮：左上角
• 半透明背景遮罩 rgba(0,0,0,0.4)

警告框

• 仅用于重要信息（谨慎使用）
• 最多 3 个按钮；使用明确的动词标题，避免使用“确定”
• 取消按钮：靠前一侧；破坏性操作按钮：仅用于非预期的破坏性操作
• 宽度：270px，border-radius: 14px

列表和表格

• 行高至少为 44px
• 信息按钮：无需导航即可显示详细信息
• 展开指示符（>）：导航至子视图
• 分组样式：border-radius 为 10px，内嵌分隔线从 60px 处开始

---

动画指南

缓动函数

:root {
  /* Apple's preferred easing */
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in: cubic-bezier(0.42, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);

  /* Spring-like easing */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

时长范围

:root {
  --duration-instant: 100ms;  /* Micro-interactions */
  --duration-fast: 200ms;     /* Hover, focus states */
  --duration-normal: 300ms;   /* Standard transitions */
  --duration-slow: 500ms;     /* Complex animations */
}

交互反馈

/* Press feedback */
.interactive {
  transition: transform var(--duration-instant) var(--ease-out);
}

.interactive:active {
  transform: scale(0.97);
}

/* Hover glow */
.interactive:hover {
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15);
}

---

SF Symbols 集成

渲染模式

1. 单色： 所有图层使用同一种颜色
2. 分层： 通过不同不透明度呈现深度
3. 调色板： 为各图层自定义颜色
4. 多色： 使用 Apple 符号的固有颜色

使用指南

• 工具栏/导航： 使用轮廓变体
• 标签栏： 使用填充变体
• 匹配文本大小： 符号会自动与 SF 字体对齐
• 提供文本替代内容： 始终包含 aria-label

Web 实现（图标字体替代方案）

<span class="sf-symbol" aria-label="Settings">􀣋</span>


<svg class="icon" aria-hidden="true">
  <use href="#icon-gear"></use>
</svg>

---

无障碍要求

色彩对比度

• 普通文本： 至少 4.5:1（WCAG AA）
• 大号文本： 至少 3:1
• 交互元素： 各种状态应清晰可辨

动效

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

语义化 HTML

<button type="button">Action</button>
<nav aria-label="Main navigation">...</nav>
<main role="main">...</main>

---

输出格式

生成 Apple 风格的 UI 代码时，始终包含：

1. 完整、可运行的代码（CSS/React/Vue）
2. 通过 CSS 自定义属性支持浅色/深色模式
3. 解释符合 HIG 的设计依据
4. 适用于不同设备的响应式断点
5. 无障碍属性（aria-*、role 等）

默认行为

• 默认使用纯色背景，以提高可读性
• 仅在用户明确要求时使用玻璃/模糊效果
• 始终为不支持 backdrop-filter 的浏览器提供非玻璃效果的回退方案

输出结构示例

/**
 * Apple HIG Compliant Component
 *
 * Design Decisions:
 * - Uses SF Pro system font stack for native feel
 * - 44pt minimum touch target for accessibility
 * - Capsule shape for primary actions (HIG recommendation)
 * - Solid background for optimal readability
 * - Supports prefers-color-scheme for auto theming
 */

const AppleButton = ({ children, variant = 'primary', ...props }) => {
  return (
    <button
      className={`btn btn-${variant}`}
      {...props}
    >
      {children}
    </button>
  );
};

---

最佳实践检查清单

完成任何设计输出前，请确认：

• 排版： 使用 SF Pro，并符合字号阈值
• 颜色： 使用支持浅色/深色变体的系统颜色
• 间距： 遵循 8pt 网格
• 触控目标： 至少为 44×44pt
• 圆角半径： 保持同心关系
• 动画： 使用 Apple 标准缓动曲线
• 无障碍： 符合 WCAG AA，支持减少动态效果
• 一致性： 符合平台惯例
• 背景： 默认使用纯色，仅在用户要求时使用玻璃效果

---

更多资源

本地参考资料（阅读这些资料以了解详细实现）

• 完整的设计模式和实际示例，请参阅 REFERENCE.md
• CSS 自定义属性和设计令牌，请参阅 resources/design-tokens.css
• React 组件模板，请参阅 resources/components.jsx
• 详细的 UI 模式文档，请参阅 resources/ui-patterns.md

外部参考资料

• Apple 人机界面指南
• Apple 设计资源
• SF Symbols
• Apple 字体

---

此技能可确保 Claude Code 生成符合 Apple 严苛设计标准的界面，打造协调一致、易于访问且美观的用户体验。