ChatGPT Website-Editor: Bestehende Seite in Chrome korrigieren

Um ChatGPT als Website-Editor für ein bestehendes Projekt zu nutzen, verbinden Sie die Coding-Session sowohl mit der gerenderten Seite als auch mit ihrem Quellordner. Fordern Sie dann eine spezifische Änderung an, prüfen Sie den Datei-Diff und laden Sie die Seite neu. In Lizard Studio können Sie ein Element in Chrome auswählen und an das ChatGPT-Panel senden, das über die lokale Codex CLI läuft.

Dieser echte Lizard Studio Screenshot zeigt die Browser-Tools und die ChatGPT-Verbindung. Er illustriert die Oberfläche; die herunterladbare Übung unten nutzt eine separate lokale Seite.

Wir entwickeln Lizard Studio. Diese Anleitung enthält einen kleinen Mobile-Layout-Fehler, den Sie ohne App-Framework reproduzieren können. Wir haben das Beispiel im Browser und die verlinkte Produktdokumentation am 14. September 2026 geprüft. Das Beispiel validiert einen CSS-Fix, nicht die Geschwindigkeit oder Erfolgsrate eines Agenten.

Wählen Sie den Bearbeitungs-Workflow für Ihr Projekt

Wenn Sie eine Website innerhalb von ChatGPT erstellen und hosten möchten, prüfen Sie ChatGPT Sites. OpenAI dokumentiert den Start per Prompt oder aus einem kompatiblen bestehenden lokalen Projekt. Prüfen Sie die Kompatibilität, bevor Sie ein Projekt in diesen Workflow überführen. ChatGPT Sites Dokumentation.

Wenn Sie bereits ein Repository, einen Entwicklungsserver und einen Veröffentlichungsprozess haben, die Sie beibehalten möchten, nutzt diese Anleitung diese. Lizard Studio verbindet den Browser mit dem ausgewählten lokalen Ordner. Die zugrundeliegende Codex CLI kann Dateien inspizieren, Code bearbeiten und Befehle im Projekt ausführen. Codex CLI Dokumentation.

Ein Screenshot kann ein Problem beschreiben, identifiziert aber nicht die Datei, die für das Layout verantwortlich ist. Eine nützliche Bearbeitungssession prüft beides.

Seite und Quellordner verbinden

Schließen Sie die ChatGPT Setup-Anleitung ab: Erweiterung und lokalen Host installieren, bei der Codex CLI anmelden, dann in Lizard Studio ChatGPT und Ihren Projektordner auswählen. Erweiterung und Host sind kostenlos; Konto-Anforderungen des Anbieters und Nutzungslimits gelten weiterhin.

Starten Sie den Entwicklungsserver Ihres Projekts und öffnen Sie die lokale URL in Chrome. Fragen Sie vor einer Bearbeitungsanfrage:

Report the current page URL and the project folder you can edit.
Find the source file for this page. Do not change it yet.

Prüfen Sie diese Antworten. Eine deployed Seite und eine lokale Seite können identisch aussehen, während sie unterschiedlichen Code laden. Wenn die Session auf einen anderen Ordner zeigt, korrigieren Sie dies vor dem Fortfahren.

Für diese Übung laden Sie responsive-card.html in einen leeren lokalen Ordner herunter. Nutzen Sie den Befehl "Seite speichern unter" Ihres Browsers und wählen Sie "Nur HTML", oder speichern Sie die verlinkte Quelldatei. Stellen Sie diesen Ordner mit einem lokalen HTTP-Server bereit:

python3 -m http.server 8080

Öffnen Sie http://localhost:8080/responsive-card.html und wählen Sie jenen Ordner in Lizard Studio. Das Beispiel nutzt reines HTML und CSS. Die optionale Schriftart fällt auf Sans-Serif zurück, wenn sie allein heruntergeladen wird. Der Open-Button ist ein inaktives Beispiel-Steuerelement.

Mobile Overflow reproduzieren, bevor Sie einen Fix anfordern

Stellen Sie den Viewport auf 390 CSS-Pixel Breite ein, per Responsive Preview oder Chrome DevTools. Die Karte enthält einen langen Dateinamen und einen Open-Button. Der Name beansprucht mehr Platz als die Reihe verfügbar hat, und die Seite scrollt horizontal.

Wählen Sie die Karte mit dem Selektor. Das angehängte Element hilft, den gerenderten Container zu identifizieren, der Aufmerksamkeit benötigt. Bei einem größeren Problem annotieren Sie einen Screenshot, um sowohl auf den Dateinamen als auch den Button hinzuweisen.

Inspektor und Toolbar in der bestehenden Studio-Session. Nutzen Sie diese Steuerelemente, um Ihre eigene Karte zu inspizieren; die hier gezeigten Werte gehören zum in dem Screenshot gewählten Element.

Geben Sie dem Agenten ein Ergebnis, das er prüfen kann:

At a viewport width of 390px, the selected file card makes the
page scroll horizontally. Find the cause in responsive-card.html
and fix the source CSS.

Keep the full file name readable and the Open button visible.
Keep the colors, labels and desktop layout. Do not hide overflow
on the page or shrink the font to make the content fit.

Show the diff. Reload and check the page at 390px and 1280px.
Report the viewport width and the document scroll width at each.

Die letzten Zeilen sind entscheidend: Overflow zu verstecken kann einen Scrollbalken entfernen, während ein Teil eines Steuerelements außer Reichweite bleibt. Das Ziel umfasst lesbaren Inhalt und einen nutzbaren Button.

CSS-Änderung prüfen

In diesem Fixture ist .file-info ein Flex-Item. Seine Standard-Mindestgröße und der lange Dateiname verhindern, dass die Reihe in die schmale Karte passt. Ein kleiner Fix lässt das Item schrumpfen und den Namen dort umbrechen, wo nötig:

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  margin: 0;
  color: #e9edf4;
  overflow-wrap: anywhere;
}

Dies ist die Antwort für dieses Beispiel, keine Regel, die man jedem Element einer Website hinzufügen sollte. In einem anderen Projekt können eine feste Breite, ein Grid-Track oder ein Bild den Overflow verursachen. Fordern Sie den Agenten auf, die Regel zu identifizieren, bevor er einen Fix anwendet.

Lesen Sie den Quell-Diff. Er sollte Dateinamen, Button-Label und Farben beibehalten. Er sollte der Seite keine overflow-x: hidden hinzufügen, den Namen nicht kürzen und die geteilte Typografie nicht ändern, um diese Übung zu bestehen.

Ergebnis nach Neuladen prüfen

Bei 390 px sollte der vollständige Name in seinem Teil der Karte umbrechen. Der Open-Button sollte innerhalb der Karte bleiben. Bei 1280 px prüfen Sie, dass die Desktop-Reihe noch korrekt aussieht.

Sie können diese schreibgeschützte Prüfung in der Browser-Konsole ausführen oder den Agenten bitten, die gleichen Werte zu melden:

({
  viewportWidth: document.documentElement.clientWidth,
  scrollWidth: document.documentElement.scrollWidth,
  hasHorizontalOverflow:
    document.documentElement.scrollWidth >
    document.documentElement.clientWidth
})

Das korrigierte Fixture sollte hasHorizontalOverflow: false an beiden Breiten melden. Inspizieren Sie auch die Karte selbst: Eine Prüfung der Dokumentbreite allein kann nicht beweisen, dass jedes Element lesbar bleibt.

Laden Sie einmal mehr neu. Wenn der Fehler zurückkehrt, bestätigen Sie, dass der Agent die Datei bearbeitet hat, die Ihr Server ausliefert. Eine Änderung, die nur auf dem Live-DOM angewendet wurde, verschwindet meist, wenn der Browser die Quelle neu lädt.

Wir haben das Original und das korrigierte Fixture bei 390 px und 1280 px geprüft, einschließlich Dokument-Overflow, Button-Grenzen und unverändertem Text. Sie können diese Prüfung mit der verlinkten Startdatei und dem obigen CSS wiederholen. Wir haben keinen kontrollierten Vergleich zwischen Agenten durchgeführt.

Diese Messungen nutzen Chromium mit der Geist-Schriftart der Website geladen. Eine heruntergeladene Kopie kann die Fallback-Schriftart nutzen und eine andere ursprüngliche Breite erzeugen; prüfen Sie die gleichen Akzeptanzkriterien.

Vom Beispiel zur eigenen Website

Wählen Sie ein Problem und benennen Sie die betroffene Route, den Viewport und das erwartete Ergebnis. Bei einer React-App könnte der Fix in einer Komponente, einem CSS-Modul oder einer Utility-Klasse liegen. Geben Sie der Session Zugriff auf das tatsächliche Projekt und fordern Sie sie auf, jene Quelle zu lokalisieren.

Nach dem lokalen Prüfen führen Sie die Prüfungen aus, die Ihr Projekt normalerweise benötigt. Eine geteilte Karte kann auf mehreren Routen auftauchen; inspizieren Sie eine weitere Verwendung davon vor dem Commit. Veröffentlichen Sie über Ihren gewohnten Release-Prozess, wenn die Änderung bereit ist. Das Bearbeiten einer lokalen Datei aktualisiert Ihre deployed Website nicht von selbst.

Wenn Sie noch ein Browser-Tool wählen, lesen Sie ChatGPT Chrome-Erweiterungen für Entwickler. Es vergleicht die offizielle Erweiterung und Lizard Studio anhand des jeweils dokumentierten Workflows.

Häufige Fragen

Kann ChatGPT eine bestehende Website bearbeiten?

Ja, wenn das gewählte Tool Zugriff auf das Projekt oder seinen Editor hat. Diese Anleitung nutzt einen lokalen Quellordner über die Codex CLI-Verbindung von Lizard Studio. Für ChatGPT Sites prüfen Sie, ob das bestehende Projekt in den unterstützten Workflow passt.

Kann es CSS aus einem Screenshot korrigieren?

Ein Screenshot hilft, das sichtbare Problem zu erklären. Geben Sie der Session die Quelle und eine Möglichkeit, das gerenderte Ergebnis zu inspizieren. Bei Overflow geben Sie die Viewport-Breite an und welchen Inhalt lesbar bleiben muss.

Ist Lizard Studio die offizielle ChatGPT-Erweiterung?

Nein. Lizard Studio ist eine unabhängige, Open-Source-Erweiterung. OpenAI hat eine separate offizielle Erweiterung; siehe den Entwickler-Vergleich.

Ändert ein lokaler Edit die Live-Website?

Erst nachdem Sie den geänderten Quellcode durch den Release-Prozess dieser Website veröffentlichen. Testen Sie das lokale Ergebnis, prüfen Sie den Diff und verifizieren Sie die deployed Route nach der Veröffentlichung.