
One thing Claude is not very good at is designing a user interface from scratch. It can write the code for one just fine, but ask it to come up with a layout and you usually get something generic and a bit ugly. For a while I was working around this by having Claude build a first pass in code, running the app, taking a screenshot, pasting the screenshot back into the chat, and asking it to critique itself. It sort of works, but it’s slow, and half the time the feedback is vague.
I’ve been trying out Pencil instead. It’s a Mac app for designing interfaces on an infinite canvas, but the interesting part is that the AI doing the designing is Claude Code. When you open a .pen file, Pencil launches Claude in the background and gives it a set of MCP tools for reading and writing the design (adding frames, moving things around, changing colors, taking screenshots of what it just drew), on top of the regular Claude Code tools for reading files, running shell commands, and so on.
I can then directly edit the files in Pencil, which is a bit like using Adobe Illustrator, and Claude will update the code based on my suggestions. This is a lot easier than taking screenshots and then trying to describe what is wrong with words. Instead of saying: “make the button smaller” I can directly edit the button size in the .pen file. It isn’t perfect, but it saves a lot of time and frustration. It is also totally free.