关于 apple-design-foundations
为设计工作提供 Apple 平台色彩、排版与布局规范的技能，适用于界面和网页设计。内容强调语义化颜色、动态字体适配、安全区域与网格规则，并附有专题参考资料。
主要功能
- 01语义化系统颜色与深色模式
- 02系统字体与动态字体排版
- 038 点网格和安全区域规范
- 04色彩、字体及布局参考资料
适用场景
- 01选择适配明暗模式的配色
- 02设定应用或营销页面的字体层级
- 03规划间距、网格与安全区域
- 04设计响应式布局和 Bento 网格
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/apple-design-foundations确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
references/color-systems.mdlayout-grid-spacing.mdtypography.md详细介绍
Apple Design — 基础 (颜色 · 字体排印 · 布局)
Apple 构建每一个界面所依赖的视觉基础。深入内容位于三个参考文件中；这里是地图 + 你不能弄错的规则。
何时使用
- 选择调色板、深色模式策略或广色域颜色。
- 设置字体层级（应用内 Dynamic Type 或 apple.com 营销标题）。
- 建立间距、网格、安全区域或 bento 布局。
不可妥协的规则
- 语义优先于字面颜色。 使用系统角色（
label、systemBackground、systemBlue）；绝不要硬编码无法适应浅色/深色/对比度的十六进制颜色。 - 深色模式 = 调暗，而非反转。 抬升表面会变更亮，而不是纯反转。纯黑只用在适合 OLED 的地方。
- 系统字体栈。
font-family: -apple-system, system-ui, "SF Pro", ...— SF 不授权作为任意 Web 字体使用；请依赖字体栈。匹配光学尺寸（SF Text < ~20pt，SF Display ≥ ~20pt）。 - Dynamic Type 必须重排。 布局要增长/换行；大尺寸下绝不要截断正文文本。
- 8 点网格（紧凑间隙用 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 网格配方 |
常见错误
- 使用硬编码十六进制颜色而非自适应 tokens；深色模式使用纯反转。
- 错误的光学尺寸 / 伪粗体；正文字距过紧。
- 脱离网格的间距；忽略安全区域；没有主视觉 tile 的拥挤 bento。
相关： 玻璃/通透颜色 → apple-design-materials · 动态中的字体 → apple-design-motion · 对比度/Dynamic Type 作为无障碍 → apple-design-tactics。
评论
支持 Markdown