How to Visually Edit UI with Claude Code

Claude Code can change a frontend quickly. The slow part is telling it which pixels you mean. “The button under the pricing cards, the one that feels too loud” is obvious when you are looking at the page and vague once it becomes a chat message.

Visual editing, here, means you stay on the running page. You click the element, write the change, and hand Claude Code that pair: the thing on screen, and what you want done to it.

Run the page you actually want changed

Start the dev server. Open that URL in Chrome, not a screenshot and not a description of the route. If the problem only shows up at a laptop width, set the window to that width before you click. The viewport size travels with the prompt.

Point, then write the outcome

Turn on EditUI. Click the element. Write the change the way you would say it to someone sitting next to you:

• Make this heading slightly smaller.
• These three cards should be the same height.
• This button should feel secondary.

Avoid a tour of the stylesheet unless you already know the value you want. Claude Code can see the tag, the text, the nearby markup, and a few computed styles. Your sentence should say what is wrong.

Collect the pass, then paste once

Keep going until the review is done. A page usually has more than one issue, and sending them separately makes you re-explain the layout each time. When the list feels complete, press Copy all and paste the prompt into Claude Code in the repository that renders the page.

The prompt starts with the URL and viewport, then one section per edit. Claude Code is still the thing that edits the code. EditUI does not open a pull request or call the model for you.

Check the same elements after reload

When the app hot-reloads, look at the same URL. The notes were about specific elements. If one of them missed, click that element again and send a shorter follow-up instead of restarting the whole review.

The same loop is written up as a product page at Claude Code visual editing.