SuperAPI AI 工具集

apple-design-foundations

设计与创作

查看项目

更新于 10-16 09:35

技能介绍

用途:在构建 Apple 风格界面时,用于挑选调色板、深色模式策略与广色域颜色,设定字号层级(应用内 Dynamic Type 或 apple.com 营销标题),以及确定间距、网格、安全区与 Bento 布局。

核心规则:颜色优先使用语义角色(如 label、systemBackground、systemBlue),不要硬编码无法适配明暗与对比度的十六进制色值。深色模式是调暗而非反转,升高层级的面应更亮,纯黑仅用于必要时。字体使用系统字体栈,如 font-family: -apple-system, system-ui, "SF Pro", ...;SF 未授权为任意网页字体,应依赖该字体栈,并匹配光学字号(SF Text 约小于 20pt,SF Display 约 20pt 及以上)。Dynamic Type 必须能重排,布局需随之伸缩换行,大字号下不得截断正文。采用 8pt 网格(紧凑间隙可用 4pt 半步),点按目标最小 44×44pt,并遵守 env(safe-area-inset-*)。

参考文件:references/color-systems.md 提供语义/系统色表、P3、深色模式阶梯、对比度与 CSS tokens;references/typography.md 提供 SF 家族、光学字号、Dynamic Type 表、字距与营销 clamp() 缩放;references/layout-grid-spacing.md 提供 8pt 系统、边距/内边距、apple.com 断点与 Bento 网格配方。

常见错误:用硬编码色值替代自适应 token、深色模式纯反转、光学字号或伪粗体使用不当、正文字距过紧、间距脱离网格、忽略安全区、Bento 布局缺少主视觉块而显得拥挤。相关资料未提供安装命令与收费信息。