EpicInfographics README

The project's README from github.com/OrRon/EpicInfographics. As one markdown file: README.md.

Epic Infographics

Infographics that don't look AI-made.

An open-source skill that teaches AI agents to design infographics the way a studio would.

It skips the stock templates, the rounded card grids, the Tailwind blue, and the emoji icons. Every image below came straight out of the skill, brief to PNG, with nothing touched up by hand.

CI License: MIT


The streaming wars, dark-glass style

The spotlight is shrinking, dark-glass story The coffee tree, naturalist plate

Why this exists

Ask an AI for an infographic and you usually get the same thing: rounded cards in a symmetric grid, Tailwind blue, an emoji where an icon should be, and a bar chart floating on a flat background. It works, and it is instantly recognizable as machine-made.

This skill writes down what a good studio actually does, as steps an agent can follow without needing taste of its own:

Thirteen briefs, twelve design languages, six canvas formats, and every piece animated. Click any image for its brief, its HTML source, and the MP4 and GIF versions.


Orbital launch
blueprint · story
Tallest buildings
blueprint · a4
Signup funnel
dark-glass · square

The streaming wars
dark-glass · wide
The case for sleep
editorial · story
Anatomy of a margherita
hand-drawn · square

The honeybee economy
retro-print · a4
The coffee tree
naturalist-plate · a4
The spotlight is shrinking
dark-glass · story

Two tiny worlds of work
isometric-world · wide
The road the internet took
isometric-world · story
Visit Mars
park-poster · story

Inside a wind turbine
cutaway · a4
Your brief here
the skill made all of these;
test briefs in examples/briefs.md

It also moves

Every gallery piece is also a short animation, rendered from the same HTML file as its still. The skill asks up front whether the graphic should move, storyboards the build (the scene is already on stage, the data arrives in order, the hero lands last), and choreographs it in the design language's own motion character: the blueprint rocket is drafted line by line, the honeybee poster arrives as screen-print ink passes, the theatre runs its lighting cues, and the Mars vista pulls layer by layer off the screen. A bundled script scrubs the page's CSS animations frame by frame in headless Chromium and assembles the MP4 and GIF with ffmpeg, so every render is deterministic and the layout checks still hold on the finished frame.

The signup funnel, animated

The design languages

Each style file is a complete spec the agent can execute as written: exact hexes, font pairings, geometry, signature devices, do's and don'ts. Every chart palette passes a six-check color-blind-safety validation, including the dark ones.

Scene-native (the defaults)
blueprint cyanotype drafting sheet: dimension arrows, hatch fills, stamped title block
dark-glass luminous data on deep space: aurora fields, glass panels, disciplined glow
naturalist-plate 19th-century field-guide engraving: figure systems, watercolor tints, foxing
isometric-world miniature floating dioramas: data as architecture, exact 2:1 projection
retro-print mid-century poster: four inks, misregistration, film grain, arc text
editorial magazine feature: Fraunces at huge sizes, drop caps, charticles
hand-drawn marker sketchbook: wobble-filtered linework, washi tape, doodle arrows
park-poster WPA screen-print vista: layered flat planes, title band, a tiny figure for scale
cutaway DK-style cross-section: sliced machines, numbered callouts, detail lenses, tiny people
High slop-risk (explicit request only)
swiss · corporate-clean · neo-brutalist flat by construction; the skill only uses them when asked, and forces scene-craft into them

Install

Claude Code

/plugin marketplace add OrRon/EpicInfographics
/plugin install epic-infographics@epic-infographics

Updates: /plugin → Marketplaces → epic-infographics → Enable auto-update.

Codex

codex plugin marketplace add OrRon/EpicInfographics
codex plugin add epic-infographics@epic-infographics

Factory Droid

droid plugin marketplace add https://github.com/OrRon/EpicInfographics
droid plugin install epic-infographics@epic-infographics --scope user

Pi

pi install https://github.com/OrRon/EpicInfographics

Manual install (any agent that reads skill directories)

git clone https://github.com/OrRon/EpicInfographics.git
# user-level:
cp -r EpicInfographics/skills/epic-infographics ~/.claude/skills/
# or project-level:
cp -r EpicInfographics/skills/epic-infographics your-project/.claude/skills/

One-time render setup, run inside the installed skill directory. If you skip it, the agent runs it itself on the first render:

npm install && npx playwright install chromium

The renderer needs a real browser engine because the graphics are HTML/CSS; that's what buys real text wrapping, web fonts, backdrop blur and blend modes. Playwright drives headless Chromium, waits for fonts before screenshotting, and renders at 2x for retina-crisp PNGs. This is render-side only, the HTML sources open in any browser.

Quickstart

Then just talk to your agent:

make me an infographic about our Q3 numbers, dark and dramatic, 16:9

turn this data into a poster for the office printer  [paste a table]

a fun square social graphic about how sourdough works, hand-drawn style

The agent first pins down who the graphic is for, what it needs to do, and whether it should also move, gathers the data, then pitches you two or three story angles as a multiple-choice question. Once you pick one, it selects a visual metaphor that can carry real data, chooses a canvas and a design language, composes the scene, builds it, renders it, and reviews its own PNG against the checklist before handing it over. There are usually one or two self-correction loops you never see.

How it holds quality

Architecture

skills/epic-infographics/
  SKILL.md                      entry point: workflow + hard rules (kept short)
  references/
    composition.md              rule zero + six named composition patterns
    illustration-and-texture.md metaphor-first method, grain/halftone/misregistration
    data-vocabulary.md          ~25 data forms, chosen by the question the data answers
    charts.md                   inline-SVG recipes with the math written out
    motion.md                   animation as staging: build order, easing, recipes
    design-languages/           one complete spec per style (+ _template.md)
  templates/skeleton.html       canvas boilerplate
  scripts/check.mjs             preflight gate: collisions, clipping, sizes, hero
  scripts/render.mjs            HTML -> PNG · 6 presets · font-safe · retina
  scripts/animate.mjs           HTML -> MP4/GIF · scrubbed CSS keyframes · ffmpeg
examples/                       brief + HTML + PNG for every gallery image
.claude-plugin/ .codex-plugin/  plugin + marketplace manifests
.factory-plugin/ .agents/         (Claude Code · Codex · Factory Droid · Pi)
scripts/validate.mjs            CI gate: manifests in sync, examples complete
.github/workflows/ci.yml        validator + headless render smoke test per PR

The skill is built around progressive disclosure: for any one graphic the agent reads SKILL.md, one style file, and only the references the task needs.

Contributing

The most valuable thing you can add is a new design language. Copy _template.md, fill in every section, validate your chart palette for color-blind safety (don't eyeball it), and include one rendered example produced through the skill. PRs that add a style without a rendered example won't be merged, because the gallery is the test suite. The full checklist and the local validation commands are in CONTRIBUTING.md.

License

MIT. Do what you like with it.

EpicInfographics (OrRon/EpicInfographics)

Searching Database…

442 ·GitHub
EpicInfographics
Что это?Открытый skill, который учит ИИ-агентов для кодинга создавать инфографику студийного качества вместо типового «ИИ-мусорного» вида, доводя бриф от арифметики до отрисованного PNG и необязательной анимации.
Это отдельное приложение или что-то, что я добавляю в своего ИИ-агента?Это папка skill — инструкции, спецификации дизайн-языков и скрипты, — которую агент вроде Claude Code, Codex, Factory, Droid или Pi сам загружает и выполняет; отдельного GUI-приложения нет, вы просто общаетесь со своим агентом.
Нужно ли что-то ещё, кроме самого агента?Для отрисовки нужен настоящий браузерный движок — Playwright управляет headless Chromium, чтобы снимать HTML/CSS-графику в масштабе 2x, а приложенный скрипт использует ffmpeg для анимаций MP4/GIF; если пропустить разовую настройку отрисовки, агент сам запустит её при первом рендере.
Придумывает ли skill данные для диаграмм?Нет — цифры должны быть предоставлены или найдены, а любые иллюстративные значения-заглушки явно помечаются как таковые в футере; preflight-скрипт также блокирует отрисовку, если текст пересекается, обрезается или становится мельче читаемого размера.
Какие дизайн-языки входят в комплект?Всего двенадцать стилей: девять дефолтных «сценовых» (blueprint, dark-glass, naturalist-plate, isometric-world, retro-print, editorial, hand-drawn, park-poster, cutaway) плюс три плоских стиля с высоким риском «ИИ-мусора» (swiss, corporate-clean, neo-brutalist), которые применяются только по явному запросу.
Можно ли анимировать инфографику?Да — у каждой работы из галереи есть соответствующая анимация, отрисованная из того же HTML-файла; skill создаёт раскадровку сборки и прогоняет CSS-анимации покадрово в headless Chromium, прежде чем собирать MP4/GIF с помощью ffmpeg.
Как он избегает типового вида, созданного ИИ?Каждый дизайн-язык заставляет данные воплощаться в «сценовую» иллюстрацию (чашка, наполненная до нужного уровня, ракета со штриховкой), а не в плоские сетки карточек, и каждый рендер снимается скриншотом и проверяется по жёсткому чек-листу против «ИИ-мусора» перед выдачей.
Как добавить новый дизайн-язык?Скопируйте template.md, заполните каждый раздел, проверьте палитру диаграмм на безопасность для дальтоников и пришлите один отрисованный пример, созданный через skill, — PR без отрисованного примера не мержатся.
What are similar projects?huashu-art-motion, guizang-product-video-skill, lieflat-charts, livecanvas, oil-ui, logo-design-skill, live-panel-skill, onetake
Which topics is it in?design-tools, playwright, ffmpeg, data-visualization, design, skill, skills, animation, html, claude, agent-skills, ai-agent
Creator
OrRon
Size
79.2 MB
Stars
442
Updated
CommitAug 27
Age
1mo
Commits · 90 Days