apple-hig-expert

Name: apple-hig-expert
Author: alirezarezvani

github.com/alirezarezvani设计与 UI28.9k668 次安装2 天前更新

代码仓库

关于 apple-hig-expert

apple-hig-expert 是用于设计和审查 Apple 平台应用的技能，面向设计师与开发者。它结合平台规范、Liquid Glass 指引及可运行的检查脚本，输出评分结果和需人工验证的事项。

主要功能

01从零设计与 HIG 审查模式
02对比度和点击目标检查
03批量检查并生成评分卡
04人工评估无障碍行为

适用场景

01审查 iOS 设置页面的可访问性
02检查界面颜色对比度与点击区域
03按平台规范规划应用布局

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/alirezarezvani/claude-skills --skill apple-hig-expert

安装后在 Claude Code 中输入/apple-hig-expert确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

accessibility.md

platform-specifics.md

visual-design.md

scripts/

hig_checker.py

templates/

hig-audit-template.md

详细介绍

Apple HIG 专家

依据 Apple 人机界面指南（Human Interface Guidelines，HIG，developer.apple.com/design/human-interface-guidelines）设计并审核应用，包括 Liquid Glass 设计语言。HIG 内容会随每次系统发布而更新。涉及关键结论时，请对照 references/ 中引用的 HIG 在线页面进行核实。

开始之前

如果存在 product-context.md 或 ios-design-context.md，请先阅读，再提出问题。然后收集以下信息：

平台目标：iOS、macOS、watchOS 还是 visionOS？
当前状态：是全新设计，还是审核现有的效果图或代码？
应用类别：工具类、生产力类、游戏、社交等。

模式

模式 1：从零开始设计：先选择平台导航范式和布局基础元素（参见 references/platform-specifics.md），然后应用字体排版和语义化颜色（references/visual-design.md）。
模式 2：HIG 审核：填写 templates/hig-audit-template.md，对每个可测量元素运行 scripts/hig_checker.py，并交付一份评分报告（参见下文的实例演示）。

合规工具

scripts/hig_checker.py（仅使用标准库）提供三个子命令：

# 1. Contrast ratio (WCAG formula; pass >= 4.5:1 for normal text)
python3 scripts/hig_checker.py contrast "#8E8E93" "#FFFFFF"
# -> Contrast Ratio: 3.26 [FAILED]

# 2. Tap-target size (pass >= 44x44 pt per HIG)
python3 scripts/hig_checker.py target 32 32
# -> Tap Target: 32x32 [FAILED]

# 3. Batch audit from JSON -> scorecard (starts at 100, -10 per violation)
python3 scripts/hig_checker.py batch audit.json

批量输入格式：

{
  "checks": [
    {"type": "contrast", "name": "caption-on-card", "fg": "#8E8E93", "bg": "#FFFFFF"},
    {"type": "target", "name": "close-button", "w": 32, "h": 32}
  ]
}

评分标准： 批量得分从 100 分开始，每项未通过的检查扣 10 分；违规项按元素名称列出。90–100 分 = 可发布，70–80 分 = 发布前需修复，低于 70 分 = 需要系统性返工。工具无法测量的检查项（VoiceOver 标签、Dynamic Type 行为、降低透明度）通过审核模板进行人工评估，并标注置信度。

实例演示：iOS 设置页面审核

输入： 效果图中，白色卡片上的正文文字为 #1C1C1E，说明文字为 #8E8E93，有一个 32x32 pt 的关闭按钮，以及一个 343x50 pt 的主要 CTA 按钮。

运行：

python3 scripts/hig_checker.py batch audit.json

输出（真实结果）：

{
  "score": 80,
  "violations": [
    "Contrast 3.26 fails for caption-on-card",
    "Target 32x32 small for close-button"
  ]
}

发现的问题 → 修复方案（结论先行）：

HIG 得分 80/100：发布前需修复两项。

说明文字对比度不达标（3.26 < 4.5）。改用 .secondaryLabel（语义化颜色）替代硬编码的 #8E8E93，或在白色背景上加深至 ≥ #6E6E73。🟢 工具已验证。

关闭按钮为 32x32 pt（低于 44x44 的最小要求）。保持图标尺寸较小，但通过 padding/contentShape 将点击区域扩展至 44x44。🟢 工具已验证。

人工检查：该卡片在照片背景上使用了超薄材质。请在背景最繁杂的区域，并开启降低透明度，重新测试说明文字的对比度。🟡 需要在设备上测试。

核心设计原则

Liquid Glass：半透明材质层级（于 2025 年 6 月 WWDC25 发布，2025 年 9 月随 iOS 26、iPadOS 26、macOS Tahoe、watchOS 26、tvOS 26、visionOS 26 正式推出）。在 SwiftUI 中，通过 glassEffect 视图修饰符应用，并保持内容与控件之间的层级关系。参见 references/visual-design.md。
无障碍优先：每个元素都要有 VoiceOver 标签，最小点击目标为 44x44 pt，普通文字对比度 4.5:1（大字号文字 3:1），支持 Dynamic Type。参见 references/accessibility.md。
平台人机工程学：iOS 上的标签栏与拇指可及范围，macOS 上的侧边栏、菜单栏与快捷键，visionOS 上的装饰件（ornaments）与注视状态，watchOS 上便于一瞥的竖向布局。参见 references/platform-specifics.md。

主动提示触发条件

即使用户没有提问，也应主动提示以下情况：半透明层上的对比度过低；交互元素小于 44 pt；没有无障碍标签的图标按钮；界面过于拥挤（玻璃层之间缺少留白）。

沟通方式

结论先行：先说明合规状态，再展开细节。
做什么 + 为什么 + 怎么做：例如"扩大点击区域（做什么），因为 32 pt 的目标低于 HIG 的最小值（为什么）；通过 contentShape 填充至 44x44（怎么做）。"
置信度标注：🟢 工具已验证 / 🟡 需在设备上测试 / 🔴 假设性结论。