CMS-Update gestoppt: Wenn Responsive Design im Code-Chaos versinkt

Ein modernes Content-Management-System ist das Herzstück jedes Digitalmagazins. Es muss schnell sein, intuitiv bedienbar und vor allem absolut zuverlässig auf jedem Endgerät funktionieren.

In den letzten 24 Stunden wollten wir unser internes VZC CMS auf die nächste Stufe heben. Das Ziel: Eine erweiterte Funktionspalette für die Redaktion und ein moderneres, modulares Backend.

Zusammen mit einer Riege der potentesten KI-Assistenten des Marktes – Claude Code, ChatGPT und Google Gemini (Pro) – stürzten wir uns in einen sechsstündigen Code-Sprint. Das Erdgebnis war eine ernüchternde Lektion über die aktuellen Grenzen der KI-gestützten Softwareentwicklung und die unbarmherzige Realität des Responsive Designs.

Am Ende hieß es für uns: --git reset hard.

Der KI-Stack im Härtetest: Die Illusion von Effizienz

Die Idee klang vielversprechend. Durch den Einsatz spezialisierter KI-Tools wollten wir das Refactoring des VZC CMS beschleunigen.

Claude Code übernahm das tiefere Logik-Refactoring der Datenbank-Abfragen, während ChatGPT und Gemini Pro für die CSS-Grid-Strukturen und die dynamische UI-Anpassung zuständig waren.

In den ersten zwei Stunden fühlte sich die Arbeit wie Fliegen an: Code-Snippets wurden in Sekundenschnelle generiert, API-Endpunkte sauber definiert.

Das Problem bei der KI-gestützten Entwicklung zeigt sich jedoch selten in den ersten Zeilen Code, sondern beim Zusammenfügen der Fragmente.

Was im Prompt-Fenster als sauberer, modularer CSS-Code deklariert wurde, entpuppte sich in der Praxis als hochgradig fragiles Konstrukt. Die KI-Modelle neigten dazu, bei komplexen Vererbungsregeln innerhalb unseres bestehenden Frameworks zu halluzinieren. Sie erzeugten überschneidende Media-Queries, die sich gegenseitig neutralisierten.

Die Monitor-Falle: Ultrawide-Traum und Full-HD-Albtraum

Als die ersten lokalen Live-Tests anstanden, erlebten wir eine optische Berg- und Talfahrt. Auf den Ultrawide-Monitoren unserer Entwickler sah das neue VZC CMS atemberaubend aus.

Die Sidebars skalierten perfekt, die Kachel-Ansicht der Artikel-Pipeline nutzte den Platz optimal aus. Doch die Ernüchterung folgte beim Cross-Browser- und Cross-Device-Testing.

Sobald das CMS auf einem standardmäßigen 4K-Monitor mit 150-prozentiger Skalierung oder – noch schlimmer – auf einem klassischen Full-HD-Bildschirm (1080p) aufgerufen wurde, brach das Layout komplett in sich zusammen.

Statt eines flüssigen, adaptiven Rasters sahen wir uns mit endlosen horizontalen Scrollbalken konfrontiert. UI-Elemente wie der „Veröffentlichen“-Button verschwanden im Off-Screen, Textfelder überlappten die Navigation.

Das mobile Desaster: Funktional, aber unbedienbar

Normalerweise gehört die Optimierung für mobile Endgeräte zu unseren Standarddisziplinen. Beim neuen VZC CMS-Code ging jedoch schief, was schiefgehen konnte.

Zwar blieb das System theoretisch benutzbar – die Touch-Targets reagierten und die Performance der Backend-Datenbank stimmte –, aber das visuelle Design war am Smartphone schlicht unerträglich.

Verschachtelte Menüs, die sich nicht mehr einklappen ließen, und ein unvorhersehbares Padding machten die schnelle Artikel-Korrektur von unterwegs unmöglich. Die KI hatte versucht, das Layout über absolute Pixelwerte statt über relative Einheiten zu erzwingen, was zu einem starren, unästhetischen Konstrukt führte.

Nach stundenlanger intensiver Fehlersuche und dem Versuch, den generierten Code manuell zu bändigen, mussten wir die Reißleine ziehen.

Die wichtigste Erkenntnis: Weniger ist vorerst mehr

Wir haben uns ohne langes Zögern dazu entschieden, das gesamte Update vorerst auf Eis zu legen und komplett auf unser stabiles Backup zurückzugreifen.

Unser internes CMS läuft nun wieder in der gewohnten, verlässlichen Version. Für unser Team ist das kein endgültiger Rückschritt, sondern ein wertvoller Lerneffekt.

Die wichtigste Lektion aus diesem Sprint: KI ist ein mächtiger Werkzeugkasten für isolierte Probleme, aber bei komplexen, geräteübergreifenden UI-Systemen fehlt den Modellen nach wie vor das ganzheitliche Verständnis für Kontext und visuelle Harmonie.

Für den nächsten Anlauf werden wir mit einem strikteren, manuell vordefinierten Design-System starten, statt uns auf die Automatisierung zu verlassen. Im Backend gilt bis auf Weiteres: Ein minimalistisches, funktionierendes Design schlägt ein überladenes, fehlerhaftes Feature-Set.