关于 apple-design-materials
apple-design-materials 是一项用于设计 Apple 风格半透明界面、应用图标和 SF Symbols 的技能，提供实现建议，并说明无障碍、形状与视觉一致性方面的注意事项。
主要功能
- 01半透明玻璃界面的设计指引
- 02Web 近似实现方式与效果限制
- 03降低透明度时的备用方案
- 04Squircle 形状的实现选项
- 05SF Symbols 的字重、尺寸与渲染模式
适用场景
- 01设计磨砂导航面板或弹层
- 02制作带连续曲率圆角的应用图标
- 03选择与邻近文字匹配的 SF Symbols 样式
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/apple-design-materials确认已加载。
附带文件references/iconography-sf-symbols.mdreferences/materials-liquid-glass.md
详细介绍
Apple Design — 材质与图标体系
Apple 的表面特质：半透明玻璃材质，以及图标/符号系统。
何时使用
- 构建磨砂/玻璃面板、导航、表单页或 Liquid Glass 外观。
- 设计应用图标（squircle 不是普通的圆角矩形）。
- 使用或模仿 SF Symbols。
核心规则
- 玻璃是一层材质，而不是一种油漆。 它会采样 + 模糊背后的内容，然后用鲜艳的标签着色。Web 近似做法：
backdrop-filter: blur() saturate()+ 半透明填充 + 顶部边缘的浅色高光。CSS 无法实现 Apple 的实时透镜/折射效果——只能近似，不要假装能做到。 - 绝不要在玻璃上叠加玻璃，也绝不要把低对比度文字放在繁杂的半透明区域上。始终提供
prefers-reduced-transparency的不透明回退方案。 - squircle 是 G2 连续曲率形状（社区逆向工程得出的 Bézier），不是
border-radius。请使用clip-path/SVG，或corner-shape: squircle（Chrome 139+，Safari/Firefox 尚不支持）。 - SF Symbols 会匹配字体字重 + 光学尺寸；请审慎选择一种渲染模式（monochrome / hierarchical / palette / multicolor）。不要把所有内容都设为多色。
参考
| 文件 | 用途 |
|---|---|
references/materials-liquid-glass.md | 系统材质名称、Liquid Glass 行为、CSS 玻璃配方、SwiftUI .glassEffect()、保真度限制 |
references/iconography-sf-symbols.md | Squircle 数学 + CSS/SVG、图标网格、SF Symbols 字重/缩放/模式/效果 |
常见错误
- 对所有内容过度模糊；玻璃叠玻璃；忽略 reduce-transparency。
- 用简单的
border-radius代替连续圆角；图标图形脱离网格。 - 符号字重与相邻文字不匹配；multicolor 过度使用。
相关： 材质的颜色/对比度 → apple-design-foundations · reduce-transparency 下的玻璃 → apple-design-tactics。
评论
支持 Markdown