Notes
2 min read

Designing where the code lives

Every design round used to mean exporting, describing and fixing what got lost in between. With pen.dev my agent pulls the design in directly through an MCP server.

  • design
  • claude-code
  • tooling
The pen.dev canvas with this site's page designs, the agent panel on the left and a note asking to tighten the stack cards.

Most of my design work ends up in front of an agent anyway. The design was never the slow part, the handoff was. I'd tweak a frame, export it, paste it into Claude Code, explain what changed, then check what it built against what I meant. By the third round I was spending more time translating than designing.

What changed

The design stays in pen.dev. Claude Code reads it through the pen.dev MCP server, so there's nothing to export and nothing to describe. I point the agent at a frame and it sees the same layout, spacing and colors I do.

It works the other way too. When I'd rather talk than drag, I ask the agent to try a variant on the canvas, look at it, and keep it or throw it away. Nothing touches the code until I like what I see.

A round now

  1. Change the frame, or ask the agent to.
  2. Tell Claude Code to bring the page in line with it.
  3. Look at both side by side, and go again if something drifted.

That's it. No screenshots in chat, no "the card should be a bit wider". The design is the spec, and the agent reads the spec, not my description of it.

Why it's easier

  • One source. The agent and I look at the same design, not a copy of it pasted into chat.
  • No lossy handoff. The agent gets the real values, not my guess at them from a screenshot.
  • Cheap tries. A variant costs a sentence, so I try more of them and throw most away.

Compared to what I tried before

Before pen.dev I tried the same loop with Claude Design, Figma and Paper. pen.dev has worked best of the four. The agent picks up the design faster, gets closer on the first pass, and I spend less time correcting it. I honestly didn't expect it to work this well, or this efficiently.

This site went through more rounds than I'd have bothered with before, because each one was cheap. That's the whole point. If you already design with an agent next to you, try giving it direct access to the design. It's the part I'd miss most.

Thanks for reading.