Spotkit

A Claude Code skill that turns a feature description into a clean, abstract product illustration — as real SVG, not a picture of one.

Twelve features, twelve layouts, one set of rules —
and the same twelve files in both themes, from twelve CSS variables.

---

What it does

You say:

Create an illustration for API version management.

You get a concept, a metaphor, and a production-ready SVG that looks like it belongs to everything else you've made.

These aren't marketing illustrations. They're abstractions of an **interface** — what a feature looks like if you keep its most recognisable parts and throw away the other 90%.

**Abstract the interface, not the idea.**

A good one makes someone think *"I understand what this feature does."* Never *"that's a screenshot of the product."*

Install

git clone https://github.com/Devesh-Shirsath/spotkit.git \
  ~/.claude/skills/spotkit

Restart Claude Code and just ask. The skill picks itself up whenever you mention feature illustrations, spot illustrations, empty states, or an illustration set for a product.

**No dependencies.** Python 3 only, and only if you want to regenerate.

Try it without installing

Open [`examples/gallery.html`](examples/gallery.html) in a browser — twelve illustrations, light and dark, from the same twelve files.

Why SVG and not an image model

This style is pure geometry: hairline strokes, exact radii, repeated placeholder bars, one icon family. Diffusion models are weak at all of it