illustration-draw
illustration-draw
Produce a visual that reads as designed: one takeaway, specific elements,
one highlighter, in the active design system. Free-hand SVG from a language model collides once
it has more than a handful of elements, and the popular "no Mermaid slop"
skills turn out to have the model hand-place every coordinate — so here the
model does not write geometry. It writes a JSON spec and a compiler
places it: build_svg.py puts cards (flow, stack, hub, grid,
compare, timeline, matrix) on a fixed grid with capacity checks;
arch_svg.py lets Graphviz lay out an architecture diagram (groups,
cards with outline icons, pill tags, sticky notes, orthogonal connectors,
numbered step badges plus a legend) and paints it. Both read the design
system (--design-system, $DIAGRAM_DESIGN_SYSTEM, ./design-system.md,
else the built-in Studio look; see diagram-design-system) and tag every
element with data-step, so diagram-animate can turn the result into a GIF.
The render is still inspected, because fonts vary by machine. This skill runs
inside one fixed budget.