Claude Code visueller Editor: Element auswählen und CSS korrigieren

Chrome mit Lizard Studio: Seite, Inspector und Chat bleiben in einem Fenster. Dieser Screenshot zeigt die ChatGPT-Verbindung.

Ein visueller Editor für Claude Code sollte Ihnen helfen, den Teil einer Seite zu identifizieren, den Sie ändern möchten, und das Ergebnis im Quellcode zu prüfen. In Lizard Studio wählen Sie ein Element in Chrome aus, fügen es einem Chat hinzu und bitten Claude Code, Ihr lokales Projekt zu bearbeiten. Der Browser bleibt neben dem Gespräch, damit Sie das Ergebnis inspizieren können.

Diese Anleitung nutzt eine kleine Abstands-Übung mit einem messbaren Ergebnis: Ändern Sie den Abstand zwischen zwei Buttons von 4px auf 24px. Sie prüfen den Quellcode-Diff, laden die Seite neu und inspizieren den Gap erneut. Es ist eine reproduzierbare Übung, kein Performance-Benchmark und keine Aussage darüber, wie schnell ein Agent Ihr Projekt abschließt.

Wir bauen Lizard Studio. Seine Extension und der Host sind kostenlos und MIT-lizenziert; die Kontoanforderungen und Nutzungsgebühren Ihres KI-Anbieters gelten weiterhin. Schließen Sie die Setup-Anleitung ab, bevor Sie die unten stehenden Agent-Schritte ausprobieren.

Was visueller Bearbeitung hier bedeutet

Lizard Studio nutzt einen Element-Selektor und Design-Tools, um dem Agenten Kontext zu geben. Sie beschreiben eine Quellcode-Änderung; Claude Code führt die Dateibearbeitung aus. Dieser Workflow unterscheidet sich davon, ein Element manuell zu ziehen und zu erwarten, dass der Editor sofort das entsprechende CSS schreibt.

Der Selektor kann das Ziel auf der Seite identifizieren. Eine Annotation kann ein Problem zeigen, das einen größeren Bereich abdeckt. Lineale, Abstandsmessungen und Responsive-Vorschau helfen Ihnen, ein Layout zu prüfen. Der lokale Agent verbindet diesen Seitenkontext mit Ihren Projektdateien. Das README listet die Tools und Verbindungsanforderungen auf.

Wenn direktes Drag-and-Drop-Bearbeiten Ihre Hauptanforderung ist, vergleichen Sie die Steuerungen vor der Tool-Wahl. Diese Übung testet das Auswählen eines Elements, das Anfordern einer Änderung und das Überprüfen des Quellcodes.

Beispiel herunterladen

Sie benötigen Python 3 für den kleinen statischen Server, der hier verwendet wird, Chrome, Lizard Studio und eine angemeldete Claude Code-Installation. Für eine bestehende App nutzen Sie stattdessen deren normalen Entwicklungsserver.

Erstellen Sie einen leeren Ordner für die Übung. Laden Sie spacing.html mit Seite speichern unter Ihres Browsers herunter, oder führen Sie dies im Ordner aus:

curl -fsS https://lizard.build/studio-examples/spacing.html -o spacing.html
python3 -m http.server 4175 --bind 127.0.0.1

Öffnen Sie http://127.0.0.1:4175/spacing.html in Chrome. Lassen Sie den Server laufen, während Sie arbeiten. Falls Port 4175 belegt ist, wählen Sie einen anderen Port und nutzen Sie diese Nummer in der URL.

Die Seite hat zwei Beispiel-Buttons ohne Aktionen. Ihre Reihe nutzt bewusst dieses CSS:

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 24px;
}

Wählen Sie diesen Ordner in Lizard Studio, damit der Agent spacing.html bearbeiten kann. Das Öffnen der Übung auf lizard.build zeigt nur die veröffentlichte Übung; das Ändern Ihrer heruntergeladenen Kopie erfordert die lokale URL.

Die zu ändernde Reihe auswählen

Starten Sie einen Claude Code-Chat im Seiten-Panel. Nutzen Sie Selector und fügen Sie die .actions-Reihe an, die beide Buttons enthält. Falls Sie versehentlich einen Button auswählen, wählen Sie seine Eltern-Reihe oder erklären Sie, dass der Gap der Reihe das Ziel ist.

Sie können vor dem Bearbeiten einen schreibgeschützten Prüfen anfordern:

Inspect the selected action row. Report its computed gap and the
local file that defines it. Do not change any files yet.

Der initiale Gap sollte 4px betragen. Die Quelle ist das Stylesheet in Ihrer heruntergeladenen spacing.html. Falls der Agent eine andere Datei oder Seite meldet, korrigieren Sie den Projektordner oder Browser-Tab, bevor Sie eine Bearbeitung anfordern.

Ausschnitte aus der Lizard Studio-Oberfläche zeigen den Style-Inspector und die Seiten-Toolbar. Diese Werte gehören zum ausgewählten Element auf der ChatGPT-Übersichtsseite; die Abstands-Übung nutzt eine separate lokale Datei.

Kleine Quellcode-Änderung anfordern

Senden Sie die ausgewählte Reihe mit einer Anfrage, die Ergebnis und Umfang benennt:

Set the selected action row's gap to 24px in spacing.html.
Keep the button labels, colors and card margin unchanged.
Show the source diff. Refresh the page and check that the
computed gap is 24px.

Prüfen Sie den vorgeschlagenen Edit des Agenten. Die relevante Änderung sollte äquivalent zu:

- .actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 24px; }
+ .actions { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; }

Der Agent kann das Stylesheet neu formatieren. Prüfen Sie die tatsächlichen Deklarationen, statt das gleiche Zeilenlayout wie in diesem Beispiel zu fordern. Es sollte keinen Grund geben, ein Button-Label oder die .card-Regel für diese Aufgabe zu ändern.

Nutzen Sie die Berechtigungssteuerung Ihrer Session, um den beabsichtigten Edit zu genehmigen. Eine eng gefasste Anfrage macht den Diff leichter beurteilbar, ersetzt aber nicht die Prüfung des Ergebnisses.

Das echte Anfrage-Feld zeigt ein angehängtes Element als „1 selection“. Dieser Screenshot nutzt ChatGPT und eine Helligkeits-Anfrage; für diese Übung wählen Sie Claude Code und nutzen die obige Abstands-Anfrage.

Seite nach Refresh prüfen

Der Python-Server bietet kein Hot Reload. Laden Sie Chrome nach den Dateiänderungen neu, und bitten Sie den Agenten dann, .actions erneut zu inspizieren.

Sie können den berechneten Wert auch in Chrome DevTools prüfen:

getComputedStyle(document.querySelector('.actions')).gap
// Expected: "24px"

Prüfen Sie sowohl Desktop als auch einen schmalen Viewport. Die Beispiel-Reihe nutzt flex-wrap: wrap, sodass Buttons bei begrenztem Platz in eine neue Zeile rutschen können. Bestätigen Sie bei jeder Breite, dass die Seite keinen horizontalen Überlauf hat und beide Labels sichtbar bleiben.

Nutzen Sie diese Akzeptanz-Checkliste:

• Der lokale Quellcode enthält gap: 24px für .actions.
• Ein Seiten-Refresh behält den neuen Gap bei.
• Button-Text und Farben bleiben unverändert.
• Der .card-Margin bleibt 32px.
• Die Seite bleibt bei schmaler Breite nutzbar.

Falls das Projekt Git nutzt, lesen Sie git diff. Für diese eigenständige Datei kann die Vergleichsansicht Ihres Editors die gleiche Änderung zeigen. Die Übung ist abgeschlossen, wenn Datei und Browser übereinstimmen.

Warum eine Änderung verschwinden kann

Ein Browser-Tool kann das live DOM ändern oder einen Inline-Style hinzufügen, ohne eine Projektdatei zu ändern. Das hilft beim Vorschau einer Idee, aber der Browser lädt beim Refresh den ursprünglichen Quellcode erneut.

Falls das Ergebnis verschwindet, fragen Sie den Agenten, welche Datei er bearbeitet hat. Prüfen Sie, dass der Browser den lokalen Server nutzt und dass der ausgewählte Ordner die servierte Datei enthält. Eine App kann auch eine spezifischere CSS-Regel oder einen Inline-Style haben, der die bearbeitete Deklaration überschreibt.

Bei React oder einem anderen Framework kann die Quelle eine Komponente, ein CSS-Modul oder eine Utility-Klasse sein statt eines eigenständigen Stylesheets. Bitten Sie den Agenten, die Regel zu finden, die den Abstand steuert. Vermeiden Sie eine globale Button-Regel, wenn nur eine Aktions-Reihe geändert werden soll.

Derselbe Weg für ein echtes UI-Problem

Wählen Sie ein Problem mit einem beschreibbaren Ergebnis: eine Card, die bei einer angegebenen Breite überläuft, eine Überschrift, die in ihren Container umbrechen soll, oder eine Button-Reihe mit falscher Ausrichtung. Hängen Sie das relevante Element oder einen annotierten Screenshot an und benennen Sie, was unverändert bleiben soll.

Bei einem Verhaltensfehler bitten Sie den Agenten, die Aktion zu reproduzieren und Console- und Network-Ausgabe zu inspizieren. Ein Screenshot kann nicht zeigen, ob ein Event-Handler lief oder ein Request fehlschlug. Lizard Studio beinhaltet diese Browser-Tools; der Vergleich mit Claude in Chrome erklärt die verschiedenen Setups.

Sie können die Übung auch mit ChatGPT im Seiten-Panel durchführen. Behalten Sie dieselbe Startdatei und Akzeptanzkriterien bei, wenn Sie die beiden Agenten vergleichen wollen. Dokumentieren Sie fehlgeschlagene Versuche und Klarstellungen, und ziehen Sie keine Geschwindigkeits-Schlüsse aus einem einzelnen Lauf.

Häufige Fragen

Benötigt Claude Code einen Screenshot, um CSS zu bearbeiten?

Ein Screenshot kann helfen, ein visuelles Problem zu erklären. In diesem Workflow liefern das ausgewählte Element und die live Seiteninspektion DOM- und Style-Kontext, während der lokale Ordner den Quellcode liefert. Nutzen Sie die Eingaben, die helfen, Ihr spezifisches Problem zu identifizieren.

Kann ich jede Website dauerhaft bearbeiten?

Sie benötigen Zugriff auf das Quellprojekt, um eine Quellcode-Änderung beizubehalten, und Sie müssen es deployen, um eine Live-Website zu aktualisieren. Das Inspektieren einer Drittanbieter-Seite gewährt weder Berechtigung noch Repository-Zugriff.

Ist dies ein Ersatz für meinen Editor?

Sie können Ihren Editor weiter für Code und Diffs nutzen. Lizard Studio liefert das Browser-Seiten-Panel und Seiten-Tools. Vergleichen Sie die anderen Schnittstellen-Wahlmöglichkeiten im Claude Code GUI Anleitung.

Wo fange ich an, wenn sich das Panel nicht verbindet?

Folgen Sie der Installations- und Troubleshooting-Anleitung. Prüfen Sie den lokalen Host, Ihr Agent-Login und den gewählten Projektordner, bevor Sie einen Quellcode-Edit testen.