visual-aesthetics · diff
git:20261018.76bb18d to git:20261021.95b28f7
37 added, 60 removed. Audit A to A.
---
name: visual-aesthetics
- description: 视觉呈现是任务目标、改动对象或验收条件时使用：创建或修改可见外观、视觉评审、配色、字体与排版布局、层次与焦点组织。产出前提供组织原理与兜底纪律防结构性下限，产出后按维度清单评审指认问题。纯功能性改动（不改可见外观）、普通文本答复与日志输出不触发。
+ description: 当视觉呈现是任务目标、改动对象或验收条件时使用。按形式、内容与情境之间恰当而有表现力的关系组织或评审视觉产出，并以实际呈现为证据。纯功能改动、普通文本答复或没有视觉呈现的日志不触发。
---
- # 视觉美学通用原理
-
- 视觉产出的保底机制：防结构性下限（丑），不保风格上限（美）。本页提供跨场景稳定的失败模式、兜底纪律与评审动线；不定义具体风格，不写死底色深浅、色相、渐变与否、容器与否——具体选择由主题推导，美的上限不由限定决定。裁决顺序固定：可读/功能 > 层级 > 一致性 > 美感偏好，冲突时高层胜出。
-
- ## 产出前先定
-
- 形式服务目的：动手前先回答四个问题，答案先于任何风格选择——
-
- 1. 是否存在单一主要目标？若有，第一焦点落在该目标上；若有并列的主要目标，以一致的显著性组织，不人为制造优先级。
- 2. 重要性排序是什么？显著性的空间排序必须等于重要性排序。
- 3. 扫视动线怎么走？层级、焦点、动线没定之前不堆样式，脱离目的的美化是装饰。
- 4. 呈现条件是什么？目标介质、尺寸/视口与阅读条件决定产出约束和评审范围：网页覆盖相关窄屏、长内容与关键交互状态，文档覆盖分页与长内容；按介质取所需，不套统一矩阵。
+ # 视觉美学
- 需要具体组织手段（布局杠杆、色彩角色、字体与来源搭配）时，读取参考文件；简单调整按本页失败模式与兜底纪律执行即可。
+ 美的工作定义是**形式、内容与情境之间恰当而有表现力的关系**。表达可以服务功能、理解、情感、气质或文化意味；根据需求、内容、受众、媒介和限制选择目标。选择有理由不代表效果已成立。不设定固定风格，也不承诺普遍的美。
- ## 失败模式（普适的"丑"）
+ 按此顺序工作：**明确意图 → 组织关系 → 结合情境取舍 → 观察效果**。六条方法是可选择的思考提示，不是规则、评分项或完整的中国美学理论：
- | 模式 | 表现 | 根因 |
+ | 方法 | 操作提示 | 边界 |
| --- | --- | --- |
- | 平 | 无层级，所有元素同等视觉重量，第一眼没有入口 | 重要性未被可见地编码 |
- | 挤 | 元素贴边、组间无呼吸、密度超载 | 留白被视为浪费而非内容 |
- | 花 | 色彩/字体/形状来源过多，各自抢戏 | 无角色分配、无来源纪律 |
- | 歪 | 该对齐的没对齐，网格混乱 | 对齐不成体系（最易被感知为"不专业"） |
- | 噪 | 无理由的装饰变化，每个对比没有动机 | 把"变化"当趣味，不知趣味需受控 |
- | 脏 | 低对比的灰读不清、浑浊的配色、透明滥用 | 明度/饱和度无秩序 |
-
- ## 兜底纪律（负约束：只约束选择的结构，不限定具体选择）
-
- 1. **选择有理由**：每个可见差异都要能说出动机（层级或语义）；色相由主题推导，说不出理由的效果删除。
- 2. **色彩有角色**：大面积低差异 + 小面积高对比；明度承载层级与可读性，色相负责语义与性格。
- 3. **分组有结构**：邻近优先，用距离表达关系；用容器则容器成体系，不用容器则靠对齐/间距/字重分组。
- 4. **密度有预算**：密度超载先调布局、间距、分页与层级，不改内容；只有任务明确允许内容编辑时才压缩文字，用户原文、事实数据与技术说明默认保留。信息密度越高的区域，装饰越要退后。
- 5. **来源有纪律**：字体族、图标风格、阴影/描边各自成体系，同类元素永远同待遇。一切"差一点"（差 1px 的对齐、相似但不同的间距、几乎一样的两种灰）比明显差异更伤质感：要么一致，要么明显不同。
-
- ## 评审词汇（命名才能看见）
+ | **以意统形** | 要表达什么？每项形式选择如何支持它？ | 遵循用户目标，不补入默认风格。 |
+ | **虚实相生** | 哪些内容应呈现、强调、留白或暗示？ | 留白不能隐藏用户要求或理解所必需的信息。 |
+ | **疏密有致** | 信息和注意力应在哪里聚集、在哪里舒展？ | 内容和任务需要时可以高密度。 |
+ | **气韵贯通** | 哪些节奏、呼应或动势构成预期气质，实际效果是否可观察？ | 指明具体元素与关系；单说“缺少气韵”不是证据。 |
+ | **变化有度** | 什么建立连贯，什么差异表达内容、层级或节奏？ | 细微变化也可能成立；有意图不等于效果成立。 |
+ | **因境制宜** | 内容、受众、媒介和限制如何影响表达选择？ | 不把情境变成固定风格模板。 |
- 1. **层级**：重要性是否被可见地编码（尺寸/字重/深浅/位置）。
- 2. **焦点**：第一眼落点是否唯一，且落在最重要的元素上。
- 3. **对齐**：元素是否落到共同的边缘或轴线上。
- 4. **间距**：组内距是否小于组间距；间距值是否成阶梯。
- 5. **密度**：单位面积信息量是否在舒适区。
- 6. **对比**：差异是否充分；每个差异是否有理由。
- 7. **一致性**：同类元素是否同待遇。
- 8. **平衡**：视觉重量（大小 × 深浅 × 数量）的分布是否有意。
- 9. **色彩秩序**：色相数量、角色分配、明度结构。
- 10. **动线**：扫视顺序是否与重要性排序一致。
- 11. **收口**：像素级细节——边缘、光学对齐、"差一点"问题。
+ 除非用户明确允许编辑，否则保留用户提供的原文、事实和数据。审美意图不能豁免用户约束或必要可读性。本 skill 提供方法与评审依据，不要求增加角色、工具、评分字段或强制机制；执行范围服从当前任务授权。
- ## 评审动线（产出后按序执行，先整体后局部）
+ ## 评审结果
- 评审入口是产物的最终呈现，先按可观察性定评审深度，不越界虚构判断：
+ 检查所有提供的同类产物，并在适用时检查彼此的一致性。沿用以下五步观察和 11 个维度；每项都按任务意图与验收要求判断，不能仅因输入媒介而跳过。真正不适用的项目需说明理由；必要证据缺失应标为 **Unverified**，不能改成“不适用”。
- - **呈现可观察**（能渲染成图或截图）：渲染后走下方完整动线，含灰度与像素级收口。
- - **只能读文本**（最终呈现不可得）：只走维度走查中的结构维度——层级、密度、一致性、动线；色彩、对齐、间距、平衡与收口属呈现专属，跳过，不发明像素级判断。
- - **必要呈现无法取得**：相关维度在结论中标"未验证"，不视作已评审。
+ 1. **一瞥：**注意首先落在哪里？这是否支持预期理解或感受？
+ 2. **眯眼：**弱化细节后，预期关系、节奏或氛围是否仍可感知？均匀本身不等于失败。
+ 3. **灰度：**仅在颜色承担必要层级或区分时使用；只有未满足明确要求才记为违反。
+ 4. **维度走查：**依据任务逐项观察：层级、焦点、对齐、间距、密度、对比、一致性、平衡、色彩秩序、动线和收口。各维度含义见下表。
+ 5. **收口：**按要求和可观察结果检查细节、边缘与完成度。
- 生成者看不到自己产出的最终呈现，无法自证观感；宿主有独立视觉评审能力（独立视觉评审 agent 或当前可用的视觉检查工具，名称与形态因宿主而异）时送其评审，本页维度清单作为评审依据。闭环：生成 → 渲染 → 维度化评审 → 定向修订 → 复审。交互产物另查适用的可访问性项——对比度阈值、状态不只靠颜色传达、焦点可见；灰度与截图评审不构成完整可访问性证明，阈值属各自语境。
+ | 维度 | 观察含义 |
+ | --- | --- |
+ | 层级 | 内容相对重要性是否按意图可辨。 |
+ | 焦点 | 注意落点是否符合意图；需要主次时检查主焦点，需要分布注意时检查其组织关系。 |
+ | 对齐 | 元素的对齐或错位是否支持预期的关联与区别。 |
+ | 间距 | 距离、留白和节奏是否支持内容关系。 |
+ | 密度 | 信息量是否适合内容、受众、表达目的和可读要求。 |
+ | 对比 | 差异是否足以辨认、承载预期关系且彼此不冲突。 |
+ | 一致性 | 相似与差异是否符合元素各自的内容或作用。 |
+ | 平衡 | 视觉力量与空缺的分布是否形成预期效果。 |
+ | 色彩秩序 | 色彩关系、角色与明暗是否支持表达和必要辨识。 |
+ | 动线 | 实际注意路径与预期理解或感受是否相符。 |
+ | 收口 | 边缘、细节和完成度是否符合本次要求。 |
- 1. **一瞥**：有单一主要目标时，第一眼应落在该目标上；有并列主要目标时，检查入口与扫视顺序是否服务比较任务，不要求人为设定唯一焦点。
- 2. **眯眼**：模糊细节后仍剩清晰的结构团块（大/中/小、深/中/浅）；只剩均匀一片 → 平。
- 3. **灰度**：去色后仍可读、层级保留；不保留 → 色彩在代偿结构缺陷。
- 4. **维度走查**：按上方词汇逐维检查——对齐线是否成体系、间距阶梯是否规律、色相数量、同类元素是否同待遇。
- 5. **收口**：像素级错位、光学对齐、边缘溢出、"差一点"问题。
+ 发现已证实违反要求时，结论为 **fail**，并同时列出未知项。没有已知违反但缺少必要证据时为 **Unverified**。只有必要检查完成且没有违反时才为 **pass**。确实不适用的项目须说明理由。`pass` 只覆盖实际检查范围，不证明普遍美或保证用户喜欢。
- 输出规范：每个问题必须指认——哪个维度、哪个元素、为什么、怎么改；评审结论记录检查对象与呈现条件，证据指向具体位置，无法取得的呈现列入未验证项。不给"感觉不好"的空判，不发明像素值，不给泛泛的美化建议。修订只动被指认的维度，改完复审；不做无指认依据的整体重生成。感知边界：对小字、低对比、1-2px 错位的敏感度与人类不同，评审必须走显式维度清单，不允许"看一眼说感觉"。
+ 每个已证实问题都要指出元素或关系、相关意图或约束、观察到的结果和证据。主观建议单独列出。不得用“缺少气韵”或“不够高级”等抽象判断代替证据，也不编造像素值。保留适用的可访问性要求，例如足够的对比度、状态不只靠颜色传达，以及交互场景中的焦点可见。
- ## 按需加载参考
+ 使用现有角色和可用工具观察渲染结果；仅根据已指出的证据定向修改，再次评审：**生成 → 观察 → 定向修改 → 复审**。提案或意图说明不能证明最终效果。
- | 需要 | 读取参考 |
- | --- | --- |
- | 组织版式、配色或搭配的具体手段（层级杠杆、色彩角色与和谐方案、字体纪律） | [design-principles.md](references/design-principles.md) |
+ ## 按需参考
- 任务命中才完整阅读；不要因文件存在而加载。
+ 需要版式、色彩或视觉搭配的具体方法时，读取[设计原理参考](references/design-principles.md)。该文件扩展操作手段，不改变本页流程或任务约束。