Agent skills · Canvas2D
Teaching an agent to draw a scene
The room on this site is drawn entirely in code. What it took to get an agent to draw scenes like it on the first pass, and the skill that came out of it.
peculiar-ragdoll · · 2 min read
Everything in the room behind this site is drawn in code: the couch, the string lights, the plant by the window, the agent session scrolling on the desk. No image files. I built it with Claude, one round of feedback at a time, and along the way I kept writing down what went wrong. That list became code-drawn-scenes, a skill that teaches an agent to draw scenes like this one that look finished on the first pass.
What goes wrong
It’s rarely the drawing. A model can draw a convincing guitar. What breaks a scene is that the guitar floats an inch above the floor, the bookcase recedes to a different vanishing point than the desk, and the mug sits behind the table edge it should be in front of. Each mistake is small, and a scene with five of them looks wrong without you being able to say why.
So the skill puts correctness first. Before drawing anything, the agent writes down the camera, the light, the layout and the draw order as data. Then it proves the geometry in code: what supports what, what’s in front of what, whether every receding edge runs to the same point. An agent is much better at checking numbers than at spotting a floating object in a screenshot, so it checks the numbers.
Building it in one go
The other half is the process. One agent builds the whole scene from a brief and fixes everything it finds. A second agent reviews the render adversarially, zoomed in, with its own checklist. Then a fresh agent does a fix pass from the files and the report. Every pass works from the folder, not from an earlier conversation, so each one fits in a single context. That should also make the skill usable with smaller models, which is what I want to try next.
The picture at the top, Last Bowl, came out of one such run: a builder, then two rounds of review and fixes.
Rules without examples
One lesson from writing it: the rules can’t name objects. A rule with an example in it reads as a suggestion: tell an agent how to hang a birdcage properly, and you’re likely to find birdcages in every scene. So every rule talks about geometry, light and the camera instead: depth, support, enclosure, reflection, pivots.
The skill is on GitHub. Clone it into your skills folder, and the README covers the rest.