I got tired of
describing pixels
to my AI agent.
I'll notice when padding is off by 2px, or when a button sits just a little too far to the right. But actually fixing it still means describing the entire component to the model, then cleaning up all the parts of the diff that shifted when they weren't supposed to.
After a while I started wondering what it would feel like to just point at the thing. No setup, no back-and-forth, nothing breaking around it.
PixelAgent is my fix. Click the element, tweak it, hit apply. Done.
Hit Play and PixelAgent drops onto the page. Switch to Edit, click anything, and tweak it — spacing, color, type. Then hit Apply and watch the change land.
Three things that kept slowing me down
- Pasting screenshots into Claude and hoping it understood which component I meant
- Watching the token count climb as I re-explained the same layout three times
- Getting back a diff that touched half the file when I just wanted to nudge a padding value
“I know what's wrong. I can see it. I just can't point at it.”
So I built two things: a way to annotate the running app (not a screenshot), and a visual edit panel that talks directly to my agent. Both work on the live DOM — the actual element, with its actual class names and source location.
Click any element, write a note, copy structured markdown. Paste into Claude Code, Cursor, anything. Zero tokens until you paste.
Figma-like panel for spacing, color, type, border, opacity. Preview hover/focus/active states. Tweaks stay local until you hit Apply — then one structured diff, one agent call.
Why live DOM, not screenshots
Some tools annotate screenshots and ask a vision model what to change. That can work — but it infers structure from pixels. PixelAgent reads the live DOM so selectors, computed styles, and source hints are facts, not guesses.
PixelAgent reads the actual DOM. The selector, computed styles, and source file are known facts, not inferences. The agent gets a surgical diff, not a full regen.
What it actually sends
It captures the context for you — selector, visible text, source line — as one block of plain markdown.
# PixelAgent Annotations (1) --- ### 1. `button.hero-cta` - **note:** Increase font size to 16px - **text:** Get started - **source:** `components/Hero.tsx:42`
button.hero-cta | text:"Get started" | src:Hero.tsx:42 | "Increase font size"
Plain markdown. No API key. Paste anywhere.
One line to start
No browser extension, no Web Store, no separate app. It ships with your project. It's in beta and still moving fast — but the commands below work today.
Install the package
Add to your app
// add anywhere in your layout — auto-excluded from prod
{process.env.NODE_ENV !== "production" && <PixelAgent />}
Styles inject automatically — no import "pixelagent/style.css" needed.
The npx pixelagent setup step detects Claude Code or Cursor and writes the MCP config automatically. Skip it and annotation mode still works — you just paste manually.
With an agent, pointing says more than words.
“The button on the right.” “A little more padding.” Words like these make the agent guess — and guess wrong. But hand it the actual element, selector and source line attached, and the conversation changes. Less back-and-forth. Less talking past each other.
Once I could point instead of narrate, things just worked.
If you'd rather tweak your own UI than prompt your way through it — this might be the thing that makes that feel possible.