Diese Website hat ChatGPT in wenigen Minuten geschrieben.

ChatGPT kann auch HTML: Die 5-Minuten-Website

Es hat sich bereits herumgesprochen, dass das KI-Modell ChatGPT auch kodieren kann. Das lässt sich besonders fein ausnutzen, wenn man den Chatbot eine mehr oder weniger einfache Website schreiben lässt. Und weil ChatGPT ein Chatbot ist, lässt sich das sogar im Dialog bewerkstelligen. Wir haben es ausprobiert. Das Ergebnis war überzeugend.

Als Testanordnung diente eine XAMPP-Installation, mit der die vom Bot geschriebene Seite über „localhost“ angezeigt wird. Den erzeugten Code haben wir per Editor Phase im Verzeichnis „xampp/htdocs/gpt_code/“ gespeichert, sodass er im Browser über den Link „http://localhost/gpt_code/“ aufgerufen werden konnte. ChatGPT zeigt den von ihm geschrieben Code in einem speziellen Fenster, von wo aus er über einen Klick kopiert werden kann.

Wie immer, wenn man vernünftige Ergebnisse von ChatGPT erhalten möchte, muss dem Bot die Aufgabe deutlich erklärt werden. Wir haben ganz simpel begonnen: „Schreib mir den Code für eine einfache Website mit einem flächendeckenden Hintergrundbild namens background.png und Links zu den Seiten Impressum, Datenschutzerklärung und Kontakt.“

So haben wir MIT ChatGPT begonnen, die Website zu kodieren
So haben wir mit ChatGPT begonnen, die Website zu kodieren

Das Ergebnis war unbefriedigend, weil wir dem Bot nicht genug Anweisungen gegeben haben:

Die erste Version der von ChatGPT geschrieben HTML-Seite
Die erste Version der von ChatGPT geschrieben HTML-Seite

Zuerst haben wir uns um das Menü gekümmert. Das sollte nicht oben, sondern in einem Footer erscheinen. Dafür sollte oben links ein dezentes Hamburger-Menü angezeigt werden: „Zeige das Menü mit den Links zu den Unterseiten nur in der Fußzeile an und verbirg die Kopfzeile. Zeige stattdessen die Links zu den Unterseiten in einem Hamburger-Menü oben links an.“
Dazu ein bisschen Kosmetik: ChatGPT soll durchgehend eine serifenlose Schrift verwenden und den Titel der Website sehr groß anzeigen. Und so sah das dann aus:

Schon besser mit ein bisschen Kosmetik
Schon besser mit ein bisschen Kosmetik

Und weil uns das schon ganz gut gefiel, haben wir den Bot gebeten, Unterseiten im selben Stil zu schreiben. Das hat perfekt geklappt. Und die Anweisung, die Links auf der Hauptseite entsprechend zu setzen, hat ebenfalls funktioniert.

Fazit

Nach einigen Experimenten haben wir die optimale Vorgehensweise gefunden. Zunächst lässt man den Bot tatsächlich nur eine sehr einfache HTML-Seite mit den unbedingt notwendigen CSS-Styles schreiben. Dann äußert man nach und nach „Sonderwünsche“. Je präziser die formuliert sind, desto näher kommt ChatGPT den geäußerten Vorstellungen.

Das größte Problem: Je länger der Code wird, desto öfter hat der Bot Schwierigkeiten in seiner Antwort diesen vollständig anzugeben. Oft bricht die Ausgabe einfach ab. Dann muss man noch einmal um den kompletten Code bitten.

Witzig ist, dass ChatGPT nicht bei jedem neuen Ansatz, eine Website zu schreiben, denselben Weg verfolgt. So fand der Bot auf Basis unserer Bitte, ein Hamburger-Menü zu erzeugen, dass immer oben links angezeigt wird, gleich vier verschiedene Wege – mal mit, mal ohne Javascript. Auch die Platzhalter für den eigentlichen Inhalt wurden jedes Mal anders gesetzt.

Es hat Spaß gemacht, und es war lehrreich. ChatGPT zum Schreiben einer Website zu verwenden, kann jedem:r, den:die das interessiert nur wärmstens empfohlen werden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert