name: spotkit description: Generate minimal, abstract, UI-inspired illustrations for software product features — as deterministic SVG. Use when asked for a feature illustration, product illustration, spot illustration, empty-state graphic, feature-card artwork, docs or developer-portal illustration, or a consistent illustration set/family for a product. Also use to turn a feature description or a product screenshot into an abstract UI illustration, to add a new illustration to an existing family, or to retheme an existing set.

Spotkit

Turn a feature description into a quiet, abstract illustration that looks like a product interface reduced to its most recognizable primitives.

The governing principle:

Abstract the interface, not the idea.

Someone should look at the result and think "I understand what this feature does" — not "that's a screenshot of the product."

Output format

Default to SVG. This style is pure geometry — hairline borders, exact radii, repeated placeholder bars, one stroke weight. Writing it directly gives exact, repeatable output and makes every illustration in a set provably identical in treatment. Image models fail at precisely these things, and fail hardest at consistency across a set.

Use references/image-prompt.md only when the user explicitly wants a prompt for an external image model.

Workflow

1. Interpret the feature. One sentence: what does it actually do? → references/metaphor.md
2. Choose the metaphor. What relationship is this feature about — grouping, connecting, gating, packaging, reviewing, sequencing?
3. Pick 2–5 primitives that carry that relationship. Not more.
4. Pick a layout — from the prompt, not from habit. → references/archetypes.md. Choose by meaning, then by how many elements the idea needs, then by what its neighbour already uses. Twelve are defined; the composition choices generate many more. Then choose the float separately. A full-width header card is one of eight treatments and is capped at two per twelve — it is the easiest choice and it will take over a set if you let it. Ask what the subject is: a hub gets raised, a column gets a chip at its head, a surface gets no float at all.
5. Compose the SVG. → references/primitives.md, tokens from references/theme.md.
6. Run the checklist. → references/checklist.md. Simplify what it flags.

If the concept is genuinely ambiguous, offer 2–3 conceptual directions before drawing — different metaphors, never different styling.

What is fixed and what is yours

The skill separates the method from the look.

Fixed — these hold for any illustration in this genre:

• Abstract the interface, not the idea
• Text-independence — it must read with every label removed
• One dominant visual idea per illustration
• ~20–40% of real UI fidelity
• Legible depth hierarchy, however it is achieved
• Whitespace as structure, not leftover space
• Restraint: few icons, few colors, one interaction cue
• Internal consistency across a set

Yours — set once per project, then inherited by the whole family:

elevation model · edge treatment · overhang · corner language · stroke weight · icon style · palette · accent · density

A coherent combination of those is a style spec. One ships today — soft shadow, fade-out edge, overhanging float, generous radii, hairline strokes, monoline icons, warm grayscale, optional single accent, sparse density — and it is what assets/ and examples/ implement. Additional directions are additive; nothing in the method changes when one is added.

Invariants of the shipped spec

• One base panel, sized to its content. Not a fixed box — a timeline gets a narrow frame, a table of rows a wide one. Its edge either fades (open bottom: there is more) or is contained (closed: this is all of it). Choose by meaning.
• Exactly one thing carries the shadow. Usually a floating element breaking past the panel's edges; sometimes a raised row or the middle card of a fan.
• The elevation goes on the record being acted on, not on a decorative circle above it. When a medallion sits over a prominent first row, the row floats and the medallion stays flat.
• Placeholder bars, never words, always short-over-long, never equal widths.
• A backdrop is optional and varied — none, a plate, an offset sheet, or a twin stack. The same plate behind every illustration is what makes a set look mechanical.
• One stroke width and one stroke colour, everywhere. Width 0.5, --il-line. Hierarchy comes from fills, opacity and elevation — never line weight. Separators are filled hairlines, not strokes.
• Equal top and bottom padding inside every card, bottom never zero. This fails silently more than anything else here — verify it by arithmetic.
• The panel sits above its backdrop, and no two sheets share a top edge.
• Nothing overlaps what it sits between. A glyph in a gap fits inside it with clearance; a rail is capped by its first node. build.py has guards (fits, rail, padded) that raise rather than ship these — use them.
• One icon family, one radius language, one shadow across the entire set.
• Every card carries a hairline, not just a shadow — at 160px there is no text to hold the hierarchy, so the surfaces have to, and a shadow alone does not separate white on near-white.
• The last content block sits inside the fade and half-dissolves. That half-visible row says "and more" without adding anything. Equally: nothing important may land below y=112, or it dissolves mid-content.
• Vary the layout, never the language. Monotony is the failure mode of this style — a set where every piece is "header card, then rows" reads as one image twelve times. See archetypes.md.

Two things that will bite you

• Icons are Phosphor regular, filled, on a 256 grid. Set fill, never stroke. Bold reads heavy against 1-unit structural strokes.
• CSS custom properties do not cross into <img> or <object>. An SVG loaded that way shows fallback colors forever and will not follow dark mode. Inline the markup to theme it — and suffix every id when you do, or masks and filters cross-apply between illustrations.

Reference files

Read the one you need; don't load them all.

Delivering

The minimum useful answer is a short concept note plus the SVG:

Feature interpretation — one line. Metaphor — one line. Primitives — the 2–5 used. The SVG.

Don't pad it with explanation the user didn't ask for.

Assets

• assets/illustration.css — token definitions, light and dark. Drop into a site.
• examples/ — twelve exemplars, one per layout. Open examples/gallery.html for the contact sheet in both themes.
• icons.py — embedded Phosphor geometry (regular is what the system uses; bold is kept for anyone who wants a heavier variant).
• build.py — the generator that produced them. Every constant in one place; change one and the whole family moves together. Worth copying for any set larger than about eight.

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.