Visual Literacy: KI lehren, wie ein Designer zu sehen
KI braucht nicht nur Anweisungen. Sie braucht lehrbare Modelle menschlicher Expertise.
Was das ist
Visual Literacy ist ein Reasoning-Rahmenwerk – keine Prompt-Vorlage, kein Formatierungsleitfaden, kein CSS-Utility. Es lehrt KI, visuelle Designentscheidungen zu treffen, indem es modelliert, wie Menschen Informationen wahrnehmen.
Das Problem, das es löst: KI kann ein Layout erstellen, aber nicht sagen, ob das Layout funktioniert. Sie bemerkt keine flache Hierarchie, unterbrochenen Rhythmus, konkurrierende Betonung oder kognitive Überlastung. Dieses Framework gibt ihr diese Wahrnehmungen als explizite Reasoning-Prinzipien.
Das erweitert menschliches Urteilsvermögen. Es ersetzt es nicht.
Visual Literacy lehrt KI, über Design nachzudenken, damit Menschen schneller bessere Entscheidungen treffen können – nicht, damit KI allein Entscheidungen trifft.
Das Ziel ist eine Zusammenarbeit:
- KI liefert strukturierte Analysen, Wahrnehmungsreasoning und Diagnose-Frameworks
- Menschen liefern Absicht, Geschmack, Kontext, Zielgruppenkenntnis und endgültiges Urteil
Eine KI, die ein Design auf acht Dimensionen mit 0–5 bewerten kann, ist nützlich. Eine KI, die die fundierte Wahl eines Designers überschreibt, weil sie auf einer Bewertungsmatrix schlechter abgeschnitten hat, ist es nicht.
Nutze dieses Framework, um dein Denken zu schärfen, nicht um es auszulagern.
Die Prämisse
KI besitzt keine visuelle Intuition. Sie kann nicht sofort erkennen, ob eine Seite ausgewogen, überladen, unfertig, verwirrend oder elegant wirkt. Diese Intuition muss in explizite Reasoning-Prinzipien übersetzt werden.
KI visuelle Bildung beizubringen bedeutet, ihr nicht nur beizubringen, wie man Informationen formatiert, sondern wie Menschen Informationen wahrnehmen.
Der Wandel führt von Formatierung zu Wahrnehmung.
Das Kernprinzip
Jede visuelle Entscheidung sollte im Hinblick darauf erklärbar sein, wie ein Mensch die Informationen wahrnimmt und verarbeitet.
Wenn du nicht erklären kannst, warum eine visuelle Wahl einem Menschen hilft zu verstehen, ist sie Dekoration. Wenn du sie im Hinblick auf Kognition erklären kannst, ist sie Design.
Schnellstart
1. Kopiere das Skill in dein Projekt
# Repository klonen
git clone https://github.com/amberhoward/visual-literacy.git
# In das Skill-Verzeichnis deines Projekts kopieren
cp -r visual-literacy/.opencode/skills/visual-literacy ./dein-projekt/.opencode/skills/
2. Sag deiner KI, sie soll es nutzen
In deinem Prompt oder Systemnachricht:
Verwende das visual-literacy-Skill, um das Design dieses Dokuments zu bewerten und zu begründen.
3. Sieh den Unterschied
Vorher (Formatierungsanweisung):
„Mach die Überschriften größer und füge mehr weißen Raum hinzu.“
Nachher (Wahrnehmungsreasoning):
„Die visuelle Hierarchie ist unzureichend – der Leser kann die Informationsstruktur nicht überfliegen und identifizieren. Der Abstand zwischen nicht zusammenhängenden Abschnitten unterscheidet sich nicht vom Abstand innerhalb von Abschnitten. Erhöhe den Kontrast zwischen Überschrift und Textkörper. Verwende Zwischenabschnittsabstände, die 2-3x größer sind als die Abstände innerhalb von Abschnitten, um konzeptionelle Distanz zu signalisieren.“
Wann dieses Skill verwenden
Verwende dieses Skill, wenn:
- Du ein Dokument, einen Bericht oder eine Präsentation erstellst
- Du Schnittstellen oder Layouts entwirfst
- Du bestehende Designs bewertest oder kritisierst
- Du Entscheidungen über Abstände, Hierarchie, Gruppierung oder Betonung triffst
- Du eine Formatierungsanweisung in eine Wahrnehmungsentscheidung übersetzt
- Du debuggen möchtest, warum etwas „sich falsch anfühlt“, aber nicht benennen kannst, warum
- Du eine Design-Review oder UX-Prüfung durchführst
Die drei Modi
Modus 1: Design (Proaktiv)
Wenn du etwas Neues erstellst, denke vor der Ausgabe visuelle Entscheidungen anhand der Heuristiken durch. Warte nicht, bis du gefragt wirst, warum du dich für ein bestimmtes Layout entschieden hast.
So verwenden: Bitte die KI, ihr visuelles Reasoning vor dem Generieren des Designs durchzugehen:
Bevor du diese Seite entwirfst, gehe dein Wahrnehmungsreasoning durch:
1. Was ist die Informationsstruktur?
2. Wie wird ein Mensch dies wahrnehmen?
3. Welche kognitive Last erlege ich dem Leser auf?
4. Kommuniziert die visuelle Struktur die Absicht?
Dann generiere das Design basierend auf diesem Reasoning.
Modus 2: Kritik (Evaluativ)
Wenn du bestehende Arbeit überprüfst, diagnostiziere Probleme mit dem Wahrnehmungsrahmenwerk. Benenne, was falsch ist, warum es falsch ist und welches kognitive Prinzip verletzt wird.
So verwenden: Gib einen Screenshot, Code oder eine Beschreibung und bitte um eine strukturierte Kritik:
Verwende die Bewertungsmatrix von Visual Literacy, kritisiere dieses Design.
Bewerte jede Dimension mit 0–5, identifiziere Schweregrade und gib
spezifische Korrekturempfehlungen mit Wahrnehmungsrationale.
Modus 3: Übersetzen (Anleitend)
Wenn du eine Formatierungsanweisung erhältst, übersetze sie in die dahinterliegende Wahrnehmungsabsicht. Führe dann das Wahrnehmungsziel aus, nicht die wörtliche Anweisung.
So verwenden: Gib eine Formatierungsanweisung und bitte um die Übersetzung:
Ich möchte „dieser Seite mehr weißen Raum hinzufügen.“ Verwendung des
Formatierung-zu-Wahrnehmung-Übersetzungsleitfadens erkläre die Wahrnehmungsabsicht
hinter dieser Anweisung und führe sie dann korrekt aus.
Wahrnehmungsreasoning-Prozess
Gehe vor jeder visuellen Entscheidung diese Sequenz durch:
1. Was ist die Informationsstruktur?
- Was ist der primäre Inhalt?
- Was ist die Hierarchie der Wichtigkeit?
- Was gehört logisch zusammen?
- Was muss sequenziell gelesen werden vs. was kann überflogen werden?
2. Wie wird ein Mensch dies wahrnehmen?
- Wo wird das Auge zuerst hingehen? Ist das die richtige Stelle?
- Kann der Leser in unter 5 Sekunden überfliegen und finden, was er braucht?
- Sind zusammenhängende Konzepte visuell verbunden?
- Gibt es einen klaren Pfad durch den Inhalt?
3. Welche kognitive Last erlege ich dem Leser auf?
- Wie viele Entscheidungen muss der Leser an jedem Punkt treffen?
- Zwinge ich ihn, Informationen im Arbeitsgedächtnis zu behalten?
- Kann er seinen Platz leicht wiederfinden, wenn er unterbrochen wird?
- Ist die Dichte für den Inhaltstyp angemessen?
4. Kommuniziert die visuelle Struktur die Absicht?
- Verdient jedes Element seinen Platz?
- Kommuniziert der Abstand Beziehung oder Zufall?
- Wiederholen sich Muster mit Absicht oder Inkonsistenz?
- Wirkt die Seite vollständig, nicht verlassen?
Das heuristische Framework
Acht Kategorien, 24 Heuristiken, ein Prioritätssystem.
| Kategorie | Anzahl | Kernfrage |
|---|---|---|
| Hierarchie | 3 | Weiß das Auge, wo es zuerst hinschauen soll? |
| Gruppierung | 3 | Sind verwandte Elemente visuell verbunden? |
| Rhythmus | 3 | Kann der Leser Erwartungen bilden? |
| Betonung | 3 | Hebt sich wichtige Information ab? |
| Ausgewogenheit | 2 | Ist das visuelle Gewicht absichtlich verteilt? |
| Vollständigkeit | 3 | Wirkt die Seite abgeschlossen? |
| Fluss | 3 | Gibt es einen klaren Pfad durch den Inhalt? |
| Zurückhaltung | 3 | Verdient jedes Element seinen Platz? |
Siehe references/design-heuristics.md für den vollständigen Katalog mit Wahrnehmungsrationale, Verstößen und Diagnosemethoden.
Prioritätsreihenfolge bei Konflikten zwischen Heuristiken:
- Hierarchie – der Leser muss wissen, was am wichtigsten ist
- Gruppierung – der Leser muss wissen, was zusammengehört
- Fluss – der Leser muss wissen, wohin er als Nächstes gehen soll
- Betonung – der Leser muss wissen, was am meisten zählt
- Rhythmus – der Leser muss Erwartungen bilden können
- Ausgewogenheit – das Layout muss sich stabil anfühlen
- Vollständigkeit – die Seite muss sich abgeschlossen anfühlen
- Zurückhaltung – jedes Element muss seinen Platz verdienen
Wahrnehmungsprinzipien
Die kognitionswissenschaftliche Grundlage. Keine Designregeln – Fakten darüber, wie das menschliche Gehirn visuelle Informationen verarbeitet.
| Prinzip | Was es erklärt |
|---|---|
| Gestalt (Nähe, Ähnlichkeit, Geschlossenheit, Kontinuität, Figur-Grund, gemeinsamer Bereich) | Wie das Gehirn Informationen automatisch gruppiert |
| Arbeitsgedächtnis (Millers 7±2, kognitives Chunking) | Wie viel das Gehirn auf einmal verarbeiten kann |
| Präattentive Verarbeitung | Was das Gehirn vor dem bewussten Denken sieht |
| Lesemuster (F-Muster, Z-Muster, Gutenberg-Diagramm) | Wie sich das Auge über eine Seite bewegt |
| Signal-Rausch-Verhältnis | Was das Gehirn herausfiltern muss |
| Progressive Offenlegung | Wie das Gehirn Verständnis schichtweise aufbaut |
| Konsistenz | Wie das Gehirn Vorhersagen bildet und nutzt |
| Affordanz | Wie visuelle Form Funktion kommuniziert |
Siehe references/perceptual-principles.md für die vollständige Grundlage.
Bewertungsmatrix
Bewerte jedes Design mit 0–5 auf 8 Dimensionen. Gesamt: /40.
| Dimension | Was sie misst |
|---|---|
| Hierarchie (0-5) | Kann der Leser Wichtigkeit identifizieren, ohne zu lesen? |
| Gruppierung (0-5) | Sind Gruppenzugehörigkeiten eindeutig? |
| Rhythmus (0-5) | Kann der Leser Erwartungen an das Layout bilden? |
| Betonung (0-5) | Geht die Aufmerksamkeit des Lesers an die richtige Stelle? |
| Fluss (0-5) | Bewegt sich das Auge natürlich durch den Inhalt? |
| Ausgewogenheit (0-5) | Ist das visuelle Gewicht absichtlich verteilt? |
| Vollständigkeit (0-5) | Wirkt die Seite abgeschlossen? |
| Zurückhaltung (0-5) | Verdient jedes Element seinen Platz? |
| Gesamtpunktzahl | Bewertung |
|---|---|
| 0-10 | Kritisch – größeres Redesign erforderlich |
| 11-18 | Erhebliche Probleme – mehrere Dimensionen benötigen Arbeit |
| 19-25 | Funktionabel – spezifische Verbesserungen erforderlich |
| 26-32 | Gut – produktionsreif mit Feinschliff |
| 33-38 | Ausgezeichnet – nur geringfügige Verfeinerungen möglich |
| 39-40 | Außergewöhnlich – dies als Beispiel lehren |
Siehe references/evaluation-rubric.md für Bewertungsrichtlinien, Schweregradklassifizierung (P0-P3) und Korrekturempfehlungen.
Konflikte lösen
Wenn Heuristiken in entgegengesetzte Richtungen ziehen:
| Konflikt | Lösung |
|---|---|
| Hierarchie vs. Minimalismus | Minimalismus bedeutet wenige Mittel, nicht keine Mittel. Schaffe maximale Hierarchie mit minimalen Mitteln. |
| Vollständigkeit vs. Weißraum | Vollständigkeit kommt von Struktur, nicht von Dichte. 60 % Inhalt / 40 % Weißraum kann sich vollständig anfühlen. |
| Konsistenz vs. Betonung | Konsistenz ist der Standard. Betonung ist die Ausnahme. Breche sie bewusst, sparsam, signifikant. |
| Dichte vs. Ruhe | Wechsele dichte und offene Abschnitte ab. Biete Scan-Anker für Pausen. |
| Konvention vs. Differenzierung | Folge Konventionen für die Struktur. Differenziere durch Inhalt und subtile Behandlung. |
Siehe references/heuristic-conflicts.md für das vollständige Lösungsframework.
Formatierung in Wahrnehmung übersetzen
| Anweisung | Wahrnehmungsabsicht |
|---|---|
| „Füge mehr weißen Raum hinzu“ | Der visuelle Abstand spiegelt nicht die konzeptionellen Beziehungen wider. |
| „Mach die Überschriften größer“ | Die Hierarchie reicht zum Überfliegen nicht aus. |
| „Teil den Absatz auf“ | Der visuelle Block überschreitet die Grenzen des Arbeitsgedächtnisses. |
| „Lass es knallen“ | Das Element benötigt mehr Betonung im Verhältnis zu seiner Wichtigkeit. |
| „Vereinfache das“ | Die kognitive Last ist für den Inhaltstyp zu hoch. |
| „Mach es professioneller“ | Die visuellen Signale entsprechen nicht dem Autoritätsniveau des Inhalts. |
Siehe references/formatting-to-perception.md für das vollständige Übersetzungswörterbuch.
Die Architektur
Dieses Skill folgt einer sechsschichtigen Reasoning-Architektur:
Mentales Modell → Wie Experten diese Domäne wahrnehmen
↓
Wahrnehmungsprinzipien → Die Kognitionswissenschaft, die erklärt, warum
↓
Heuristiken → Praktische Faustregeln
↓
Konfliktlösung → Was tun, wenn Regeln widersprechen
↓
Bewertungsmatrix → Strukturierte Bewertung der Qualität
↓
Übersetzungsschicht → Naive Anweisungen in Expertenreasoning umwandeln
Diese Architektur ist domänenunabhängig. Visuelle Bildung ist die erste Anwendung. Dieselben sechs Schichten könnten KI-Expertenkognition in Architektur, Medizin, Bildung, Führung oder jedem Bereich lehren, in dem sich implizites Fachwissen einer Artikulation widersetzt.
Ausgabeanforderungen
Wenn du dieses Skill verwendest, immer:
- Benenne das Wahrnehmungsprinzip hinter jeder visuellen Entscheidung
- Erkläre den kognitiven Effekt von Layout-Entscheidungen
- Diagnostiziere Probleme im Sinne verletzter Prinzipien, nicht ästhetischer Präferenzen
- Bewerte Designs mit der Bewertungsmatrix, wenn du kritisierst
- Übersetze Anweisungen von Formatierung zu Wahrnehmung, wenn du gebeten wirst, Feedback umzusetzen
Anti-Patterns
Nie:
- Ein Layout wählen, weil es „professionell aussieht“, ohne zu erklären, warum
- Dekorative Elemente hinzufügen, die nicht dem Verständnis dienen
- Abstände, Typografie oder Farbe als willkürliche ästhetische Entscheidungen behandeln
- Den Reasoning-Schritt überspringen, weil „es sich einfach richtig anfühlt“
- Heuristiken mechanisch anwenden, ohne den spezifischen Inhalt zu berücksichtigen
Der Lackmustest
Nachdem du ein visuelles Design erstellt hast, frage:
„Kann ich jede Abstandsentscheidung, jede Typwahl, jede Gruppierung und jede Betonung im Hinblick darauf erklären, wie ein Mensch diese Informationen wahrnimmt und verarbeitet?“
Wenn ja, ist das Design durchdacht. Wenn nein, ist es Dekoration.