OrRon/EpicInfographics

What it solves

It eliminates the "AI-made" look of typical AI-generated infographics—which often rely on generic grids, stock templates, and flat minimalism—by teaching AI agents to design with professional studio-level principles. It ensures that data is visually integrated into a scene rather than just placed on a page, and that charts are mathematically accurate and color-blind safe.

How it works

The project provides a "skill" (a set of instructions and references) that AI agents follow to move from a brief to a final image. The process includes:

1. Scene-Based Design: Instead of a page, the agent creates a "place" (e.g., a blueprint, a naturalist's folio, or a dark theatre) where data lives inside the scene.
2. Data-Driven Geometry: Visuals are computed via arithmetic (e.g., a rocket's height corresponds to a specific percentage) rather than being eyeballed.
3. Technical Pipeline: The agent generates HTML/CSS, which is then rendered into high-resolution PNGs or MP4/GIF animations using headless Chromium (via Playwright) and ffmpeg.
4. Quality Gates: A mandatory render-review-fix loop uses a checklist to fail any design that looks like a dashboard template. A preflight script also checks for text collisions, clipping, and readability.

Who it’s for

Users of AI agents (such as Claude Code, Codex, Factory Droid, or Pi) who need high-quality, professional-grade infographics and data visualizations that avoid the generic aesthetic of standard AI outputs.

Highlights

• Diverse Design Languages: Includes specific specs for styles like blueprint, dark-glass, naturalist-plate, isometric-world, and retro-print.
• Deterministic Animation: Converts HTML/CSS animations into video by scrubbing frames in a browser, ensuring the final frame matches the approved still.
• Truthful Geometry: Enforces that bars start at zero and area scales accurately with value.
• Automated Validation: Includes color-blindness checkers and glyph geometry measurements to prevent layout errors.