Wird die KI Webentwickler*innen ersetzen?

In den letzten Jahren wurde wahrscheinlich jede Webentwicklerin und jeder Webentwickler folgendes gefragt:

"Hast du Angst um deinen Job? In ein paar Jahren wird doch die KI die Websites machen, oder?"

Unsere Antwort darauf lautet grundsätzlich:

"Es braucht mehr zu einer Website als nur eine Person, die Code schreibt!"

Nichtsdestotrotz haben wir den Versuch gewagt, mit ChatGPT eine Website zu erstellen, nur um zu überprüfen, ob der Job Webentwickler*in vielleicht bald nicht mehr benötigt wird.

1. Die Challenge
2. Erste Versuche
3. Anpassungen
4. Herausforderungen
5. Das Endergebnis
6. Zusammenfassung
7. Fazit

Dass man Websites automatisiert erstellen kann, mit verschiedenen Tools und auch mit KI ist schon lange kein Geheimnis mehr. Nur, wie gut sind diese Websites? Und wie einfach ist es, eine Website mit einer KI zu erstellen? Wo könnte das zum Einsatz kommen? Was ist ein realistisches Szenario?

Als Webentwickler*in hat man meist Vorgaben in Form eines fertigen Layouts. So entstand die Idee, eine Website von ChatGPT bauen zu lassen, die bestimmten Designvorgaben entspricht.

Die Anforderungen:

• Wir versuchen eine bestehende Website, die bereits online ist (Layout vom Grafiker, Umsetzung mit TYPO3), mit ChatGPT nachzubauen - allerdings nur die Startseite als One-Pager.
• Die Website, deren Layout wir nachbauen wollen, gibt es bereits unter syssy.consulting.
• Die von ChatGPT erstellte Website soll weitgehend ähnlich aussehen und über eine Navigation verfügen, mit Anchor-Links, die auf die einzelnen Bereiche verlinken.
• Mobile Optimierung ist ein Muss - zumindest so weit, dass man die Website mobil bedienen kann. Auf eine Burger-Navigation wird verzichtet.
• Die Website soll weitgehend suchmaschinenoptimiert sein.
• Das Logo und die Bilder füttern wir ChatGPT und legen sie in unserem Ordner für die Website ab.

Die obersten Regeln: 

• Es darf kein Code geschrieben werden!
• Die Website wird nur durch Prompting erstellt.
• Wir kopieren stets die gesamte index.html und style.css, die ChatGPT generiert,teilweise fügen wir Code auch ein, wenn ChatGPT nur Codeteile auswirft.

Wir haben bereits Logo und Bilder, diese stellen wir ChatGPT bereit und legen sie lokal in unserem Ordner für die Website ab, so wie ChatGPT das befiehlt. Wildes Prompten beginnt und die ersten Versuche sehen gar nicht mal so schlecht aus.

Das ursprüngliche Ziel

Der ursprüngliche Plan war, einen einzigen Prompt zu erstellen, der sämtliche Informationen beinhaltet, mit denen ChatGPT die perfekte Website erstellen kann. Diesen Prompt soll man wiederverwenden können für zukünftige Websites. Also einmal den perfekten Prompt erstellen, eine Vorlage zusagen, und es wird immer wieder die perfekte Website generiert.

Doch mit dieser Methode sind wir schnell gescheitert. Das Problem war, dass bei jedem neuen Prompt alle Informationen neu interpretiert wurden und ein komplett anderes Ergebnis generiert wurde (eh klar!). Das Ergebnis war aber jedes Mal komplett anders - mal besser, mal schlechter, mal wirklich mies und auch fehlerhaft. Es war fast unmöglich, den Prompt so umzuschreiben, dass einzelne Dinge wie z.B. die Farbe der Links verbessert wurden, die anderen Dinge, die bereits funktioniert hatten, aber blieben.

Darum haben wir beschlossen, mit einem anfänglichen Prompt (Initial Prompt) zu starten, der die wesentlichen Rahmeninformationen wie Design-, Layout- und Inhaltsinformationen beinhaltet. Das Ergebnis wird begutachtet und anschließend werden Anweisungen zur Verbesserung von einzelnen Teilen über zusätzliche Prompts gegeben. Das hat schlussendlich relativ gut funktioniert und ist unserer Meinung nach ein mühsamer, aber gangbarer Weg.

Der Start

Nach ersten Versuchen und Wurst-prompten, kam schnell die Idee, das Projekt "KI Website" ein wenig strukturierter anzugehen und verschiedene Styles zu definieren, die wiederverwendbar sind, z. B. für einzelne Blöcke, die alle zweispaltig sind oder eine Hintergrundfarbe haben. Diese Umstellung hat zu Beginn das Ergebnis radikal verschlechtert und einiges an Zeit gekostet. :( Wenn man mehrere Elemente hat, die man wiederverwendet, vielleicht auch auf verschiedenen Seiten, macht es aber durchaus Sinn.

Zu Beginn gibt es Anweisungen für die Definition von Schriftart, -größe, -stil von Fließtext und Überschriften.

Es wurden dann verschiedene Block-Stile definiert, die man für jeden Block angeben kann. In diesem Fall gibt es nur zwei unterschiedliche Blöcke. Die Blöcke sind jeweils zweispaltig und ein Block hat einen grauen Hintergrund bis zum Rand. Die Bilder können links oder rechts stehen, der Text ebenso.

Die Angaben für Navigation, Header, Intro und Footer sind direkt bei den Blöcken definiert.

Es wurde versucht bei den Anweisungen auf direkte Angaben für CSS zu verzichten, was bis auf eine einzige Ausnahme auch gelungen ist - die Aufzählungszeichen der Listen sollten eine Grafik sein. Auf die Idee, die Grafik für das Aufzählungszeichen als Pseudoelement :before zu verwenden, ist ChatGPT nicht gekommen. Da aber alles andere nicht gut ausgesehen hat, haben wir hier ein einziges Mal eine konkrete CSS-Anweisung gegeben.

Erstelle eine HTML-Website mit dem Namen index.html mit externem Stylesheet namens style.css
Verwende die Bilder, die ich hochgeladen habe.

Design-Anweisungen für die gesamte Website:
- Verwende für die Schrift auf der gesamten Seite die Google Font "Public Sans"
- Der Fließtext ist 16px groß, die Zeilenhöhe 1.5 mal der Textgröße
- Verwende als Aufzählungszeichen für alle Aufzählungen (nicht in der Navigation) das Bild list_check.svg, die Aufzählungszeichen sollen 21px groß sein - verwende :before dafür, der Text soll schwarz sein und normale Standardtextgröße haben
- Mach die Button orange mit dem Farbcode #ff6f1b und abgerundete Ecken, die Schrift weiß und nicht unterstrichen
- Verwende für das Logo die Grafik logo.svg, 100px breit
- Überschriften sind schwarz, nicht in Großbuchstaben und nicht fett, Abstand nach unten von 0.5 mal der Zeilenhöhe; Die Größe abstufend, max. 2.5 mal die Textgröße
- Sublines sind orange (#ff6f1b) und in Großbuchstaben, nicht fett und 1.5 mal der Textgröße
- Die Headline in den Blöcken ist 1.5 mal so groß wie der Fließtext und nicht fett, Abstand nach unten 0.5 mal die Textgröße
- Absätze haben einen Abstand nach unten von 1 mal der Zeilenhöhe
- Überschriften haben einen Abstand nach unten von 1.5 mal der Zeilenhöhe
- Die mehrspaltigen Inhalte haben zwischen den Spalten einen Abstand von 50px
- Die mehrspaltigen Inhalte der Blöcke sind auf mobilen Geräten (Auflösung kleiner 750px) untereinander nicht nebeneinander
- Die Inhalte in den Spalten sind vertikal zentriert
- Überschriften sind nicht fett, sondern nur größer

Es gibt verschiedene Stile für die einzelnen Blöcke:

"Zweispaltiger Block ohne Hintergrund" 
Mach einen Inhalt mit 2 Spalten mit jeweils 50% - achte darauf, dass es sich in einer Zeile ausgeht
Maximale Breite des Inhalts ist 900px, wenn genug Platz ist, soll er ausgeschöpft werden. 
Zwischen den Spalten ist ein Abstand von 2 mal der Textgröße
Die Headline ist 1.5 mal so groß wie der Fließtext und nicht fett, Abstand nach unten 0.5 mal der Textgröße.

"Zweispaltiger Block mit grauem Hintergrund"
Der gesamte Block hat einen grauen Hintergrund (Farbcode #f1f1f1) und geht über die ganze Breite bis zum äußeren Rand. 
Mache in dem grauen Bereich einen 2-spaltigen Inhalt mit 50% - 50%, maximal 900px breit, die Breite soll aber genutzt werden, wenn mehr Platz ist.

Seitenaufbau:
Logo (max. 100px) und Navigation - sind nicht im Header, sondern darüber
Header (mit Hintergrundbild und Text)
Block 1, Block 2, Block 3
Footer

#### Logo und Navigation ####
Max. 900px breit, Abstand links und rechts zum Rand gleich, der Inhalt vertikal zentriert
Links steht das Logo und rechts die Navigation mit den Navigationspunkten
Das Logo ist max. 100 Pixel breit
Die Navigation beinhaltet folgende Seiten: Workshops (Verlinkung zu Block 2 "Workshops"), Website Analyse (Verlinkung zu Block 3 "Website Analyse"), Kontakt (Mailto:office@syssy.net)
Die Navigation ist rechtsbündig ausgerichtet, keine Aufzählungszeichen verwenden, lösche den :before Style
Der Text ist 1.25 mal so groß sein wie der Fließtext und normal, nicht fett
Die Links nicht unterstrichen und schwarz
Beim Logo ist oben und unten ein Abstand von 20px

#### Header ####
Anweisung: 
Der Header mit Hintergrundbild geht über die gesamte Breite bis zum Rand
Verwende für den Header das Hintergrundbild header_bg.png
Die Schrift ist weiß
Die Überschrift ist 2 mal so groß wie der Fließtext, weiß, nicht fett und zentriert
Die Mindesthöhe des Headers ist 400 Pixel
Der Inhalt ist max. 700px breit und 1.25 mal so groß wie der Fließtext und zentriert
Kein Abstand im Header, aber den Text vertikal zentrieren

Inhalt Header:
Headline (Überschrift 1): Web Consulting
Text darunter: 
Die Unterstützung für deine Website!
Gemeinsam boosten wir deine Website, indem wir sie analysieren, Probleme offen legen und gemeinsam die Probleme lösen. 

### Einleitung ####
Überschrift: Hilfe bei deiner Website benötigt?
Text: 
Wir unterstützen dich bei der Optimierung deiner Website, indem wir umfangreiche Analysen vornehmen und so mögliche Fehler aufspüren. Deine Website wird dabei in den Bereichen On-Page SEO, Performance, Usability, Barrierefreiheit und DSGVO analysiert.
Mit unterschiedlichen Analyse-Tools verschaffen wir uns einen Überblick über deine Website und erstellen einen umfangreichen Bericht für dich. Auf Wunsch erstellen wir auch einen Maßnahmenkatalog mit Verbesserungsvorschlägen.
Bei TYPO3 und WordPress verfügen wir über langjährige Erfahrung und können wertvolle Tipps für die Umsetzung der Optimierungsmaßnahmen geben.

#### Block 1 ####
Stil: Zweispaltiger Block ohne Hintergrund
Anweisung: 
In der linken Spalte das Bild, in der rechten Spalte der Headline, Text, Button
der Button unter dem Text
Die Headline in orange, nicht fett und die Größe wie der Fließtext

Bild: being-productive.svg
Headline: WIR VERSCHAFFEN IHNEN DEN ÜBERBLICK
Text: 
- Suchmaschinenoptimierung (SEO)
- Performance
- Usability
- Barrierefreiheit
- DSGVO
Button: Jetzt anfragen (verlinke zu office(at)syssy.net)

#### Block 2 ####
Stil: Zweispaltiger Block mit Hintergrund
Anweisung: 
Der Text in der linken Spalte, das Bild in der rechten Spalte
Die Subline steht über der Headline
der Button soll unter dem Text sein

Bild: workshop.svg
Headline: Workshops
Subline: Website gemeinsam optimieren
Text (jede Zeile ein eigener Absatz): 
Gemeinsam arbeiten wir daran, dass du mit deiner Website bessere Ergebnisse in den Suchmaschinen erzielst und so mehr Personen erreichen kannst.
Bei WordPress und TYPO3 Websites können wir gleich direkt Hand anlegen und deine Website verbessern.
Button: Mehr erfahren (verlinke zu office(at)syssy.net)

#### Block 3 ####
Stil: Zweispaltiger Block ohne Hintergrund
Anweisung: 
Bild in er linken Spalte, Text in der rechte Spalte
der Button unter dem Text
Die Subline steht über der Headline

Bild: deep-dive.svg
Headline: Website Analyse
Subline: DEEP DIVE IN DEINE WEBSITE
Text: 
Wir beleuchten viele verschiedene Punkte deiner Website und führen umfangreiche Analysen durch:
- Technisches Audit & Performance Analyse
- DSGVO Analyse & Check auf Barrierefreiheit
- Content- & Keyword-Analyse
- Zugriffsanalyse

Button: Mehr erfahren (verlinke zu office(at)syssy.net)

#### Footer ####
Anweisungen:
Der Footer hat den Hintergrund #181715 und geht über die gesamte Breite bis zum äußeren Rand.
Der Text und auch die Links sind weiß, die Links nicht unterstrichen.
Mache in dem dunklen Bereich einen 3-spaltigen Inhalt mit 33% - 33% - 33%, maximal 900px breit, die Breite soll aber genutzt werden, wenn mehr Platz ist.

Inhalt Spalte 1:
Logo (verwende logo_white.svg, max. 80px breit)
SYSSY Online GmbH
office@syssy.net
© 2024

Inhalt Spalte 2:
Überschrift: Angebot (in der Farbe #009881)
Inhalt:
Erstelle eine Navigation mit folgenden Punkten:
- SYSSY Software (Verlinke zu www.syssy.net)
- Workshops (Verlinke zu Seite workshops.html)
- Website Analyse (Verlinke zur Seite website-analyse.html)

Inhalt Spalte 3:
Überschrift: Rechtliches (in der Farbe #a8365a)
Inhalt:
Impressum (Verlinke zu www.syssy.net/impressum)

Vor dieser "finalen Version" gab es einige Versuche. Die obige Version ist ca. der 10. Versuch. Nach dieser Version haben wir beschlossen, die Anpassungen in Einzelschritten vorzunehmen und nicht jedes Mal den gesamten Prompt anzupassen.

Information: Es gibt Rechtschreibfehler und teils unterschiedliche Angaben (z.B. Zeilenhöhe, Textgröße ...) in dem Prompt, die aber im Nachhinein nicht mehr ausgebessert wurden, da wir genau von diesem Prompt aus die Website erstellt haben. Beim Erstellen eines eigenen Prompts kann man auf das Wording mehr Rücksicht nehmen.

Das erste Ergebnis des Initial-Prompt (als Version 1 bezeichnet) liefert kein so schlechtes Ergebnis, allerdings müssen noch einige Dinge angepasst werden.

Hier geht's zur Ansicht der Version 1

Obwohl ChatGPT bereits zu Beginn gute Ergebnisse lieferte, waren bestimmte Teile schwierig umsetzbar.

Die "Kleinigkeiten", die zu fixen waren:

• Eine Navigation, die eine Liste ist, aber ohne Aufzählungszeichen
• Die Aufzählungszeichen bei den Listen sollten eine Grafik mit bestimmter Größe sein - man musste den Hinweis :before geben, damit es überhaupt geklappt hat. ChatGPT versuche es mit :marker und es ist hier nicht möglich, die Bildgröße zu setzen.
• Einen Block mit grauem Hintergrund, der sich über die gesamte Breite erstreckt, wohingegen der 2-spaltige Inhalt max. 900 Pixel breit sein soll
• Im Footer das gleiche Problem, dass sich der Hintergrund über die gesamte Breite erstreckt und die drei Spalten gleich breit sind
• Das 2-spaltige Layout, das bei mobiler Ansicht umbricht und die Spalten untereinander anzeigt

Ein großes Problem war, dass es nicht immer zum gleichen Ergebnis kam. Wenn sich Anweisungen nur minimal veränderten, weil man z.B. die Schriftgröße anpasste, wurde plötzlich ein komplett anderes HTML bzw. CSS generiert und die Seite war wieder "zerstört", obwohl sie zuvor schon beinahe perfekt war.

Mehrmals gab es diesen Punkt, an dem die Seite beinahe perfekt war, aber eine kleine Änderung im Prompt wieder dazu geführt hat, dass die Seite komplett anders aussah und man das Gefühl hatte nochmal von vorne beginnen zu müssen.

Auch Dinge wie Suchmaschinenoptimierungen wurden nicht immer gut umgesetzt. Teilweise wurden beim Neu generieren wieder Dinge vergessen.

Das Ergebnis ist nicht perfekt und wir würden noch folgende Anpassungen durchführen für eine Website, die online geht:

• die mobile Navigation
• einige Abstände
• den mobilen Footer
• das Favicon
•  ...  

Aufgrund des zu großen Aufwandes haben wir aber an dieser Stelle gestoppt.

Das Endergebnis kann man sich unter folgendem Link ansehen:
zum Endergebnis

Im Vergleich dazu gibt es unter diesem Link die Version 1 nach dem "Initial Promp":
zur Version 1

Es wurden unterschiedliche Modelle eingesetzt und der initiale Prompt mit unterschiedlichen Modellen getestet. Es gibt nur wenig Unterschied was den generierten Code betrifft - ob man ChatGPT 4o, ChatGPT 4o-mini oder ChatGPT 4o with canvas verwendet, das Ergebnis variiert nicht sehr stark.
ChatGPT 4o with canvas ist als Lernumgebung gut vorstellbar, also wenn man lernen will HTML und CSS oder eine andere Programmiersprache zu schreiben, da nach Anweisungen live im Code Anpassungen durchgeführt werden und man mitschauen kann.

Was war der meiste Aufwand?

• Die mehrspaltigen Inhalte mit Hintergrundfarbe, die über die gesamte Breite gehen
• Die Aufzählungszeichen bei den Listen - ohne dem Hinweis :before hat es nicht geklappt
• In der Navigation wiederum keine Aufzählungszeichen zu haben - auch kein :before
• Wenn man nur eine Kleinigkeit in den Anweisungen ändert, kann es zu einem komplett anderen Ergebnis führen. Die Website war z. B. schon mal perfekt, aber die Anpassung von Kleinigkeiten hat alles wieder zerstört.
• Der Feinschliff - da es oft eine Überschrift anpasste, dafür andere Dinge wieder verworfen wurden. z.B. wurde die Schriftgröße einer Überschrift angepasst, aber die mobilen Optimierungen fehlten bei der erneuten Erstellung des Stylesheets.

Man erhält ständig neue und unterschiedliche Versionen von ein und demselben Prompt. Das kann inspirierend sein, wenn man Texte generiert, wenn man aber eine Website erstellen will, ist es zum Teil sehr nervig und hält auf. 
Will man das eine Problem fixen, werden bereits gelöste Dinge wieder zerstört, so als würde es sich nicht merken, was es zuvor gemacht hat. Trotz der Anweisungen, dass es die vorherige Version behalten soll, ist das nicht immer passiert. Es gehorcht also nicht immer. ;)

• Eine Schrift musste x-mal in der Schriftgröße umgeschrieben werden
• Die Google Fonts wurden in einer Version plötzlich verworfen
• Die Farben für die Headlines im Footer waren mal alle orange, dann wieder in der Farbe in der sie sein sollten - je nach Lust und Laune von GPT
• Die Bilder haben teilweise falsche Namen bekommen, und nicht die, die ich vorgegeben hatte, was dazu führte, dass sie teilweise nicht angezeigt wurden
• Es war sehr schwierig Dinge wie das 2-spaltige Content-Element mit grauem Hintergrund umzusetzen, da der graue Hintergrund selten bis zum Rand ging
• Es war sehr schwierig die für die Aufzählungszeichen Bilder zu bekommen und diese dann in der Navigation und im Footer wegzubekommen

Positives

• Bei der Suchmaschinenoptimierung wurden teilweise alle Dinge erfüllt
• Trotz Rechtschreibfehler wurden die richtigen Dinge ausgeführt, z.B. wurde statt "Suchmaschinenoptimierung" fälschlicherweise "Suchmaschinenopitmierung" getippt
• Die Website, die schlussendlich entstanden ist, sieht ganz gut aus
• Der HTML-Code, der generiert wurde, ist ok
• Das CSS, das generiert wurde, ist ebenfalls ok, wenn man von kleinen Fehlern zwischendurch absieht

Es ist gut vorstellbar, dass KI vermehrt unterstützend eingesetzt wird zur Lösung von kleineren isolierten Problemen. Das Problem am Erstellen von Websites fängt aber meist nicht erst bei der Umsetzung an. Kund*innen, die ganz am Anfang stehen, müssen größtenteils an die Hand genommen werden und man muss sie auf die Reise mitnehmen. Das beginnt bei Logo, CI, Webdesign, Konzept, Texten, technische Umsetzung, Suchmaschinenoptimierung und endet mit der laufenden Betreuung der Website.

ChatGPT wird vermutlich nicht der Umschwung von "Der/die Webentwickler*in macht die Website" zu "Do it yourself mit KI" sein. Es wird vielleicht vermehrt Positionen dazwischen geben. Personen, die Konzepte erstellen, ein Auge für Ästhetik haben und über so viel technisches Verständnis verfügen, dass sie der KI Befehle erteilen können. Das sind aber nur bestimmte Anwendungsfälle. Für große, komplexe Websites wird man vermutlich auch zukünftig nicht ohne Entwickler*innen auskommen. Eventuell benötigt man weniger Webentwickler*innen, das ist durchaus möglich. Selbst wenn man Systeme verwendet, die es ermöglichen, Websites ohne Entwickler*innen zu erstellen, die es jetzt ja auch gibt, wenn man einen Blick in Richtung WordPress Templates, Wix, Squarespace oder die zahlreichen Websitebaukästen der Hoster wirft, gibt es ab einem gewissen Punkt trotzdem den Bedarf an technischem Support. Wenn etwas beispielsweise nicht so funktioniert wie es sollte, dort wo Dinge wie DSGVO und SEO relevant werden oder wo man individuelle Lösungen benötigt, die nicht von der Stange verfügbar sind, benötigt man weiterhin professionelle Expertise. Der Job des Web-Consultant wird in Zukunft also vielleicht eine größere Rolle spielen.

Das Einzige, was manuell geändert wurde, ist das robots-Tag. Dieses wurde auf "noindex" gesetzt, da wir die Website nicht bei Google haben wollen. ;)

Zeitaufwand: 6 Stunden (als erfahrene*r Webentwickler*in hätte man für die manuelle Umsetzung nicht mal die Hälfte der Zeit gebraucht)

Verwendete ChatGPT-Modelle: ChatGTP 4o, ChatGPT 4o-mini, ChatGPT 4o with canvas

Lass dich beim TYPO3 Monitoring unterstützen

Du willst Hilfe bei der Websiteverwaltung?
SYSSY arbeitet für dich im Hintergrund!

Jetzt kostenlos testen