diagram-design is an agent skill that draws editorial diagrams as one self-contained HTML + SVG file, matching your brand across 45 diagram types. It works with AI coding agent hosts such as Claude Code and Codex, and the output opens directly in a browser with no build step or JavaScript.
Project overview
It targets a concrete pain point: generic AI-generated diagrams look bad and do not match a site's brand, and this skill addresses it by pulling palette and font stack from a website URL and mapping them to semantic token roles applied to every subsequent diagram.
Project type
Prompt Engineering
Use cases
Documents & Office
Deployment
Refer to project documentation
License
MIT
Best for
Creators and developers who use an AI coding agent host and need editorial diagrams matching their site's brand
Key capabilities
Agent produces one self-contained HTML file with inline SVG covering 45 diagram types, openable directly in a browser with no build step or JavaScript
Pulls palette and font stack from a user's website URL, maps them to semantic token roles, and applies them to every subsequent diagram
Limitations and risks
The result has no text to diff and no canvas to drag a box on; there is no editable source format
Output quality depends on the model you run it with, and the same prompt can lay out differently twice
Requires a host that reads Agent Skills (e.g. Claude Code, Cursor, Codex)
Diagrams load Google Fonts by default; system fonts avoid the network request
Getting started
Run "npx skills add cathrynlavery/diagram-design", ask your agent for a diagram (e.g. "Make me an architecture diagram of my app"), then open the generated .html file in a browser. No coding is required
Evidence and sources
GitHub project description: Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Qoder, and Pi. 45 diagram types. Self-contained HTML + SVG.
README: I'd either fight with Figma for 30 minutes or skip the diagram.
README: Open any of them directly in a browser. There is no build step, JavaScript, or external image dependency.
README: the skill pulls your brand from your website and applies it across every diagram.
README: You: "onboard diagram-design to https://yoursite.com" Agent: → fetches the homepage → extracts the dominant palette + font stack