Littératie Visuelle : Apprendre à l'IA à Voir Comme un Designer
L'IA n'a pas seulement besoin d'instructions. Elle a besoin de modèles enseignables de l'expertise humaine.
Ce Que C'est
La Littératie Visuelle est un cadre de raisonnement — pas un modèle de prompt, pas un guide de formatage, pas un utilitaire CSS. Elle enseigne à l'IA à prendre des décisions de conception visuelle en modélisant la façon dont les humains perçoivent l'information.
Le problème qu'elle résout : l'IA peut générer une mise en page. Elle ne peut pas dire si la mise en page fonctionne. Elle ne remarque pas une hiérarchie plate, un rythme brisé, une emphase concurrente ou une surcharge cognitive. Ce cadre lui donne ces perceptions comme principes de raisonnement explicites.
Cela Augmente le Jugement Humain. Cela Ne le Remplace Pas.
La Littératie Visuelle enseigne à l'IA à raisonner sur le design pour que les humains puissent prendre de meilleures décisions plus rapidement — pas pour que l'IA prenne des décisions seule.
L'objectif est une collaboration :
- L'IA fournit une analyse structurée, un raisonnement perceptuel et des cadres de diagnostic
- Les humains fournissent l'intention, le goût, le contexte, la connaissance du public et le jugement final
Une IA capable de noter un design de 0 à 5 sur huit dimensions est utile. Une IA qui annule le choix éclairé d'un designer parce qu'il a obtenu un score inférieur sur une grille ne l'est pas.
Utilisez ce cadre pour affiner votre réflexion, pas pour l'externaliser.
Le Postulat
L'IA ne possède pas d'intuition visuelle. Elle ne peut pas reconnaître instantanément quand une page semble équilibrée, encombrée, inachevée, confuse ou élégante. Cette intuition doit être traduite en principes de raisonnement explicites.
Enseigner la littératie visuelle à l'IA, c'est lui apprendre non seulement à formater l'information, mais aussi comment les humains perçoivent l'information.
Le changement est du formatage vers la perception.
Le Principe Central
Chaque décision visuelle doit pouvoir être expliquée en termes de la façon dont un humain percevra et traitera l'information.
Si vous ne pouvez pas expliquer pourquoi un choix visuel aide un humain à comprendre, c'est de la décoration. Si vous pouvez l'expliquer en termes de cognition, c'est du design.
Démarrage Rapide
1. Copiez le skill dans votre projet
# Clonez le dépôt
git clone https://github.com/amberhoward/visual-literacy.git
# Copiez dans le répertoire de skills de votre projet
cp -r visual-literacy/.opencode/skills/visual-literacy ./votre-projet/.opencode/skills/
2. Dites à votre IA de l'utiliser
Dans votre prompt ou message système :
Utilise le skill visual-literacy pour évaluer et raisonner sur le design de ce document.
3. Voyez la différence
Avant (instruction de formatage) :
"Agrandis les titres et ajoute plus d'espace blanc."
Après (raisonnement perceptuel) :
"La hiérarchie visuelle est insuffisante — le lecteur ne peut pas parcourir et identifier la structure d'information. L'espacement entre les sections non liées ne les différencie pas de l'espacement au sein des sections. Augmente le contraste titre-corps. Utilise un espacement inter-section de 2 à 3 fois l'espacement intra-section pour signaler la distance conceptuelle."
Quand Utiliser Ce Skill
Utilisez ce skill quand :
- Vous créez un document, un rapport ou une présentation
- Vous concevez des interfaces ou des mises en page
- Vous évaluez ou critiquez des designs existants
- Vous prenez des décisions sur l'espacement, la hiérarchie, le regroupement ou l'accentuation
- Vous traduisez une instruction de formatage en une décision perceptuelle
- Vous cherchez pourquoi quelque chose "semble faux" mais vous ne pouvez pas nommer pourquoi
- Vous effectuez une revue de design ou un audit UX
Les Trois Modes
Mode 1 : Design (Proactif)
Lors de la création de quelque chose de nouveau, raisonnez à travers les décisions visuelles en utilisant les heuristiques avant de produire le résultat. N'attendez pas qu'on vous demande pourquoi vous avez choisi une mise en page particulière.
Comment l'utiliser : Demandez à l'IA de parcourir son raisonnement visuel avant de générer le design :
Avant de concevoir cette page, parcourez votre raisonnement perceptuel :
1. Quelle est la structure d'information ?
2. Comment un humain percevra-t-il cela ?
3. Quelle charge cognitive imposé-je au lecteur ?
4. La structure visuelle communique-t-elle l'intention ?
Ensuite, générez le design basé sur ce raisonnement.
Mode 2 : Critique (Évaluatif)
Lors de la révision d'un travail existant, diagnostiquez les problèmes à l'aide du cadre perceptuel. Nommez ce qui ne va pas, pourquoi c'est faux et quel principe cognitif est violé.
Comment l'utiliser : Fournissez une capture d'écran, du code ou une description et demandez une critique structurée :
En utilisant la grille d'évaluation de la littératie visuelle, critiquez ce design.
Notez chaque dimension de 0 à 5, identifiez les niveaux de sévérité et fournissez
des recommandations de correction spécifiques avec une justification perceptuelle.
Mode 3 : Traduire (Instructionnel)
Lorsqu'une instruction de formatage est donnée, traduisez-la en l'intention perceptuelle qui la sous-tend. Exécutez ensuite l'objectif perceptuel, pas l'instruction littérale.
Comment l'utiliser : Donnez une instruction de formatage et demandez la traduction :
Je veux "ajouter plus d'espace blanc à cette page." En utilisant le
guide de traduction formatage-à-perception, expliquez l'intention
perceptuelle derrière cette instruction, puis exécutez-la correctement.
Processus de Raisonnement Perceptuel
Avant de prendre toute décision visuelle, parcourez cette séquence :
1. Quelle est la structure d'information ?
- Quel est le contenu principal ?
- Quelle est la hiérarchie d'importance ?
- Qu'est-ce qui se regroupe logiquement ?
- Qu'est-ce qui doit être lu en séquence par rapport à ce qui peut être scanné ?
2. Comment un humain percevra-t-il cela ?
- Où l'œil ira-t-il en premier ? Est-ce le bon endroit ?
- Le lecteur peut-il scanner et trouver ce dont il a besoin en moins de 5 secondes ?
- Les concepts liés sont-ils visuellement connectés ?
- Y a-t-il un chemin clair à travers le contenu ?
3. Quelle charge cognitive imposé-je au lecteur ?
- Combien de décisions le lecteur doit-il prendre à chaque point ?
- Est-ce que je lui demande de retenir des informations en mémoire de travail ?
- Peut-il retrouver facilement sa place s'il est interrompu ?
- La densité est-elle appropriée pour le type de contenu ?
4. La structure visuelle communique-t-elle l'intention ?
- Chaque élément mérite-t-il son espace ?
- L'espacement communique-t-il une relation ou un accident ?
- Les motifs se répètent-ils avec un but ou une incohérence ?
- La page semble-t-elle complète, pas abandonnée ?
Le Cadre Heuristique
Huit catégories, 24 heuristiques, un système de priorité.
| Catégorie | Nombre | Question Centrale |
|---|---|---|
| Hiérarchie | 3 | L'œil sait-il où regarder en premier ? |
| Regroupement | 3 | Les éléments liés sont-ils visuellement connectés ? |
| Rythme | 3 | Le lecteur peut-il former des attentes ? |
| Accentuation | 3 | L'information importante ressort-elle ? |
| Équilibre | 2 | Le poids visuel est-il distribué intentionnellement ? |
| Complétude | 3 | La page semble-t-elle résolue ? |
| Flux | 3 | Y a-t-il un chemin clair à travers le contenu ? |
| Retenue | 3 | Chaque élément mérite-t-il son espace ? |
Consultez references/design-heuristics.md pour le catalogue complet avec justification perceptuelle, violations et méthodes de diagnostic.
Ordre de priorité lorsque les heuristiques entrent en conflit :
- Hiérarchie — le lecteur doit savoir ce qui est le plus important
- Regroupement — le lecteur doit savoir ce qui va ensemble
- Flux — le lecteur doit savoir où aller ensuite
- Accentuation — le lecteur doit savoir ce qui compte le plus
- Rythme — le lecteur doit pouvoir former des attentes
- Équilibre — la mise en page doit sembler stable
- Complétude — la page doit sembler résolue
- Retenue — chaque élément doit mériter sa place
Principes Perceptuels
Le fondement des sciences cognitives. Pas des règles de design — des faits sur la façon dont le cerveau humain traite l'information visuelle.
| Principe | Ce Qu'il Explique |
|---|---|
| Gestalt (Proximité, Similitude, Clôture, Continuité, Figure-Fond, Région Commune) | Comment le cerveau regroupe l'information automatiquement |
| Mémoire de Travail (7±2 de Miller, Regroupement Cognitif) | Combien le cerveau peut gérer à la fois |
| Traitement Pré-Attentif | Ce que le cerveau voit avant la pensée consciente |
| Schémas de Lecture (F-Pattern, Z-Pattern, Diagramme de Gutenberg) | Comment l'œil se déplace sur une page |
| Signal-Bruit | Ce que le cerveau doit filtrer |
| Divulgation Progressive | Comment le cerveau construit la compréhension par couches |
| Cohérence | Comment le cerveau forme et utilise des prédictions |
| Affordance | Comment la forme visuelle communique la fonction |
Consultez references/perceptual-principles.md pour les fondements complets.
Grille d'Évaluation
Notez tout design de 0 à 5 sur 8 dimensions. Total : /40.
| Dimension | Ce Qu'elle Mesure |
|---|---|
| Hiérarchie (0-5) | Le lecteur peut-il identifier l'importance sans lire ? |
| Regroupement (0-5) | Les appartenances aux groupes sont-elles non ambiguës ? |
| Rythme (0-5) | Le lecteur peut-il former des attentes sur la mise en page ? |
| Accentuation (0-5) | L'attention du lecteur va-t-elle au bon endroit ? |
| Flux (0-5) | L'œil se déplace-t-il naturellement dans le contenu ? |
| Équilibre (0-5) | Le poids visuel est-il distribué intentionnellement ? |
| Complétude (0-5) | La page semble-t-elle résolue ? |
| Retenue (0-5) | Chaque élément mérite-t-il son espace ? |
| Score Total | Évaluation |
|---|---|
| 0-10 | Critique — une refonte majeure est nécessaire |
| 11-18 | Problèmes significatifs — plusieurs dimensions nécessitent un travail |
| 19-25 | Fonctionnel — des améliorations spécifiques sont nécessaires |
| 26-32 | Bon — prêt pour la production avec polissage |
| 33-38 | Excellent — seules des améliorations mineures sont possibles |
| 39-40 | Exceptionnel — enseignez ceci comme un exemple |
Consultez references/evaluation-rubric.md pour les conseils de notation, la classification de sévérité (P0-P3) et les recommandations de correction.
Résolution des Conflits
Lorsque les heuristiques tirent dans des directions opposées :
| Conflit | Résolution |
|---|---|
| Hiérarchie vs. Minimalisme | Le minimalisme signifie peu de traitements, pas aucun traitement. Créez une hiérarchie maximale avec un minimum de moyens. |
| Complétude vs. Espace Blanc | La complétude vient de la structure, pas de la densité. 60% de contenu / 40% d'espace blanc peut sembler complet. |
| Cohérence vs. Accentuation | La cohérence est la valeur par défaut. L'accentuation est l'exception. Brisez-la délibérément, avec parcimonie, significativement. |
| Densité vs. Repos | Alternez les sections denses et clairsemées. Fournissez des points d'ancrage pour la pause. |
| Convention vs. Différenciation | Suivez les conventions pour la structure. Différenciez par le contenu et un traitement subtil. |
Consultez references/heuristic-conflicts.md pour le cadre complet de résolution.
Traduire le Formatage en Perception
| Instruction | Intention Perceptuelle |
|---|---|
| "Ajoute plus d'espace blanc" | La distance visuelle ne reflète pas les relations conceptuelles. |
| "Agrandis les titres" | La hiérarchie est insuffisante pour le scan. |
| "Coupe le paragraphe" | Le bloc visuel dépasse les limites de la mémoire de travail. |
| "Fais ressortir ça" | L'élément a besoin de plus d'accentuation par rapport à son importance. |
| "Simplifie ça" | La charge cognitive est trop élevée pour le type de contenu. |
| "Rends ça plus professionnel" | Les signaux visuels ne correspondent pas au niveau d'autorité du contenu. |
Consultez references/formatting-to-perception.md pour le dictionnaire complet de traduction.
L'Architecture
Ce skill suit une architecture de raisonnement en six couches :
Modèle Mental → Comment les experts perçoivent ce domaine
↓
Principes Perceptuels → La science cognitive qui explique pourquoi
↓
Heuristiques → Règles empiriques pratiques
↓
Résolution de Conflits → Que faire quand les règles se contredisent
↓
Grille d'Évaluation → Notation structurée pour la qualité
↓
Couche de Traduction → Convertir les instructions naïves en raisonnement expert
Cette architecture est indépendante du domaine. La littératie visuelle est la première application. Les mêmes six couches pourraient enseigner à l'IA la cognition experte en architecture, médecine, éducation, leadership, ou tout domaine où l'expertise tacite résiste à l'articulation.
Exigences de Sortie
Lorsque vous utilisez ce skill, faites toujours :
- Nommez le principe perceptuel derrière chaque décision visuelle
- Expliquez l'effet cognitif des choix de mise en page
- Diagnostiquez les problèmes en termes de principes violés, pas de préférences esthétiques
- Notez les designs en utilisant la grille d'évaluation lors de la critique
- Traduisez les instructions du formatage à la perception lorsque vous êtes invité à implémenter des retours
Anti-Patterns
Ne jamais :
- Choisir une mise en page parce qu'elle "semble professionnelle" sans expliquer pourquoi
- Ajouter des éléments décoratifs qui ne servent pas la compréhension
- Traiter l'espacement, la typographie ou la couleur comme des choix esthétiques arbitraires
- Sauter l'étape de raisonnement parce que "ça semble juste"
- Appliquer les heuristiques mécaniquement sans considérer le contenu spécifique
Le Test Décisif
Après avoir produit un design visuel, demandez :
"Puis-je expliquer chaque décision d'espacement, chaque choix de type, chaque regroupement et chaque accentuation en termes de la façon dont un humain percevra et traitera cette information ?"
Si oui, le design est raisonné. Si non, c'est de la décoration.