视觉素养：教会 AI 像设计师一样观察
AI 不仅需要指令。它需要可传授的人类专业知识模型。
这是什么
Visual Literacy 是一个推理框架——不是提示模板，不是格式指南，也不是 CSS 工具。它通过模拟人类如何感知信息，教会 AI 做出视觉设计决策。
它解决的问题：AI 可以生成布局，但无法判断布局是否有效。它不会注意到扁平的层级、断裂的节奏、冲突的重点或认知过载。这个框架将这些感知作为明确的推理原则赋予 AI。
这增强人类判断。它不会取代人类判断。
Visual Literacy 教会 AI 推理设计，以便人类能更快做出更好的决策——而不是让 AI 独自做决策。
目标是协作：
- AI 提供结构化分析、感知推理和诊断框架
- 人类提供意图、品味、上下文、受众知识和最终判断
一个能对八个维度进行 0-5 评分的 AI 很有用。但一个因为评分较低而覆盖设计师合理决策的 AI 则不是。
使用这个框架来锐化你的思考，而不是外包它。
前提
AI 没有视觉直觉。它无法立即识别页面是否平衡、拥挤、未完成、令人困惑或优雅。这种直觉必须被转化为明确的推理原则。
教会 AI 视觉素养意味着不仅要教它如何格式化信息，还要教它人类如何感知信息。
重点从格式化转向感知。
核心原则
每个视觉决策都应该能够用人类将如何感知和处理信息来解释。\n 如果你无法解释为什么某个视觉选择有助于人类理解，那它就是装饰。如果你能根据认知来解释它，那就是设计。
快速开始
1. 将技能复制到你的项目
# 克隆仓库
git clone https://github.com/amberhoward/visual-literacy.git
# 复制到你的项目技能目录
cp -r visual-literacy/.opencode/skills/visual-literacy ./your-project/.opencode/skills/
2. 告诉你的 AI 使用它
在你的提示或系统消息中：
使用 visual-literacy 技能来评估和推理这个文档的设计。
3. 看到区别
之前（格式化指令）：
"让标题更大，并增加更多空白。"
之后（感知推理）：
"视觉层级不足——读者无法通过浏览识别信息结构。无关部分之间的间距与部分内部的间距没有区分。增加标题-正文对比度。使用 2-3 倍于内部间距的跨部分间距来标示概念距离。"
何时使用这个技能
在以下情况下使用这个技能：
- 创建任何文档、报告或演示文稿
- 设计界面或布局
- 评估或批评现有设计
- 就间距、层级、分组或强调做出决策
- 将格式化指令转化为感知决策
- 调试某些“感觉不对”但说不出原因的情况
- 进行设计审查或 UX 审计
三种模式
模式 1：设计（主动式）
在创建新内容时，在输出之前使用启发式规则推理视觉决策。不要等到被问起为什么选择某个特定布局。
如何使用： 要求 AI 在生成设计之前逐步展示其感知推理：
在设计这个页面之前，逐步展示你的感知推理：
1. 信息结构是什么？
2. 人类将如何感知它？
3. 我向读者施加了多大的认知负荷？
4. 视觉结构是否传达出意图？
然后基于该推理生成设计。
模式 2：批评（评估式）
在审查现有作品时，使用感知框架诊断问题。指出问题所在、为什么错以及违反了哪个认知原则。
如何使用： 提供截图、代码或描述，并要求进行结构化批评：
使用 visual-literacy 评估量表批评这个设计。
对每个维度进行 0-5 评分，标识严重级别，并提供
带有感知依据的特定修复建议。
模式 3：翻译（指导式）
当给出格式化指令时，将其转化为背后的感知意图。然后执行感知目标，而不是字面指令。
如何使用： 给出一个格式化指令并要求翻译：
我想"给这个页面添加更多空白"。使用
格式化到感知的翻译指南，解释这个指令背后的
感知意图，然后正确执行它。
感知推理过程
在做出任何视觉决策之前，执行以下序列：
1. 信息结构是什么？
- 主要内容是什么？
- 重要性的层级是什么？
- 哪些项目逻辑上应该分组在一起？
- 哪些必须按顺序阅读 vs. 哪些可以浏览？
2. 人类将如何感知它？
- 眼睛首先会看向哪里？那是正确的位置吗？
- 读者能否在 5 秒内浏览并找到他们需要的内容？
- 相关概念在视觉上是否连接？
- 内容是否有清晰的路径？
3. 我向读者施加了多大的认知负荷？
- 读者在每个点需要做出多少决策？
- 我是否要求他们将信息保存在工作记忆中？
- 如果被打断，他们能否轻松找回位置？
- 密度是否适合内容类型？
4. 视觉结构是否传达出意图？
- 每个元素是否值得占据它的空间？
- 间距是否传达关系还是偶然性？
- 模式是否以目的或是不一致的方式重复？
- 页面是否感觉完整，而不是被遗弃？
启发式框架
8 个类别，24 条启发式规则，一个优先级系统。
| 类别 | 数量 | 核心问题 |
|---|---|---|
| 层级 | 3 | 眼睛知道先看哪里吗？ |
| 分组 | 3 | 相关项目在视觉上连接吗？ |
| 节奏 | 3 | 读者能形成预期吗？ |
| 强调 | 3 | 重要信息突出吗？ |
| 平衡 | 2 | 视觉重量有意分布吗？ |
| 完成度 | 3 | 页面感觉完整吗？ |
| 流动 | 3 | 内容有清晰的路径吗？ |
| 克制 | 3 | 每个元素都值得它的空间吗？ |
查阅 references/design-heuristics.md 获取带有感知依据、违规和诊断方法的完整目录。
启发式规则冲突时的优先级顺序：
- 层级——读者必须知道什么最重要
- 分组——读者必须知道什么属于一起
- 流动——读者必须知道下一步去哪里
- 强调——读者必须知道什么最重要
- 节奏——读者必须能够形成预期
- 平衡——布局必须感觉稳定
- 完成度——页面必须感觉完整
- 克制——每个元素必须值得它的位置
感知原则
认知科学基础。不是设计规则——而是关于人类大脑如何处理视觉信息的事实。
| 原则 | 解释了什么 |
|---|---|
| 格式塔（邻近性、相似性、闭合、连续性、图形-背景、共同区域） | 大脑如何自动分组信息 |
| 工作记忆（米勒的 7±2、认知分块） | 大脑一次能处理多少信息 |
| 预注意加工 | 大脑在有意识思考之前看到了什么 |
| 阅读模式（F 型、Z 型、古腾堡图表） | 眼睛如何在页面上移动 |
| 信噪比 | 大脑必须过滤掉什么 |
| 渐进揭示 | 大脑如何分层构建理解 |
| 一致性 | 大脑如何形成和使用预测 |
| 可供性 | 视觉形式如何传达功能 |
查阅 references/perceptual-principles.md 获取完整基础。
评估量表
对任何设计在 8 个维度上进行 0-5 评分。总分：/40。
| 维度 | 衡量什么 |
|---|---|
| 层级 (0-5) | 读者能否不阅读就识别重要性？ |
| 分组 (0-5) | 组归属是否明确？ |
| 节奏 (0-5) | 读者能否形成布局预期？ |
| 强调 (0-5) | 读者的注意力是否去了正确的地方？ |
| 流动 (0-5) | 眼睛是否自然地在内容中移动？ |
| 平衡 (0-5) | 视觉重量是否有意分布？ |
| 完成度 (0-5) | 页面是否感觉完整？ |
| 克制 (0-5) | 每个元素是否值得它的空间？ |
| 总分 | 评级 |
|---|---|
| 0-10 | 严重——需要重大重新设计 |
| 11-18 | 显著问题——多个维度需要改进 |
| 19-25 | 可用——需要特定改进 |
| 26-32 | 良好——生产就绪，稍加打磨 |
| 33-38 | 优秀——只需微调 |
| 39-40 | 卓越——以此作为范例教学 |
查阅 references/evaluation-rubric.md 获取评分指南、严重性分类 (P0-P3) 和修复建议。
解决冲突
当启发式规则向相反方向拉扯时：
| 冲突 | 解决方案 |
|---|---|
| 层级 vs. 极简主义 | 极简主义意味着少量处理，而不是没有处理。以最少手段创造最大层级。 |
| 完成度 vs. 空白 | 完成度来自结构，而不是密度。60% 内容 / 40% 空白可以感觉完整。 |
| 一致性 vs. 强调 | 一致性是默认，强调是例外。有意地、少量地、显著地打破它。 |
| 密度 vs. 休息 | 交替密集和稀疏的段落。提供暂停的扫描锚点。 |
| 惯例 vs. 差异化 | 遵循结构惯例。通过内容和微妙的处理进行差异化。 |
查阅 references/heuristic-conflicts.md 获取完整的解决框架。
格式化到感知的翻译
| 指令 | 感知意图 |
|---|---|
| "添加更多空白" | 视觉距离不能反映概念关系。 |
| "让标题更大" | 层级不足以支持浏览。 |
| "拆分段落" | 视觉块超出了工作记忆限制。 |
| "让它突出" | 元素需要更多强调以匹配其重要性。 |
| "简化这个" | 认知负荷对内容类型来说太高了。 |
| "让它更专业" | 视觉信号与内容的权威级别不匹配。 |
查阅 references/formatting-to-perception.md 获取完整的翻译词典。
架构
这个技能遵循一个六层推理架构：
心智模型 → 专家如何感知这个领域
↓
感知原则 → 解释原因的科学
↓
启发式规则 → 实用经验法则
↓
冲突解决 → 规则矛盾时该怎么办
↓
评估量表 → 质量的结构化评分
↓
翻译层 → 将幼稚指令转化为专家推理
这个架构是领域无关的。视觉素养是第一个应用。同样的六层架构可以教会 AI 在架构、医学、教育、领导力或任何隐性专业知识难以表达的领域中掌握专家认知。
输出要求
使用这个技能时，始终：
- 指出每个视觉决策背后的感知原则
- 解释布局选择的认知效果
- 根据违反的原则诊断问题，而不是审美偏好
- 在批评时使用评估量表评分设计
- 当被要求实施反馈时，将指令从格式化翻译成感知
反模式
永远不要：
- 选择布局是因为它“看起来很专业”而不解释原因
- 添加不服务于理解的装饰元素
- 将间距、排版或颜色视为任意的审美选择
- 因为“感觉对了”而跳过推理步骤
- 机械地应用启发式规则而不考虑具体内容
试金石
在生成任何视觉设计后，问：
"我能否解释每一个间距决策、每一个字体选择、每一个分组以及每一个强调，以人类将如何感知和处理这个信息为依据？"
如果能，设计是有推理的。 如果不能，那就是装饰。