关于 elevation-and-depth
这项设计技能用于在界面中一致地表达层次与深度。它按组件角色定义阴影等级，并提供边框、渐变、圆角、文字分离和深色表面的设计指导。
主要功能
- 01按组件角色定义层级令牌
- 02通过阴影与边框增强边界清晰度
- 03指导使用轻微渐变和文字阴影
- 04统一按钮圆角
- 05调整深色表面的深度表现
适用场景
- 01为卡片和对话框选择阴影
- 02明确浅色背景上悬浮卡片的边缘
- 03检查层级与圆角的一致性
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/elevation-and-depth确认已加载。
详细介绍
高度与深度
高度通过阴影和层叠传达元素位于基础表面之上，为 UI 增添物理深度感。结合圆角后，能营造出触感，让卡片看起来可抓握、模态框明显悬浮，而下拉菜单则像是出现在内容之上。
高度层级
将少量高度级别定义为令牌。每个级别对应特定的 UI 角色。
| 级别 | 令牌 | 阴影 | 角色 |
|---|---|---|---|
| 0 | --shadow-none | 无 | 平面表面、行内元素 |
| 1 | --shadow-xs | 0 1px 2px rgba(0,0,0,0.06) | 轻微卡片、表格行悬停状态 |
| 2 | --shadow-sm | 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06) | 卡片、输入框焦点环区域 |
| 3 | --shadow-md | 0 4px 6px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06) | 下拉菜单、弹出层 |
| 4 | --shadow-lg | 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05) | 模态框、对话框、侧边抽屉 |
| 5 | --shadow-xl | 0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04) | 命令面板、全屏覆盖层 |
阴影应保持微妙。深色、厚重的阴影显得过时且具有视觉侵略性。轻盈、柔和的阴影则显得现代且有质感。
“阴影 + 边框”规则
白色表面上的微妙阴影有时会显得“褪色”，使卡片边缘模糊不清。
- 规则： 对于有高度的白色卡片或区块，应在阴影之外搭配 1px 边框，其颜色应比阴影的核心色调稍深（1.5 至 2 倍）（例如中灰色
#E2E8F0或grey-200）。 - 效果： 边框勾勒出卡片的实体边界，阴影则提供深度。两者结合，比单独使用任一效果都能让组件更加醒目清晰。
悬停状态需要明确的边缘
悬停时会改变背景颜色的卡片必须有明确的边缘——边框、阴影或清晰的圆角边界。没有这些，颜色变化就没有形状，看起来像随意涂上的色块，而不是高亮的卡片。无边框的平面卡片禁止使用背景变化悬停效果——应改为在悬停时使用边框或阴影（高度）。
用微妙的渐变营造深度
渐变可为界面增添“活力”，并强化高度感。
- 光照隐喻： 轻微的线性渐变（从上到下）若顶部稍亮，就能模拟自然的顶部光照。这会让表面比纯色填充显得更有实体感和高度感。
- 5% 规则： 渐变应极其微妙。顶部到底部的亮度变化通常只需 2–5% 就足够。如果用户能轻易看出渐变的起止位置，那它很可能过于明显。
- 用法： 应用于主按钮、主视觉卡片和页头区块，以改善视觉层级和品牌个性。
高度与圆角的搭配
圆角和阴影共同塑造表面的特征。这种组合传达出元素的角色以及产品的视觉调性。
| 表面 | 阴影 | 圆角 | 调性 |
|---|---|---|---|
| 行内标签 / 标记 | 无 | --radius-full（胶囊形） | 平面、轻量 |
| 卡片 | --shadow-sm | --radius-md（8–12px） | 可抓握、内敛 |
| 下拉菜单 / 弹出层 | --shadow-md | --radius-md（8px） | 悬浮、因境而设 |
| 模态框 / 对话框 | --shadow-lg | --radius-lg（12–16px） | 突出、聚焦 |
| Toast / 通知 | --shadow-md | --radius-md | 短暂、位于内容之上 |
| 按钮 | 无或 --shadow-xs | 所有按钮应保持一致——见下文 |
粗重的强调色边框与圆角永远不要共用一条边
不要沿圆角框的一侧绘制粗重的彩色边框。边框会产生斜接：强调色与相邻边框相交时，渲染器会切出一条对角接缝，而圆角又会将这条接缝弯成曲线，因此强调色会明显变窄，并在圆角结束前逐渐脱离。4px 的边缘在 8px 的圆角上，大部分长度都会逐渐变细。应改用单独填充的元素来呈现强调色，例如用容器圆角干净裁切的色条或色块；或者在强调色延伸的区域使用直角边框。填充不会产生斜接或渐细效果。
圆角一致性规则
同一产品中的按钮圆角必须一致。 所有按钮——主按钮、次按钮、危险操作按钮、幽灵按钮——都使用相同的圆角设计令牌。不同按钮类型使用不同圆角会破坏视觉一致性，并暗示并不存在的语义差异。
/* Correct: one radius for all buttons */
.btn { border-radius: var(--radius-button); }
/* Wrong: different radii for different button variants */
.btn-primary { border-radius: 8px; }
.btn-secondary { border-radius: 4px; } /* ← breaks consistency */
按钮圆角设计令牌是品牌决策——设定一次，并应用于所有按钮。
用文本阴影提升对比度并增强分离感
text-shadow 可以让文字从背景中凸显出来，同时不改变颜色——当对比度勉强达标，或文字位于照片、渐变或复杂背景上时，这一效果很有用。
阴影效果必须微妙到难以察觉。如果用户注意到了阴影，那就说明效果太强。
/* On images or complex backgrounds */
.hero-title {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
/* Very subtle separation from a near-matching background */
.label-on-tinted-surface {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
/* White text on light background — use a dark shadow, not white */
.inverted-text {
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
}
规则：
- 不透明度：保持在
0.30以下——超过这一数值，阴影看起来就像刻意的设计选择，而非细节优化 - 模糊：最多
2–4px——数值更高会让文字显得脏污 - 偏移：使用
0 1px或0 0——超过2px的方向性偏移会显得像复古的 Web 2.0 风格 - 绝不要用
text-shadow来弥补对比度不足——应先调整颜色。仅当颜色已接近达标、需要稍作增强，或文字位于不可预测的图像上时才使用
深色模式阴影
阴影在深色背景上不那么明显。在深色表面上，可通过以下方式补偿：
- 略微提高阴影值的不透明度
- 添加微妙的边框（
1px solid rgba(255,255,255,0.08)），以界定卡片边缘 - 将层级提高一级，以获得相同的感知深度
审查清单
- 是否已将明确的层级刻度定义为设计令牌（而非为每个组件单独设置阴影值）？
- 每个有层级感的元素是否都根据其作用使用了正确的层级（卡片 ≠ 模态框）？
- 阴影是否轻柔且柔和，避免使用浓重的黑色（#000）默认值？
- 对于浅色背景上的白色卡片，是否将阴影与
1px边框搭配，以更清晰地界定卡片？ - 所有按钮变体的圆角是否一致？
- 阴影是否微妙且柔和，而非浓重暗沉？
- 在深色表面上，卡片／面板边缘是否通过边框或调整后的阴影清晰可见？
- 是否利用层级来传达层次关系，而不只是装饰？
- 如果使用渐变，是否足够微妙（明度变化
2–5%），并用于强化光照／层级的隐喻？
常见反模式
| 反模式 | 问题 | 修正方法 |
|---|---|---|
| 主按钮与次按钮的圆角不同 | 暗示了并不存在的语义差异 | 所有按钮使用单一的 --radius-button 令牌 |
使用粗重的 box-shadow: 0 8px 16px rgba(0,0,0,0.4) | 显得过时，视觉上也过于强烈 | 使用低不透明度、多层次的柔和阴影 |
| 不区分作用，在每个元素上都添加阴影 | 当所有元素都有层级感时，层级就失去意义 | 仅为真正悬浮的元素保留阴影 |
| 白色背景上没有层级感的扁平卡片 | 卡片边缘会融入页面 | 使用 --shadow-sm 或 1px 边框来界定卡片边界 |