Website mit KI gebaut? Warum der Code nach der fünften Änderung im Chaos endet

Kurz gesagt: KI-Werkzeuge bauen in wenigen Minuten eine Website, die auf den ersten Blick professionell aussieht. Das Problem beginnt bei den Änderungen. Bei jeder neuen Anweisung legt die KI lieber etwas Neues an, als Bestehendes aufzuräumen: eine neue CSS-Klasse für denselben Button, eine weitere Regel, die die alte überschreibt, noch ein !important. Nach einigen Runden hat ein einziger Button vier Klassen und drei widersprüchliche Farbangaben. Die Seite sieht noch gut aus, aber jede weitere Änderung macht an einer anderen Stelle etwas kaputt.

Ich nutze KI selbst als Werkzeug, und sie ist dabei oft eine echte Hilfe. Gerade deshalb sehe ich täglich, wo ihre Grenzen liegen. Immer öfter kommen Kunden mit einer Seite, die sie selbst „mit ChatGPT“ oder einem KI-Baukasten gebaut haben. Die erste Version war schnell fertig. Dann kamen Änderungen. Und irgendwann der Satz: „Ich habe nur die Farbe des Buttons geändert, jetzt ist das Menü auf dem Handy weg.“

Wie der Button zu vier Klassen kommt

Ein typischer Verlauf, so wie ich ihn in Projekten sehe:

1. Erste Version: „Mach mir einen blauen Button.“ Die KI legt .btn-primary an.
2. Änderung 1: „Der Button soll runder sein.“ Statt .btn-primary zu ändern, kommt .btn-rounded dazu.
3. Änderung 2: „Auf der Startseite größer.“ Neue Klasse .hero-btn mit eigener Farbe, damit sie „sicher greift“.
4. Änderung 3: „Die Farbe passt nicht mehr zum Logo.“ Die KI ändert die Farbe in .btn-primary, aber .hero-btn überschreibt sie. Also legt sie eine weitere Klasse .cta-main an, mit !important, damit die neue Farbe „sicher gewinnt“.
5. Änderung 4: „Auf dem Handy soll der Button die volle Breite haben.“ Neue Media-Query, die zwei der Klassen noch einmal anfasst, wieder mit !important.

Am Ende sieht das so aus:

<a class="btn-primary btn-rounded hero-btn cta-main" href="/kontakt">Anfragen</a>

.btn-primary { background: #1a5cff; border-radius: 4px; }
.btn-rounded { border-radius: 24px; }
.hero-btn    { background: #2563eb; padding: 18px 32px; }
.cta-main    { background: #0f4fd8 !important; }
@media (max-width: 600px) {
  .hero-btn, .btn-primary { display: block; width: 100% !important; }
}

Vier Klassen, drei verschiedene Blautöne, zweimal !important. Welcher Blauton gilt? Der mit !important. Weiß das jemand, wenn er in einem halben Jahr die Farbe ändern will? Nein. Die KI weiß es beim nächsten Mal übrigens auch nicht, denn sie sieht meist nur den Ausschnitt, den Sie ihr gerade zeigen.

Warum KI so arbeitet

• Sie optimiert auf „funktioniert jetzt“. Die schnellste Art, eine Änderung sichtbar zu machen, ist eine neue, stärkere Regel. Aufräumen ist mehr Arbeit und wird nicht verlangt.
• Sie kennt das Ganze nicht. Bei längeren Projekten sieht sie nur einen Teil der Dateien. Dass es .btn-primary schon gibt, weiß sie oft nicht.
• Sie ist auf Zustimmung aus. Sie liefert, was gefragt ist, und fragt selten zurück, ob das Problem nicht eigentlich woanders liegt.
• Sie löscht ungern. Alter Code bleibt stehen, „falls er noch gebraucht wird“. So wächst die CSS-Datei mit jeder Runde.

Woran Sie das Chaos erkennen

Dafür müssen Sie nicht programmieren können. Öffnen Sie die Website im Browser, klicken Sie mit der rechten Maustaste auf einen Button und wählen Sie „Untersuchen“. In Safari müssen Sie dafür zuerst in den Einstellungen die Entwicklerfunktionen einschalten.

• Rechts sehen Sie die CSS-Regeln. Viele durchgestrichene Zeilen bedeuten: Regeln, die von anderen überschrieben werden.
• Viele !important sind ein Zeichen dafür, dass Regeln gegeneinander kämpfen.
• Ein Element mit vier, fünf oder mehr Klassen für eine einfache Aufgabe.
• Ähnliche, aber nicht gleiche Farben, Abstände und Schriftgrößen auf verschiedenen Unterseiten.
• Eine CSS-Datei, die bei einer kleinen Website Tausende Zeilen lang ist.

Was das kostet

Solange niemand etwas ändern will, nichts. Problematisch wird es, wenn die Seite wachsen soll: neue Unterseiten, ein Shop, eine zweite Sprache. Dann muss jemand verstehen, was gilt, bevor er etwas Neues baut. Oft dauert das Aufräumen länger als das saubere Neuschreiben der betroffenen Teile. Die Folgen für die Ladezeit kommen hinzu, denn auch nie genutztes CSS muss der Browser laden und bei jedem Seitenaufruf verarbeiten.

Bei PHP-Code sind die Folgen ernster, weil es dort um Daten und Sicherheit geht. Die sieben typischen Fehler beschreibe ich in KI-Code in PHP: 7 teure Fehler. Warum viele KI-Websites zudem alle gleich aussehen, steht in KI-Websites sehen alle gleich aus.

Wie es besser geht

• Ein System statt Einzelstücke. Farben, Abstände und Schriften werden einmal als Variablen festgelegt. Ein Button ist eine Klasse mit wenigen, klaren Varianten.
• Ändern statt anhängen. Wer eine Farbe ändert, ändert die Variable, nicht die zehnte Ausnahme.
• Ein Mensch, der das Ganze kennt. KI kann Code schneller schreiben. Entscheiden, was in das System passt und was gelöscht werden kann, muss jemand, der das Projekt überblickt.
• KI als Werkzeug, nicht als Architekt. Für einzelne Aufgaben ist sie hervorragend. Die Verantwortung für den Code nimmt sie Ihnen nicht ab.

Hilfe beim Aufräumen

Haben Sie eine Website mit KI gebaut und jede Änderung wird zum Glücksspiel? Ich schaue mir den Code an und sage Ihnen ehrlich, ob sich Aufräumen lohnt oder ob einzelne Teile neu gebaut werden sollten. Mehr zu Websites, die auf Dauer pflegbar bleiben, unter WordPress nach Maß und in den Preisen.