EditUI: UI-Korrekturen per Klick sammeln und in Claude Code oder Cursor einfügen

Michael Dobler

Autor Dr. Web

22. Okt. 2026

3 Min. Lesezeit

Die kostenlose Browser-Erweiterung EditUI sammelt Korrekturen an einer laufenden Website per Klick und kopiert alle zusammen als Prompt für Claude Code, Cursor oder Codex. Zu jedem Element nimmt EditUI Selektor, HTML-Ausschnitt und 21 CSS-Werte wie Abstände, Schriftgröße und Farbe mit. Die Fundstelle im Quellcode fehlt, dafür entfällt jeder Einbau ins Projekt.

Ein Klick · kostenlosDr. Web bei Google bevorzugenMarkieren Sie drweb.de als bevorzugte Quelle. Dann sehen Sie unsere Artikel öfter unter den Top-Meldungen.Jetzt hinzufügen

Stellen Sie sich vor, Sie gehen die Testumgebung eines Kunden durch und finden zwölf Stellen, an denen Abstände oder Schriftgrößen nicht stimmen. Für den Coding-Agenten beschreiben Sie danach jede davon in Worten, samt Screenshot mit rotem Pfeil.

Usercall, Anbieter einer Software für KI-gestützte Nutzerinterviews, hat EditUI für diesen Arbeitsschritt gebaut.^[1] Die Erweiterung läuft in Chrome und Firefox.^[2]

Auf einen Blick

Das Wichtigste in Kürze

EditUI ist kostenlos, quelloffen unter MIT-Lizenz und kommt ohne Konto aus.
Notizen zu angeklickten Elementen landen gesammelt in einem einzigen Prompt.
Cursor Design Mode und React Grab liefern mehr Kontext, setzen aber Cursor oder einen Einbau ins Projekt voraus.
Zeigt eine Testumgebung Echtdaten, gelten für den kopierten Prompt die Regeln der DSGVO.

Was nimmt EditUI bei jedem Klick mit?

Kartonmodell eines Webseiten-Layouts mit blauen Fähnchen und dem Wort „kleiner“ — EditUI speichert CSS-Selektoren, HTML-Ausschnitte, sichtbaren Text, 21 CSS-Werte und Fenstergrößen für angeklickte Elemente lokal im Browser

EditUI speichert zu jedem angeklickten Element einen CSS-Selektor, einen gekürzten HTML-Ausschnitt samt Nachbarelementen, den sichtbaren Text, 21 CSS-Werte so, wie der Browser sie darstellt, und die Fenstergröße. Die Notizen bleiben im lokalen Speicher des Browsers, bis Sie alle gemeinsam kopieren.^[2]

Den HTML-Ausschnitt schneidet EditUI bei 1.500 Zeichen ab, den Text bei 240 Zeichen. Automatisch erzeugte Klassennamen, wie sie Bibliotheken wie styled-components vergeben, filtert die Erweiterung heraus.^[3] Die passende Komponente muss der Agent deshalb über Text, stabile Klassen und Seitenstruktur selbst im Code finden.

Verwandt ist der quelloffene Inspektor Mesurer, mit dem sich Abstände direkt auf der Seite messen lassen.

Worin unterscheidet sich EditUI von Cursor Design Mode und React Grab?

Cursor Design Mode und React Grab übermitteln mit, in welcher Komponente oder Datei ein Element steckt, EditUI erfasst nur, was der Browser anzeigt. Design Mode läuft im Browser von Cursors Agents Window und übergibt XPath, Komponente und deren Eigenschaften (Props) sowie einen Screenshot.^[5]

React Grab wird per Kommandozeile ins Projekt eingebaut und kopiert zum Element die Komponentenhierarchie mit Datei und Zeilennummer. Das MIT-lizenzierte Werkzeug zählt auf GitHub 7.677 Sterne.^[6] EditUI braucht dagegen keinen Eingriff ins Repository und passt zu jedem Agenten, in den sich Text einfügen lässt. Im Chrome Web Store zählte die Erweiterung am 22. Oktober 116 Nutzer.^[4]

EditUI im Vergleich

Wie drei Werkzeuge Änderungswünsche aus dem Browser an Coding-Agenten weitergeben

EditUI in Zahlen

0 €

kostenlos, quelloffen unter MIT-Lizenz, ohne Konto

116

Nutzer im Chrome Web Store, Version 1.0.2

CSS-Werte pro angeklicktem Element, etwa Abstände, Schriftgröße und Farbe

1.500

Zeichen HTML-Ausschnitt höchstens, sichtbarer Text bis 240 Zeichen

Was der Agent jeweils bekommt

Browser-Erweiterung

EditUI

Einbau: Erweiterung für Chrome oder Firefox, kein Eingriff ins Projekt

Agent: jeder, in den sich Text einfügen lässt

Kontext: Selektor, HTML-Ausschnitt, CSS-Werte, Fenstergröße

Fundstelle im Code: sucht der Agent selbst

Teil von Cursor

Cursor Design Mode

Einbau: Browser im Agents Window von Cursor

Agent: Cursor

Kontext: XPath, Komponente, Eigenschaften (Props), Screenshot

Extras: Zeichnen auf der Seite, Spracheingabe

Einbau ins Projekt

React Grab

Einbau: per Kommandozeile im React-Projekt

Agent: jeder, in den sich Text einfügen lässt

Kontext: Element und Komponentenhierarchie

Fundstelle im Code: Datei und Zeilennummer

Den Kontext für den Agenten liefert EditUI, die Verantwortung für die Daten im Prompt bleibt beim Team.
Markus Seyfferth, Chefredakteur Dr. Web

Was sollten Agenturen vor dem Einsatz prüfen?

Prüfen Sie, welche Inhalte im kopierten Prompt landen und an welchen KI-Anbieter er geht. EditUI betreibt keinen Server, braucht aber Zugriff auf alle Websites, weil das Skript der Erweiterung in jede geöffnete Seite geladen wird.^[3] Ausgelesen wird eine Seite laut Datenschutzerklärung erst im Bearbeitungsmodus.^[7]

Zeigt die Testumgebung echte Kundendaten, landen Namen oder Bestellnummern beim Anbieter des Agenten. Dafür brauchen Agenturen eine Rechtsgrundlage und einen Auftragsverarbeitungsvertrag nach Artikel 28 DSGVO.^[8] Für Verträge mit dem Entwickler gelten laut Chrome Web Store keine EU-Verbraucherrechte, weil er sich dort nicht als gewerblicher Anbieter ausgewiesen hat.^[4]

Codex CLI etwa richtet standardmäßig einen dauerhaften Hintergrunddienst ein, ein Grund mehr, Entwicklerwerkzeuge vor dem Einsatz zu prüfen.

Für Freelancer und Agenturen, die Oberflächen mit Claude Code oder Codex bauen, lohnt ein Test an einer Seite mit Platzhalterdaten. Teams, die mit Cursor arbeiten, bleiben bei Design Mode, React-Projekte profitieren von der Zeilenangabe aus React Grab. Welche Zustände einer Oberfläche ein Agent beim Prüfen übersieht, zeigt das Beispiel Pure UI.