infographic-creatoryazan AntV

Infographic Creator Skill.

Q: Hazır görsel stillerle mi geliyor?

Evet, geliyor. theme.stylize yerleşik bir stil seçer ve ona parametreler geçirir; listelenen yaygın stiller el çizimi efekti için rough, desen dolgusu için pattern ve linear- veya radial-gradient'tir.

Claude Code ve Codex için diyagram ve grafik ajanı: verilen metinden infografikler oluşturur.

Diagrams & Data Visualization
Image

OpenDesign İndir Kullanım kılavuzunu görüntüle

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

Üst bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okundu · tam hali 11.870 karakter

01 Ne yapar

infographic-creator Skill'i Claude Code ve Codex'te Ne Yapar

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Metin açıklamasını görselleştirilmiş bir infografiğe dönüştüren bir AntV skill'i. Ajan, ilk satırı bir şablonu adlandıran ve veri bloğu title, desc ile şablonun kendi ana alanını taşıyan girinti tabanlı bir DSL olan AntV Infographic sözdizimini yazar — lists, sequences, compares, values, nodes and relations veya root.

Bir tema bloğu palet, yazı tipi ve stilize efektleri belirler. Birlikte gelen şablon listesi list, sequence, compare, hierarchy, relation ve chart ailelerini kapsar; zaman çizelgeleri, SWOT, akıl haritaları, yol haritaları, dörtlü analiz ve kelime bulutlarını içerir. Ajan ardından diyagramı oluşturan ve SVG olarak dışa aktaran, <title>-infographic.html adlı tarayıcıya hazır bir HTML dosyası yazar.

Neler üretir

Kullanıcının okuyabileceği, saklayabileceği veya yeniden kullanabileceği AntV Infographic sözdiziminin kendisi.
Write aracıyla yazılmış, <title>-infographic.html adında tam bir HTML dosyası.
Oluşturulan sayfadan üretilen, bitmiş grafiğin SVG dışa aktarımı.

Örnek istemi görün ↗

Nasıl Çalışır

01
Kullanıcının Gerçekte Neyi Göstermek İstediğini Belirleyin
Her şeyden önce skill, kullanıcının ihtiyaçlarını ve ifade etmek istediği bilgiyi okur; çünkü bu, hem şablonu hem de veri yapısını belirler.
02
Brief Yetersizse Geri Soru Sorun
İçerik açıklaması açık ve net değilse skill, içerik icat etmek yerine bir açıklama ister ve ayrıca kullanıcının hangi şablonu istediğini de sorabilir.
03
İçerik Şeklini Bir Şablon Ailesiyle Eşleştirin
Kesin sıralar sequence-e, görüş listelemeleri list-row- veya list-column-e, ikili karşılaştırmalar compare-binary-e, ağaçlar hierarchy-tree-e ve dörtlü şemalar compare-quadrant-e gider.
04
Yapıyı DSL'de İfade Edin
Yapı, AntV Infographic sözdizimine dönüşür: bir şablon satırı, title/desc ve şablonun ana alanını içeren bir data bloğu, ayrıca isteğe bağlı bir theme bloğu.
05
HTML Dosyasını Oluşturun
Sözdizimi, AntV Infographic script etiketi, bir konteyner ve bir render çağrısı içeren tam bir HTML belgesine yerleştirilir.
06
Dosyayı ve Sözdizimini Geri Verin, Sonra Ayarlamalar Önerin
Yanıt, oluşturulan dosya yolunu ve sözdizimini taşır, ardından şablonu, renkleri veya içeriği ayarlama davetiyle devam eder.

02 Uyumunuzu bulun

infographic-creator Skill Ne Zaman Kullanılır

Bu tür diyagram ve grafikler için Claude Code veya Codex'te infographic-creator skill'ini kullanın. Aşağıdaki uyum ve sınırlar, skill'in kendi dosyasından alınmıştır.

İyi Uyum

Zaman çizelgesi gibi kesin bir sırayla bir süreci, adımları veya bir gelişim eğilimini gösterme.
Bir ürün, proje veya fikrin SWOT analizi.
Bir konuyu dallara ayıran bir akıl haritası.
Sayıları bir çubuk, sütun, çizgi, pasta veya kelime bulutu grafiğine dönüştürme.
Şeylerin birbirine nasıl bağlı olduğunu veya nasıl aktığını gösterme.

Sınırları Bilin

Görselin sunucu tarafında veya çevrim dışı oluşturulması: üretilen HTML, unpkg üzerinden AntV Infographic betiğini yükler, dolayısıyla bir tarayıcıda render edilir.

Ne Sağlamalısınız

Açık ve öz bir içerik açıklamasıİnfografiğin ne söylemesi gerektiği; skill bunu başlık, açıklama ve veri öğelerine ayırır.
İçeriğinizin gerektirdiği veri alanlarıtitle, desc, items, label, value veya icon alanlarından hangilerinin içerikte bulunduğu, böylece doğru alanlar doldurulur.
Bir grafik istiyorsanız sayısal değerlerchart-* şablonları, isteğe bağlı olarak bir kategoriyle birlikte label ve value içeren bir values alanını okur.

03 Skill'in içinde

infographic-creator Skill'in Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 8 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

Şablonu Birinci Satırda Adlandırın
İlk satır infographic <template-name> olmalıdır; şablon uydurulmuş değil, paketlenmiş listeden alınmalıdır.
Yalnızca Sözdizimini Çıktı Verin
Yanıt yalnızca AntV Infographic sözdizimi olmalıdır — ne JSON, ne Markdown sarmalayıcı, ne de etrafında açıklayıcı düz metin.
Tam Olarak Bir Ana Veri Alanı
Aile için tek bir ana alan seçin — liste türleri için lists, sıra türleri için sequences, karşılaştırma türleri için compares, grafik türleri için values, ilişki türleri için nodes ile relations, hiyerarşi türleri için root — ve bunlardan ikisini asla karıştırmayın.
İki Boşlukla Girinti Yapın
data ve theme ayrı bloklardır, içlerindeki her şey iki boşlukla girintilenir, anahtar-değer çiftleri key value şeklinde yazılır ve dizi girdileri - ile başlar.
Kullanıcının Dilinde Yanıt Verin
Başlık, açıklama, etiketler ve sözdizimi içindeki diğer tüm dizeler, kullanıcının yazdığı dilde yazılmalıdır.
items'a Geri Dönün
Hangi ana veri alanının uygulanacağı belirsiz olduğunda items kullanın.
İkili Karşılaştırmalar için İki Kök
compare-binary- ve compare-hierarchy-left-right- şablonlarının tam olarak iki kök düğümü olmalıdır ve tüm karşılaştırma öğeleri bu iki kökün altında yer almalıdır.
Hiyerarşiler için Bir Kök
hierarchy-* ağaçları, children üzerinden iç içe geçmiş tek bir root kullanır ve root tekrarlanmamalıdır.

04 İşe koyun

infographic-creator'ı Claude Code veya Codex'e Yükleyin

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

infographic-creator'ı Claude Code, Codex veya Ajanınıza Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal

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

skills/infographic-creator/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

Beceriye İlk Diyagram ve Grafik Görevi Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

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.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

İnfografiğin render edildiğini doğrulamak için HTML dosyasını doğrudan bir tarayıcıda açın, ardından dışa aktarma düğmesiyle SVG olarak kaydedin.
Sayfa başlığının {title} - Infographic desenine uyduğunu kontrol edin.
Render hedefinin, kimliği container olan bir kapsayıcı div olduğunu kontrol edin.
Kapsayıcının duyarlı olduğunu, genişlik ve yüksekliğin %100 olduğunu kontrol edin.
Sayfanın gerçekten bir SVG dışa aktarma düğmesi sunduğunu kontrol edin.

OpenDesign'da infographic-creator'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta seçin.

OpenDesign İndir Hızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author: AntV
Repository: github.com/antvis/chart-visualization-skills Branch master
Skill dosyası: skills/infographic-creator/SKILL.md İçerik sağlama doğrulamada kaydedildi; commit 089b687
License: MIT LICENSE dosyasından.
Repository yıldızları: 489 GitHub görüntüsü 2026-09-14 tarihinde bu katalogda 2 skill içeren antvis/chart-visualization-skills deposunun tamamı için alındı. infographic-creator için bir değerlendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı: 2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

SpecificationsDSL sözdizimi kurallarını, veri örneklerini ve şablon listesini gruplar.
AntV Infographic SyntaxŞablonu, veriyi ve temayı DSL'nin üç parçası olarak tanımlar.
Syntax Specificationsİlk satırı, girintiyi, simge anahtar kelimelerini ve her aile için veri alanını kapsar.
Data Syntax ExamplesListe, sıra, hiyerarşi, karşılaştırma, grafik ve ilişki şablonları için kopyalanabilir kod parçacıkları.
Available TemplatesTüm şablon adlarını listeler ve içerik türlerini sıra, karşılaştırma, hiyerarşi, grafik ve ilişki ailelerine eşler.
Examplelist-row-horizontal-icon-arrow ile bir internet teknolojisi evrimi infografiği oluşturur.
Generation Processİki aşama: gereksinimi çözümlemek, ardından HTML dosyasını render etmek.
Step 1: Understand User RequirementsYapıyı çıkarın, alanları netleştirin, bir şablon seçin ve sözdizimini yazın.
Step 2: Render the InfographicHTML dosyasını oluşturun ve dosya yolunu ile sözdizimini kullanıcıya gösterin.

Skill'in Kendi Açıklaması

"Verilen metin içeriğine dayalı olarak güzel infografikler oluşturun. Kullanıcılar infografik oluşturma talep ettiğinde kullanın."

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 11.870 karakterdir. GitHub'da tam dosyayı okuyun.

06 Kurmadan önce

infographic-creator Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Renkleri ve yazı tiplerini değiştirebilir miyim?

Evet. Sözdiziminin tema bölümü, palet ve yazı tipi dahil stil yapılandırmasını taşır, böylece ikisi de render edene bırakılmak yerine bilinçli olarak ayarlanır.

Hazır görsel stillerle mi geliyor?

Evet, geliyor. theme.stylize yerleşik bir stil seçer ve ona parametreler geçirir; listelenen yaygın stiller el çizimi efekti için rough, desen dolgusu için pattern ve linear- veya radial-gradient'tir.

İnfografik kendi dilimde mi olacak?

Evet. Skill, kullanıcının girdisinin dilini dikkate alır, böylece Çince yazılan bir istek sözdizimi içinde Çince metin üretir.

Infographic Creator

infographic-creator'ı gerçek bir diyagram ve grafik görevinde çalıştırın.

OpenDesign'ı indirin, SKILL.md bağlantısından infographic-creator'ı içe aktarın, yukarıdaki istemi yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın