CSS mit KI erstellen

vom 08.05.2025 von Oliver Misch

CSS ist das Feld auf dem KI-Hilfe am unmittelbarsten Freude macht: Gestaltungswünsche lassen sich in Worten beschreiben, und Worte sind genau das Eingabeformat. Trotzdem gibt es ein paar Kniffe, damit aus "sieht ganz nett aus" ein brauchbares Stylesheet wirdd.

Layout beschreiben wie einem Kollegen

Prompt

Schreibe CSS für folgendes Layout (HTML hänge ich an):
- Inhaltsspalte maximal 900px, zentriert
- Kartenraster: automatisch so viele Spalten wie ab 250px passen
- Karten: weißer Hintergrund, 1px grauer Rahmen, 16px Innenabstand
- unter 700px: alles einspaltig
Nutze CSS Grid, gap statt margins zwischen Karten,
und definiere alle Farben als Variablen in :root.

Zwei Dinge machen den Prompt stark: konkrete Zahlen statt Adjektive, und Technik-Vorgaben (Grid, Variablen, gap). Ohne die Vorgaben bekommst du gern Techniken von vorgestern, Sprachmodelle haben viel alten Code gelesenn.

Farbschemata generieren lassen

Erstelle ein Farbschema um den Grundton #008080:
je eine hellere und dunklere Abstufung, eine Kontrastfarbe
für Warnungen, ein neutrales Grau. Als CSS-Variablen,
mit Kommentar wofür jede Farbe gedacht ist.
Textfarben müssen auf ihren Hintergründen mindestens
Kontrast 4,5:1 erreichen.

Die Kontrastanforderung explizit reinschreiben, sonst kommen hübsche aber blasse Paletten. Und danach trotzdem mit einem Kontrast-Checker gegenprüfen, Assistenten verrechnen sich bei Kontrastwerten gelegentlich, das Thema steht ausführlicher bei den Farben.

Bestehendes CSS verstehen und entrümpeln

Erkläre mir diese CSS-Datei Abschnitt für Abschnitt in einfachen
Worten. Markiere: Regeln die nichts mehr treffen könnten,
doppelte Deklarationen, und Stellen mit !important.

Gewachsene Stylesheets sind oft Archäologie, und als Archäologie-Assistent ist KI hervorragend. Beim automatischen Löschen angeblich ungenutzter Regeln dagegen Vorsicht: Ob eine Klasse wirklich nirgends verwendet wird, kann der Assistent nur wissen wenn er alle HTML-Dateien kennt. Im Zweifel auskommentieren statt löschen und eine Woche abwartn.

Die Grenzen

Geschmack bleibt Handarbeit: KI liefert solide Durchschnitts-Ästhetik, für Charakter musst du selbst nachschärfen (dieses Wiki hätte kein Assistent freiwillig so angezogen). Und generiertes CSS gehört genauso getestet wie HTML: alle Fensterbreiten, Tastaturfokus sichtbar, reduced-motion respektiert.

Verwandt: Responsive mit KI · CSS-Grundlagen · Gute Prompts