infographic-creatorvon AntV

Infographic Creator Skill.

Q: Bringt es fertige visuelle Stile mit?

Ja. theme.stylize wählt einen integrierten Stil aus und übergibt ihm Parameter; zu den gängigen aufgeführten Stilen zählen rough für einen handgezeichneten Effekt, pattern für eine Musterfüllung sowie linear- oder radial-gradient.

Ein Claude Code- und Codex-Skill für Diagramme und Charts: erstellt Infografiken aus einem vorgegebenen Text.

Diagrams & Data Visualization
Image

OpenDesign herunterladen Anleitung ansehen

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

Frontmatter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 11.870 Zeichen insgesamt

01 Was es tut

Was der infographic-creator Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Ein AntV-Skill, der eine Textbeschreibung in eine gerenderte Infografik umwandelt. Der Agent schreibt AntV-Infographic-Syntax, eine einrückungsbasierte DSL, deren erste Zeile eine Vorlage benennt und deren Datenblock title, desc und das jeweilige Hauptfeld der Vorlage trägt – lists, sequences, compares, values, nodes and relations oder root.

Ein Theme-Block legt Palette, Schrift und Stylize-Effekte fest. Die enthaltene Vorlagenliste umfasst die Familien list, sequence, compare, hierarchy, relation und chart und deckt Zeitleisten, SWOT, Mindmaps, Roadmaps, Quadrantenanalysen und Wortwolken ab. Der Agent schreibt anschließend eine browserfertige HTML-Datei mit dem Namen <title>-infographic.html, die das Diagramm rendert und als SVG exportiert.

Was er erzeugt

Die AntV-Infographic-Syntax selbst, die der Nutzer lesen, aufbewahren oder wiederverwenden kann.
Eine vollständige HTML-Datei, die mit dem Write-Tool erstellt wurde und <title>-infographic.html heißt.
Ein SVG-Export der fertigen Grafik, erzeugt aus der gerenderten Seite.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Herausfinden, Was der Nutzer Tatsächlich Zeigen Möchte
Bevor irgendetwas anderes geschieht, erfasst der Skill die Bedürfnisse des Nutzers und die Informationen, die er ausdrücken möchte, denn davon hängen sowohl die Vorlage als auch die Datenstruktur ab.
02
Bei Dünnem Briefing Nachfragen
Ist die Inhaltsbeschreibung nicht klar und knapp, fragt der Skill nach, statt Inhalte zu erfinden, und kann auch fragen, welche Vorlage der Nutzer wünscht.
03
Inhaltsform mit einer Vorlagenfamilie Abgleichen
Strikte Abläufe gehen an sequence-, Meinungslisten an list-row- oder list-column-, binäre Vergleiche an compare-binary-, Baumstrukturen an hierarchy-tree- und Quadranten an compare-quadrant-.
04
Die Struktur in der DSL Ausdrücken
Die Struktur wird zu AntV-Infographic-Syntax: eine Vorlagenzeile, ein data-Block mit title/desc und dem Hauptfeld der Vorlage, plus ein optionaler theme-Block.
05
Die HTML-Datei Generieren
Die Syntax wird in ein vollständiges HTML-Dokument mit dem AntV-Infographic-Script-Tag, einem Container und einem Render-Aufruf eingesetzt.
06
Datei und Syntax Übergeben, Dann Anpassungen Anbieten
Die Antwort enthält den generierten Dateipfad und die Syntax, gefolgt von einer Einladung, Vorlage, Farben oder Inhalt anzupassen.

02 Finden Sie Ihren Favoriten

Wann Sie den infographic-creator Skill verwenden

Verwenden Sie den infographic-creator Skill in Claude Code oder Codex, wenn die Aufgabe Diagramme und Grafiken dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

Darstellung eines Prozesses, von Schritten oder eines Entwicklungstrends in strikter Reihenfolge, etwa einer Zeitleiste.
Eine SWOT-Analyse eines Produkts, Projekts oder einer Idee.
Eine Mindmap, die ein Thema in Zweige aufteilt.
Zahlen in ein Balken-, Säulen-, Linien-, Kreis- oder Wortwolken-Diagramm umwandeln.
Zeigt, wie Dinge voneinander abhängen oder ineinander fließen.

Grenzen kennen

Erzeugung des Bildes serverseitig oder offline: Die generierte HTML lädt das AntV-Infographic-Skript von unpkg, sodass die Darstellung in einem Browser erfolgt.

Was Sie bereitstellen sollten

Eine klare und präzise InhaltsbeschreibungWas die Infografik aussagen soll; das Skill zerlegt dies in Titel, Beschreibung und die Dateneinträge.
Die Datenfelder, die Ihr Inhalt benötigtWelche der Felder title, desc, items, label, value oder icon der Inhalt enthält, damit die passenden Felder gefüllt werden.
Numerische Werte, falls Sie ein Diagramm möchtenchart-*-Vorlagen lesen ein values-Feld aus Label und Wert, optional mit einer Kategorie.

03 Innerhalb des Skills

Regeln, die das infographic-creator-Skill Claude Code und Codex vorgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Die Vorlage in der ersten Zeile benennen
Die erste Zeile muss infographic <template-name> lauten, wobei die Vorlage aus der mitgelieferten Liste stammt und nicht frei erfunden wird.
Nur die Syntax ausgeben
Die Antwort darf ausschließlich die AntV-Infographic-Syntax enthalten — kein JSON, kein Markdown-Wrapper, kein erklärender Text davor oder danach.
Genau ein Hauptdatenfeld
Wählen Sie ein einziges Hauptfeld für die jeweilige Familie — lists für List-, sequences für Sequence-, compares für Compare-, values für Chart-, nodes plus relations für Relation-, root für Hierarchy-Vorlagen — und mischen Sie niemals zwei davon.
Mit zwei Leerzeichen einrücken
data und theme sind separate Blöcke, alles darin wird um zwei Leerzeichen eingerückt, Schlüssel-Wert-Paare werden als key value geschrieben und Array-Einträge beginnen mit -.
In der Sprache des Nutzers antworten
Titel, Beschreibung, Labels und jede weitere Zeichenkette innerhalb der Syntax müssen in der Sprache verfasst sein, in der der Nutzer geschrieben hat.
Als Rückfalloption items verwenden
Wenn nicht klar ist, welches Hauptdatenfeld zutrifft, verwenden Sie items.
Zwei Wurzeln für binäre Vergleiche
compare-binary-- und compare-hierarchy-left-right--Vorlagen müssen genau zwei Wurzelknoten haben, unter denen alle Vergleichselemente hängen.
Eine Wurzel für Hierarchien
hierarchy-*-Baumstrukturen verwenden eine einzige root, die über children verschachtelt wird, und root darf nicht wiederholt werden.

04 In Betrieb nehmen

infographic-creator in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

infographic-creator zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

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

Generische skills-CLI-Form für skills/infographic-creator/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste Diagramm- und Chart-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

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.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Öffnen Sie die HTML-Datei direkt in einem Browser, um zu prüfen, dass die Infografik korrekt dargestellt wird, und speichern Sie sie dann mit der Exportschaltfläche als SVG.
Prüfen Sie, ob der Seitentitel dem Muster {title} - Infographic folgt.
Prüfen Sie, ob das Render-Ziel ein Container-Div mit der ID container ist.
Prüfen Sie, ob der Container responsiv ist, mit Breite und Höhe jeweils auf 100 %.
Prüfen Sie, ob die Seite tatsächlich eine Schaltfläche für den SVG-Export anbietet.

In OpenDesign importieren Sie infographic-creator über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es anschließend in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: AntV
Repository: github.com/antvis/chart-visualization-skills Branch master
Skill-Datei: skills/infographic-creator/SKILL.md Inhalts-Prüfsumme bei Verifizierung aufgezeichnet; Commit 089b687
License: MIT Aus LICENSE.
Repository-Sterne: 489 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository antvis/chart-visualization-skills, das 2 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für infographic-creator.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

SpezifikationenFasst die DSL-Syntaxregeln, Datenbeispiele und die Vorlagenliste zusammen.
AntV Infographic SyntaxDefiniert Vorlage, Daten und Theme als die drei Bestandteile der DSL.
SyntaxspezifikationenBehandelt die erste Zeile, die Einrückung, Icon-Schlüsselwörter und das Datenfeld je Familie.
Beispiele für die DatensyntaxKopierbare Snippets für Vorlagen der Familien Liste, Sequenz, Hierarchie, Vergleich, Diagramm und Beziehung.
Verfügbare VorlagenListet alle Vorlagennamen auf und ordnet Inhaltstypen den Familien Sequenz, Vergleich, Hierarchie, Diagramm und Beziehung zu.
BeispielErstellt eine Infografik zur Entwicklung der Internet-Technologie mit list-row-horizontal-icon-arrow.
GenerierungsprozessZwei Phasen: zunächst die Anforderung klären, dann die HTML-Datei rendern.
Schritt 1: Anforderungen des Nutzers verstehenStruktur extrahieren, Felder klären, eine Vorlage wählen und die Syntax schreiben.
Schritt 2: Die Infografik rendernDie HTML-Datei erstellen und dem Nutzer den Dateipfad sowie die Syntax anzeigen.

Die eigene Beschreibung des Skills

„Erstellt ansprechende Infografiken auf Basis eines gegebenen Textes. Verwenden, wenn Nutzer die Erstellung von Infografiken anfordern."

Front-matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 11.870 Zeichen. Die vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum Skill infographic-creator

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Kann ich Farben und Schriften ändern?

Ja. Der Theme-Teil der Syntax enthält die Stilkonfiguration, einschließlich Farbpalette und Schrift, sodass beide bewusst festgelegt werden und nicht dem Renderer überlassen bleiben.

Bringt es fertige visuelle Stile mit?

Ja. theme.stylize wählt einen integrierten Stil aus und übergibt ihm Parameter; zu den gängigen aufgeführten Stilen zählen rough für einen handgezeichneten Effekt, pattern für eine Musterfüllung sowie linear- oder radial-gradient.

Wird die Infografik in meiner Sprache erstellt?

Ja. Der Skill richtet sich nach der Sprache der Eingabe des Nutzers, sodass eine auf Chinesisch verfasste Anfrage chinesischen Text innerhalb der Syntax erzeugt.

Infographic Creator

Führen Sie infographic-creator für eine echte Diagramm- und Chart-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie infographic-creator über den SKILL.md-Link, fügen Sie den Prompt oben ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen