Devesh ShirsathProduct DesignerDevesh Shirsath

Teaching Claude to Draw

Helping product teams get consistent illustrations from one sentence, placed straight into Figma.

  • APIwiz

    Company

  • 2 min

    idea to illustration

  • 94

    GitHub stars

  • 12

    hand-drawn layouts

Visit Spotkit
  • Devesh presenting Spotkit on stage
  • The audience watching the Spotkit talk

Project Overview

Objective. Cut the design time spent on empty states and spot illustrations, without losing a consistent style.

Industry
Design tooling · AI
Platform
Claude + Figma (MCP)
Tools
ClaudeFigmaMCP
Team
  • Devesh (me)Design & Build

What I delivered

  • Drew a visual vocabulary of 12 layouts by hand.
  • Built the Spotkit skill (SKILL.md) and open sourced it on GitHub.
  • Shipped a website, and gave a talk to the design community.
GitHub's Starstruck achievement on the Devesh-Shirsath profile: created a repository that has many stars
Spotkit earned me GitHub's Starstruck badge on Sep 9.

Designers spend more time than they should on small illustrations. Empty states, spot illustrations, micro illustrations, icons. It gets worse in enterprise products, where the use cases are very specific and niche. It takes a lot of time, and often a few people, just to come up with something that looks clean, simple and consistent.

So I thought, why not fix that?

The idea was to put the whole thing on autopilot. You describe your feature to Claude briefly, what it has and what it does, and Claude puts the illustration right into your Figma file with all the colour tokens attached. Light mode, dark mode, or however many themes your design system supports.

  • teams illustration, light theme
  • roles illustration, light theme
  • connectors illustration, light theme
  • docs illustration, light theme
  • notifications illustration, light theme
  • gateway illustration, light theme
  • teams illustration, dark theme
  • roles illustration, dark theme
  • connectors illustration, dark theme
  • docs illustration, dark theme
  • notifications illustration, dark theme
  • gateway illustration, dark theme

Six Spotkit illustrations in light and dark. Same files, different tokens.

To get there, I started by drawing. I took every variation and idea I had for layout and styling and drew them by hand in Figma. Then I gave all of it to Claude and asked it to reverse engineer what I had made into a visual vocabulary, and to write a standing instruction for using it.

That visual vocabulary is the skill. It is one file, SKILL.md, and it is the reason every illustration looks like it belongs with the others.

Now my Figma is connected to Claude through MCP. Whenever I need an illustration, I explain the feature, and in about two minutes there is a clean, minimal, intuitive empty state sitting in the file with the tokens already attached.

It ended up saving the design team a lot of time, and it raised the overall standard of the APIwiz product.

I also open sourced it. Indie developers and small startups who are vibe coding their products needed empty states and a starting point for their illustrations too, so they started using it in their own products. It has 94 stars on GitHub, and its own website.

getspotkit.vercel.app

I got to present Spotkit to the design community as well, and the response was good. People asked how they could use it in their own tools, and how to create new styles based on the existing one. They also asked for a duotone theme, more icon sets and more styling options, which I ended up adding to the skill.

That is the story of Spotkit.