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 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, and weakest at the
thing that matters most — twenty illustrations that look like one family.

Claude writes the SVG directly instead. The output is exact, themeable, editable,
diffable, and identical in treatment across a whole set. A prompt-based fallback
is included if you want it anyway.

How it works

your feature description
      ↓
what does it actually do?
      ↓
what relationship is it about?      grouping · connecting · gating
      ↓                             packaging · reviewing · sequencing
2–5 UI primitives that carry it
      ↓
a layout — chosen from the prompt, not from habit
      ↓
SVG, themed by CSS custom properties
      ↓
a quality checklist

Twelve layouts

Picked by meaning and by how many elements the idea needs — never by rotation.

They come from independent choices — where the floating element sits, what it is,
how content is arranged, how the panel is framed — so the real space is much
larger than twelve.

Monotony is the failure mode of this style. A set where every piece is
"header card, then rows" reads as one image twelve times, however clean each one
is. The skill budgets layout reuse, caps full-width headers at two per twelve,
and checks each illustration against its neighbours.

Theming

Twelve CSS custom properties. One file serves light and dark — never ship two.

:root {
  --il-canvas:  #EDEAE6;   --il-ghost:   #EAE7E2;   --il-panel: #F7F5F2;
  --il-surface: #FFFFFF;   --il-line:    #B9B1A4;   /* every stroke, width 0.5 */
  --il-stroke:  #35322D;   --il-fill:    #DCD6CE;   --il-accent: #3E9077;
}

Change three values, rerun build.py, the whole set rethemes.

Inline the SVG to theme it. CSS custom properties don't cross into
<img src="…"> or <object> — those show the fallback palette forever and
never follow dark mode. If you must use <img>, use the pre-flattened files in
examples/flat/.

If several illustrations share a page, suffix every id in each
(fade-teams → fade-teams-1) or their masks and filters cross-apply.

Using these in Figma

Copy the contents of any file in examples/flat/light/
and paste onto a Figma canvas — you get editable vector layers. Use the flat
files, not the themed ones; Figma doesn't run CSS either, so a themed file pastes
as black shapes.

Figma discards SVG filters on import, so the drop shadow won't come across —
re-apply it as a Figma effect on the one floating layer.

Regenerate

python3 build.py       # rewrites examples/ and the gallery
python3 flatten.py     # rewrites the flat exports and contact sheets

Every constant lives in the GEO dict at the top of build.py. Change one and
all twelve move together — which is the operation you'll want most, and the one
that's most error-prone by hand.

What's in the box

SKILL.md                  entry point and workflow
references/
  metaphor.md             feature → concept, ~24 worked SaaS examples
  archetypes.md           the twelve layouts and the choices behind them
  primitives.md           verified geometry + copy-paste SVG library
  theme.md                tokens, light/dark, accent rules
  scaling.md              96px icon through 720px hero
  screenshots.md          abstracting a real product screenshot
  sets.md                 producing and extending a family
  checklist.md            pre-delivery quality gate
  image-prompt.md         fallback path for image models
assets/illustration.css   drop-in token definitions
examples/                 twelve illustrations, flat exports, contact sheet
build.py · flatten.py     generators — every constant in one place
icons.py                  embedded Phosphor geometry

Known limitations

Worth stating rather than having you discover:

• The metaphor test isn't enforced. The checklist says cover the icon — can
  a stranger still describe the relationship? Nothing forces a run to apply it.
  In testing, two prompts in ten produced illustrations that lean on their icon
  to be legible.
• One style preset. The dial system — elevation, edge treatment, overhang,
  corner language, stroke weight, icon style, palette, density — is documented,
  but only one combination ships. A second is additive; nothing in the method
  changes.
• The 0.5 stroke has a floor. Below roughly 96px display width it drops under
  half a device pixel and antialiases away. At those sizes, drop the hairlines
  and let fills carry the composition.
• Figma import loses shadows. See above.

Who it's for

Product and UX designers, frontend developers, SaaS founders, design system and
docs teams — anyone who needs feature illustrations, empty-state graphics or a
coherent illustration family for a whole product, and doesn't want to draw twenty
of them by hand.

Author

Spotkit was built by Devesh Shirsath, a product
designer working on developer tools and API documentation.

Portfolio ·
LinkedIn ·
GitHub ·
Instagram

Credits

Icons are Phosphor (MIT), regular weight — filled
paths on a 256 grid, so fill them rather than stroking.

The shipped style was derived by measuring a real production illustration family,
rebuilding it from first principles, and verifying by rendering and comparison.
Aesthetic direction was informed by contemporary bento-grid layouts. Your own
direction can differ on every visual dial — the method is what transfers.

MIT licensed. Contributions welcome, especially new layouts and new style presets.