infographic-creatorавтор AntV

Infographic Creator Skill.

Q: Есть ли готовые визуальные стили?

Да. theme.stylize выбирает встроенный стиль и передаёт ему параметры; среди распространённых стилей — rough для эффекта рисунка от руки, pattern для заливки узором, а также linear- или radial-gradient.

Skill для Claude Code и Codex для диаграмм и графиков: создаёт инфографику из заданного текста.

Diagrams & Data Visualization
Image

Скачать OpenDesign Инструкция по использованию

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

Вводная часть и заголовки разделов прочитаны из исходного файла 14 сентября 2026 · 11 870 символов полностью

01 Что делает

Что делает skill infographic-creator в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Skill AntV, который превращает текстовое описание в готовую инфографику. Агент пишет синтаксис AntV Infographic — DSL на основе отступов, первая строка которого задаёт шаблон, а блок данных содержит title, desc и собственное основное поле шаблона — списки, последовательности, сравнения, значения, узлы и связи или root.

Блок theme задаёт палитру, шрифт и эффекты стилизации. Встроенный список шаблонов охватывает семейства list, sequence, compare, hierarchy, relation и chart, включая таймлайны, SWOT, карты мыслей, дорожные карты, квадрантный анализ и облака слов. Затем агент пишет готовый к отображению в браузере HTML-файл с именем <title>-infographic.html, который рендерит диаграмму и экспортирует её в SVG.

Что он выдаёт

Сам синтаксис AntV Infographic, который пользователь может прочитать, сохранить или использовать повторно.
Полный HTML-файл, созданный инструментом Write, с именем <title>-infographic.html.
SVG-экспорт готовой графики, полученный из отрендеренной страницы.

Смотрите пример запроса ↗

Как это работает

01
Понять, что пользователь на самом деле хочет показать
Прежде всего skill выясняет потребности пользователя и информацию, которую он хочет выразить, поскольку это определяет и шаблон, и структуру данных.
02
Уточнять, если бриф слишком скудный
Если описание содержания не чёткое и не краткое, skill запрашивает уточнение, а не придумывает контент, а также может спросить, какой шаблон пользователь хочет.
03
Сопоставлять форму контента с семейством шаблонов
Строгие последовательности идут в sequence-, перечисления мнений — в list-row- или list-column-, бинарные сравнения — в compare-binary-, деревья — в hierarchy-tree-, а квадранты — в compare-quadrant-.
04
Выразить структуру в DSL
Структура превращается в синтаксис AntV Infographic: строка шаблона, блок data с title/desc и основным полем шаблона, а также необязательный блок theme.
05
Сгенерировать HTML-файл
Синтаксис вставляется в полноценный HTML-документ с тегом скрипта AntV Infographic, контейнером и вызовом render.
06
Вернуть файл и синтаксис, затем предложить правки
В ответе указывается путь к сгенерированному файлу и синтаксис, а затем предлагается изменить шаблон, цвета или контент.

02 Определите своё применение

Когда использовать skill infographic-creator

Используйте skill infographic-creator в Claude Code или Codex, когда задача — диаграммы и графики такого рода. Назначение и ограничения ниже взяты из собственного файла skill.

Хорошо подходит

Показ процесса, этапов или тенденции развития в строгом порядке, например таймлайна.
SWOT-анализ продукта, проекта или идеи.
Карта мыслей, разбивающая тему на ветви.
Превращение чисел в столбчатую, линейную, круговую диаграмму или облако слов.
Показ зависимостей или потоков между элементами.

Знайте границы

Формирование изображения на сервере или в офлайне: сгенерированный HTML загружает скрипт AntV Infographic с unpkg, поэтому он рендерится в браузере.

Что предоставить

Чёткое и краткое описание содержанияО чём должна рассказывать инфографика; skill разбивает это на title, desc и элементы данных.
Поля данных, которые нужны вашему контентуКакие из полей title, desc, items, label, value или icon содержит контент, чтобы заполнить нужные поля.
Числовые значения, если нужен графикШаблоны chart-* читают поле values с label и value, опционально с категорией.

03 Внутри скилла

Правила, которые skill infographic-creator задаёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

Указать шаблон в первой строке
Первая строка должна быть infographic <template-name>, где шаблон берётся из встроенного списка, а не придумывается.
Выводить только синтаксис
Ответ должен содержать только синтаксис AntV Infographic — без JSON, без обёртки Markdown, без пояснительного текста вокруг.
Ровно одно основное поле данных
Выберите одно основное поле для семейства — lists для list-, sequences для sequence-, compares для compare-, values для chart-, nodes плюс relations для relation-, root для hierarchy- — и никогда не смешивайте два из них.
Отступ в два пробела
data и theme — отдельные блоки, всё внутри них с отступом в два пробела, пары «ключ-значение» записываются как key value, а элементы массива начинаются с -.
Отвечать на языке пользователя
Title, desc, labels и любые другие строки внутри синтаксиса должны быть написаны на том языке, на котором писал пользователь.
По умолчанию использовать items
Когда неясно, какое основное поле данных применимо, используйте items.
Два корня для бинарных сравнений
Шаблоны compare-binary- и compare-hierarchy-left-right- должны иметь ровно два корневых узла, а все элементы сравнения располагаются под этими двумя корнями.
Один корень для иерархий
Деревья hierarchy-* используют единственный root, вложенный через children, и root не должен повторяться.

04 Применение

Установите infographic-creator в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте infographic-creator в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

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

Общая форма CLI skills для skills/infographic-creator/SKILL.md; репозиторий может документировать собственный путь.

Дайте навыку первую задачу на диаграммы и графики

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

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.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Откройте HTML-файл прямо в браузере, чтобы убедиться, что инфографика рендерится, затем сохраните её в SVG с помощью кнопки экспорта.
Проверьте, что заголовок страницы соответствует шаблону {title} - Infographic.
Проверьте, что целевой контейнер для рендеринга — это div-контейнер с id container.
Проверьте, что контейнер адаптивный: ширина и высота установлены на 100%.
Проверьте, что на странице действительно есть кнопка экспорта в SVG.

В OpenDesign импортируйте infographic-creator по ссылке из его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: AntV
Repository: github.com/antvis/chart-visualization-skills Ветка master
Файл skill: skills/infographic-creator/SKILL.md Контрольная сумма содержимого зафиксирована при проверке; коммит 089b687
License: MIT Из LICENSE.
Звёзды репозитория: 489 Снимок GitHub сделан 14.09.2026 для всего репозитория antvis/chart-visualization-skills, который содержит 2 скилла в этом каталоге. Не является рейтингом или счётчиком использования infographic-creator.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

СпецификацииОбъединяет правила синтаксиса DSL, примеры данных и список шаблонов.
AntV Infographic SyntaxОпределяет шаблон, данные и тему как три части DSL.
Спецификации синтаксисаОхватывает первую строку, отступы, ключевые слова иконок и поле данных для каждого семейства.
Примеры синтаксиса данныхГотовые к копированию фрагменты для шаблонов списка, последовательности, иерархии, сравнения, диаграммы и отношения.
Доступные шаблоныПеречисляет все названия шаблонов и сопоставляет типы контента с семействами последовательности, сравнения, иерархии, диаграммы и отношения.
ПримерСоздаёт инфографику эволюции интернет-технологий с помощью list-row-horizontal-icon-arrow.
Процесс генерацииДва этапа: сначала определить требование, затем отрендерить HTML-файл.
Шаг 1: понять требования пользователяИзвлечь структуру, уточнить поля, выбрать шаблон и написать синтаксис.
Шаг 2: отрендерить инфографикуСобрать HTML-файл и показать пользователю путь к файлу и синтаксис.

Собственное описание skill

«Создавайте красивые инфографики на основе предоставленного текста. Используйте, когда пользователи просят создать инфографику.»

Описание из заголовка SKILL.md. Полный файл содержит около 11 870 символов. Читать полный файл на GitHub.

06 Перед установкой

Вопросы о skill infographic-creator

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Можно ли изменить цвета и шрифты?

Да. Часть синтаксиса theme отвечает за конфигурацию стиля, включая палитру и шрифт, поэтому оба параметра задаются осознанно, а не оставляются на волю рендерера.

Есть ли готовые визуальные стили?

Да. theme.stylize выбирает встроенный стиль и передаёт ему параметры; среди распространённых стилей — rough для эффекта рисунка от руки, pattern для заливки узором, а также linear- или radial-gradient.

Будет ли инфографика на моём языке?

Да. Skill учитывает язык ввода пользователя, поэтому запрос на китайском языке приводит к тексту на китайском внутри синтаксиса.

Infographic Creator

Запустите infographic-creator на реальной задаче с диаграммами и графиками.

Загрузите OpenDesign, импортируйте infographic-creator по ссылке из его SKILL.md, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

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

Что делает skill infographic-creator в Claude Code и Codex

Словами самого skill

Как это работает

Когда использовать skill infographic-creator

Хорошо подходит

Знайте границы

Что предоставить

Правила, которые skill infographic-creator задаёт Claude Code и Codex

Указать шаблон в первой строке

Выводить только синтаксис

Ровно одно основное поле данных

Отступ в два пробела

Отвечать на языке пользователя

По умолчанию использовать items

Два корня для бинарных сравнений

Один корень для иерархий