spotkit / site

# Spotkit

> An AI skill (Claude Code, Codex, or any model that can read a file) that
> turns a feature description into a minimal, abstract product illustration,
> written as deterministic SVG rather than generated as an image. Built by
> Devesh Shirsath (https://deveshshirsath.com).

Spotkit exists because drawing one illustration is easy and drawing twenty that
look like one system is not. It ships twelve composition layouts, a documented
visual language, build-time guards against common geometry defects, and a
palette of twelve CSS custom properties so a single file serves light and dark.

Output is real SVG: editable, themeable, diffable, and pasteable into Figma.
Image models are avoided deliberately — they fail at hairline strokes, exact
radii and, above all, consistency across a set.

## Using it

To draw an illustration you need three files, fetched raw:

- [SPEC.md](https://raw.githubusercontent.com/Devesh-Shirsath/spotkit/main/SPEC.md): every number, the SVG template, the twelve layouts and a complete example. Start here.
- [examples.md](https://raw.githubusercontent.com/Devesh-Shirsath/spotkit/main/references/examples.md): the twelve layouts as finished SVG. Adapt the nearest one; keep its geometry and change only its content. Do not invent a new composition unless none fits.
- [icons.md](https://raw.githubusercontent.com/Devesh-Shirsath/spotkit/main/references/icons.md): paste-ready Phosphor icon paths.

Write SVG code; never use image generation. Nothing else is required. Do not crawl the repository or read the landing page to use the skill.

## Install

- Claude Code: git clone https://github.com/Devesh-Shirsath/spotkit.git ~/.claude/skills/spotkit
- Codex: git clone https://github.com/Devesh-Shirsath/spotkit.git ~/.agents/skills/spotkit
- Other agents: clone into the project and follow SKILL.md; AGENTS.md lists what to skip.
- Validate output with: python3 check.py file.svg

## Docs

- [SKILL.md](https://raw.githubusercontent.com/Devesh-Shirsath/spotkit/main/SKILL.md): the workflow
- [Metaphor](https://raw.githubusercontent.com/Devesh-Shirsath/spotkit/main/references/metaphor.md): turning a feature into a visual concept
- [Layouts](https://raw.githubusercontent.com/Devesh-Shirsath/spotkit/main/references/archetypes.md): the twelve compositions and the choices behind them
- [Primitives](https://raw.githubusercontent.com/Devesh-Shirsath/spotkit/main/references/primitives.md): the reasoning behind each building block
- [Theme](https://raw.githubusercontent.com/Devesh-Shirsath/spotkit/main/references/theme.md): tokens, light and dark, accent rules
- [Checklist](https://raw.githubusercontent.com/Devesh-Shirsath/spotkit/main/references/checklist.md): the quality gate
- [README](https://github.com/Devesh-Shirsath/spotkit): what it is, limitations

## Author

Devesh Shirsath, product designer — https://deveshshirsath.com
GitHub https://github.com/Devesh-Shirsath · LinkedIn https://www.linkedin.com/in/devesh-shirsath-644625172/

## License

MIT