In meinem jüngsten Versuch, die neuesten KI-Modelle auf die Probe zu stellen, habe ich einen CSS Battle Test zwischen ChatGPT, Claude und Gemini gemacht. Ziel war es, dass die KIs ein simples, aber kniffliges Layout nur mit CSS nachbauen. Was dabei herauskam, war… nun ja, sagen wir mal, ziemlich schräg. Keine der KIs konnte überzeugen – und was sie abgeliefert haben, erinnerte mich eher an alles Mögliche, nur nicht an das gewünschte Design.
Die Aufgabe
Die Aufgabe war klar: Ein maskenähnliches Design mit Flexbox, Grid und CSS3-Techniken umsetzen. Links sieht man den Ausgangspunkt, rechts das Ergebnis. Die Farben waren vorgegeben. Das Ziel: 100% identisches Aussehen mit möglichst wenig Code erreichen. Klingt einfach, oder? Aber die KI-Kandidaten hatten damit mehr Schwierigkeiten als erwartet. Hier meine Analyse der Ergebnisse:
ChatGPT
Als Erstes durfte ChatGPT ran. Die KI ist bekannt dafür, in fast jeder Disziplin gut abzuschneiden, also hatte ich große Erwartungen. Doch was da auf dem Bildschirm erschien, sah eher aus wie ein Kugelfisch kurz vom platzen. Ein übergroßer, ovaler Kreis und zwei weiße Flecken, die irgendwie wie weit entfernte Fischaugen wirken, haben mit der Vorlage leider nicht viel zu tun.
Fehler im Detail:
- Der zentrale Teil, der an eine Maske erinnern sollte, wurde zu einem riesigen, ovalen Blob.
- Die Augen sind völlig deplatziert und sehen eher aus wie Fischaugen, die in entgegengesetzte Richtungen schauen.
Zwischenfazit:
ChatGPT hat zwar den Versuch gestartet, die Struktur des Layouts zu verstehen, aber beim Umsetzen ins CSS war die KI bedauerlicherweise nicht präzise genug. Statt einer klaren Maske habe ich einen unförmigen, fast platzenden Kugelfisch bekommen. Für schnelles Prototyping in CSS vielleicht okay, aber für pixelgenaues Frontend Development? Fehlanzeige.
Claude
Kommen wir zu Claude, der KI, die bekannt dafür ist, Probleme tiefgehend zu analysieren. Ich verwende Claude fast schon lieber als ChatGPT, wenn es um Programmier-Unterstützung geht. Hier war jedoch das Ergebnis… nennen wir es mal „bescheiden“. Claudes Entwurf erinnerte eher an einen schüchternen, grimmigen Smiley als an das maskenhafte Design, das ich mir erhofft hatte.
Fehler im Detail:
- Die Augenpartien sind viel zu klein und wirken verloren in der Gesamtstruktur.
- Die Form des Gesichts ist viel zu vereinfacht und hat nichts von der markanten Maskenform des Originaldesigns.
Zwischenfazit:
Claude hat zumindest ansatzweise verstanden, worum es geht, aber die Umsetzung ist schlichtweg zu simpel. Der grimmige Smiley lässt jegliche Präzision vermissen, die man von einem modernen Webdesign erwarten würde. Nicht schlecht, aber definitiv nicht gut genug.
Gemini
Last but not least: Gemini, die neue Hoffnung im KI-Bereich. Aber hier kam die größte Überraschung – und nicht im positiven Sinne. Was ich zu sehen bekam, erinnerte mehr an zwei nebeneinander liegende Farbstreifen als an eine Maske. Es scheint, als habe Gemini das Design komplett missverstanden und einfach willkürliche Blöcke erstellt.
Fehler im Detail:
- Das maskenhafte Design wurde überhaupt nicht erfasst.
- Stattdessen erscheinen zwei Farbstreifen, die keinerlei Ähnlichkeit mit der Aufgabe haben.
Zwischenfazit:
Gemini? Ein totaler Reinfall in diesem Test. Von CSS-Kompetenz keine Spur. Wenn du versuchst, ein Design in Farbstreifen zu verwandeln, ist Gemini vielleicht die richtige Wahl, aber in diesem Fall war es ein Totalausfall.
Gesamtfazit: Ein Desaster auf ganzer Linie
Am Ende konnte keine der getesteten KI-Modelle im CSS Battle überzeugen. Während ChatGPT und Claude zumindest den Ansatz verstanden haben, war die Ausführung in beiden Fällen mangelhaft. Gemini hat die Aufgabe komplett verfehlt.