Teaching AI agents to draw architecture diagrams in HTML

What it does

effective-html is a collection of agent “skills” — essentially curated prompt templates and bundled reference files — that instruct LLMs to generate self-contained HTML files. The three flavors cover general pages (html), full-screen architecture diagrams (html-diagram), and planning documents (html-plan), all styled after the “effective HTML” visual corpus by Thariq Shihipar. It is largely prompt infrastructure: the value is in packaging the reference examples so the model has concrete patterns to imitate rather than inventing layouts from scratch.

The interesting bit

Instead of asking an agent to “make a diagram” and hoping for the best, you install these as plugins in Claude Code or Codex, giving the model a narrow, well-lit path toward specific visual outputs. The author notes that the eye-catching demo was made by Fable 5, with smaller models intended to distill from those examples later — an admission that the current gold standard still requires a heavy hitter.

Key highlights

• Three focused skills: html, html-diagram, and html-plan, each with a dedicated SKILL.md and local reference corpus.
• Ships as both an npx skills installable pack and a native plugin for Claude Code and OpenAI Codex.
• References the html-effectiveness example set by Thariq Shihipar, bundled locally per skill so prompts stay self-contained.
• Optional but not required: companion tools Plannotator (render/annotate) and Tot (instant share links) for the output.
• The html-diagram skill targets SVG-first, full-screen diagrams with minimal prose.

Caveats

• The README admits the showcased demo artifacts were generated by Fable 5; it is unclear how well smaller models replicate that fidelity without further distillation.

Verdict

Grab this if you want your AI agent to emit visual, shareable HTML artifacts instead of walls of markdown. Skip it if you are looking for a standalone diagramming renderer — this is prompt infrastructure, not a drawing engine.