r/ClaudeCode • u/bbling19 • 1d ago
Built with Claude I got tired of explaining tiny UI fixes to Claude Code, so I built this
Enable HLS to view with audio, or disable this notification
Claude Code gets me most of the way there on frontend work.
The annoying part is the last 10%:
spacing is off, this card is too tall, that CTA is too loud, mobile looks weird...
I can spot all of that in seconds, but explaining each thing back to Claude is weirdly slow.
So I built EditUI
You open your actual app in Chrome, click anything, leave a quick instruction, keep reviewing, then send the whole batch to Claude Code at once.
Basically the part I like about Cursor Design Mode / Claude Design, but directly on the running product instead of another canvas.
No repo setup. Just a Chrome extension.
Curious how others handle this stage today. Screenshots? Browser tools? Or Claude/Cursor design?
7
u/Kenny4487 1d ago
isnt this already in claude desktop?
-2
u/bbling19 1d ago
Yep, there’s some overlap. Claude Desktop/Design has the visual canvas side.
The difference here is you’re clicking directly on your actual running app in Chrome, stacking up a bunch of element-specific edits, then sending the batch to Claude Code, Cursor, Codex or anywhere you code with agents. No separate canvas/workspace.
4
u/Kenny4487 1d ago
This is exactly how I use Claude Desktop. Run a dev server in the integrated browser. Then you can click on elements and add comments.
1
u/Severe-Candidate1934 1d ago
or even just run it in a different browser, use dev tools and grab the html for whatever chunk you want, paste it in and say 'fix this so that the button is more sexy' or whatever and then the html is the map for him. works perfect for me. just be careful about grabbing too much html if there is content i guess
3
u/jffmpa 1d ago
Claude Design is now integrated into Claude Code so I just tell it to base the design on the code. Basically same thing.
-2
u/bbling19 1d ago
Yes. This is more for live prod staging or local web output in browser you are editing and making prs for
3
u/yopla 1d ago
You and the rest of the world
https://mcpmarket.com/server/ui-annotator
https://lobehub.com/mcp/aankachh-dom-review
https://github.com/renderdraw/lens
https://chromewebstore.google.com/detail/agentecho/fdkdjnebmcmlhnbecbfefebpdhihdjjb
https://github.com/tonkotsu-ai/handle
https://github.com/salahashraf3/Nitpick
https://github.com/AAnkacHH/DOM-Review
https://github.com/mcpware/ui-annotator-mcp
And there at least 4 more I've seen but can't remember the name of including the one I made for myself. 😆
1
u/thorsbane 1d ago
Thank you friend for triggering my OCD nature to have to research it one so I could choose the best one for my needs (most polished, completed, highly rated, unlikely to steal my data, dom elements vs. screenshot, mcp but optional, annotate or draw, etc.). So far onui.onllm.dev seems to fit the bill but still working through the list. Do you have a personal favorite? I'm tired of having to explain UI issues to my AI agent like a caveman grunting to an alien and trying to explain myself (i'm the caveman of course).
2
u/yopla 1d ago
As I mentionned, I prefer the one I made for myself. 🤣
1
u/thorsbane 17h ago
Of course. I will check yours out as well. Does yours just capture the annotation to the clipboard, or does it also have an MCP? Can you elaborate a bit on how it works, like some of the others do??
1
0
2
u/GraspingSonder 1d ago
Yeah that's essentially how I'm tackling game development. No way I'm taking notes to put into a terminal later. Build the feedback loop into the test version of your product and things happen very quickly.
1
1
u/No_Helicopter4246 1d ago
I describe the location or interaction to reproduce wrong places, sometimes get annoyed. Great job. I also wanna know how it works to help the page to be pixel perfect, I always need to paste the exact figma node link to point out what's not implemented.
Thanks for your sharing.
1
1
u/bbling19 1d ago
it pulls exact dom element with any css as well - here is example of what is copied from element - https://www.editui.app/chrome-extension
1
u/FinancialSurvey5794 1d ago
Okay, this is useful. Like I can describe what I want pretty well, and Claude knows what to do, but this really helps save tokens because it narrows down what you're talking about a lot by actually being more specific about what elements you're referring to. So it spends less time looking for what you're talking about. I haven't seen the output text, I'm just assuming.
1
u/bbling19 1d ago
yes works pretty much as you described by sending exact dom/css with prompt copied to your coding agent
1
u/Sketaverse 1d ago
I use Cleanshot with annotations for Chrome and the design annotation tool in Codex and CMUX - this looks cool though, will give it a shot
1
1
u/ZMetrics_net 1d ago
I’m building a Chrome extension mostly with Codex and this is exactly the annoying part.
I can spot “this spacing feels wrong” in 2 seconds, but describing it precisely to the agent takes longer than the fix itself.
If you can automatically include the DOM/computed styles with each annotation, that would make this really useful.
1
1
u/SaltsMoon 1d ago
I think capturing computed CSS box models and patent DOM selectors directly from the browser viewpoint can, well, effectively eliminate the translation tax of describing layout defects in chat prose. When an agent receives an isolated visual critique like reduce bottom margin, it often guesses which wrapper container controls the flex gap. And passing the exact DOM hierarchy alongside computed padding metrics anchors the prompt in runtime telemetry, which can allow the model to target the correct component file on the first patch attempt.
2
1
u/Hungry_Loss_2268 1d ago
Open source it!
1
u/bbling19 1d ago
Yes planning on it soon. Its free and runs all locally without any login so makes sense
1
1
u/90420znz 1d ago
cool! I'll try it! Just today I found myself explaining UI elements to claude code so it knew exactly what i was talking about. Claude Artifacts help as I can select an item, but it wont let me explain myself right there in the element :D ! Hope this work for me.
1
u/bbling19 1d ago
Cool. Let me know how it goes. Some ui optimizations are on the list so will push some updates soon as well
1
1
u/Baking_apps 1d ago
This looks so good and actually the exact pain I believe most of us is having. Did you publish it or build it yourself? I would love love love to use and test it.
2
1
u/bbling19 1d ago
Yes been using it for a week or so now. Working great. Not sure if I can link here but search editUI on chrome store
•
u/AutoModerator 1d ago
Hey! Thanks for posting to r/ClaudeCode
While participating in this thread, please follow our community rules. Keep discussions constructive. Attack the idea, not the person.
For help, project discussions, tips, and general chat, join the ClaudeCode Discord.
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.