HOME • PROJET • Cette page n'est pas optimisée pour mobile
Du brief à la dataviz : un skill Claude qui transforme un article en graphique éditorial interactif
HOME • PROJET • Cette page n'est pas optimisée pour mobile
Du brief à la dataviz : un skill Claude qui transforme un article en graphique éditorial interactif
Le CreativeAI Dataviz Skill est un skill Claude qui ingère un article de blog et produit un graphique Chart.js prêt à embarquer dans WordPress. Il sert à transformer les comparaisons et seuils invisibles dans la prose en visualisations éditoriales cohérentes avec une charte de marque. Les points à retenir : 5 idées de dataviz par article, 1 embed HTML autonome, conformité stricte au style guide, distinction littéral / éditorial systématique. Mise à jour : mai 2026.
Chaque guide long publié sur CreativeAI.fr contient des comparaisons que le lecteur ne voit pas. Une grille de notation à 4 critères. Un seuil de lisibilité entre 3 et 8 lettres. Une étude qui dit que le Tree of Thought bat le Chain of Thought 41 fois sur 100.
Ces données sont là, dans le texte, mais elles ne se voient pas. Un lecteur qui scanne un article en 90 secondes ne lit pas la phrase qui dit "entre 4 et 6 lettres pour un meilleur résultat". Il faudrait qu'il s'arrête. Il ne s'arrête pas.
Un graphique, lui, se voit en trois secondes.
Le problème n'est pas de produire des graphiques. Le problème est d'en produire vite, de manière cohérente, et sans casser le rythme éditorial. Sans système, je passais 45 minutes par chart. Avec ce skill, le même travail prend quelques minutes.
Je colle l'URL d'un article. Le skill le lit et identifie les structures visualisables : tableaux comparatifs, échelles, hiérarchies implicites, ratings, seuils numériques.
Le skill retourne cinq idées distinctes en français. Chacune nomme :
le type de graphique (radar, doughnut, bubble, bar, line)
la donnée source dans l'article
l'angle éditorial en une phrase
la valeur pour le lecteur en une phrase
Chaque chart est cliquable, vivant, embarqué dans son article d'origine. Pas une capture d'écran, le code original tel qu'il a été produit.
Une note de méthodologie distingue les idées qui reposent sur des données littérales (chiffres explicites de l'article) des idées qui reposent sur une lecture éditoriale (interprétation que je peux valider ou ajuster).
Je choisis une idée. Le skill produit un bloc HTML autonome :
CSS scopé sous un ID unique pour permettre plusieurs charts par page
Wrapper éditorial complet : kicker, titre, paragraphe, canvas
Configuration Chart.js conforme au style guide
Garde DOMContentLoaded qui attend le chargement de Chart.js depuis le footer du site
Je copie. Je colle dans un bloc HTML WordPress. Le chart interactif apparaît.
Le système ne décide pas du style, il l'applique. La cohérence visuelle vient du fichier style-guide.json, pas du jugement de Claude.
Le coeur du système n'est pas le code. C'est un fichier JSON.
style-guide.json contient les tokens de la marque CreativeAI.fr : palette (rouge #cc1f1f, noir #111111, gris #666666), typographie, dimensions des conteneurs (760px ou 860px selon le type de chart), border-radius (14px), ombres, breakpoints mobile, options Chart.js par type, configurations de datasets, comportements des tooltips.
Quand le skill produit un graphique, il lit ce fichier. Il ne décide pas. Il applique.
Cette discipline change tout. Elle veut dire que le même skill, avec un autre style-guide.json, produit des graphiques pour une autre marque sans modifier une ligne du workflow. Le système est transposable.
C'est exactement ce qui distingue un graphique IA générique d'un graphique éditorial : la contrainte de marque traitée comme un input, pas comme un détail à corriger après coup. Un système éditorial cohérent vaut mieux qu'un graphique brillant isolé. La cohérence sur 50 articles produit plus de valeur que la perfection sur un seul.
Vous avez probablement déjà voulu enrichir vos guides longs avec des charts. Vous y avez probablement renoncé parce que c'était trop lent ou trop incohérent visuellement. Ce skill résout les deux problèmes en même temps.
Le skill s'installe en 30 secondes (drag-and-drop dans Settings → Skills) et se déclenche automatiquement quand vous mentionnez une URL CreativeAI.fr ou demandez des "idées de dataviz". Il s'intègre à votre workflow Claude existant sans configuration.
C'est ici que le système devient stratégique. Vous remplacez style-guide.json par les tokens de votre marque. Le skill devient le vôtre. Tous vos contributeurs produisent des charts qui ressemblent à votre marque, sans formation particulière.
Le repo GitHub est public. Le code est lisible. La méthode est documentée. C'est le bon point de départ si vous voulez comprendre comment un skill Claude se construit.
Téléchargez le fichier .skill, déposez-le dans Claude, ouvrez une conversation, collez une URL CreativeAI.fr. Le skill se déclenche.
Télécharger creativeai-dataviz.skill
Si votre publication a une charte forte et un volume éditorial régulier, on peut concevoir le skill équivalent pour votre marque. Le système, votre style guide, votre voix éditoriale.
Délai typique : deux à trois semaines. Livrable : un skill packagé, un repo privé, une documentation de prise en main.
Limites reconnues : le skill est tuné pour la voix CreativeAI.fr. Adapté à une autre marque, il faut réviser le ton du kicker, les conventions de la note finale, et parfois la longueur du paragraphe d'introduction.
Le code reste portable, le ton ne l'est pas.
Pourquoi ce système existe
Celui-ci est né d'un besoin éditorial pour CreativeAI.fr, mais il révèle une catégorie plus large de systèmes : les outils de création qui intègrent une marque comme contrainte plutôt que comme habillage. Quand un système produit du contenu, la question intéressante n'est pas "est-ce qu'il sait faire". C'est "est-ce qu'il sait s'arrêter au bord de la marque". Un système qui décide du style produit des sorties homogénéisées. Un système qui applique le style produit des sorties signées.
Si votre publication a un style guide, on peut probablement construire votre skill.
Ressources
↑ Home