ljg-infograph: The Infographic Skill That Lets Claude Decide the Layout

A minimal Claude Code skill that turns raw notes into polished PNG infographics by making the model choose structure, theme, and hierarchy before the browser renders anything.

8 min read • View on GitHub • More from lijigang

A stack of rough Markdown notes and bullet points is fed into a narrow mechanical press and comes out as a clean infographic board with balanced panels. It illustrates how the tool turns unstructured text into a finished visual layout before the screenshot step. — The surprise is not that the repo renders images. It is that it asks Claude to decide what deserves to be a module before the browser ever sees the page.

Key Takeaways

ljg-infograph makes the LLM choose the information architecture first, so layout becomes a judgment call instead of a manual design chore.
The repo stays small by splitting the job into three clean layers: prompt rules, HTML and CSS composition, and Playwright capture.
Its template is opinionated enough to prevent awkward infographics, including the orphan-module fix that stretches a lonely final block across the grid.
The project wins by collapsing text, structure, theme, and export into one terminal-native workflow rather than chasing feature breadth.

The Model Is the Designer

Most infographic tools start with layout. ljg-infograph starts with judgment. It asks Claude to read messy notes, classify the content, and decide which pieces deserve a stat, a comparison, a highlight, or a full-width conclusion before any browser render happens.

That shift is the real idea. The hard part is not filling boxes. It is deciding what the boxes should be, and this repo treats that decision as a first-class workflow step.

我做了一个极简的工具 ljg-infograph，灵感来自 AntV Infographic。它只做一件事：把你Markdown的大纲，变成最简单的信息图。适合我不爱排版的懒人。

Li Jigang (lijigang), Creator · X post by @lijigang01

That quote is the project in one sentence. The ambition is narrow on purpose, which is why the system feels coherent. It is not trying to become a general design suite. It is trying to make one high-friction task feel immediate.

Inside the Skill: Prompt, Template, Screenshot

The repository keeps the machinery small by separating it into three jobs. SKILL.md tells Claude how to parse the input into a title, subtitle, source line, and a handful of information modules. infograph_template.html supplies the visual grammar, and capture.js uses Playwright to freeze the browser view into a PNG.

The repo is really three layers: instruction, composition, and capture. The browser is the last mile, not the place where the thinking begins.

That separation matters because it keeps the tool legible. The model is not improvising inside a freeform canvas. It is choosing from a constrained visual grammar, then handing the result to a template that already knows how to behave.

Why the Layout Rules Matter

The cleverness shows up in the rules. Module types map to specific visual treatments, themes shift through CSS variables, and the grid knows when a final lonely module should stretch across the row instead of leaving an awkward hole. That is not decoration. It is a guardrail against bad composition.

A close-up of a two-column infographic grid where one final tile expands across the full width instead of leaving an empty gap. It explains the template rule that fixes an awkward orphan module and keeps the layout balanced. — Orphan alignment is a small rule with an outsized effect. If the last module would leave a dead space, the template lets it claim the whole row and finish cleanly.

This is where the repo stops feeling like a prompt demo and starts feeling like a design system. It encodes editorial judgment into the template itself, so the output can absorb messy inputs without collapsing into visual noise.

What It Replaces, and What It Doesn't

The comparison is useful because it shows the niche clearly. ljg-infograph is not chasing the depth of a large declarative graphics framework, and it is not trying to do diagram syntax better than a diagramming tool. It is trying to make a simple outline become a presentable infographic with almost no ceremony.

Tool	Best at	Setup	Visual control	Trade-off
ljg-infograph	Fast text to infographic generation	Very low	Moderate, template-driven	Simplicity over breadth
AntV Infographic	Declarative infographic systems	Medium	High	More power, more surface area
Mermaid	Diagrams and flowcharts	Low	Moderate	Structural clarity over editorial layouts
Manual design tools	Custom marketing visuals	Medium to high	High	Maximum control, no automation

That is the correct trade. The repo is valuable because it collapses the distance between text, structure, theme, and export. Once the model has made the editorial choices, the rest of the pipeline is almost mundane, which is exactly what makes it work.

A Minimal Tool With a Big Idea

The bigger lesson is not about infographics. It is about what happens when a skill owns a narrow creative workflow end to end. In that world, the LLM is not a chat interface stuck above a design tool. It is the part that decides what deserves emphasis, what should be grouped, and what should be allowed to stretch.

That makes ljg-infograph feel less like a novelty and more like a pattern. Small repos can now act like opinionated editors, not just generators. The interesting question is no longer whether the model can write the copy. It is whether it can decide the shape of the page.