EditUI: Click Where You Want to Change, Batch UI Edit Instructions to AI Coding Tools

Why is describing UI problems in natural language always so exhausting?

Anyone who has used Cursor, Claude Code, or Codex to tweak frontend styles has probably been through this: a card on the page is too tall, a button is too eye-catching, the mobile layout looks a bit off. You want AI to help fix it, but just describing "which element, what's wrong, and how it should look" requires typing out a whole paragraph. And the real hassle is that these problems rarely come one at a time—they come in batches.

A Chrome extension called EditUI has appeared on Product Hunt, aiming to solve this pain point with a "point-and-shoot" approach. Its idea is straightforward: open the real webpage you're developing, click any element you want to change, write a short edit note, move on to the next issue, and finally send the entire batch of instructions to Claude Code all at once.

The tool currently has 63 votes, ranking 17th on Product Hunt for the day, and was launched by developer Junu Yang. It's free, open source, requires no registration, and has no backend.

How EditUI works

EditUI's core interaction chain can be broken down into three steps:

1. Open the real page: Open the app or website you're developing in Chrome, rather than in some kind of simulated environment. This means what you see is what users see.
2. Click the element + write an instruction: Click on the problematic UI element, type a short edit request like "this card is too tall" or "this CTA is too loud." Then move on to the next one—no need to interrupt your flow by switching tools each time.
3. Batch send: Once you've marked everything, send the entire batch of edit instructions to Claude Code at once, and let it handle the actual code changes.

The whole process requires no repository configuration and no complex development environment dependencies—just a single Chrome extension.

Why the "batch" aspect is crucial

On its own, "click an element and write an instruction" isn't particularly novel. What truly sets EditUI apart from one-by-one conversations is the batching mechanism.

Frontend UI change requests tend to cluster: spacing is off, font is too small, colors are inconsistent, mobile layout is misaligned—these issues are often discovered all at once during a single browsing session. If you switch to an AI chat window to describe each one as you find it, wait for it to finish, then come back to check the result, the context-switching cost is very high. EditUI gathers these requests together and hands them off to Claude Code in one go, maintaining a rhythm of "review—record—execute together."

What is Claude Code: It's a command-line AI coding assistant from Anthropic that runs in the terminal, can directly read and write local code repositories, execute commands, run tests, and make cross-file changes based on natural language instructions. Unlike web-based conversational AI, Claude Code has persistent access to project context, making it well-suited for tasks like "batch modifying frontend styles" that need to land in actual code. EditUI choosing it as the output target essentially means converting structured instructions collected in the browser into executable code changes for Claude Code.

Context-switching cost: Cognitive psychology often refers to the efficiency loss from frequently jumping between tasks as "switching cost." In AI-assisted programming, this cost is especially pronounced: every time you switch from the browser to a chat window, re-describe the problem, wait for a response, and switch back to the page to verify, it interrupts the developer's overall perception of the interface. Batch processing separates the two phases of "finding problems" and "executing changes," letting developers first do a complete walkthrough of the UI and record everything, then hand it all to AI at once—compressing multiple fragmented round-trips into a single submission so your train of thought doesn't get interrupted.

The lightweight trade-off: what it means to be just a Chrome extension

The features EditUI explicitly emphasizes deserve a closer look: free, open source, no registration, no backend.

Together, these words outline a very restrained product positioning. No account system means no user data uploads; no backend means all logic runs locally in the browser; open source makes the code auditable. For a tool that needs to access the pages you're developing, these features directly address developers' concerns about privacy and trust.

The trade-offs are also obvious. No backend means it can't do cross-device sync, can't save history, can't support team collaboration. It's more of a grab-and-go lightweight tool than a complete UI collaboration platform.

Is supporting only Claude Code a limitation or a focus?

Based on the current description, EditUI's output target is Claude Code. This means developers using Cursor or Codex can't directly benefit from this workflow for now.

This can be understood as a focus strategy—get one integration working smoothly first, rather than adapting to multiple AI coding tools simultaneously. But for those already working in the Cursor ecosystem, this is a point that needs weighing.

Differences between Cursor and Codex: Cursor is an AI editor based on VS Code, integrating chat, completion, and code editing within the IDE; Codex is OpenAI's programming capability system, existing early on as an API and Codex CLI. The main differences between these and Claude Code lie in the interaction entry point and context management approach. EditUI currently only integrates with Claude Code, meaning the instruction format and invocation method it generates are designed around this tool; supporting Cursor or Codex would require additional adaptation for their respective interfaces or paste formats, which is why it's difficult for it to cover a multi-tool ecosystem in the short term.

Who should use EditUI

Based on its product positioning, EditUI is best suited for developers who:

• Are already using Claude Code for frontend development
• Prefer reviewing UI in a real browser rather than in Figma or design mockups
• Have dense and scattered UI change requests and want to reduce back-and-forth communication with AI
• Are sensitive about tool privacy and data flow, preferring open-source, no-backend solutions

If you're already used to giving AI requirements via screenshots plus text descriptions, EditUI essentially structures that process: screenshots become clickable markers, and text descriptions become instructions attached to elements.

Summary

EditUI captures a real but often overlooked friction point: the inefficiency of describing UI change requests to AI. Its solution isn't particularly complex, but it makes its own trade-offs along the two dimensions of "batch processing" and "zero configuration." It's still at an early stage, and supporting only Claude Code is an obvious boundary, while 63 votes also indicate it hasn't yet reached a broad audience.

For Claude Code users who work with frontend UI every day, this might be a small tool worth spending a few minutes trying out.

One-line Summary

EditUI is a Chrome extension that lets developers click elements on real pages to write instructions, then batch them to Claude Code for UI changes.