視覺素養：教 AI 像設計師一樣看設計是做什麼的？

AI 需要的不是指令，而是可教學的人類專業知識模型。

這是什麼

視覺素養是一個推理框架——不是提示模板，不是格式指南，也不是 CSS 工具集。它透過模擬人類如何感知資訊，教 AI 做出視覺設計決策。

它解決的問題：AI 能生成佈局，卻無法告訴你佈局是否有效。它注意不到平面層級、破碎節奏、競爭性強調或認知超載。這個框架將這些感知作為明確的推理原則賦予 AI。

這輔助人類判斷，而非取代它

視覺素養教 AI 推理設計，以便人類能更快做出更好的決策——而不是讓 AI 獨自做決策。

目標是協作：

AI 提供 結構化分析、感知推理和診斷框架
人類提供 意圖、品味、情境、受眾知識和最終判斷

能夠在八個維度上為設計評分 0-5 分的 AI 很有用。但如果 AI 因為某個設計在量規上得分較低就推翻設計師的知情選擇，那就不是了。

使用這個框架來強化你的思考，而不是外包它。

前提

AI 沒有視覺直覺。它無法瞬間識別頁面何時感覺平衡、擁擠、未完成、混亂或優雅。這種直覺必須被轉譯為明確的推理原則。

教 AI 視覺素養意味著教它不僅是如何格式化資訊，而是人類如何感知資訊。

重點從格式化轉向感知。

核心原則

每個視覺決策都應能以人類將如何感知和處理資訊來解釋。

如果你無法解釋某個視覺選擇為何有助於人類理解，那就是裝飾。如果你能用認知來解釋它，那就是設計。

快速開始

1. 將技能複製到你的專案中

# 複製儲存庫
git clone https://github.com/amberhoward/visual-literacy.git

# 複製到專案的技能目錄
cp -r visual-literacy/.opencode/skills/visual-literacy ./your-project/.opencode/skills/

2. 告訴你的 AI 使用它

在你的提示或系統訊息中：

使用視覺素養技能來評估和推理此文件的設計。

3. 看看差異

之前（格式指令）：

"把標題變大，再加點空白。"

之後（感知推理）：

"視覺層級不足——讀者無法掃描並識別資訊結構。不相關區塊之間的間距與區塊內部的間距沒有區別。增加標題與正文的對比。使用 2-3 倍於區塊內間距的區塊間間距來表示概念距離。"

何時使用此技能

在以下情況使用此技能：

建立任何文件、報告或簡報
設計介面或佈局
評估或批評現有設計
做出關於間距、層級、分組或強調的決策
將格式指令轉譯為感知決策
除錯「感覺不對勁」但無法命名的情況
執行設計審查或 UX 審計

三種模式

模式 1：設計（主動）

在建立新事物時，在產出前使用啟發式法則推理視覺決策。不要等到被問到為什麼選擇某個佈局。

如何使用： 要求 AI 在生成設計之前，先說明其視覺推理：

在設計這個頁面之前，請說明您的感知推理：
1. 資訊結構是什麼？
2. 人類將如何感知它？
3. 我給讀者帶來了多少認知負荷？
4. 視覺結構是否傳達了意圖？
然後基於該推理生成設計。

模式 2：評論（評估）

在審查現有作品時，使用感知框架診斷問題。指出哪裡錯了、為什麼錯了，以及違反了哪個認知原則。

如何使用： 提供螢幕截圖、程式碼或描述，並要求結構化評論：

使用視覺素養評估量規評論此設計。
每個維度評分 0-5，識別嚴重性等級，並提供
具體的修復建議及感知原理。

模式 3：轉譯（教學）

當收到格式指令時，將其轉譯為背後的感知意圖。然後執行感知目標，而非字面指令。

如何使用： 給出格式指令並要求轉譯：

我想「在這個頁面上增加空白」。使用
格式到感知的轉譯指南，解釋此指令背後的
感知意圖，然後正確執行它。

感知推理流程

在做出任何視覺決策之前，請按順序執行此序列：

1. 資訊結構是什麼？

主要內容是什麼？
重要性的層級是什麼？
哪些在邏輯上屬於同一組？
哪些必須按順序閱讀 vs. 哪些可以掃讀？

2. 人類將如何感知它？

視線會先落在哪裡？那是正確的位置嗎？
讀者能在 5 秒內掃描並找到所需內容嗎？
相關概念在視覺上相連嗎？
內容有明確的路徑嗎？

3. 我給讀者帶來了多少認知負荷？

讀者在每個點上需要做出多少決策？
我是否要求他們在工作記憶中保留資訊？
如果被打斷，他們能輕易恢復位置嗎？
密度是否適合內容類型？

4. 視覺結構是否傳達了意圖？

每個元素都值得其空間嗎？
間距是否傳達了關係或偶然？
模式是否帶有目的或是不一致地重複？
頁面感覺完整，而不是被遺棄嗎？

啟發式框架

八個類別，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	卓越——以此作為範例教學

評分指南、嚴重性分類（P0-P3）和修復建議請參閱 references/evaluation-rubric.md。

解決衝突

當啟發式法則相互矛盾時：

衝突	解決方案
層級 vs. 極簡主義	極簡主義意味著少量處理，而不是沒有處理。用最少的手段創造最大的層級。
完成度 vs. 空白	完成度來自結構，而非密度。60% 內容 / 40% 空白可以感覺完整。
一致性 vs. 強調	一致性是預設。強調是例外。有意識地、節制地、顯著地打破它。
密度 vs. 休息	交替密集和稀疏的區塊。提供掃描錨點以便暫停。
慣例 vs. 差異化	結構上遵循慣例。透過內容和細微處理來差異化。

完整的解決框架請參閱 references/heuristic-conflicts.md。

從格式到感知的轉譯

指令	感知意圖
"增加空白"	視覺距離未能反映概念關係。
"把標題變大"	層級不足以掃描。
"把段落分開"	視覺區塊超過了工作記憶限制。
"讓它突出"	元素需要根據其重要性獲得更多強調。
"簡化它"	認知負荷對於內容類型來說太高。
"讓它更專業"	視覺信號與內容的權威程度不匹配。

完整轉譯字典請參閱 references/formatting-to-perception.md。

架構

此技能遵循六層推理架構：

心智模型          → 專家如何感知此領域
    ↓
感知原則          → 解釋為什麼的認知科學
    ↓
啟發式法則        → 實用的經驗法則
    ↓
衝突解決          → 當規則矛盾時該怎麼做
    ↓
評估量規          → 結構化的品質評分
    ↓
轉譯層            → 將原始指令轉換為專家推理

此架構與領域無關。視覺素養是第一個應用。相同的六層架構可以教 AI 在建築、醫學、教育、領導力或任何隱性專業知識難以言傳的領域中的專家認知。

輸出要求

使用此技能時，務必：

說出每個視覺決策背後的感知原則
解釋佈局選擇的認知效果
以違反原則而非審美偏好來診斷問題
在評論時使用評估量規評分
在收到實現反饋的要求時，將指令從格式轉譯為感知

反模式

切勿：

因為「看起來專業」就選擇某個佈局，而不解釋原因
添加不理解目的的裝飾性元素
將間距、字體或顏色視為任意審美選擇
因為「感覺對了」就跳過推理步驟
不考慮特定內容而機械地應用啟發式法則

試金石

在產生任何視覺設計後，捫心自問：

「我能否解釋每個間距決策、每個字體選擇、每個分組和每個強調，在於人類將如何感知和處理此資訊？」

如果是，設計是經過推理的。如果否，那只是裝飾。

視覺素養：教 AI 像設計師一樣看設計