I’ve wanted more illustrations on this site for a while. Not stock graphics or generic icons, but diagrams with a specific feel: minimal, monochrome, the kind of vintage technical drawings you’d find in a scientific paper or an old tool catalog. Hatching patterns instead of gradients. No color, no fluff. Something that could sit quietly alongside text without demanding attention.
Drawing each one by hand would work, but it’s slow and inconsistent. I’d inevitably drift from the original vision. So I decided to teach Claude how to make them instead.
Step 1: Draw reference examples
I started in Figma, sketching a few illustrations that demonstrated the stylistic conventions I wanted. These weren’t specific diagrams for specific posts. They were pure style references: shapes with hatching fills, simple flowcharts, layered rectangles.
A few key qualities I focused on: minimal line work, monochrome palette that adapts to dark mode, tight compositions without excess whitespace, and fill patterns that feel like they could be printed on a transparency.
Step 2: Export and prompt
I exported the Figma drawings as SVGs and fed them to Claude as concrete references. Then I prompted it to help me create a skill document, a structured file that captures how to reproduce this style consistently.
The examples did most of the heavy lifting. Instead of trying to describe “vintage technical diagram aesthetic” in words, I could point to the actual thing.
Step 3: Document the skill
The skill file covers three areas: aesthetic principles (what it should feel like), functional requirements (how it should behave), and usage context (where it lives).
For aesthetics, I documented the vintage scientific inspiration, the preference for hatching and stippling over gradients, and the importance of restraint. For function, I specified that all colors use currentColor so illustrations automatically adapt to light and dark modes. ViewBoxes should be cropped tight. Accessibility attributes are required. For context, I noted that these appear inline in blog posts and case studies, sized for the content column.
Here’s what the output looks like: