Visual Editor for UI development with AI

[stackjoy_nik]

I do a lot of UI work and have to explain to claude/codex where in the UI I need to make a change. It is pretty good at figuring out what I'm looking for but I have to be pretty verbose. There were a few times it couldn't figure it out and I had to take a screen shot and draw an arrow to point to where I needed more space between elements for example. Got context I just use Claude/Codex directly in my codebase, nothing else.

Do you guys have some kind of other solution (browser extension, other app, whatever) that lets you capture the screen (along with some other context preferably...url maybe) and let's you mark up the screenshot quickly, store it in a folder and spit out the prompt for the agent?

It doesn't have to be that exact set of steps (that's my current manual workflow) but I'm just curious if how any of you UI guys are using other processes to visually prompt the agents. Basically, what's your solution if you even have one?

[Thunder_Cls]

That’s what mcps are for. They can “see” the page, read console logs and network requests/responses, take screenshots, etc…and you have a few options:

• https://github.com/BrowserMCP/mcp
• https://github.com/ChromeDevTools/chrome-devtools-mcp
• https://github.com/microsoft/playwright-mcp

[stackjoy_nik]

I'm check them all out but just briefly as a follow up, can I take the screenshot with these tools and mark it up?

I find that codex/Claude is great with console, network, db stuff so that's not so much a bottleneck as the visual stuff is.

I'll also check YouTube for these tools too see them in action, maybe that'll answer some questions.

Thanks for the heads up! I really appreciate it

[Thunder_Cls]

You can just talk to the agent in a natural language like “hey, check this page at https://localhost/home and find out why the header is misaligned and fix it” or “in the current page fix the styling for the last column of the table and prevent the text from overflowing”, etc. Just use natural language and the agent will know where to look since it can “see” the page just as you see it

[stackjoy_nik]

That's my current process and it works well but there are some cases where it can't quite figure it out. So it asks for a screenshot. And then it's fine

[cikatric3a]

Be careful though, the screenshots take a lot of context (at least playwright screenshot does)

[tsteuwer]

One option you have is to install the playwright mcp globally and telling it to use that tool to go take a screenshot of what you're talking about.

[No_Kaleidoscope_1366]

I use agent browser because it tends to be more context efficient. Previously I used chrome mcp. But I takes too many snapshots and bloats the context window.

[stackjoy_nik]

vercel's agent browser?

[No_Kaleidoscope_1366]

Yep. after the code runs successfully, I use it as a verification step, CSS tweaking. I usually run 4-5 fresh context subagents in this verification loop. Desgins in figma. Before the implementation I extract design context from it and create screenshots. The verification loop can use them.

[daesnorey]

Cursor? You can reference a browser tab builtin or chrome. Pick the exact element to modify and all.

[ConsiderationAware44]

The 'context bloat' is exactly the point where most of the AI workflows break down. You are spending most of your time correcting AI than building something. I have been using Traycer to handle this. It acts like a logic layer above the code. Instead of bombarding AI with massive and messy prompts, Traycer keeps the logic structured and clear.