Nutze ChatGPT in Chrome, um deine lokale Website zu bearbeiten

Lizard Studio stellt ChatGPT in einem Chrome-Seitenbereich bereit, mit Zugriff auf deine aktive Seite und einen lokalen Projektordner. Wähle ein Element aus, bitte um eine Änderung und prüfe den Quellcode-Diff, während die Seite sichtbar bleibt. Die Verbindung nutzt die lokale Codex CLI, die in Lizard Studio als ChatGPT erscheint.

Eine echte Lizard Studio-Sitzung mit der ChatGPT-Verbindung. Lizard Studio ist eine unabhängige Erweiterung; OpenAI bietet auch eine eigene ChatGPT-Browsererweiterung an. Lies den Entwickler-Vergleich, um einen Workflow zu wählen.

Die Erweiterung und der Host sind kostenlos und Open Source. Dein gewähltes KI-Konto stellt den Agenten und den Modellzugriff bereit; dessen Limits und Gebühren gelten weiterhin. Lizard Studio installieren oder der vollständigen Einrichtungsanleitung folgen.

Was kann ChatGPT mit der Seite tun?

Du kannst den Agenten bitten, das DOM zu inspizieren, Konsolen- und Netzwerkausgaben zu lesen, Screenshots zu erstellen und mit der Seite zu interagieren. Die Design-Toolbar fügt einen Element-Selektor, Annotationen, Lineale, Abstandsmessungen, eine Farbpipette und eine Responsiv-Vorschau hinzu. Der Chat kann diesen Kontext nutzen, wenn er Dateien in deinem gewählten Ordner bearbeitet.

Zum Beispiel kannst du einen Button anhängen und den Agenten bitten, dessen Quelle zu finden, seinen Abstand zu ändern und das gerenderte Ergebnis zu prüfen. Du kannst auch einen markierten Screenshot anhängen, wenn das Problem mehrere Elemente betrifft. Das Lizard Studio README beschreibt die Browser-Tools und die lokale Verbindung.

Das ist nützlich, wenn eine Aufgabe Seitenkontext und Codezugriff kombiniert. Eine Frage wie „Warum bricht dieser Button um?“ benötigt sowohl das gerenderte Layout als auch die Regeln, die es erzeugen. Gib dem Agenten die ausgewählte Zeile und das gewünschte Ergebnis, dann prüfe, was er ändert.

Warum erwähnt die Einrichtung Codex?

ChatGPT ist der Name im Panel; Codex ist die lokale CLI, die die Coding-Sitzung ausführt. Installiere die CLI, melde dich an und verbinde den lokalen Host. Der Paketname, der Terminal-Befehl und Pfade wie ~/.codex/config.toml behalten ihre Codex-Namen.

Lizard Studio bettet chatgpt.com nicht in einen iframe ein und stellt keine eigene Modellnutzung bereit. Diese Unterscheidung ist wichtig bei der Wahl einer ChatGPT-Seitenleiste: Um eine lokale Quelldatei zu bearbeiten, braucht das Werkzeug eine Verbindung zu dieser Datei, nicht nur die Fähigkeit, über die sichtbare Seite zu diskutieren.

ChatGPT mit deinem lokalen Projekt verbinden

1. Lizard Studio aus dem Chrome Web Store hinzufügen.
2. Codex CLI mit npm install -g @openai/codex installieren und den Login abschließen.
3. npx @lizard-build/lizard-studio-host install ausführen, um den lokalen Host zu registrieren.
4. Entwicklungsserver deiner Website starten und deren URL in Chrome öffnen.
5. Lizard Studio öffnen, einen Chat starten, ChatGPT wählen und den Ordner auswählen, der den Code dieser Website enthält.

Der Host unterstützt macOS, Windows und Linux. Er benötigt Node.js; lies die Einrichtungsanleitung für Voraussetzungen und Verbindungsfehlerbehebung.

Bevor du eine Änderung machst, bitte den Agenten, den aktuellen Seitentitel und seinen Projektordner zu melden. Wenn einer davon falsch ist, korrigiere zuerst den Tab oder den Ordner. Eine Seite auf einer produktiven Domain kann identisch zu deiner lokalen Version aussehen, aber andere Dateien ausliefern.

CSS-Änderung mit überprüfbarem Ergebnis testen

Nutze deine eigene Seite oder lade das Beispiel aus der Visuellen Bearbeitungs-Anleitung herunter. Dieses Beispiel hat eine Aktionszeile mit einem 4px-Abstand. Die Aufgabe ist, ihn auf 24px zu setzen, indem du die Quelle bearbeitest. Bei einem Mobile-Layout-Problem folge der ChatGPT Website-Bearbeitungs-Anleitung: Repariere eine Dateikarte, die bei 390 px überläuft, und verifiziere dann Quelle und Seite bei zwei Breiten.

Wähle die Aktionszeile mit Selektor und sende:

Change the gap between the selected row's buttons to 24px.
Edit the local source file, show the diff and check the computed
gap after the page refreshes. Keep the labels, colors and the
space between other cards unchanged.

Prüfe den Diff, bevor du ihn akzeptierst. Ein nützliches Ergebnis ändert die Regel, der die Aktionszeile gehört, statt den Abstand bei jedem Button auf der Seite zu erhöhen. Prüfe die Seite auch bei schmaler Breite: Die Buttons sollten noch passen oder wie vorgesehen umbrechen.

Einmal neu laden. Wenn der Abstand wieder auf 4px zurückkehrt, prüfe, welche Datei geändert wurde und welche URL der Browser ausliefert. Bitte den Agenten, den berechneten Stil erneut zu lesen. Das gewünschte Ergebnis ist eine kleine Dateiänderung plus ein sichtbares, persistentes Resultat.

Temporäre Seitenänderungen und Quelländerungen

Fordere explizit eine Quelländerung an, wenn du das Ergebnis behalten willst. Seitenzugriff allein gewährt keinen Zugriff auf den Quellcode einer Seite, die dir nicht gehört. Du kannst eine Referenzseite inspizieren, aber dauerhafte Änderungen erfordern Zugriff auf ihr Projekt und einen Release-Prozess.

Was unterscheidet die beiden Agenten?

Sowohl Claude Code als auch ChatGPT können die Browser-Verbindung und den Design-Kontext in Lizard Studio nutzen. Wähle den Agenten, dessen Konto und Projekt-Setup du bereits nutzt.

Einige Chat-Funktionen unterscheiden sich: Das README listet Remote Control und das Bearbeiten vergangener Nachrichten für Claude Code auf und sagt, dass diese Funktionen im ChatGPT-Panel nicht verfügbar sind. Prüfe die aktuellen Funktionshinweise, bevor du dich aufgrund einer bestimmten Chat-Steuerung entscheidest. Für eine breitere Auswahl an Oberflächen lies den Claude Code GUI-Vergleich.

Häufige Fragen

Kann ich mein bestehendes ChatGPT-Konto nutzen?

Verbinde dich über den unterstützten Anmelde-Flow der Codex CLI. Dein Konto muss Zugriff auf den gewählten Agenten bieten; Lizard Studio stellt kein Abonnement bereit und ändert keine Anbieter-Limits.

Brauche ich ein Lizard-Konto?

Nein. Du verbindest deinen eigenen Agenten und lokalen Ordner. Ein Lizard-Konto ist getrennt von der Nutzung der Erweiterung.

Bleibt mein Code auf meinem Computer?

Deine Projektdateien bleiben in ihrem lokalen Ordner, und die Erweiterung und der Host laufen lokal. Anfragen an ein Cloud-Modell können Code und Seitenkontext enthalten. Lizard Studio betreibt keinen Chat-Server; der gewählte Anbieter verarbeitet die Anfragen. Lies die Datenschutzrichtlinie für den Datenfluss.

Funktioniert das als Drag-and-Drop-Page-Builder?

Der dokumentierte Workflow ist, die Seite auszuwählen oder zu annotieren und den Agenten den Code bearbeiten zu lassen. Die Toolbar hilft beim Inspektieren und Messen des Designs. Nutze die Visuelle Bearbeitungs-Anleitung, um diesen Workflow vor der Entscheidung für dein Projekt zu testen.