Redline: Visuelles UI-Feedback für Claude Code

Das Problem

Man reviewt eine laufende Web-App. Eine Überschrift hat die falsche Farbe, ein Preis muss aktualisiert werden, ein Button-Label stimmt nicht. Der klassische Workflow: DevTools öffnen, das Element finden, die CSS-Klasse notieren, die Codebasis durchsuchen, die Datei finden, die Änderung machen. Für jedes Problem wiederholen. Wenn man mit einem Designer oder Product Owner arbeitet, screenshotten sie die Seite, zeichnen Pfeile in Figma oder einem PDF, und man verbringt Zeit damit, ihr visuelles Feedback auf den Quellcode abzubilden.

Wir wollten etwas Schnelleres: draufzeigen, hinschreiben was falsch ist, einen KI-Agenten fixen lassen.

Was Redline macht

Redline ist ein Claude Code Skill mit zwei Modi:

/redline setup installiert ein leichtgewichtiges Annotations-Overlay in jedes Webprojekt (React, Vue, Svelte, reines HTML, Tauri)
/redline dateiname.json liest eine Annotationsdatei und behebt alle annotierten Probleme in der Codebasis

Das Overlay läuft komplett im Browser, benötigt keine npm-Abhängigkeiten und funktioniert mit jedem Framework. Die Annotationsdatei ist ein einfaches JSON, das Claude Code liest, um Elemente zu lokalisieren und Fixes anzuwenden.

Setup

Das Ausführen von /redline setup in Claude Code macht drei Dinge:

Erkennt den Projekttyp und den HTML-Einstiegspunkt (prüft index.html, src/index.html, public/index.html, app/layout.tsx usw.)
Kopiert eine eigenständige dev/annotation-overlay.js in das Projekt
Fügt ein dev-only Script-Tag vor </body> hinzu

<!-- Redline: dev-only annotation overlay -->
<script data-dev-only src="/dev/annotation-overlay.js"></script>

Die Overlay-Datei wird ins Repository committet, damit das gesamte Team sie nutzen kann. Die Annotations-Ausgabedateien landen in .claude/redline/, was in der Gitignore steht.

Demo-Walkthrough

Wir gehen einen kompletten Annotationszyklus anhand einer einfachen Shop-Demoseite durch.

Die Originalseite

Hier ist unser Ausgangspunkt — eine saubere Produktliste mit drei Karten:

Originale ShopDemo-Seite mit drei Produktkarten: Wireless Headphones, Smart Watch Pro und Portable Speaker

Das Overlay aktivieren

Cmd+Shift+A (Mac) oder Ctrl+Shift+A (Windows/Linux) drücken. Eine Toolbar erscheint oben auf der Seite mit Zeichenwerkzeugen: Select, Arrow, Circle/Box, Text und Freehand.

Annotations-Toolbar mit Select, Arrow, Circle, Text, Draw Tools sowie Annotations-Zähler, Undo und Done-Button

Elemente annotieren

Mit dem Select-Tool auf ein Element klicken, um es hervorzuheben, dann Feedback eintippen. Zum Beispiel auf die Überschrift klicken und "make text blue" tippen:

Auswahl der Wireless-Headphones-Überschrift mit einer Textannotation make text blue

Man kann auch Pfeile zu Elementen zeichnen, Bereiche einkreisen oder Textlabels platzieren. Jedes Zeichenwerkzeug fragt automatisch nach einem Kommentar, damit die KI weiß, was zu fixen ist.

Mehrere Annotationen

Weiter annotieren. Hier haben wir fünf Änderungen markiert: eine Farbänderung an der Überschrift, einen lila Hintergrund für die erste Karte, eine Preiskorrektur, eine Textkorrektur und eine Button-Label-Änderung:

Abschließen und Speichern

Nochmals Cmd+Shift+A drücken oder auf Done klicken. Das Overlay speichert eine JSON-Datei im Downloads-Ordner und kopiert den Dateinamen in die Zwischenablage. Das JSON erfasst jede Annotation mit ihrem CSS-Selektor, Kommentar, Element-Metadaten und Position:

Die Annotations-JSON-Datei mit Selektoren, Kommentaren und Element-Metadaten für jedes annotierte Element

Die Fixes anwenden

Den Dateinamen in Claude Code einfügen:

/redline home-2026-03-10-16-47.json

Claude liest das JSON, ordnet jeden Selektor der Quelldatei zu, interpretiert den Kommentar und wendet den Fix an. Das Ergebnis:

Die Seite nach Anwendung aller Fixes: blaue Überschrift, lila Kartenhintergrund, korrigierter Preis, aktualisierter Button-Text

Alle fünf Annotationen wurden in einem Durchgang verarbeitet und auf index.html angewendet.

Wie es unter der Haube funktioniert

Das Overlay besteht aus ca. 600 Zeilen Vanilla JavaScript, das Fabric.js von einem CDN für Canvas-Zeichnung lädt.

Element-Erkennung

Wenn man auf das Canvas klickt, muss das Overlay wissen, welches DOM-Element darunter liegt. Es versteckt temporär das Canvas und die Toolbar, ruft document.elementFromPoint() auf und stellt sie dann wieder her:

function getElementUnderPoint(x, y) {
  var canvasWrapper = fabricCanvas.wrapperEl;
  canvasWrapper.style.pointerEvents = 'none';
  if (toolbarEl) toolbarEl.style.pointerEvents = 'none';
  var element = document.elementFromPoint(x, y);
  canvasWrapper.style.pointerEvents = prevWrapper;
  if (toolbarEl) toolbarEl.style.pointerEvents = prevToolbar;
  return element;
}

CSS-Selektor-Generierung

Um Claude Code genau mitzuteilen, welches Element annotiert wurde, generiert das Overlay einen eindeutigen CSS-Selektor. Es geht den DOM-Baum nach oben durch und sammelt Tag-Namen und Klassennamen. Wenn Geschwister denselben Tag und dieselbe Klasse teilen, wird :nth-child() zur Unterscheidung hinzugefügt:

function getCssSelector(el) {
  if (el.id) return '#' + CSS.escape(el.id);
  const parts = [];
  let current = el;
  while (current && current !== document.body) {
    let seg = current.tagName.toLowerCase();
    if (current.className) {
      const classes = current.className.trim().split(/\s+/);
      seg += '.' + classes.map(c => CSS.escape(c)).join('.');
    }
    if (current.parentElement) {
      var siblings = Array.from(current.parentElement.children)
        .filter(s => s.tagName === current.tagName
          && s.className === current.className);
      if (siblings.length > 1) {
        var idx = Array.from(current.parentElement.children)
          .indexOf(current) + 1;
        seg += ':nth-child(' + idx + ')';
      }
    }
    parts.unshift(seg);
    current = current.parentElement;
  }
  return parts.join(' > ');
}

Das erzeugt Selektoren wie div.card:nth-child(2) > div.price, die präzise genug sind, damit Claude das richtige Element auch bei wiederholten Komponentenmustern findet.

Zeichenwerkzeuge mit verknüpften Kommentaren

Jedes Zeichenwerkzeug (Pfeil, Kreis, Box, Freihand) fragt nach dem Zeichnen nach einem Kommentar. Der Kommentar wird zusammen mit dem nächstgelegenen DOM-Element gespeichert. Bei Pfeilen wird das Element unter der Pfeilspitze als Ziel verwendet. Bei Kreisen und Boxen bestimmt der Mittelpunkt der Form das Zielelement. Diese Verknüpfung macht die Annotationen umsetzbar — Claude Code weiß sowohl was geändert werden soll als auch wo.

Das Annotations-JSON

Die finale Ausgabe ist eine flache JSON-Datei:

{
  "view": "/",
  "url": "http://localhost:8099/",
  "timestamp": "2026-03-10T16:49:37.583Z",
  "annotations": [
    {
      "type": "select",
      "selector": "div.card:nth-child(1) > h2",
      "comment": "make text blue",
      "tagName": "H2",
      "text": "Wireless Headphones"
    },
    {
      "type": "arrow",
      "comment": "make background purple",
      "nearSelector": "div.card:nth-child(1) > button.btn-primary"
    }
  ]
}

Jeder Annotationstyp trägt genug Kontext, damit die KI das Element lokalisieren und fixen kann: den CSS-Selektor, den Kommentar mit der gewünschten Änderung, den Tag-Namen, Klassen und eine Textvorschau.

Wie Claude Code Annotationen verarbeitet

Wenn man /redline dateiname.json ausführt, macht der Skill:

Findet die Datei in ~/Downloads/ (dem Standard-Download-Ort des Browsers)
Liest die Annotationen und gruppiert sie nach Quelldatei
Sucht für jede Annotation die Codebasis nach Selektor, Klassennamen und Textinhalt ab, um die Komponenten- oder Stildatei zu finden
Interpretiert den Kommentar und wendet den minimalen Fix an
Sendet parallele Agenten für Annotationen, die auf verschiedene Dateien abgebildet werden

Mehrdeutige Kommentare wie "fix this" oder "ugly" werden in der Zusammenfassung markiert, anstatt geraten zu werden. Nach der Verarbeitung erhält man eine Übersicht, was gefixt wurde und was noch Klärung braucht.

Design-Entscheidungen

Einige Entscheidungen, die wir während der Entwicklung getroffen haben:

Keine npm-Abhängigkeiten. Das Overlay lädt Fabric.js von einem CDN. Kein Installationsschritt, keine Build-Konfiguration, funktioniert in jedem Projekt.
Browser-Download für alle Plattformen. Wir haben zunächst versucht, Dateien direkt über Tauri's Dateisystem-API auf die Festplatte zu schreiben, haben dann aber auf Standard-Browser-Downloads vereinfacht. Das funktioniert identisch in Tauri-Webviews und normalen Browsern.
Dateiname in die Zwischenablage. Nach dem Speichern wird der Dateiname in die Zwischenablage kopiert. Man fügt ihn in Claude Code ein als /redline dateiname.json. Kein Pfad-Suchen nötig.
Setup und Verarbeitung getrennt. /redline setup ist ein einmaliger Befehl. /redline datei.json ist der tägliche Workflow. Der Verarbeitungsmodus prüft nie, ob das Overlay installiert ist — er liest einfach die Datei und fixt den Code, was den Token-Verbrauch niedrig hält.
Framework-agnostisch. Das Overlay ist reines JavaScript, das über ein Script-Tag injiziert wird. Es ist egal, ob man React, Vue, Svelte oder eine statische HTML-Seite verwendet.

Skill herunterladen

Redline ist als Claude Code Skill verfügbar unter seedr.toolr.dev/skills/redline. Installieren, /redline setup im Projekt ausführen und mit dem Annotieren beginnen.