Ich probiere Technologien meist direkt bei meiner Homepage aus und ich muss sagen, die LLMs sind mittlerweile auf einem Level, das hätt ich nicht für möglich gehalten. Nachdem ich gesehen habe was Claude Code kann, wollte ich auch das Design vibe-coden. Ich brauche für ein Design viel zu lange und meist dient eine bestehende Website als Inspirationsquelle.
01.Google Stitch
Ein "designe mir eine neue Homepage im Stil von The Verge und meiner bestehenden" und ein paar zusätzliche Iterationen und dann entstehen im Stitch solche Designs:
Die Neon Cyan/Pink Farbkombination gefällt mir eigentlich sehr gut - Die Wasserkühlung vom PC schaut ähnlich aus :)
Was mir jedenfalls bei Stitch aufgefallen ist: die AI verliert oft den Kontext, ich musste mehrmals bei Iterationen erwähnen, dass es keinen Login oder sonstigen User-Bereich gibt. Es ist immer die Frage wie hoch sind die Anforderungen, für ein Hobby-Projekt reicht es vollkommen und wirkt sehr professionell.
02.Claude Code und Atomic Design Principle
Ich habe den Export von Stitch (PNGs und HTML) an Claude Code weitergereicht und ihm einerseits die ganze Datenstruktur fürs CraftCMS erstellen lassen und andererseits alle UI-Komponenten als Twig-Templates/Macros mit Tailwind gemäß Atomic Design Principle erstellen lassen.
Ersteres hat jetzt nicht so toll funktioniert, hier sind laufend Fehler aufgetreten aber mit entsprechenden Anweisungen und DB-Zugriff konnte Claude Code die zahlreichen selbstverursachten Fehler wieder korrigieren und das Ergebnis war dann verwendbar. Aber ohne meine spezifischen Anweisungen wäre CC hier gescheitert.
Der UI-Part hingegen war ein großer Erfolg, die einzelnen Elemente wurden auf unterster Ebenen (atoms) als button/image/... angelegt und die zusammengesetzten (molecules/organism) verwendeten diese.
Widget-Renderer und Content-Blocks wurden ebenfalls umgesetzt.
03.Datenmigration
Was kann Claude Code nicht? Der bestehende Content der alten Homepage wurde per GraphQL freigegeben und so konnte CC Beiträge in der neuen Content-Stuktur richtig anlegen. Da werden schnell mal ein paar Hundert Zeilen PHP-Script generiert und es funktioniert tatsächlich.
Das war auch ein Eye-Opener wie man zukünftig an alte Projekte herangeht. Dieser Punkt war früher doch sehr mühsam.
04.Server Up- und Downgrade
Irgendwann hätte ich eh einen neuen Server mit CentOS 10 einrichten müssen, da bietet sich natürlich so einen Designupdate dafür an. Zum Glück hatte ich noch die ganze Shell-History und so war das keine große Hexerei. Bei den Assets gab es Permissionprobleme, die ebenfalls mit Hilfe von Claude schnell(er) gelöst wurden.
Was war nun das Downgrade? Der neue Server ist nicht mehr so schnell, aber nach der Preiserhöhung bei Hetzner dachte ich mir, dass meine 2-3 Besucher wahrscheinlich auch mit langsamerer Hardware auskommen