Infographie Esquissée
Vous créez une page qui explique une source unique : un titre, une grille de panneaux, et un pied de page indiquant la source. Chaque panneau illustre un point avec un petit diagramme et une ou deux phrases. Vous écrivez la page sous forme de spécification JSON ; scripts/build.mjs dispose la grille, la dessine avec le moteur de rendu d'Excalidraw, la vérifie, et produit un PNG et un fichier .excalidraw éditable.
Le dessin est la partie facile. La page ne vaut la peine d'être publiée que si chaque panneau dit quelque chose de vrai sur la source, en moins de mots que la source n'en a pris.
1. Lire la source et planifier la page
Lisez-la en entier. Ensuite, écrivez le plan dans votre réponse, avant tout JSON :
- Titre : le sujet en deux à cinq mots. Sous-titre : qui l'a dit et à quel propos, en une ligne ("Un urbaniste sur pourquoi les bus surpassent les nouvelles lignes de train dans les petites villes").
- Format : portrait 3:4 (1500×2000) sauf si l'utilisateur en nomme un autre, ou si sa page d'exemple a un autre format. Les autres formats sont dans references/spec.md.
- Six ou sept panneaux, assez pour remplir la page. Une page 3:4 contient environ quatre rangées : trois rangées de deux demi-panneaux et un panneau pleine largeur. Chaque panneau a un en-tête qui résume le point (pas une simple étiquette de sujet), une idée d'image, et une conclusion d'au plus deux phrases et environ 30 mots. Le panneau pleine largeur contient l'exemple le plus riche.
- Pied de page : la source (auteur, titre, date) et toute réserve émise par la source, par exemple "notes de conception et prototype, pas un produit finalisé".
Attendez le feu vert de l'utilisateur sur le plan lorsque la source est longue ou l'angle peu clair ; sinon, allez-y directement.
En travaillant à partir d'une page d'exemple partagée par l'utilisateur : listez d'abord ses panneaux et conservez-les tous dans votre plan, sauf si l'utilisateur en demande moins. Correspondre à son apparence mais supprimer un panneau est la manière la plus courante de ne pas être à la hauteur.
Restez fidèle à la source. Chaque nombre, nom et affirmation sur la page doit figurer dans la source. Attribuez les opinions ("l'auteur soutient que..."). Lorsque vous ajoutez votre propre illustration d'un point, dites-le sur la page ("un exemple fictif de la façon dont cela pourrait se produire"). Omettez ce que vous ne pouvez pas dessiner honnêtement plutôt que d'inventer un chiffre.
2. Choisir une image pour chaque panneau
Utilisez un diagramme par panneau, construit à partir des motifs dans references/patterns.md : une chaîne d'étapes, avant et après, plusieurs en un, une boucle retour à la source, une comparaison d'options, un diagramme à barres, une chronologie. Choisissez le motif qui correspond à l'affirmation, pas celui qui semble le plus chargé. Un panneau dont le point est une liste peut être trois boîtes étiquetées. Le texte à l'intérieur des dessins se limite à quelques mots, jamais une phrase.
La couleur a une signification, de manière cohérente sur toute la page : vert pour le bon ou le chemin par défaut, orange pour le risque ou ce qui a changé, rouge pour l'échec, bleu pour la chose sur laquelle on agit, violet pour un agent ou modèle, jaune pour l'appel le plus important de la page. Le gris est neutre. Voir references/spec.md pour les noms.
3. Écrire la spécification et construire
Enregistrez chaque page dans son propre dossier, sous forme de page.json ; demandez où si l'utilisateur ne l'a pas précisé. Le format et chaque type d'élément sont dans references/spec.md ; assets/example.json est une page complète. Ensuite, exécutez, depuis le dossier de cette compétence :
node scripts/build.mjs <dossier>/page.json
Cela affiche la largeur de la zone de dessin de chaque panneau (dessinez à l'intérieur ; la hauteur s'ajuste) et écrit page.png et page.excalidraw à côté de la spécification. Si l'environnement d'exécution est manquant, il indique comment l'installer.
4. Vérifier, puis corriger
- Corrigez chaque avertissement. Le code de sortie 3 signifie que la page a été construite avec des avertissements : le contenu est plus haut que la page (il indique combien de pixels couper), quelque chose dépasse de son panneau, chevauche autre chose, a une flèche traversant son texte, a une flèche trop courte pour être lisible, a fait qu'une boîte s'agrandisse parce que son étiquette ne tenait pas, ou utilise un caractère manquant dans Excalifont (flèches comme →, coches, emojis), qui s'affiche dans une police système. Dessinez plutôt les flèches et les coches comme des éléments.
- Ensuite, regardez le PNG (ouvrez le fichier image) et vérifiez chaque panneau : l'œil suit-il les flèches dans le bon sens, chaque flèche et ligne commence-t-elle et se termine-t-elle sur quelque chose, les pointes de flèches sont-elles dégagées les unes des autres, un texte est-il trop près d'une bordure, les panneaux d'une rangée semblent-ils équilibrés, l'en-tête correspond-il à l'image ? La page est-elle pleine, ou un panneau est-il presque vide ? Corrigez la spécification et reconstruisez. Deux ou trois tours sont normaux.
- Avec une page d'exemple, comparez les deux côte à côte, panneau par panneau : mêmes panneaux, même type de dessin, densité similaire. Dites ce qui diffère encore.
- Relisez les mots une fois de plus par rapport à la source (étape 1), sur la page telle que dessinée.
5. Livrer
Donnez à l'utilisateur le PNG et le chemin du fichier .excalidraw, ainsi que le résumé en une ligne du plan. Dites que le fichier .excalidraw s'ouvre sur excalidraw.com ou dans l'application Excalidraw pour des modifications manuelles, et qu'après modifications manuelles, ce fichier, et non page.json, est la page : reconstruire l'écrase.
Recréer la page publiée de quelqu'un d'autre est acceptable comme étude ou test privé ; ne proposez pas d'en poster une. Leur mise en page, leur formulation et leur image de marque leur appartiennent.