infographic-creatordi AntV

Infographic Creator Skill.

Q: È fornita con stili visivi già pronti?

Sì. theme.stylize seleziona uno stile integrato e gli passa dei parametri; gli stili comuni elencati sono rough per un effetto disegnato a mano, pattern per un riempimento a motivo, e linear- o radial-gradient.

Uno skill per Claude Code e Codex per diagrammi e grafici: crea infografiche da un testo dato.

Diagrams & Data Visualization
Image

Scarica OpenDesign Guida all'uso

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

Intestazione e sezioni lette dal file upstream il 14 settembre 2026 · 11.870 caratteri in totale

01 Cosa fa

Cosa fa la skill infographic-creator in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Una skill AntV che trasforma una descrizione testuale in un'infografica renderizzata. L'agente scrive la sintassi AntV Infographic, un DSL basato sull'indentazione la cui prima riga indica un template e il cui blocco dati contiene title, desc e il campo principale del template — liste, sequenze, confronti, valori, nodi e relazioni, oppure root.

Un blocco theme imposta palette, font ed effetti di stile. L'elenco di template incluso spans le famiglie list, sequence, compare, hierarchy, relation e chart, coprendo timeline, SWOT, mappe mentali, roadmap, analisi a quadranti e word cloud. L'agente scrive quindi un file HTML pronto per il browser, denominato <title>-infographic.html, che renderizza il diagramma e lo esporta come SVG.

Che cosa produce

La sintassi AntV Infographic stessa, che l'utente può leggere, conservare o riutilizzare.
Un file HTML completo scritto con lo strumento Write, denominato <title>-infographic.html.
Un'esportazione SVG della grafica finita, prodotta dalla pagina renderizzata.

Vedi l'esempio di prompt ↗

Come funziona

01
Capire Cosa Vuole Realmente Mostrare l'Utente
Prima di tutto la skill legge le esigenze dell'utente e le informazioni che vuole esprimere, poiché questo determina sia il template sia la struttura dei dati.
02
Chiedere Chiarimenti Quando il Brief È Scarso
Se la descrizione del contenuto non è chiara e concisa, la skill ne richiede una invece di inventare i contenuti, e può anche chiedere quale template l'utente desideri.
03
Far Corrispondere la Forma del Contenuto a una Famiglia di Template
Le sequenze strette vanno a sequence-, gli elenchi di opinioni a list-row- o list-column-, i confronti binari a compare-binary-, gli alberi a hierarchy-tree- e i quadranti a compare-quadrant-.
04
Esprimere la Struttura nel DSL
La struttura diventa sintassi AntV Infographic: una riga di template, un blocco data con title/desc e il campo principale del template, più un blocco theme opzionale.
05
Generare il File HTML
La sintassi viene inserita in un documento HTML completo con il tag script di AntV Infographic, un container e una chiamata di render.
06
Restituire il File e la Sintassi, Poi Proporre Modifiche
La risposta contiene il percorso del file generato e la sintassi, seguiti da un invito a modificare il template, i colori o il contenuto.

02 Trova la tua applicazione

Quando Usare lo Skill infographic-creator

Usa lo skill infographic-creator in Claude Code o Codex quando il lavoro riguarda diagrammi e grafici di questo tipo. Idoneità e limiti sotto sono presi dal file dello skill stesso.

Buona applicazione

Mostrare un processo, dei passaggi o una tendenza di sviluppo in ordine stretto, come una timeline.
Un'analisi SWOT di un prodotto, progetto o idea.
Una mappa mentale che suddivide un argomento in rami.
Trasformare numeri in un grafico a barre, colonne, linee, torta o word cloud.
Mostrare come le cose dipendono l'una dall'altra o fluiscono tra loro.

Conosci i limiti

Produrre l'immagine lato server o offline: l'HTML generato carica lo script AntV Infographic da unpkg, quindi viene reso in un browser.

Cosa fornire

Una descrizione del contenuto chiara e concisaCosa deve dire l'infografica; lo skill la suddivide in title, desc e gli elementi di data.
I campi di dati richiesti dal contenutoQuali tra title, desc, items, label, value o icon sono presenti nel contenuto, in modo da compilare i campi corretti.
Valori numerici, se si desidera un graficoI template chart-* leggono un campo values composto da label e value, opzionalmente con una category.

03 Dentro la skill

Le regole che lo skill infographic-creator fornisce a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Indicare il Nome del Template sulla Prima Riga
La prima riga deve essere infographic <template-name>, con il template preso dall'elenco incluso e non inventato.
Restituire Solo la Sintassi
La risposta deve contenere solo la sintassi AntV Infographic — nessun JSON, nessun wrapper Markdown, nessun testo esplicativo intorno.
Esattamente Un Campo Dati Principale
Scegliere un unico campo principale per la famiglia — lists per list-, sequences per sequence-, compares per compare-, values per chart-, nodes insieme a relations per relation-, root per hierarchy- — e non mischiarne mai due.
Indentare con Due Spazi
data e theme sono blocchi separati, tutto ciò che contengono è indentato con due spazi, le coppie chiave-valore sono scritte come key value e le voci degli array iniziano con -.
Rispondere nella Lingua dell'Utente
Title, desc, label e ogni altra stringa all'interno della sintassi devono essere scritte nella lingua utilizzata dall'utente.
Usare Items come Ripiego
Quando non è chiaro quale campo dati principale si applichi, usare items.
Due Radici per i Confronti Binari
I template compare-binary- e compare-hierarchy-left-right- devono avere esattamente due nodi radice, con tutti gli elementi di confronto collocati sotto queste due radici.
Una Radice per le Gerarchie
Gli alberi hierarchy-* usano un singolo root annidato tramite children, e root non deve essere ripetuto.

04 Mettila al lavoro

Installa infographic-creator in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi infographic-creator a Claude Code, Codex o al Tuo Agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

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

Forma CLI generica skills per skills/infographic-creator/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna allo skill un primo compito su diagrammi e grafici

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Aprire il file HTML direttamente in un browser per confermare che l'infografica venga renderizzata, quindi salvarlo come SVG con il pulsante di esportazione.
Verificare che il titolo della pagina segua lo schema {title} - Infographic.
Verificare che il target di rendering sia un div contenitore con id container.
Verificare che il contenitore sia responsivo, con larghezza e altezza al 100%.
Verificare che la pagina esponga effettivamente un pulsante di esportazione SVG.

In OpenDesign importare infographic-creator dal suo link SKILL.md: Plugins → Add → Skill → Import from link, quindi selezionarlo nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: AntV
Repository: github.com/antvis/chart-visualization-skills Branch master
File della skill: skills/infographic-creator/SKILL.md Checksum del contenuto registrato alla verifica; commit 089b687
License: MIT Da LICENSE.
Stelle del repository: 489 Snapshot GitHub del 2026-09-14 per l'intero repository antvis/chart-visualization-skills, che contiene 2 skill in questo catalogo. Non è una valutazione o un conteggio d'uso per infographic-creator.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

SpecificheRaggruppa le regole di sintassi del DSL, gli esempi di dati e l'elenco dei template.
Sintassi Infographic di AntVDefinisce template, dati e tema come le tre parti del DSL.
Specifiche di SintassiCopre la prima riga, l'indentazione, le parole chiave delle icone e il campo dati per ciascuna famiglia.
Esempi di Sintassi dei DatiSnippet copiabili per i template list, sequence, hierarchy, compare, chart e relation.
Template DisponibiliElenca tutti i nomi dei template e associa i tipi di contenuto alle famiglie sequence, compare, hierarchy, chart e relation.
EsempioCostruisce un'infografica sull'evoluzione della tecnologia Internet con list-row-horizontal-icon-arrow.
Processo di GenerazioneDue fasi: definire il requisito, poi renderizzare il file HTML.
Passo 1: Comprendere i Requisiti dell'UtenteEstrarre la struttura, chiarire i campi, scegliere un template e scrivere la sintassi.
Passo 2: Renderizzare l'InfograficaCostruire il file HTML e mostrare all'utente il percorso del file e la sintassi.

Descrizione della skill

"Crea infografiche accattivanti basate su contenuti testuali forniti. Usa quando gli utenti richiedono di creare infografiche."

Descrizione del front-matter da SKILL.md. Il file completo è di circa 11.870 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sulla Skill infographic-creator

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Posso cambiare i colori e i font?

Sì. La parte theme della sintassi porta la configurazione dello stile, inclusi la palette e il font, così entrambi vengono impostati deliberatamente e non lasciati al renderer.

È fornita con stili visivi già pronti?

Sì. theme.stylize seleziona uno stile integrato e gli passa dei parametri; gli stili comuni elencati sono rough per un effetto disegnato a mano, pattern per un riempimento a motivo, e linear- o radial-gradient.

L'infografica sarà nella mia lingua?

Sì. La skill rispetta la lingua dell'input dell'utente, quindi una richiesta scritta in cinese produce testo cinese all'interno della sintassi.

Infographic Creator

Esegui infographic-creator su un task reale di diagrammi e grafici.

Scarica OpenDesign, importa infographic-creator dal suo link SKILL.md, incolla il prompt sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

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

Cosa fa la skill infographic-creator in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando Usare lo Skill infographic-creator

Buona applicazione

Conosci i limiti

Cosa fornire

Le regole che lo skill infographic-creator fornisce a Claude Code e Codex

Indicare il Nome del Template sulla Prima Riga

Restituire Solo la Sintassi

Esattamente Un Campo Dati Principale

Indentare con Due Spazi

Rispondere nella Lingua dell'Utente

Usare Items come Ripiego

Due Radici per i Confronti Binari

Una Radice per le Gerarchie