editorial-svg

Ask a model for an illustration to sit on top of an article and you get the noun from the headline. A robot for a piece about agents, a padlock for one about security, a lightbulb for one about ideas. The drawing itself is usually fine. The problem is that it is a picture of the topic, and the article was not about the topic — it was about something that happens inside it.

editorial-svg is a Claude Code skill that tries to fix the step before the drawing. Most of what it contains is not code and not style guidance; it is a procedure for finding the abstraction, and a refusal to start drawing until one exists.

Draw the mechanism, not the subject

The skill carries a table it makes you argue against. An article about agents losing context is not four robots at a laptop; it is a handoff chain that visibly weakens at each hop. Rate limiting is not a form with an error toast; it is a crowd meeting a funnel with one mark through. Draft previews are not a screenshot of the CMS; they are a stack of versions with one being looked at. The test it applies is blunt: could this same image sit on a different article in the same field? If yes, it is illustrating the topic, and it will read as stock art.

A vocabulary of verbs, not shapes

Once the abstraction is settled, the drawing is composed from a small library of composition verbs — blob, gesture, arrow, node, panel, hand, cursor, cluster — rather than from raw paths. They take intent, not coordinates, and handle the hand-drawn quality themselves. Naming them after what they do rather than what they look like is what keeps a run of thumbnails inside one visual system instead of drifting apart.

export default function build(): string {
  const s = createIllustration({ seed: 4821, palette: onField('sage') })

  s.blob({ x: 508, y: 512, width: 760, height: 700 })   // the carrier
  s.arrow({ from: [230, 348], to: [434, 452], bow: -46 })
  s.dot(230, 348, { radius: 46, fill: s.palette.accent })

  return s.toSVG()
}

The budget is the design

Seven objects. Four colours — one field, one paper, one ink, one accent. Three stroke weights. No text, because the headline is already sitting next to the image. And it must survive at 160 by 160 pixels, which is the constraint that does most of the work: anything an infographic would do dies at that size. If a piece needs more than the budget allows, the skill treats that as evidence the concept is not resolved rather than as a reason to spend more marks.

Deterministic, and yours afterwards

An illustration is a committed TypeScript file that returns SVG. A seed fixes every random choice, so the same source always renders byte-identical output — which means the artwork diffs like code and regenerating an archive never reshuffles it. For a whole blog, the field colour and seed can be derived from the post slug, so a set of thumbnails comes out varied but stable.

The library vendors into the consuming repository the way a shadcn component does rather than installing as a dependency: about 35kb of TypeScript with no build step, run directly by Node native type stripping. That matters more than it sounds like it should. It means a committed illustration still builds for a collaborator, or in CI, whether or not the skill is installed anywhere.

What it is not

It is a flat vector system, so it is the wrong tool wherever the visual language actually depends on texture — pencil grain, dry brush, ink bleed, dense hatching. Faking those with SVG filters fights everything else about it. It is also unofficial, and not affiliated with Anthropic: the house style is built from the primitives, not copied from anyone’s assets.