Bestehenden Code mit KI verbessern

vom 15.12.2023 von Oliver Misch

Der häufigste Praxisfall ist gar nicht "bau mir was Neues", sondern: Da liegt eine alte Seite, gewachsen über Jahre, vielleicht von jemand anderem, und sie soll besser werden. Genau dabei ist ein KI-Assistent ein starker Partner, wenn man ihn richtig einspanntt.

Regel Nummer eins: Sicherung zuerst

Bevor irgendetwas umgebaut wird: Kopie des Originals anlegen. Klingt banal, wird ständig übersprungen, und KI-Umbauten sehen oft auf den ersten Blick gut aus während im Detail etwas fehlt. Mit Sicherung ist jeder Fehlgriff eine Anekdote, ohne ein Drama.

Schritt 1: Analyse vor Umbau

Prompt

Hier ist eine bestehende HTML-Seite. Ändere noch nichts.
Analysiere und liste auf:
1. veraltete Techniken (font-Tags, Layout-Tabellen, Inline-Styles)
2. Probleme bei Semantik und Barrierefreiheit
3. fehlende Grundlagen (viewport, lang, alt-Texte)
Sortiere nach: kaputt / veraltet / Schönheit.

Die Dreiteilung am Ende ist der Kniff: "Kaputt" muss sofort behoben werden, "veraltet" bald, "Schönheit" irgendwann. Ohne diese Sortierung bekommst du eine ungewichtete Mängelliste die eher entmutigt als hilfft.

Schritt 2: In Häppchen umbauen lassen

Behebe jetzt nur die Punkte aus Kategorie "kaputt".
Gib mir für jede Änderung: vorher, nachher, ein Satz warum.

Kleine Schritte mit Vorher-Nachher haben drei Vorteile: Du kannst jede Änderung nachvollziehen, nach jedem Häppchen im Browser testen, und du lernst nebenbei was da eigentlich falsch war. Der Komplett-Umbau in einem Rutsch ist verlockend und fast immer ein Fehler, weil sich Detailverluste (ein verschwundener Link, ein geändertes Attribut) in der Masse verstecknn.

Der Spezialfall: Uralt-Code modernisieren

Seiten aus der Tabellenlayout-Ära (erkennbar an <font>, bgcolor und Tabellen in Tabellen, das volle Retro-Programm) verdienen einen Sonderauftrag:

Baue die Struktur auf semantisches HTML5 um (header, nav, main,
footer), ersetze das Tabellenlayout durch CSS Grid und übertrage
die Optik so originalgetreu wie möglich in ein Stylesheet.
Der sichtbare Text muss zu 100 Prozent unverändert bleiben.

Der letzte Satz ist die Versicherung gegen die Umformulier-Freude von Sprachmodellen: Ohne ihn "verbessern" sie gern auch die Texte gleich mitt.

Schritt 3: Gegenprüfen

Nach dem Umbau: beide Versionen nebeneinander im Browser, jede Unterseite durchklicken, Validator, und einmal die Checkliste unter KI-Code prüfen. Besonders prüfen: Sind alle Links noch da, stimmen die Formulare noch, hat sich kein Text verändert?

Verwandt: Fehler finden · CSS mit KI · Semantisches HTML