关于 eliminate-visual-clutter
用于精简界面装饰的设计技能，面向评估和修改 UI 的设计者。它识别缺乏功能作用的边框、背景、阴影等元素，并以留白和对比建立层次。
主要功能
- 01评估界面视觉杂乱程度
- 02识别可移除的装饰元素
- 03用留白替代多余分隔线
- 04输出精简后的设计规范
适用场景
- 01检查卡片是否堆叠边框与阴影
- 02减少页面中无意义的分隔线
- 03精简背景色和装饰图标
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/eliminate-visual-clutter确认已加载。
详细介绍
技能：消除视觉杂乱
目的
移除不必要且不具备功能用途的视觉元素（边框、背景、阴影、装饰）。
类型
纠正 + 评估
输入
- 设计截图或描述
- 元素清单（边框、阴影、背景、分隔线）
输出
- 杂乱度评估（哪些元素可以移除）
- 简化后的设计规范
- 通过/不通过评级
执行的转换
识别并移除不传达含义的装饰元素，改用留白和对比度。
判断标准
通过（设计简洁）
- 每个视觉元素都有功能用途
- 使用留白而非边框来分隔
- 不使用无意义的装饰性阴影或渐变
- 谨慎使用背景（不是每张卡片都需要背景）
- 分隔线尽可能少
不通过（设计杂乱）
- 所有元素都加边框（显得“方方正正”）
- 使用装饰性阴影
- 区块之间有多条分隔线
- 每个组件都使用背景色
- 使用不传达含义的装饰元素
需要审视的元素
| 元素 | 思考问题 | 通常移除吗？ |
|---|---|---|
| 边框 | 这里需要边框，还是只需留出间距？ | 是，用外边距代替 |
| 卡片背景 | 这里需要一个方框，还是只需留白？ | 通常移除，让间距来划分组别 |
| 分隔线 | 这里需要一条线，还是只需增加间距？ | 通常增加间距 |
| 阴影 | 这里需要立体感，还是只是装饰？ | 通常移除，改为扁平样式 |
| 背景色 | 这种颜色是否传达了什么信息？ | 如果纯属装饰，就移除 |
| 图标 | 这个图标是否增添了含义？ | 如果仅用于装饰，就移除 |
简化的步骤
- 从元素齐全的设计开始（边框、阴影、背景）
- 移除边框 → 改用间距
- 移除背景 → 用留白划分组别
- 移除分隔线 → 增加区块之间的间距
- 移除阴影 → 仅在需要层级效果时保留（模态框、下拉菜单）
- 只加回层级或清晰度所需的元素
使用的视觉/UX 信号
- 留白：最优雅的分隔方式
- 邻近关系：无需边框即可划分组别
- 排版：无需装饰即可建立层级
- 对比度：无需添加额外元素即可突出重点
常见失败模式
| 失败模式 | 描述 | 修正方法 |
|---|---|---|
| 边框泛滥 | 每个元素周围都有方框 | 移除至少 50% 的边框，改用间距 |
| 阴影泛滥 | 静态元素上使用阴影 | 仅用于悬停状态和模态框 |
| 分隔线过多 | 每个区块之间都有线条 | 移除一半，并将间距加倍 |
| 背景泛滥 | 每张卡片都有灰色背景 | 使用白色背景并留出间距，或使用浅色边框 |
| 图标泛滥 | 每个标签和按钮上都有图标 | 仅在图标能增添含义时保留 |
| 渐变失控 | 到处都是装饰性渐变 | 改为扁平样式，或只使用一个有明确用途的渐变 |
前提条件
- 已建立间距系统
- 已建立视觉层级
依赖项
apply-consistent-spacing（留白代替边框）establish-visual-hierarchy（对比度代替装饰）
Refactoring UI 参考
- “从留白过多开始”
- “能用间距时就不要用边框”
- “避免方方正正的设计”
- “少即是多”
评估示例
输入： 一张卡片，包含：边框（1px 灰色）、背景（#f5f5f5）、阴影（sm）、带图标的标题、分隔线、内容、分隔线、带图标和文本的页脚
评估： 不通过（杂乱）
- 边框 + 背景 + 阴影 = 过度设计
- 两条分隔线没有必要
- 图标可能只是装饰
建议：
- 移除背景（使用白色）
- 移除阴影（静态卡片不需要层级效果）
- 保留边框，或使用充足的内边距
- 移除分隔线，增加区块内边距
- 判断图标是否有实际含义；如果只是装饰，就移除
评论
支持 Markdown