内容
# 视觉素养
> AI 不仅仅需要指令。它需要人类专业知识的可教模型。
**视觉素养** 是一个推理框架，旨在通过模拟人类感知心理学和专家设计启发式来教导 AI 进行视觉设计决策，而不仅仅依赖于格式化指令。
## 问题
AI 可以生成布局，但它无法告诉你布局是否**有效**。它不会注意到：
- 扁平的层次结构（所有内容看起来同等重要）
- 破碎的节奏（间距是任意的）
- 竞争的强调（多个元素争夺注意力）
- 认知超载（太多，太密集，没有休息）
- 视觉噪音（干扰理解的装饰）
现有的解决方案为 AI 提供检查清单来遵循。视觉素养为 AI 提供**感知能力** —— 能够推理视觉结构为何有效或失败。
## 解决方案
一个六层的推理架构：
```
心理模型 → 专家如何看待该领域
↓
感知原则 → 解释原因的认知科学
↓
启发式 → 实用的经验法则
↓
冲突解决 → 规则冲突时的做法
↓
评估标准 → 质量的结构化评分
↓
转换层 → 将简单指令转换为专家推理
```
该架构是领域无关的。视觉素养是首个应用。相同的六层可以用于教导 AI 在建筑、医学、教育、领导力或任何具有隐性专业知识的领域进行专家认知。
## 快速开始
### 安装
```bash
# 适用于任何项目的单行命令
npx visual-literacy add
```
或手动安装：
```bash
git clone https://github.com/amberhoward/visual-literacy.git
cp -r visual-literacy/skill ./your-project/.opencode/skills/visual-literacy
```
### 使用
```
使用视觉素养技能，评估此设计。
为每个维度评分 0-5，并提供具体的修复建议。
```
### 查看差异
**之前（格式化）：**
> “添加更多空白。”
**之后（感知推理）：**
> “内容之间的视觉距离没有反映创意之间的概念关系。将章节间距增加到 2-3 倍的段内间距，以显示有意义的过渡。”
## 内部结构
| 组件 | 目的 |
|-----------|---------|
| **SKILL.md** | 核心框架 — 三种模式，推理过程，输出要求 |
| **感知原则** | 认知科学基础 — 格式塔，工作记忆，预注意力处理 |
| **设计启发式** | 8 类共 24 条启发式，优先级排序 |
| **评估标准** | 8 个维度评分 0-5（总分 40） |
| **启发式冲突** | 规则冲突时的解决框架 |
| **格式化到感知** | 转换词典 — “使其更大” → 感知意图 |
| **教程** | 常见设计任务的逐步指南 |
| **MCP 服务器** | 通过模型上下文协议为任何 AI 客户端公开工具 |
## 三种模式
| 模式 | 使用场景 | 功能 |
|------|----------|-------------|
| **设计** | 创建新内容 | 在生成输出前推理视觉决策 |
| **评估** | 审查现有作品 | 诊断违反感知原则的问题 |
| **转换** | 给定格式化反馈 | 将“使其更大”转换为感知目标 |
## 适用于每种编码助手
### Claude Code / OpenCode / Cursor / Windsurf / Cline / Codex / Aider / Continue
所有这些都支持 `SKILL.md` 文件。将技能目录复制到您的项目中：
```bash
# 选项 1：克隆并复制
git clone https://github.com/amberhoward/visual-literacy.git
cp -r visual-literacy/skill ./.opencode/skills/visual-literacy
# 选项 2：单行命令
npx visual-literacy add
```
AI 将在您在提示中引用它时自动发现该技能。
### 作为 MCP 服务器
适用于支持模型上下文协议的客户端：
```json
{
"mcp": {
"visual-literacy": {
"type": "local",
"command": ["npx", "visual-literacy-mcp"],
"enabled": true
}
}
}
```
这公开了诸如 `evaluate_design`、`translate_instruction` 和 `score_heuristics` 之类的工具，供任何 MCP 兼容的客户端调用。
### 作为系统提示
将核心原则复制到您的系统提示中：
```
你是一个视觉设计推理代理。在做出任何视觉决策之前，请推理以下几点：（1）信息结构，（2）人类感知，（3）认知负荷，（4）故意结构。
每个视觉决策都必须根据人类如何感知信息来解释。如果您无法解释为什么某个选择有助于理解，那么它就是装饰，而不是设计。
```
## 评估示例
```
输入：一个项目报告，内容密集，没有标题，间距均匀。
评估：
层次结构： 1/5 — 没有视觉层次结构。所有文本显得同等重要。
分组： 1/5 — 相关部分在视觉上没有连接。
节奏： 0/5 — 没有一致的间距标准。数值任意。
强调： 0/5 — 没有突出显示的内容。读者必须扫描所有内容。
流畅度： 1/5 — 没有明确的路径。读者必须搜索章节。
平衡： 2/5 — 文本分布均匀，但视觉单调。
完整性： 2/5 — 页面感觉完整但未完成。
克制力： 2/5 — 没有装饰，但也没有有意的设计。
总分：9/40 — 严重。需要进行重大重新设计。
P0：没有层次结构 — 读者无法识别最重要的信息。
P1：没有分组 — 相关内容显得不相关。
P1：没有扫描锚点 — 读者必须阅读每个字才能找到内容。
```
## 石蕊测试
> “我能否根据人类如何感知和处理这些信息来解释每个间距决策、每个字体选择、每个分组和每个强调？”
如果是，设计是有道理的。
如果否，它就是装饰。
## 哲学
该项目始于一个简单的问题：*你如何向 AI 解释空白？*
答案结果证明与空白无关。它与感知有关 —— 人们在有意识地开始阅读之前如何体验信息。
同样的方法可以应用于任何具有隐性知识的领域：
- 建筑师如何看待建筑
- 医生如何看待病人
- 教师如何看待学习
- 领导者如何看待团队
挑战在每个案例中都是相同的：**使专家直觉可教。**
视觉素养是第一章。
## 贡献
欢迎贡献。六层架构是领域无关的 — 如果您将其应用于新领域，我们希望展示它。
## 许可证
MIT
## 鸣谢
由 Amber Howard 创建。与 OpenCode 和 ChatGPT 合作开发。
