eliminate-visual-clutter

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Skill: Eliminate Visual Clutter

Skill：消除视觉杂乱

Purpose

目标

Remove unnecessary visual elements (borders, backgrounds, shadows, decorations) that don't serve functional purposes.

移除无功能性用途的不必要视觉元素（边框、背景、阴影、装饰）。

Type

类型

Corrective + Evaluative

修正型 + 评估型

Input

输入

Design screenshot or description
Element inventory (borders, shadows, backgrounds, separators)

设计截图或描述
元素清单（边框、阴影、背景、分隔线）

Output

输出

Clutter assessment (what can be removed)
Simplified design specification
Pass/Fail rating

杂乱评估（可移除内容）
简化后的设计规范
通过/不通过评级

Transformation Performed

执行的优化

Identifies and removes decorative elements that don't communicate meaning, using whitespace and contrast instead.

识别并移除无意义传达的装饰元素，转而使用留白和对比度。

Decision Criteria

判断标准

PASS (Clean Design)

通过（简洁设计）

Every visual element serves a functional purpose
Whitespace used instead of borders to separate
No decorative shadows or gradients without purpose
Backgrounds used sparingly (not every card needs one)
Minimal separator lines

每个视觉元素都具备功能性用途
用留白替代边框实现分隔
无无目的的装饰性阴影或渐变
背景使用克制（并非每个卡片都需要背景）
分隔线数量极少

FAIL (Cluttered Design)

不通过（杂乱设计）

Borders on everything ("boxy" look)
Shadows used decoratively
Multiple separator lines between sections
Background colors on every component
Decorative elements that don't communicate meaning

所有元素都加边框（“盒状”视觉效果）
阴影仅用于装饰
板块间存在多条分隔线
每个组件都添加背景色
存在无意义传达的装饰元素

Elements to Question

需要质疑的元素

Element	Ask	Often Remove?
Borders	Does this need a border, or just space?	Yes, use margin instead
Card backgrounds	Does this need a box, or just whitespace?	Often, let space define groups
Separators	Does this need a line, or just more space?	Usually, increase gap instead
Shadows	Does this need depth, or is it decorative?	Often, flatten
Background colors	Is this color communicating something?	If purely decorative, remove
Icons	Does this icon add meaning?	If decorative only, remove

元素	提问	是否常移除？
边框	这个元素需要边框，还是只需要空间？	是，改用外边距
卡片背景	这个元素需要容器盒，还是只需要留白？	通常是，用空间来界定分组
分隔线	这个元素需要线条，还是只需要更大的间距？	通常是，增大间距替代
阴影	这个元素需要体现层级深度，还是仅作装饰？	通常是，扁平化处理
背景色	这个颜色是否在传递特定信息？	若仅作装饰则移除
图标	这个图标是否增添了信息价值？	若仅作装饰则移除

The Progression of Simplification

简化流程

Start with everything (borders, shadows, backgrounds)
Remove borders → Use spacing instead
Remove backgrounds → Use whitespace to group
Remove separators → Increase space between sections
Remove shadows → Keep only for elevation (modals, dropdowns)
Add back only what's needed for hierarchy or clarity

初始状态（包含边框、阴影、背景）
移除边框 → 改用间距替代
移除背景 → 用留白实现分组
移除分隔线 → 增大板块间距
移除阴影 → 仅为弹窗、下拉框等需要层级的元素保留
仅添加必要元素以保证层级清晰

Visual/UX Signals Used

视觉/UX信号运用

Whitespace: The most elegant separator
Proximity: Groups without borders
Typography: Hierarchy without decoration
Contrast: Emphasis without extra elements

留白：最优雅的分隔方式
邻近性：无需边框即可实现分组
排版：无需装饰即可建立层级
对比度：无需额外元素即可实现强调

Common Failure Modes

常见问题类型

Failure	Description	Fix
Border-itis	Every element has a box around it	Remove 50%+ of borders, use space
Shadow Spam	Shadows on static elements	Reserve for hover states and modals
Separator Overload	Lines between every section	Remove half, double the space
Background Soup	Every card has a gray background	Use white with space, or subtle border
Icon Explosion	Icons on every label and button	Keep only when they add meaning
Gradient Gone Wild	Decorative gradients everywhere	Flatten or use one purposeful gradient

问题	描述	修复方案
边框泛滥	每个元素都被边框包裹	移除50%以上的边框，改用间距
阴影滥用	静态元素添加阴影	仅为 hover 状态和弹窗保留阴影
分隔线过载	每个板块间都有分隔线	移除一半分隔线，将间距加倍
背景混乱	每个卡片都使用灰色背景	改用白色背景加间距，或使用细微边框
图标爆炸	每个标签和按钮都添加图标	仅保留能增添信息价值的图标
渐变失控	装饰性渐变随处可见	扁平化处理，或仅保留一个有明确用途的渐变

Prerequisites

前提条件

Spacing system in place
Visual hierarchy established

已建立间距系统
已确立视觉层级

Dependencies

依赖项

```
apply-consistent-spacing
```
(whitespace replaces borders)
```
establish-visual-hierarchy
```
(contrast replaces decoration)

```
apply-consistent-spacing
```
（用留白替代边框）
```
establish-visual-hierarchy
```
（用对比度替代装饰）

Refactoring UI References

重构UI参考

"Start with too much whitespace"
"Don't use borders when you can use spacing"
"Avoid boxy designs"
"Less is more"

“从充足的留白开始”
“能用间距时就别用边框”
“避免盒状设计”
“少即是多”

Example Assessment

评估示例

Input: Card with: border (1px gray), background (#f5f5f5), shadow (sm), title with icon, separator line, content, separator line, footer with icon and text

Evaluation: FAIL (cluttered)

Border + background + shadow = overkill
Two separator lines unnecessary
Icons may be decorative

Recommendation:

Remove background (use white)
Remove shadow (static card doesn't need elevation)
Keep border OR use generous padding
Remove separator lines, increase section padding
Evaluate icons for meaning, remove if decorative

输入： 包含以下元素的卡片：边框（1px灰色）、背景（#f5f5f5）、阴影（sm）、带图标的标题、分隔线、内容、分隔线、带图标和文字的页脚

评估： 不通过（杂乱）

边框+背景+阴影=过度设计
两条分隔线无必要
图标可能仅作装饰

建议：

移除背景（改用白色）
移除阴影（静态卡片无需层级深度）
保留边框或使用充足内边距
移除分隔线，增大板块内边距
评估图标是否有信息价值，仅作装饰则移除