SuperAPI AI 工具集

hig-foundations

设计与创作

查看项目

更新于 10-15 14:13

技能介绍

hig-foundations 是 raintree-technology/hig-doctor 技能库中的一个技能,主题为 Apple Human Interface Guidelines(HIG)设计基础。当用户询问 "HIG color"、"Apple typography"、"SF Symbols"、"dark mode" 等 Apple 设计规范相关问题时,可使用该技能。

使用方式

在提问前先检查 .claude/apple-design-context.md。应使用已有上下文,只询问尚未覆盖的信息。

关键原则

  • 内容优先于装饰(chrome)。减少视觉杂乱。使用系统提供的材质和细微分隔线,而不是厚重的边框和背景。
  • 从设计之初内置无障碍。从第一天起就为 VoiceOver、Dynamic Type、Reduce Motion、Increase Contrast 和 Switch Control 进行设计。每个交互元素都需要无障碍标签。
  • 使用系统颜色和材质。系统颜色会适应浅色/深色模式、增强对比度和活力(vibrancy)。优先使用语义颜色(label、secondaryLabel、systemBackground),而不是硬编码值。
  • 使用平台字体和图标。默认使用 SF Pro、SF Compact、SF Mono。衬线字体使用 New York。遵循推荐字号下的字体层级。图标使用 SF Symbols。
  • 匹配平台惯例。外观和行为与系统标准保持一致。为每个操作提供直接、响应式的操作和清晰反馈。
  • 尊重隐私。仅在需要时请求权限,清楚说明原因,在请求数据前先提供价值。以最小数据收集为设计目标。
  • 支持国际化。适应文本扩展、从右到左文字以及不同的日期/数字格式。使用 Auto Layout 实现动态内容尺寸。
  • 有目的地使用动效。动画应传达含义和空间关系。通过提供交叉淡入淡出替代方案来遵循 Reduce Motion。

参考索引

技能提供以下参考文件,每个文件对应一个主题和关键内容:

  • accessibility.md:无障碍。VoiceOver、Dynamic Type、颜色对比度、运动无障碍、Switch Control、音频描述。
  • app-icons.md:应用图标。图标网格、各平台尺寸、单一焦点、无透明度。
  • branding.md:品牌。在 Apple 设计语言中整合品牌标识、细微品牌化、自定义色调。
  • color.md:颜色。系统颜色、动态颜色、语义颜色、自定义调色板、对比度。
  • dark-mode.md:深色模式。抬升表面、语义颜色、适配调色板、活力、在两种模式下测试。
  • icons.md:图标。字形图标、SF Symbols 集成、自定义图标设计、图标字重、光学对齐。
  • images.md:图像。图像分辨率、@2x/@3x 资源、矢量资源、图像无障碍。
  • immersive-experiences.md:沉浸式体验。AR/VR 设计、空间沉浸、舒适区、渐进式沉浸级别。
  • inclusion.md:包容性。多元化呈现、非性别化语言、文化敏感性、包容性默认值。
  • layout.md:布局。边距、间距、对齐、安全区域、自适应布局、可读内容参考线。
  • materials.md:材质。活力、模糊、半透明、系统材质、材质厚度。
  • motion.md:动效。动画曲线、过渡、连续性、Reduce Motion 支持、基于物理的动效。
  • privacy.md:隐私。权限请求、用途描述、隐私营养标签、最小数据收集。
  • right-to-left.md:从右到左。RTL 布局镜像、双向文本、需要翻转的图标、例外情况。
  • sf-symbols.md:SF Symbols。符号类别、渲染模式、可变颜色、自定义符号、字重匹配。
  • spatial-layout.md:空间布局。visionOS 窗口放置、深度、人体工学区域、Z 轴设计。
  • typography.md:字体排版。SF Pro、Dynamic Type 字号、文本样式、自定义字体、字重层级、行距。
  • writing.md:写作。UI 文案指南、语气、大小写规则、错误消息、按钮标签、简洁性。

综合应用各项基础

技能建议考虑各项原则如何相互作用:

  • 颜色 + 深色模式 + 无障碍:自定义调色板必须在两种模式下都可用,同时保持 WCAG 对比度。从系统语义颜色开始。
  • 字体排版 + 无障碍 + 布局:Dynamic Type 必须在不破坏布局的情况下缩放。使用文本样式和 Auto Layout 覆盖全部字号范围。
  • 图标 + 品牌 + SF Symbols:自定义图标应匹配 SF Symbols 的字重和光学尺寸。品牌元素应整合而不覆盖系统惯例。
  • 动效 + 无障碍 + 反馈:每个动画都必须有 Reduce Motion 替代方案。动效应强化空间关系,而不是装饰。
  • 隐私 + 写作 + 引导:权限请求需要清晰、具体的用途描述。将其安排在用户能理解其益处时。

输出格式

  • 引用具体的 HIG 基础,注明文件和章节。
  • 说明用户目标平台的平台差异。
  • 提供具体的代码模式(SwiftUI/UIKit/AppKit)。
  • 解释无障碍影响(对比度、Dynamic Type 缩放、VoiceOver 行为)。

需询问的问题

  • 你面向哪些平台?
  • 你是否有现有品牌指南?
  • 你面向什么无障碍级别?(WCAG AA、AAA、Apple 基线?)
  • 使用系统颜色还是自定义颜色?

相关技能

  • hig-platforms:各项基础如何按平台应用(例如 watchOS 与 macOS 的字号差异)。
  • hig-patterns:写作和无障碍等基础至关重要的交互模式。
  • hig-components-layout:实现布局原则的结构性组件。
  • hig-components-content:使用颜色、字体排版和图像的内容展示。

该技能由 Raintree Technology 构建。