关于 use-shadows-appropriately
用于评估并调整界面阴影的设计技能，适合需要控制视觉层级的设计工作。它将阴影用于表达高度或交互，避免静态元素上的装饰性阴影。
主要功能
- 01评估阴影使用是否合适
- 02按元素高度建议阴影层级
- 03移除静态元素的装饰性阴影
- 04建议一致的阴影系统
适用场景
- 01调整弹窗和下拉菜单的层级阴影
- 02减少静态卡片上的阴影杂乱
- 03统一按钮与交互状态的阴影
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/use-shadows-appropriately确认已加载。
详细介绍
技能：恰当地使用阴影
目的
仅在功能上确有必要时增加深度和层次感，避免使用装饰性阴影。
关键改进（来自 Autoresearch）
补充细节：卡片上的微妙阴影可以接受（比边框更不显眼）。静态元素上的大型装饰性阴影并不合适。
类型
纠正 + 评估
输入
- UI 元素清单
- 元素用途（静态、交互式、叠加层）
- 当前的阴影规格
输出
- 阴影使用建议
- 通过/未通过评估
执行的转换
移除静态元素上的装饰性阴影，仅在具有层次感的图层上使用阴影（例如内容上方的模态框、页面上方的下拉菜单）。
判定标准
通过（阴影使用恰当）
- 卡片上的小阴影（微妙、不如边框显眼）✅
- 模态框/对话框：大型阴影（层次高于所有内容）
- 下拉菜单/菜单：中等阴影（高于页面、低于模态框）
- 卡片：微妙阴影或无阴影（优先采用扁平设计）
- 悬停状态：微妙地增强阴影（表明可点击）
- 静态元素：无阴影
- 阴影系统保持一致（最多 2–3 个层级）
未通过（阴影使用不当）
- 静态卡片上的大型装饰性阴影
- 静态内容上的厚重阴影
- 阴影值不一致
- 未体现层次感的装饰性阴影
- 文字或图标上的阴影
细节（关键见解）
卡片上的微妙阴影（模糊范围小、不透明度低）可以接受。书中建议用它们替代边框。静态内容上的大型、醒目阴影并不合适。
阴影层次刻度
| 层级 | 用途 | CSS 示例（近似值） |
|---|---|---|
| 无 | 静态内容、文字、图标 | none |
| 微妙 | 卡片（替代边框） | 0 2px 4px rgba(0,0,0,0.1) |
| 低 | 凸起的卡片、按钮 | 0 4px 6px rgba(0,0,0,0.1) |
| 中 | 下拉菜单、弹出层、工具提示 | 0 10px 15px rgba(0,0,0,0.1) |
| 高 | 模态框、对话框、抽屉 | 0 20px 25px rgba(0,0,0,0.15) |
阴影原则
- 阴影表示层次感——层级越高，越靠近用户
- 阴影表示交互性——可点击的元素可以带阴影
- 阴影用于区分图层——模态框会在其背后的页面上投下阴影
- 阴影应当微妙——好的阴影几乎难以察觉
- 一致性很重要——相同层次使用相同阴影
常见失败模式
| 失败模式 | 描述 | 修正方法 |
|---|---|---|
| 阴影地毯 | 每张卡片都有阴影 | 将静态卡片设计为扁平样式；微妙阴影可以接受 |
| 滥用投影 | 静态元素上使用厚重阴影 | 仅用于体现层次感或交互性 |
| 深度不一致 | 相似元素使用不同阴影 | 建立 2–3 个阴影层级，并保持一致 |
| 黑色阴影 | 使用纯黑阴影（显得生硬） | 使用低不透明度的 rgba，并加入品牌色调 |
| 模态框未区分层次 | 模态框看起来没有高于页面 | 增大阴影扩散范围和模糊半径 |
前置条件
- 已建立视觉层次
- 了解哪些元素具有交互性
依赖项
eliminate-visual-clutter（阴影往往会造成杂乱）
Refactoring UI 参考
- “用阴影表现层次感”
- “用盒阴影替代硬边框——微妙的阴影可以有效勾勒轮廓，又不会造成视觉杂乱”
- “阴影应当微妙”
评估示例
输入： 页面使用卡片阴影（0 4px 6px rgba(0,0,0,0.1)）、按钮阴影（0 2px 4px）、模态框阴影（0 4px 6px），文字带有 text-shadow
评估： 未通过（杂乱）
- 卡片是静态内容，不需要阴影
- 模态框阴影与卡片相同（应使用更高层级的阴影）
- 文字阴影仅起装饰作用
建议：
- 移除卡片阴影，或改用微妙阴影（
0 2px 4px） - 移除文字阴影
- 模态框：
0 20px 25px rgba(0,0,0,0.15) - 按钮：仅在悬停时使用可选的微妙阴影
评论
支持 Markdown