Article Drawings
A Claude skill that reads an article and draws illustrations for it, in fine pen lines that draw themselves as you scroll. Every drawing in my articles was made this way.
- Type
- Claude skill
- Built with
- Claude Skills, JavaScript, Canvas
- Made for
- Articles, blog posts and essays
Try it
Install it with the steps in the README. Then call it from any chat.
/article-drawings Illustrate my latest blog post
The problem
My articles had no images. Stock photos wouldn't fit, and a generated picture next to a text is usually decoration. It looks fine and says nothing about the article.
This site already has a drawn style, but those drawings are traced from real pen drawings. An article about roadmaps has nothing to trace.
The approach
The skill starts from the text. It reads the whole article and decides what the one accent colour means, based on the argument. In my post about how AI changed my work, orange is always the call a person makes. In the one about roadmaps, it's what you can honestly commit to.
Each drawing has to illustrate one specific sentence, preferably an image the writer already used, like the rubber duck. The captions reuse the article's own words.
There's no image model. Claude places every stroke with code, using a small kit of pen helpers for lines that wobble and overshoot, hatching and handwriting. Then it renders a preview, looks at it and fixes what's wrong, like arrows that run into things or objects that go through the floor.
The strokes play on a canvas with a moving nib, the same way as the traced drawing on my homepage.
The outcome
One prompt gives you a set of drawings any site can play. They stay sharp at any size and they're easy to change, because each one is a short piece of code. They're also simpler than a real pen drawing: closer to a quick sketch in a margin than to an illustration.
Results