39 visual types. Self-contained HTML + SVG. No shadows. No Mermaid slop. A design system for your coding agent that outputs editorial-quality diagrams on the first try.
From architecture to Wardley maps. All following the same opinionated design system.
Every diagram follows the same opinionated system. No exceptions.
Every value — font sizes, padding, node dimensions, gaps, coordinates — divisible by 4. Non-negotiable.
Coral accent on 1–2 focal nodes. Everything else ink, muted, or soft. Coral on 5 nodes erases the signal.
Instrument Serif for titles. Geist sans for names. Geist Mono for technical content. Never JetBrains Mono.
Shadows are out. Borders are in. Rounded corners max 6–10px. No cyan glow. No generic rounded boxes.
No build step. No external images. Renders in any browser. Motion optional, static by default.
role="img". aria-labelledby. Prefixed IDs. Reduced motion support. Decorative SVG hidden from AT.
One skill. One price. MIT-licensed — fork it if you want.
Download, drop in your agent's skills folder, restart. Done.
git clone https://github.com/lifecycleResearch/diagram-design-skill.git
cd diagram-design-skill && ./install.sh
# Restart Hermes, ask for a diagram