← Back to projects

post-to-visual

An open-source pipeline and toolkit that turns any article into a single-file, illustrated, easy-read HTML page — works with zero API keys

PythonVanilla JSSVGClaude Code

The Problem

A good article is often a wall of text. Making it genuinely readable — sections, diagrams, a glossary, light and dark themes — is hours of fiddly HTML and SVG work that’s easy to get subtly wrong: broken anchors, social previews that don’t render, diagrams that vanish in dark mode.

The Pipeline

post-to-visual turns any article into one self-contained, illustrated HTML page (圖文好讀版). It’s a pipeline and a toolkit, not a template: read, break into sections, pick the right visual for each, assemble, verify. An AI agent — or you — makes the judgment calls; the toolkit supplies the tested parts: eight light/dark-safe SVG diagram recipes, a palette generator that guarantees readable contrast in both themes, and optional AI illustrations.

The Verifier

The piece I’m proudest of is the dependency-free checker. It catches the bugs hand-review misses: dead in-page anchors, Open Graph URLs that aren’t absolute (which blank out the social preview), white-on-white text in dark mode, and JPEG bytes saved as a .png (which silently breaks link previews on some platforms). It gives an agent a hard pass/fail to self-check against, instead of guessing whether the page is right.

Results

A single command turns a URL into a shareable page — and it works with zero API keys, because the SVG-only mode is first-class, not a fallback. There’s a standalone CLI for people not using Claude Code, too. Open source, MIT.

View the repo on GitHub