---
name: visual-aesthetics
description: 视觉呈现是任务目标、改动对象或验收条件时使用：创建或修改可见外观、视觉评审、配色、字体与排版布局、层次与焦点组织。产出前提供组织原理与兜底纪律防结构性下限，产出后按维度清单评审指认问题。纯功能性改动（不改可见外观）、普通文本答复与日志输出不触发。
---

# 视觉美学通用原理

视觉产出的保底机制：防结构性下限（丑），不保风格上限（美）。本页提供跨场景稳定的失败模式、兜底纪律与评审动线；不定义具体风格，不写死底色深浅、色相、渐变与否、容器与否——具体选择由主题推导，美的上限不由限定决定。裁决顺序固定：可读/功能 > 层级 > 一致性 > 美感偏好，冲突时高层胜出。

## 产出前先定

形式服务目的：动手前先回答三个问题，答案先于任何风格选择——

1. 第一焦点是什么？一屏/一图只允许一个，且落在最重要的元素上。
2. 重要性排序是什么？显著性的空间排序必须等于重要性排序。
3. 扫视动线怎么走？层级、焦点、动线没定之前不堆样式，脱离目的的美化是装饰。
4. 呈现条件是什么？目标介质、尺寸/视口与阅读条件决定产出约束和评审范围：网页覆盖相关窄屏、长内容与关键交互状态，文档覆盖分页与长内容；按介质取所需，不套统一矩阵。

需要具体组织手段（布局杠杆、色彩角色、字体与来源搭配）时，读取参考文件；简单调整按本页失败模式与兜底纪律执行即可。

## 失败模式（普适的"丑"）

| 模式 | 表现 | 根因 |
| --- | --- | --- |
| 平 | 无层级，所有元素同等视觉重量，第一眼没有入口 | 重要性未被可见地编码 |
| 挤 | 元素贴边、组间无呼吸、密度超载 | 留白被视为浪费而非内容 |
| 花 | 色彩/字体/形状来源过多，各自抢戏 | 无角色分配、无来源纪律 |
| 歪 | 该对齐的没对齐，网格混乱 | 对齐不成体系（最易被感知为"不专业"） |
| 噪 | 无理由的装饰变化，每个对比没有动机 | 把"变化"当趣味，不知趣味需受控 |
| 脏 | 低对比的灰读不清、浑浊的配色、透明滥用 | 明度/饱和度无秩序 |

## 兜底纪律（负约束：只约束选择的结构，不限定具体选择）

1. **选择有理由**：每个可见差异都要能说出动机（层级或语义）；色相由主题推导，说不出理由的效果删除。
2. **色彩有角色**：大面积低差异 + 小面积高对比；明度承载层级与可读性，色相负责语义与性格。
3. **分组有结构**：邻近优先，用距离表达关系；用容器则容器成体系，不用容器则靠对齐/间距/字重分组。
4. **密度有预算**：密度超载先调布局、间距、分页与层级，不改内容；只有任务明确允许内容编辑时才压缩文字，用户原文、事实数据与技术说明默认保留。信息密度越高的区域，装饰越要退后。
5. **来源有纪律**：字体族、图标风格、阴影/描边各自成体系，同类元素永远同待遇。一切"差一点"（差 1px 的对齐、相似但不同的间距、几乎一样的两种灰）比明显差异更伤质感：要么一致，要么明显不同。

## 评审词汇（命名才能看见）

1. **层级**：重要性是否被可见地编码（尺寸/字重/深浅/位置）。
2. **焦点**：第一眼落点是否唯一，且落在最重要的元素上。
3. **对齐**：元素是否落到共同的边缘或轴线上。
4. **间距**：组内距是否小于组间距；间距值是否成阶梯。
5. **密度**：单位面积信息量是否在舒适区。
6. **对比**：差异是否充分；每个差异是否有理由。
7. **一致性**：同类元素是否同待遇。
8. **平衡**：视觉重量（大小 × 深浅 × 数量）的分布是否有意。
9. **色彩秩序**：色相数量、角色分配、明度结构。
10. **动线**：扫视顺序是否与重要性排序一致。
11. **收口**：像素级细节——边缘、光学对齐、"差一点"问题。

## 评审动线（产出后按序执行，先整体后局部）

评审入口是产物的最终呈现，先按可观察性定评审深度，不越界虚构判断：

- **呈现可观察**（能渲染成图或截图）：渲染后走下方完整动线，含灰度与像素级收口。
- **只能读文本**（最终呈现不可得）：只走维度走查中的结构维度——层级、密度、一致性、动线；色彩、对齐、间距、平衡与收口属呈现专属，跳过，不发明像素级判断。
- **必要呈现无法取得**：相关维度在结论中标"未验证"，不视作已评审。

生成者看不到自己产出的最终呈现，无法自证观感；宿主有独立视觉评审能力（独立视觉评审 agent 或当前可用的视觉检查工具，名称与形态因宿主而异）时送其评审，本页维度清单作为评审依据。闭环：生成 → 渲染 → 维度化评审 → 定向修订 → 复审。交互产物另查适用的可访问性项——对比度阈值、状态不只靠颜色传达、焦点可见；灰度与截图评审不构成完整可访问性证明，阈值属各自语境。

1. **一瞥**：第一眼落点唯一且是最重要元素；不是 → 层级失败。
2. **眯眼**：模糊细节后仍剩清晰的结构团块（大/中/小、深/中/浅）；只剩均匀一片 → 平。
3. **灰度**：去色后仍可读、层级保留；不保留 → 色彩在代偿结构缺陷。
4. **维度走查**：按上方词汇逐维检查——对齐线是否成体系、间距阶梯是否规律、色相数量、同类元素是否同待遇。
5. **收口**：像素级错位、光学对齐、边缘溢出、"差一点"问题。

输出规范：每个问题必须指认——哪个维度、哪个元素、为什么、怎么改；评审结论记录检查对象与呈现条件，证据指向具体位置，无法取得的呈现列入未验证项。不给"感觉不好"的空判，不发明像素值，不给泛泛的美化建议。修订只动被指认的维度，改完复审；不做无指认依据的整体重生成。感知边界：对小字、低对比、1-2px 错位的敏感度与人类不同，评审必须走显式维度清单，不允许"看一眼说感觉"。

## 按需加载参考

| 需要 | 读取参考 |
| --- | --- |
| 组织版式、配色或搭配的具体手段（层级杠杆、色彩角色与和谐方案、字体纪律） | [design-principles.md](references/design-principles.md) |

任务命中才完整阅读；不要因文件存在而加载。