An editorial diagram design system for AI coding agents
Diagram Design is a skill package for AI coding agents (Claude Code, Codex, Factory Droid, and Pi) that produces editorial-grade, self-contained HTML+SVG diagrams. It tackles the generic, cheap-looking output that agents usually generate by codifying a tight design system — one accent color, hairline borders, strict 4px geometry, no shadows, and three static variants across 38 diagram types. A 60-second onboarding flow pulls colors and fonts from your website into semantic tokens; import commands redraw draw.io or Mermaid sources with adjustable format, size, detail, and audience; accessibility checks (WCAG AA contrast, accessible SVG names) are enforced by default. For engineers and writers who want AI-generated diagrams that don't need manual cleanup.