Pencil.dev + Claude Code: Vibe Code Your UI Designs Into the App

If Figma and Claude Code had a baby, you would get Pencil.dev: a design editor where you vibe-code the design itself, then carry it into your actual codebase over an MCP server. I spent a few days using it to refresh the design of our app, Gutsy, as a developer with no design eye, and the verdict up front: it works, it beats the Figma MCP in my experience, and the right transfer strategy is component by component.

How does Pencil.dev work?

You connect your own Claude Code, because Pencil runs Claude Code under the hood; I use the desktop app, though editor extensions exist. From there the loop looks familiar to anyone who has watched Claude Code work: give it screenshots of an existing screen, say "create a new frame and replicate this," and it writes itself a to-do list, reads your other frames to stay on brand, builds the design, and screenshots its own output as it goes to check the result.

On top of the chat there is a real design editor: more basic than Figma, but with drag-and-drop on a grid layout and direct property editing, so small fixes do not require a prompt. My main missing feature is a tree view; without one, finding an element's parent to fix spacing is annoying. Sometimes it is not worth fighting the AI over an eight-pixel gap; just drag the thing.

The tip that fixed the colors: a style-guide file

Early on it kept getting brand colors wrong, mixing up the purples and reds. The fix was one move: I gave it our CSS file and had it derive a brand color palette, saved as a style guide in the project. Since then, color drift has mostly stopped. If you try Pencil, do this first.

Iterating with feedback

The iteration loop is plain language, and it handles batched, messy feedback well: make all badges the same blue, you forgot the interest badges on the bottom two audiences, reduce the vertical spacing, show one card with badges expanded, only one sidebar item should be highlighted. It even inferred unstated things, like which tab should render as active. Two operational notes: it is resource-hungry enough to make a 32GB machine stutter, and you want to run it on a subscription; I hit odd rate limits that a fresh chat resets, and I cannot tell you why. That is Anthropic for you.

Pencil.dev vs the Figma MCP

I am not happy with the Figma MCP, to the point where you might as well not use it, and copy-pasting Figma-generated code is worse: Figma hardcodes widths and heights, so the output code is unusable in a real layout. Pencil transfers through its own MCP instead: you select a frame in the editor, tell Claude Code to merge the selected frame into the app, and the MCP passes the editor state and screenshots across. The first pass came over decent, not perfect, and visibly better than what the screens looked like before.

The strategy that works: turn off the MCPs you are not using first, since every active MCP eats context window, and transfer component by component rather than whole screens. Smaller units give the model less to analyze and fewer places to go wrong; the same advice applies if you stay in Figma.

Who this is for

If you are a vibe coder who is not a designer and your app looks like it, this is the current best way I know to buy design taste without hiring for it yet, and when you do hire a designer, their updates flow back to the codebase through the same pipe. The design quality will not be mistaken for a big branding budget. It is clearly better than what I could do alone, and it landed in production.