infographic-creatorpar AntV

Infographic Creator Skill.

Q: Propose-t-il des styles visuels prêts à l'emploi ?

Oui. theme.stylize sélectionne un style intégré et lui transmet des paramètres ; les styles courants listés sont rough pour un effet dessiné à la main, pattern pour un remplissage à motif, et linear- ou radial-gradient.

Un skill Claude Code et Codex pour diagrammes et graphiques : crée des infographies à partir d'un texte donné.

Diagrammes et visualisation de données
Image

Télécharger OpenDesign Voir le guide d'utilisation

antvis/chart-visualization-skills · skills/infographic-creator/SKILL.mdSKILL.md

--- name: infographic-creator description: Create beautiful infographics based on given text content. Use when users request to create infographics. --- ## Specifications ## Generation Process

En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 11 870 caractères au total

01 Ce qu'il fait

Ce que fait le skill infographic-creator dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Un skill AntV qui transforme une description textuelle en infographie rendue. L'agent écrit la syntaxe AntV Infographic, un DSL basé sur l'indentation dont la première ligne nomme un template et dont le bloc de données porte title, desc et le champ principal du template — listes, séquences, comparaisons, valeurs, nœuds et relations, ou root.

Un bloc theme définit la palette, la police et les effets de stylisation. La liste de templates fournie couvre les familles list, sequence, compare, hierarchy, relation et chart, incluant lignes du temps, SWOT, cartes mentales, roadmaps, analyses en quadrants et nuages de mots. L'agent écrit ensuite un fichier HTML prêt pour le navigateur nommé <title>-infographic.html qui rend le diagramme et l'exporte en SVG.

Ce qu'il produit

La syntaxe AntV Infographic elle-même, que l'utilisateur peut lire, conserver ou réutiliser.
Un fichier HTML complet écrit avec l'outil Write, nommé <title>-infographic.html.
Un export SVG du graphique final, produit à partir de la page rendue.

Voir l'exemple de prompt ↗

Fonctionnement

01
Déterminer ce que l'utilisateur souhaite réellement montrer
Avant toute chose, le skill lit les besoins de l'utilisateur et les informations qu'il souhaite exprimer, car cela détermine à la fois le template et la structure des données.
02
Poser des questions en retour quand le brief est trop léger
Si la description du contenu n'est pas claire et concise, le skill en demande une plutôt que d'inventer le contenu, et peut aussi demander quel template l'utilisateur souhaite.
03
Faire correspondre la forme du contenu à une famille de templates
Les séquences strictes vont vers sequence-, les listes d'opinions vers list-row- ou list-column-, les comparaisons binaires vers compare-binary-, les arbres vers hierarchy-tree-, et les quadrants vers compare-quadrant-.
04
Exprimer la structure dans le DSL
La structure devient la syntaxe AntV Infographic : une ligne de template, un bloc data avec title/desc et le champ principal du template, plus un bloc theme optionnel.
05
Générer le fichier HTML
La syntaxe est insérée dans un document HTML complet avec la balise script AntV Infographic, un conteneur et un appel de rendu.
06
Remettre le fichier et la syntaxe, puis proposer des ajustements
La réponse contient le chemin du fichier généré et la syntaxe, suivis d'une invitation à ajuster le template, les couleurs ou le contenu.

02 Trouvez celui qui vous convient

Quand utiliser le skill infographic-creator

Utilisez le skill infographic-creator dans Claude Code ou Codex lorsque le travail concerne des diagrammes et graphiques de ce type. Portée et limites ci-dessous sont tirées du fichier du skill lui-même.

Bon choix

Montrer un processus, des étapes ou une tendance de développement dans un ordre strict, comme une ligne du temps.
Une analyse SWOT d'un produit, d'un projet ou d'une idée.
Une carte mentale décomposant un sujet en branches.
Transformer des chiffres en graphique à barres, en colonnes, en courbes, en camembert ou en nuage de mots.
Montrer comment les éléments dépendent les uns des autres ou s'enchaînent.

Connaître les limites

Produire l'image côté serveur ou hors ligne : le HTML généré charge le script AntV Infographic depuis unpkg, il s'affiche donc dans un navigateur.

Quoi fournir

Une description de contenu claire et conciseCe que l'infographie doit exprimer ; le skill la décompose en titre, description et éléments de données.
Les champs de données requis par votre contenuLesquels parmi title, desc, items, label, value ou icon le contenu comporte, afin de remplir les bons champs.
Des valeurs numériques, si vous souhaitez un graphiqueLes modèles chart-* lisent un champ values composé de label et value, éventuellement avec une catégorie.

03 Dans le skill

Règles que le skill infographic-creator donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Nommer le modèle sur la première ligne
La première ligne doit être infographic <template-name>, le modèle étant issu de la liste fournie plutôt qu'inventé.
Produire uniquement la syntaxe
La réponse doit contenir uniquement la syntaxe AntV Infographic — pas de JSON, pas d'enrobage Markdown, pas de texte explicatif autour.
Exactement un champ de données principal
Choisissez un seul champ principal pour la famille — lists pour list-, sequences pour sequence-, compares pour compare-, values pour chart-, nodes plus relations pour relation-, root pour hierarchy- — et ne mélangez jamais deux d'entre eux.
Indenter avec deux espaces
data et theme sont des blocs distincts, tout leur contenu est indenté de deux espaces, les paires clé-valeur s'écrivent key value et les entrées de tableau commencent par -.
Répondre dans la langue de l'utilisateur
Le titre, la description, les libellés et toute autre chaîne présente dans la syntaxe doivent être écrits dans la langue employée par l'utilisateur.
Revenir à items par défaut
Lorsqu'il n'est pas clair quel champ de données principal s'applique, utilisez items.
Deux racines pour les comparaisons binaires
Les modèles compare-binary- et compare-hierarchy-left-right- doivent avoir exactement deux nœuds racines, tous les éléments de comparaison étant rattachés à ces deux racines.
Une seule racine pour les hiérarchies
Les arborescences hierarchy-* utilisent une unique root imbriquée via children, et root ne doit pas être répété.

04 Mettez-le en pratique

Installez infographic-creator dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajoutez infographic-creator à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/antvis/chart-visualization-skills --skill infographic-creator

Forme générique de la CLI skills pour skills/infographic-creator/SKILL.md ; le dépôt peut documenter son propre chemin.

Confier à la skill une première tâche de diagrammes et graphiques

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Turn the text below into an infographic about [our product evolution], covering [five] milestones. Each entry needs a time, a label, a one-line description and an icon, and the milestones must appear in strict chronological sequence.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Ouvrez le fichier HTML directement dans un navigateur pour confirmer que l'infographie s'affiche, puis enregistrez-la en SVG via le bouton d'export.
Vérifiez que le titre de la page suit le format {title} - Infographic.
Vérifiez que la cible de rendu est un div conteneur avec l'id container.
Vérifiez que le conteneur est responsive, avec une largeur et une hauteur à 100 %.
Vérifiez que la page expose bien un bouton d'export SVG.

Dans OpenDesign importez infographic-creator depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: AntV
Repository: github.com/antvis/chart-visualization-skills Branche master
Fichier du skill: skills/infographic-creator/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 089b687
License: MIT D'après LICENSE.
Étoiles du dépôt: 489 Instantané GitHub pris le 14-09-2026 pour l'ensemble du dépôt antvis/chart-visualization-skills, qui contient 2 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un nombre d'utilisations pour infographic-creator.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

SpécificationsRegroupe les règles de syntaxe du DSL, des exemples de données et la liste des modèles.
AntV Infographic SyntaxDéfinit le modèle, les données et le thème comme les trois parties du DSL.
Spécifications de syntaxeCouvre la première ligne, l'indentation, les mots-clés d'icônes et le champ de données par famille.
Exemples de syntaxe de donnéesExtraits copiables pour les modèles liste, séquence, hiérarchie, comparaison, graphique et relation.
Modèles disponiblesListe tous les noms de modèles et associe les types de contenu aux familles séquence, comparaison, hiérarchie, graphique et relation.
ExempleConstruit une infographie sur l'évolution de la technologie Internet avec list-row-horizontal-icon-arrow.
Processus de générationDeux phases : déterminer le besoin, puis restituer le fichier HTML.
Étape 1 : comprendre les besoins de l'utilisateurExtraire la structure, clarifier les champs, choisir un modèle et écrire la syntaxe.
Étape 2 : restituer l'infographieConstruire le fichier HTML et afficher le chemin du fichier ainsi que la syntaxe à l'utilisateur.

Description du skill lui-même

« Créez de belles infographies à partir d'un contenu textuel donné. À utiliser lorsque les utilisateurs demandent de créer des infographies. »

Description en en-tête du fichier SKILL.md. Le fichier complet fait environ 11 870 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill infographic-creator

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Puis-je changer les couleurs et les polices ?

Oui. La partie thème de la syntaxe porte la configuration de style, y compris la palette et la police, si bien que les deux sont définis délibérément plutôt que laissés au moteur de rendu.

Propose-t-il des styles visuels prêts à l'emploi ?

Oui. theme.stylize sélectionne un style intégré et lui transmet des paramètres ; les styles courants listés sont rough pour un effet dessiné à la main, pattern pour un remplissage à motif, et linear- ou radial-gradient.

L'infographie sera-t-elle dans ma langue ?

Oui. Le skill respecte la langue de la saisie de l'utilisateur, donc une demande rédigée en chinois produit un texte chinois à l'intérieur de la syntaxe.

Infographic Creator

Exécutez infographic-creator sur une tâche réelle de diagrammes et graphiques.

Téléchargez OpenDesign, importez infographic-creator depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills