These days, the first version of anything I design takes minutes. I describe it, the AI builds it, and it’s running in my browser. Getting it to feel right takes the rest of the day.

That’s where most of my design work happens now: nudging the spacing, the sizes, all the little details. And it only goes as well as how precisely I can tell the AI what to change.

Agentation helped a ton here. You click an element, leave a note, and the agent knows exactly which thing you mean. It took away most of the guesswork, and I used it every day.

But I still caught myself asking the AI silly questions like “what’s the gap between the text and the image?” The agent knew. It could read the code. I was the one who couldn’t see the numbers, so my notes stayed vague: “a bit more space,” “slightly bigger.” Every round of back and forth cost tokens, time and a little of my sanity.

Me“make it a bitmore spacious”Agenttries 24px?a guess“hmm, not quite… try again?”×6
Fine-tuning without the numbers: vague words in, guesses and questions out, repeat.

So I built PixelSpec.

It keeps the point-and-note flow from Agentation and adds the inspect panel I missed from Figma, right on the live page. Now when a gap looks off, I can see it’s 16 and just say “make it 24.” No guessing on either side.

PixelSpec in action: hover, click, measure, leave a note.

How does PixelSpec work?

Open it with the round button in the corner, or Alt Shift I. From there it’s the same three moves over and over: look, measure, leave a note.

See the details

Click anything to see its spacing, size, font, colors and corners. It also flags text that’s too hard to read against its background.

marginpaddinggap
Click an element and the spacing shows up on the page: green is padding, orange is margin, pink is gap.

Measure the space between things

Pick one element, hover another, and it shows the exact distance between them. No more squinting at whether two cards are evenly spaced.

.card 220×1207230hover anything else,get the exact gaphold Alt to measure to the parent
With one element selected, hover another to get the exact distance between them.

Once I’ve seen the numbers, I leave a note right on the element and copy everything into Claude Code or Cursor. Each note carries the element’s exact specs, so the agent and I are finally looking at the same thing.

How to get it

Ask your AI tool to add PixelSpec to your project, or run:

npm install -D pixelspec

It only runs while you’re building, so visitors never see it. Setup for every kind of site is on pixelspec.dev, and the code is on GitHub. It’s free and open source.

I made PixelSpec for myself, so designing with AI could feel as precise as designing in a design tool. If you work this way too, I hope it saves you a few rounds of “hmm, not quite.”