Skip to content
EditUI
Menu

Claude Code

A visual UI layer for Claude Code

Click elements in your running app, attach specific UI changes, collect them while you review, then send the complete context to Claude Code.

Add to Chrome

How to visually edit UI with Claude Code

  1. 01

    Run your app

    Start the dev server you already use.

  2. 02

    Open it in Chrome

    Use the normal browser, including localhost.

  3. 03

    Turn on EditUI

    Toolbar icon, or Command-Shift-E.

  4. 04

    Click an element

    The outline is the thing you mean.

  5. 05

    Describe the change

    Write the outcome, not a tour of the DOM.

  6. 06

    Keep adding edits

    Stay in the review until the page is covered.

  7. 07

    Copy the batch

    Paste the prompt into Claude Code, in the repo that renders this page.

  8. 08

    Review the result

    When the app reloads, check the same elements.

Localhost is a normal target

Start the dev server, open that exact URL in Chrome, and set the window to the width where the bug shows. The copied prompt includes the URL and the viewport, so Claude Code knows you meant the page at 390px wide, not the desktop layout. You do not point the extension at the repository. Claude Code still needs the repo. EditUI only names the elements on the running page.

Screenshot
Edit Mode on a localhost page: one element outlined, a short note, and the review tray still open so the next click can join the batch.

Batch, then one paste

A visual pass is rarely one element. Click the heading, the cards, the button. Write the outcome on each. Copy all builds a single prompt with a numbered section per edit. Paste that once into Claude Code, in the project that renders the page. EditUI does not call the model, open a pull request, or keep a connection to Claude Code.

A shortened example of what lands on the clipboard:

Copied prompt
I reviewed the UI at:

`https://usercall.co/`

Viewport: 1440×900

Please implement the following 3 UI changes while preserving the existing design system and responsive behavior.

## Edit 1 — Customer interviews, without the calendar chase

**Request:**
Make this heading slightly smaller.

**Selected element:**
`<h1 class="hero-title">`

**Text:**
Customer interviews, without the calendar chase

**Bounds:**
96, 128, 640×112

**DOM context:**
<section class="hero">
<h1 class="hero-title">Customer interviews, without the calendar chase</h1>
after: <p>A running app, reviewed in Chrome.</p>
styles: display: block; font-size: 60px; font-weight: 500; line-height: 64px

## Edit 2 — Schedule Capture Share

**Request:**
Make these equal height.

## Edit 3 — Book a research call

**Request:**
This feels too prominent. Make it secondary.

Implement all requested changes, then review the resulting page against each edit.

Ask Claude Code to implement the list and then check the page against each note. After hot reload, look at the same URL. Send a follow-up only for the notes that missed.