beautiful-diagrams
Installation
SKILL.md
Beautiful Diagrams
Generate professional article diagrams using HTML + Playwright screenshots.
Style: bold white carousel. White background, thick black borders (3-4px), chunky rounded cards with 6px drop shadows, terracotta (#E27D5B) icon tiles, Inter 900 typography at large sizes. Designed to be readable in-feed on LinkedIn / Substack, not a reader-hostile monitoring UI.
Design tokens:
| Token | Value | Use |
|---|---|---|
BG_WHITE |
#FFFFFF |
Canvas + card fill |
INK |
#0A0A0A |
Text, borders, arrows |
INK_SOFT |
#2A2A2A |
Secondary text |
INK_MUTED |
#5A5A5A |
Hints, tertiary text |
ACCENT |
#E27D5B |
Icon tiles, connector chips, badges |
ACCENT_SOFT |
#F3D4C6 |
Note boxes |
Typography: Inter (400–900 weights), loaded from Google Fonts. Headings use weight 900 at 24-28px. Body text is 14-18px. Connector labels and badges are uppercase bold at 11-14px on accent pills. Nothing smaller than 13px.