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.

What Claude Code receives

EditUI does not call Claude for you. Copy all puts one prompt on the clipboard. You paste it into Claude Code. The prompt names the page, the viewport, each request, and the element you clicked: tag, text, nearby markup, and a few computed styles.

Copied prompt
I reviewed the UI at:

`https://usercall.com/`

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.