Lizard Studio installieren

Lizard Studio ist eine kostenlose Chrome-Erweiterung, die Claude Code oder ChatGPT mit der Seite verbindet, die Sie gerade erstellen. Öffnen Sie einen Chat neben der Seite, wählen Sie ein Element aus und bitten Sie den Agenten, die Dateien in Ihrem lokalen Projekt zu bearbeiten. Die Erweiterung enthält Seiteninspektion, Anmerkungen, Lineale, eine Farbpipette und Browser-Debugging-Tools.

Diese Anleitung führt Sie von der Installation bis zu einer Quellcodeänderung, die ein Neuladen der Seite übersteht. Ein Beispiel zum Herunterladen finden Sie im visuellen Bearbeitungsleitfaden für Claude Code.

Das benötigen Sie

Google Chrome auf macOS, Windows oder Linux.
Node.js und npm. Der lokale Host setzt Node.js 18 oder höher voraus; Ihr gewählter Agent kann eine höhere Anforderung haben. Verwenden Sie eine Node.js-Version, die beide unterstützen.
Die lokale CLI für Claude Code oder ChatGPT, angemeldet mit Ihrem eigenen Konto.
Einen lokalen Projektordner. Damit Quellcodeänderungen im Browser sichtbar werden, starten Sie den Entwicklungsserver dieses Projekts und öffnen dessen URL.

Die Erweiterung und der Host sind kostenlos und unter der MIT-Lizenz veröffentlicht. Die Nutzung des Modells unterliegt den Kontoanforderungen, Limits und Gebühren Ihres Anbieters. Sie benötigen kein Lizard-Konto, um Lizard Studio zu verwenden.

1. Die Chrome-Erweiterung hinzufügen

Öffnen Sie Lizard Studio im Chrome Web Store und wählen Sie Zu Chrome hinzufügen. Heften Sie die Erweiterung an, wenn Sie sie über die Symbolleiste erreichen möchten.

Die Symbolleiste stellt die Design-Tools bereit; das Seitenpanel von Chrome enthält Ihre Chats. Die Installation aus dem Store erfordert keinen Entwicklermodus.

2. Ihren Agenten installieren

Wählen Sie den Agenten, den Sie verwenden möchten. Den anderen können Sie später hinzufügen.

Für Claude Code folgen Sie der offiziellen Einrichtungsanleitung. Prüfen Sie die Installation in einem Terminal:

claude --version

Für ChatGPT in Lizard Studio installieren Sie die Codex CLI:

npm install -g @openai/codex
codex --version

Lizard Studio bezeichnet diesen Agenten in der Benutzeroberfläche als ChatGPT. Das Paket und der Terminalbefehl verwenden den Namen Codex. Dies ist ein lokaler Coding-Agent, der mit Ihrem Projekt verbunden ist; die Website chatgpt.com wird dabei nicht eingebettet.

Öffnen Sie den gewählten Agenten und schließen Sie dessen Anmeldeablauf ab, bevor Sie fortfahren. Unterstützte Verbindungswege finden Sie im Lizard Studio README.

3. Den lokalen Host installieren

Führen Sie diesen Befehl einmal in einem Terminal aus:

npx @lizard-build/lizard-studio-host install

Der Host verbindet die Chrome-Erweiterung mit dem Agenten auf Ihrem Computer. Das Installationsprogramm kopiert den Host nach ~/.lizard-studio/host und registriert ihn beim Browser. Lassen Sie Node.js installiert: Der Browser verwendet es, um den Host zu starten.

Öffnen Sie das Seitenpanel der Erweiterung nach der Installation erneut. Wenn Sie einen vorhandenen Host aktualisiert haben, öffnen Sie das Panel erneut, bevor Sie einen neuen Chat starten.

4. Die Seite mit ihrem Projekt verbinden

Starten Sie den Entwicklungsserver Ihres Projekts mit dem üblichen Befehl. Öffnen Sie die ausgegebene URL in Chrome und öffnen Sie dann Lizard Studio auf diesem Tab.

Starten Sie einen Chat, wählen Sie Claude Code oder ChatGPT und wählen Sie den Ordner, der den Quellcode dieses Projekts enthält. Jeder Chat behält seinen eigenen Projektordner und seine eigenen Berechtigungen. Ein Tab mit der richtigen Seite teilt dem Agenten nicht automatisch mit, welches lokale Repository geändert werden soll.

Bevor Sie um eine Bearbeitung bitten, prüfen Sie die Verbindung mit einer schreibgeschützten Anfrage:

Read this page's title and inspect its main heading. Tell me which
local project folder you are using. Do not change any files yet.

Wenn der Agent den falschen Ordner nennt, korrigieren Sie die Auswahl, bevor Sie fortfahren.

5. Ein Element auswählen und eine Änderung vornehmen

Wählen Sie Selector in der Seiten-Symbolleiste und klicken Sie auf das Element, das Sie ändern möchten. Die Auswahl fügt dem Chat Kontext hinzu. Bei einem visuellen Problem, das mehrere Elemente betrifft, verwenden Sie Annotate, um den Bereich zu markieren und den Screenshot dem Chat hinzuzufügen.

Probieren Sie eine Anfrage mit messbarem Ergebnis aus:

Find the source for the selected card's action row. Set the gap
between its buttons to 24px in the project files. Keep the button
labels and colors unchanged. Show the diff, then inspect the
rendered row to check its computed gap.

Lesen Sie die vorgeschlagenen Dateiänderungen und verwenden Sie die Berechtigungssteuerung, um die gewünschte Arbeit zu genehmigen. Ihr Berechtigungsmodus bestimmt, welche Aktionen eine separate Aufforderung benötigen.

Wenn Ihr Entwicklungsserver die Seite neu lädt, prüfen Sie das Ergebnis. Falls sie nicht automatisch neu lädt, aktualisieren Sie Chrome.

6. Prüfen, dass die Änderung bestehen bleibt

Eine temporäre DOM-Änderung kann korrekt aussehen, bis Sie die Seite aktualisieren. Eine Quellcodeänderung ändert die Dateien, die Ihr Entwicklungsserver ausliefert.

Prüfen Sie den Datei-Diff in Ihrem Editor oder führen Sie git diff im Projektordner aus. Aktualisieren Sie die Seite und prüfen Sie dasselbe Element erneut. Im obigen Beispiel sollte der berechnete Abstand weiterhin 24px sein. Prüfen Sie sowohl Desktop- als auch schmale Layouts, bevor Sie die Änderung beibehalten.

Das Bearbeiten eines lokalen Projekts aktualisiert keine bereitgestellte Website. Stellen Sie separat bereit, wenn die Änderung live gehen soll.

Wenn die Verbindung fehlschlägt

Was Sie sehen	Was Sie prüfen sollten
Das Seitenpanel kann den Host nicht erreichen	Führen Sie das Host-Installationsprogramm aus, prüfen Sie, ob Node.js verfügbar ist, und öffnen Sie dann das Panel erneut.
Der Agent kann nicht starten	Prüfen Sie `claude --version` oder `codex --version` in einem Terminal und schließen Sie die Anmeldung dieses Agenten ab.
Der Agent sieht die Seite, kann aber ihren Code nicht finden	Wählen Sie den richtigen lokalen Ordner und prüfen Sie, ob der Tab den Entwicklungsserver dieses Projekts verwendet.
Eine Änderung verschwindet nach dem Aktualisieren	Prüfen Sie den Diff. Bitten Sie um eine Quellcodeänderung, wenn der Agent nur das Live-DOM geändert hat.
Die Symbolleiste erscheint nicht auf einer Chrome-Einstellungsseite	Chrome blockiert Content-Scripts auf Seiten unter `chrome://`, auf der Seite “Neuer Tab” und im Chrome Web Store. Öffnen Sie eine normale Website.

Unter macOS vermeidet der Host-Speicherort in ~/.lizard-studio/host außerdem Einschränkungen, auf die Chrome stoßen kann, wenn ein Host unter Desktop, Dokumente oder Downloads gestartet wird. Weitere Details finden Sie in den Host-Hinweisen im README.

Wohin Ihre Daten gehen

Die Erweiterung und der Host laufen auf Ihrem Computer. Der ausgewählte Modellanbieter erhält die Anfragen, die Sie über seinen Agenten senden. Lizard Studio verwendet keinen Lizard-Chatserver und sammelt keine Telemetrie. Eine lokale Installation bedeutet nicht, dass ein Cloud-Modell Ihre Prompts lokal verarbeitet. Lesen Sie die Datenschutzerklärung von Lizard Studio, bevor Sie es mit einem Projekt verwenden, das Datenbeschränkungen hat.