Que fait data-illustration ?
Les bibliothèques de diagrammes simples (barres, lignes, radar) sont précises mais oubliables. L'échec inverse — une image de « visualisation de données » générée par IA — est belle mais ne peut pas coder un nombre fidèlement, c'est donc de la décoration qui se fait passer pour des données. Cette compétence fait les deux honnêtement : les données pilotent la géométrie d'un SVG généré (le noyau précis et reproductible), et toute imagerie générée par IA n'est ajoutée que comme atmosphère, jamais pour transmettre une valeur.
Quand l'utiliser
- Quelqu'un veut visualiser des scores/métriques/dimensions, mais un simple diagramme à barres/lignes/camembert serait ennuyeux ou inadapté à la marque.
- Demandes comme « rends cette visualisation vraiment designée », « quelque chose de plus illustratif qu'un graphique », ou « génère un vrai graphique pour le tableau de bord, pas un diagramme par défaut ».
- Préférez cette compétence au codage à la main d'un diagramme ponctuel chaque fois que le résultat est censé paraître intentionnellement designé plutôt qu'une bibliothèque par défaut.
Le contrat de précision (non négociable)
- Chaque quantité dans le résultat est calculée à partir des valeurs d'entrée, dans le code. Longueur des formes, rayon, texte d'étiquette, nombre central — tout dérivé de manière programmatique, jamais estimé à l'œil ou dessiné par un modèle d'image.
- La génération d'image par IA est uniquement décorative. Si vous ajoutez un arrière-plan généré, contraignez l'invite à une texture abstraite — pas de texte, pas de chiffres, pas de figures, pas de logos. Si la génération d'image n'est pas disponible, le graphique doit encore être complet et correct sans elle.
- Tout est étiqueté. Chaque élément encodé reçoit une étiquette, le nombre principal obtient un affichage central, et une légende d'une ligne énonce ce que la forme signifie réellement. Un beau graphique que personne ne peut décoder est un échec, pas une réussite.
Si jamais vous êtes tenté de laisser un modèle d'image « dessiner le graphique » directement — arrêtez. Cela brise le contrat et le résultat sera subtilement (ou gravement) faux.
La forme par défaut : un « bloom » organique
N dimensions/scores → N pétales rayonnant d'un point central. Par pétale :
- La longueur code la valeur (plus long = plus élevé), avec des anneaux de guide entiers et discrets pour qu'elle soit toujours lisible comme un nombre, pas seulement comme une ambiance.
- La plénitude s'élargit légèrement avec la valeur — les scores plus élevés apparaissent visuellement « plus luxuriants ».
- La couleur correspond à la bande de valeur via une rampe sémantique (par exemple, vert pour élevé, ambre pour moyen, rouge/terre cuite chaud pour faible).
- Une étiquette de pointe indique le nom de la dimension et son nombre exact.
- Un disque central montre la moyenne, colorée selon sa propre valeur, avec une courte légende.
- Une ligne de légende énonce l'encodage en langage simple (« longueur du pétale = score sur 5 »).
Cela se présente comme un organisme unique par jeu de données — pas un diagramme radar générique — tandis que chaque valeur reste exactement lisible.
Le construire
- Prenez l'entrée comme une simple carte
{dimension: valeur}plus un titre et une moyenne. - Écrivez un petit script (n'importe quel langage avec sortie SVG convient) qui calcule la géométrie de chaque pétale directement à partir des valeurs — angle = espacé uniformément par nombre de dimensions, rayon = fonction de la valeur, couleur = recherche selon vos seuils de bande.
- Rendez les étiquettes et la légende comme de véritables éléments de texte SVG, pas intégrés dans une couche d'image.
- Couche d'atmosphère facultative : générez un arrière-plan abstrait et thématique via toute API de génération d'image à laquelle vous avez accès, compositez-le sous l'illustration à faible opacité derrière une vignette pour que le centre reste lisible. Mettez-le en cache — générez-le une fois au moment de la construction/écriture, jamais à chaque rendu de page (c'est lent et coûteux).
- Rendez le résultat autonome (un seul
.svg, avec tout arrière-plan intégré comme URI de données) pour qu'il n'y ait pas d'actif séparé à gérer. - Si vous voulez que les formes soient interactives (survol/clic pour révéler la définition de chaque dimension + score exact + source), enveloppez chaque élément avec des attributs de données (
data-dimension,data-score,data-definition) qu'un petit script peut lire pour piloter un panneau latéral.
Étendre la forme
Le bloom est la valeur par défaut, pas la seule option — choisissez la forme qui correspond à la forme des données, mais gardez le contrat de précision quel que soit celui que vous utilisez :
- Ridgeline/contour pour une distribution ou une valeur suivie sur de nombreux éléments.
- Isotype (glyphes répétés, le dernier partiellement rempli) lorsque le comptage est le but et que vous voulez qu'il se lise comme une quantité littérale.
- Constellation lorsque les relations entre les éléments importent plus que leurs magnitudes individuelles.
Anti-patrons
- Laisser un modèle d'image rendre le graphique ou les nombres — les valeurs seront erronées ou fabriquées.
- Un superbe graphique sans étiquettes ni légende — indécodable est inutile, aussi beau soit-il.
- Un arrière-plan généré assez fort pour concurrencer la lisibilité de la couche de données — gardez-le à faible opacité, derrière une vignette.
- Appeler une API de génération d'image à chaque rendu de page au lieu de mettre en cache — lent et inutilement coûteux.
Comment l'utiliser
Installation : copiez ce dossier dans ~/.claude/skills/data-illustration/ pour un usage personnel, ou .claude/skills/data-illustration/ à l'intérieur d'un dépôt de projet.
Invoquer :
Transforme ces 6 scores en un bloom data-illustration au lieu d'un ennuyeux diagramme à barres — titre-le « Rétro Q3 », donne-lui une moyenne centrale, et ajoute une légende.
Le graphique de ce tableau de bord a l'air générique. Utilise data-illustration pour en faire une illustration précise et étiquetée à la place — pas de nombres dessinés par IA, tout est calculé à partir des données réelles.