Wie du von ChatGPT generiertes HTML bearbeitest

ChatGPT hat dir gerade eine ganze HTML-Seite hingelegt — Header, Hero, eine Reihe Feature-Karten, ein Footer. Sie ist gut. Zu fünfundneunzig Prozent gut. Aber auf einem Button steht Loslegn, und deine Hand ist schon auf dem Weg zum Chatfeld, um korrigier den Tippfehler und generier neu zu tippen.

Lass es.

Hier der schnellere Weg. Um das HTML zu bearbeiten, das ChatGPT geschrieben hat, prompte für den Kleinkram nicht neu — du speicherst seinen Code als .html-Datei und öffnest diese Datei in einem visuellen Editor, wo du Text und Code direkt änderst. Der Tippfehler, ein falscher Link, eine schiefe Farbe — korrigier das in der Datei und lass die anderen 95 % in Ruhe.

Der Rest hier ist die eigentliche Anleitung, plus die zwei, drei Stellen, an denen Leute ausrutschen.

verlang die ganze Seite in einer Datei

Bevor du irgendwas speicherst, zählt eine Sache mehr, als sie klingt. Bitte ChatGPT, die ganze Seite in einer einzigen Datei zu halten — das HTML, das Styling und jedes bisschen JavaScript, alles inline, alles in einem Block.

Warum der Aufwand? Weil eine einzelne Datei etwas ist, das du öffnen und in der Hand halten kannst. Eine .html, eine Seite, fertig. In dem Moment, in dem ChatGPT sie in eine styles.css, eine script.js und einen Ordner voller Teilstücke zerlegt, bearbeitest du keine Seite mehr — du ringst mit einem kleinen Projekt, und das braucht ein Code-Setup, um das es hier nicht geht.

Also sag's beim Prompten klar. Sowas wie pack das ganze CSS und JS inline in eine HTML-Datei, keine externen Dateien. Du kriegst einen einzigen Codeblock zurück. Das ist die Form, die du willst.

hol sie aus dem Chat und auf deine Festplatte

Der Code im Chatfenster ist noch keine Datei. Er ist Text über eine Datei.

Kopier den ganzen Block — in seiner Ecke sitzt ein Kopiersymbol. Öffne irgendeinen reinen Texteditor, füg ein, und speicher als page.html. Der Name ist egal. Das .html am Ende nicht.

Eine Falle unter Windows. Manche Editoren schmuggeln ein .txt dran, ohne es dir zu sagen, und du landest bei page.html.txt — das ist keine Webseite, das ist ein Textdokument im Kostüm. Schalt die Dateiendungen in deiner Ordneransicht ein und prüf nach. Hat ChatGPT die Seite in seinem Canvas statt in einem Chatblock gebaut, überspring das alles und nimm einfach seinen Download-Button.

öffne sie da, wo du sie wirklich sehen kannst

Jetzt doppelklick die Datei. Sie öffnet sich in deinem Browser, und da ist deine Seite, Button-Tippfehler und alles.

Hier der Haken, der jeden einmal erwischt. Diese Browser-Ansicht ist schreibgeschützt. Du kannst schauen, nicht anfassen. Um irgendwas zu ändern, musst du die Datei in einem Editor öffnen, nicht bloß ansehen.

Du hast zwei Sorten. Ein Code-Editor zeigt dir die rohen Tags, prima, wenn du HTML zum Spaß liest. Ein visueller Editor zeigt dir die Seite selbst und lässt dich draufklicken — was die meisten eigentlich wollen. HTML Tweak ist die visuelle Sorte. Es öffnet deine .html-Datei direkt im Browser, zeigt die echte Seite und hält den Code daneben synchron. Es ist kostenlos, ohne Anmeldung, und öffnet eine Datei nach der anderen — was für eine Seite, die ChatGPT gerade gemacht hat, genau die Größe des Problems trifft.

klick die Wörter an und tipp drüber

Hier wohnen die meisten „Korrekturen", und das ist die schlichte Wahrheit, die dir keiner sagt, wenn man dir KI-gebaute Seiten verkauft. Die Änderungen, die du brauchst, sind fast nie strukturell. Es ist ein Wort. Eine Telefonnummer. Ein Link, der auf example.com zeigt, weil ChatGPT deine echte Adresse nicht kannte.

In einem visuellen Editor klickst du den Button an, auf dem Loslegn steht, und tippst Loslegen. Das war's. Klick die Überschrift, schreib sie um. Klick einen Absatz, straff ihn. Lass einen Link irgendwohin Echtes zeigen. Tausch das Platzhalterbild gegen deins.

Und wenn du diese Seite jemandem gibst, der beim Anblick von Code in Panik gerät, gibt es einen Nur-Text-Modus, der das Layout beim Bearbeiten sperrt. Du kannst jedes Wort der Seite umschreiben und das Design physisch nicht aus der Form ziehen. Ich habe diesen Modus gebaut, weil ich immer wieder Nicht-Codern zusah, die „einen Tippfehler korrigierten" und dabei aus Versehen ein schließendes Tag löschten.

wenn Klicken nicht reicht, öffne den Code

Manchmal ist das, was du ändern willst, kein Text.

Die Akzentfarbe zieht eine Spur zu sehr ins Blaue. Der Abstand unter dem Hero ist zu eng. ChatGPT hat ein Tag halb offen gelassen, und ein Abschnitt sieht kaputt aus. Dafür wechselst du in die Code-Ansicht, findest die Zeile und änderst sie — ein Hex-Wert, ein bisschen Padding, ein fehlendes >.

Du musst nicht die ganze Datei verstehen. Du brauchst die eine Zeile. In einem Zwei-Wege-Editor klickst du das Element auf der Seite an, und sein Code leuchtet links auf, du scrollst also nicht durch 400 Zeilen auf der Jagd nach dem richtigen <div>. Änder die Zeile, sieh der Seite beim Aktualisieren zu, weiter geht's.

speichern — und der eine Browser-Haken

Du hast deine Änderungen gemacht. Speicher sie.

Ein Punkt, den ich hier markiere, weil das Speichern von deinem Browser abhängt. In Chrome und Edge kann HTML Tweak die Änderungen direkt zurück in dieselbe Datei schreiben, die du geöffnet hast — du wählst die Datei einmal, danach speichert es an Ort und Stelle. In Firefox, Safari und dem Rest lädt es stattdessen eine bearbeitete Kopie herunter, und die behältst du. Etwas umständlicher, gleiches Ergebnis. Hochgeladen wird so oder so nichts; die Datei bleibt die ganze Zeit auf deinem Rechner.

schau sie dir an, bevor es jemand anderes tut

Öffne die gespeicherte Datei noch ein letztes Mal in deinem Browser und lies sie, wie es ein Fremder täte. Das ist der Schritt, den Leute überspringen — und dann feststellen, dass der Tippfehler in der Version weiterlebt, die sie per Mail verschickt haben.

Am „Veröffentlichen" ist nichts Besonderes. Deine Datei ist schon eine echte .html-Seite. Zieh sie auf deinen Webhost, häng sie an eine Mail, leg sie in einen geteilten Ordner — wofür die Seite auch gedacht war. Sie verhält sich jetzt wie jede andere Webseite, weil sie eine ist.

wo das gern schiefgeht

Ein paar Muster, weil ich die meisten selbst hingelegt habe.

Für eine Ein-Wort-Korrektur neu prompten. Du bittest ChatGPT, „den Tippfehler zu korrigieren", und es generiert die ganze Seite neu — neuer Wortlaut, um den du nicht gebeten hast, eine Layout-Änderung, die du nicht wolltest, und jetzt vergleichst du zwei Versionen, um zu sehen, was sich verschoben hat. Für die letzten Handgriffe gewinnt die Datei. Es gibt einen Begleitartikel über KI-generiertes HTML bearbeiten, ohne von vorn anzufangen, falls du das längere Argument dazu willst.

Nach einer „Website" fragen und ein Projekt bekommen. Sag „bau mir eine Website", und ChatGPT reicht dir vielleicht ein React- oder Next-Gerüst, verteilt über ein Dutzend Dateien. Das ist eine echte Sache, aber keine Seite, die du öffnest und per Klick bearbeitest. Willst du den Einzeldatei-Ablauf, verlang die einzelne Datei, laut ausgesprochen.

Den Browser-Tab bearbeiten und erwarten, dass es hält. Eine Datei ansehen ist nicht dasselbe wie sie bearbeiten. Änderungen, die du in einer bloßen Browservorschau zu machen glaubst, gehen nirgendwohin. Öffne sie in einem echten Editor.

Bilder, die nur im Chat existierten. Manchmal verlinkt die Seite ein Bild, für das ChatGPT eine URL erfunden hat, oder eines, das in der Konversation lebte. Es wird kaputt angezeigt. Lass diese <img>-Tags auf echte Dateien zeigen, die du hast.

Kein Backup vor einer großen Änderung. Wenn du gleich die halbe Seite umbaust, dupliziere die Datei zuerst. Kostet dich zwei Sekunden und erspart dir einen vergurkten Nachmittag.

---

Kopier ChatGPTs Code in eine Datei, öffne sie in HTML Tweak, und korrigier die eine Sache, die wirklich falsch ist. Die anderen 95 % müssen davon nichts erfahren.