KI-Codegenerierung wird immer leistungsfähiger – warum sehen damit erstellte Websites trotzdem nicht gut aus? Die komplette Lösung vom KI-generierten Code bis zum UI-Design

Kurzentscheidung: Lassen Sie die KI nicht einfach „eine schönere Website“ erzeugen. Legen Sie zuerst Zielgruppe, Seitenaufgabe und visuelle Richtung fest, beschreiben Sie Layout, Typografie, Farben und Komponenten als Regeln und verbessern Sie anschließend gezielt anhand von Screenshots. So prüfen Sie nicht nur, ob der Code läuft, sondern auch, ob die Gestaltung nachvollziehbar und konsistent ist.

Das ist besonders hilfreich, wenn Sie mit KI-Programmierwerkzeugen eine Website bauen, aber mit ihrem Erscheinungsbild unzufrieden sind.
Auch wenn Sie ohne eigene Designabteilung ein Produkt oder einen Prototyp gestalten, können Sie mit den folgenden Schritten unnötige Überarbeitungen vermeiden.
Kleine Teams erhalten einen gemeinsamen Ablauf für die Übergabe von Anforderungen, Code und visueller Prüfung.

Funktionierender Code ist noch kein überzeugendes Design

KI-Codegenerierung setzt beschriebene Anforderungen in Code um. Sie übernimmt aber nicht automatisch Ihre Entscheidungen darüber, was auf einer Seite wichtig ist, welche Stimmung sie vermitteln soll oder welche visuellen Regeln auf allen Seiten gelten. Deshalb können Navigation, Formulare und Schaltflächen funktionieren, während das Ergebnis trotzdem unruhig oder beliebig wirkt.

Das ist nicht pauschal ein Problem fehlender „KI-Ästhetik“. Häufig fehlt schlicht eine ausreichend konkrete Grundlage, an der sich die Generierung orientieren kann. Prüfen Sie eine Seite deshalb anhand sichtbarer Eigenschaften:

Struktur: Ist sofort erkennbar, was Seitentitel, Abschnitt und ergänzende Information ist?
Hierarchie: Wird die wichtigste Aufgabe stärker betont als Nebensächliches?
Abstände: Sind zusammengehörige Elemente auch optisch als Gruppe erkennbar?
Komponenten: Sehen gleichartige Schaltflächen, Eingabefelder und Karten auch gleich aus?
Inhalt: Passt das Layout zu echten Texten und realistischen Überschriftenlängen?

Drei Ursachen treten besonders häufig zusammen auf. Erstens ist die Anforderung zu vage: „Modern und professionell“ sagt wenig über konkrete Gestaltung aus. Zweitens fehlt eine visuelle Richtung. Ohne Referenz oder beschreibbare Regeln kann die KI eine plausible, aber austauschbare Oberfläche erzeugen. Drittens werden Bereiche einzeln angefordert und umgesetzt. Eine lokal gut aussehende Karte kann dadurch Abstände, Farben oder Typografie verwenden, die an anderer Stelle nicht passen.

Auch der Inhalt wird oft zu spät berücksichtigt. Ein Layout, das mit kurzen Platzhaltertexten ordentlich wirkt, kann mit einer längeren Produktbeschreibung überfüllt sein. Und wenn Sie Farbwerte oder Abstände an jeder Stelle neu erfinden lassen, entsteht keine gemeinsame Gestaltung, sondern eine Sammlung einzelner Entscheidungen.

Warum sind Funktion und visuelle Wirkung oft so unterschiedlich?

Funktionale Anforderungen lassen sich meist klar formulieren: Ein Formular soll Daten annehmen, ein Menü soll sich öffnen, ein Link soll zu einer Seite führen. Visuelle Anforderungen brauchen dagegen einen Bezugspunkt. „Übersichtlich“ kann eine kurze Startseite mit einer klaren Hauptaktion bedeuten oder eine informationsreiche Seite mit einer präzisen Gliederung. Die KI kann beides umsetzen, wenn Sie die Absicht beschreiben. Sie kann die Absicht nicht zuverlässig aus einem einzelnen Adjektiv ableiten.

Schauen Sie deshalb nicht nur auf einzelne Elemente. Vergleichen Sie die Rangfolge der Informationen über die gesamte Seite. Wenn drei Elemente gleichzeitig wie die wichtigste Aktion aussehen, ist die Hierarchie unklar. Wenn mehrere Karten unterschiedlich gepolstert sind, obwohl sie dieselbe Funktion erfüllen, fehlt eine wiederverwendbare Regel. Das sind überprüfbare Hinweise auf ein Prozessproblem, nicht bloß subjektive Urteile über „schlechten Geschmack“.

Vor der Generierung: Nutzer, Aufgabe und visuelle Richtung

Bevor Sie Code anfordern, halten Sie fest, für wen die Seite gedacht ist und was diese Person dort erledigen soll. Notieren Sie außerdem, welche Inhalte zuerst gelesen werden müssen. Diese Entscheidungen bilden den Rahmen für die Gestaltung; sie sind nützlicher als eine lange Liste unverbundener Stilwörter.

Formulieren Sie Ihre Vorgaben in konkreten Sätzen:

Nutzer: Wer kommt auf die Seite, und welches Vorwissen bringt diese Person mit?
Hauptaufgabe: Was soll als nächster Schritt leicht zu finden und auszuführen sein?
Inhaltsrangfolge: Welche Information muss zuerst, welche kann weiter unten stehen?
Gestalterische Wirkung: Soll die Seite ruhig und sachlich, freundlich und zugänglich oder technisch und präzise wirken?
Referenz: Welche sichtbaren Eigenschaften einer Referenz sind relevant, etwa großzügige Abstände, klare Typografie oder kompakte Informationsblöcke?

Eine Referenz ist dabei keine Aufforderung, ein fremdes Design unverändert nachzubauen. Benennen Sie, was Sie übernehmen möchten. Zum Beispiel: „Die Überschriften sind deutlich von Fließtext getrennt; die Hauptaktion steht vor ergänzenden Links; die Karten haben einheitliche Abstände.“ Diese Beobachtungen sind umsetzbare Gestaltungshinweise.

Wie werden aus Designwünschen ausführbare Anweisungen?

Schreiben Sie nicht nur „Gestalte die Startseite hochwertiger“. Geben Sie der KI ein überprüfbares Ziel: „Führe im ersten sichtbaren Bereich mit einer klaren Überschrift zum Nutzen, erkläre den nächsten Schritt knapp und zeige eine primäre Schaltfläche. Platziere ergänzende Informationen darunter und verwende dieselbe Ausrichtung für Überschrift, Text und Aktion.“

So wird aus einem Geschmacksurteil eine prüfbare Vorgabe. Sie können anschließend kontrollieren, ob die Hauptaktion hervorsticht, ob die Reihenfolge stimmt und ob der erste Bildschirm die Aufgabe der Seite erklärt. Wenn ein Entwurf daran scheitert, geben Sie die konkrete Abweichung zurück, statt den gesamten Auftrag unbestimmt zu wiederholen.

Ein kleines Designsystem statt einzelner Stilentscheidungen

Ein Designsystem muss für ein kleines Projekt kein umfangreiches Dokument sein. Es kann mit wenigen bewusst festgelegten Rollen beginnen. Entscheidend ist, dass dieselbe Art von Element auf verschiedenen Seiten nach derselben Regel gestaltet wird.

Legen Sie zunächst Farbrollen fest, nicht eine lose Sammlung von Farbnamen: Hintergrund, Oberfläche, Fließtext, ergänzender Text, Rahmen, primäre Aktion und Fehlermeldung. Definieren Sie anschließend Schriftrollen für Überschriften, Fließtext, Beschriftungen und Hinweise. Ergänzen Sie Abstandsregeln, eine einheitliche Ausrichtung und die Grundstruktur wiederkehrender Bereiche. Bei Komponenten beschreiben Sie auch Zustände: Wie sieht ein Eingabefeld bei Fokus oder Fehler aus? Was unterscheidet eine primäre von einer sekundären Schaltfläche?

Die konkrete Wahl hängt von Ihrem Produkt ab. Wichtig ist, dass Sie Farb- und Schriftrollen nicht bei jeder Komponente neu festlegen. Beschreiben Sie der KI außerdem, wo die Regeln gelten: auf allen Seiten, nur in einem bestimmten Bereich oder ausschließlich für eine besondere Meldung. Dadurch verringert sich das Risiko, dass eine Überarbeitung eine an anderer Stelle etablierte Gestaltung aufbricht.

Wie werden einheitliche Layouts und Schriften erreicht?

Geben Sie die Typografieregeln und das Layout als wiederverwendbare Vorgaben weiter. Nennen Sie etwa die Rolle einer Überschrift, den erwarteten Textumfang, die maximale Breite eines Lesebereichs und die Ausrichtung der zugehörigen Aktion. Die KI sollte Komponenten, die dieselbe Aufgabe erfüllen, wiederverwenden, anstatt für jede Seite eine ähnliche, aber abweichende Variante anzulegen.

Prüfen Sie die Konsistenz durch einen Seitenvergleich. Öffnen Sie eine Startseite und eine typische Unterseite nebeneinander. Vergleichen Sie Überschriften, Fließtext, Abstände, Karten und Schaltflächen. Wenn ein Produktname auf einer Seite anders groß oder ein primärer Button anders gefärbt ist, muss die Regel entweder klarer beschrieben oder zentral umgesetzt werden.

Für Textkontrast nennt die WCAG als Mindestverhältnis 4,5:1 für normalen Text und 3:1 für großen Text; die Voraussetzungen und Ausnahmen erläutert die WCAG-Anforderung an den Textkontrast. Verwenden Sie diese Werte als prüfbare Grenzen, nicht als Ersatz für einen realen Lesbarkeitstest. Eine Farbe kann formal genügend Kontrast aufweisen und trotzdem in einer überladenen Gestaltung schwer zu erfassen sein.

Wiederverwendbare Komponenten sollten außerdem sinnvolle Interaktionszustände haben. Ein sichtbarer Tastaturfokus hilft dabei, die aktuelle Position beim Navigieren zu erkennen; die WCAG-Erläuterung zum sichtbaren Fokus beschreibt, worauf es dabei ankommt. Für anklickbare Ziele nennt die WCAG-Anforderung zur Mindestgröße grundsätzlich 24 × 24 CSS-Pixel, mit Ausnahmen. Das ist ein konkreter Prüfpunkt für kleine Icons und dicht angeordnete Steuerelemente.

Vom Entwurf zur fertigen Oberfläche: ein kontrollierter Ablauf

Arbeiten Sie in überschaubaren Etappen. Jede Etappe sollte ein sichtbares Ergebnis erzeugen, das Sie freigeben oder gezielt korrigieren können. So entdecken Sie früh, ob die Struktur oder die visuelle Richtung nicht passt, bevor sich die falsche Annahme in mehreren Komponenten ausbreitet.

Seitenstruktur skizzieren. Listen Sie Bereiche und Inhalte in der vorgesehenen Reihenfolge auf. Prüfen Sie, ob die Hauptaufgabe früh genug erkennbar ist.
Eine visuelle Richtung festlegen. Beschreiben Sie Zielgruppe, gewünschte Wirkung, Referenzeigenschaften und die wichtigste Aktion. Lassen Sie zunächst einen einzelnen zentralen Seitenentwurf erzeugen.
Den Entwurf prüfen, bevor Sie Komponenten ausbauen. Kontrollieren Sie Informationshierarchie, Ausrichtung, Lesbarkeit und Abstände. Ändern Sie jetzt die Richtung, wenn sie nicht zum Produkt passt.
Komponenten mit klaren Regeln umsetzen. Geben Sie die vereinbarten Rollen für Farben, Typografie, Abstände und Zustände vor. Prüfen Sie, ob wiederkehrende Elemente tatsächlich dieselbe Komponente oder dieselben Regeln nutzen.
Echte Inhalte einsetzen. Ersetzen Sie Platzhalter durch repräsentative Texte, Bezeichnungen und Bilder. Kontrollieren Sie lange Überschriften, Fehlermeldungen und leere Zustände.
Für verschiedene Ansichten anpassen. Prüfen Sie, ob die Anordnung bei schmalem und breitem Darstellungsbereich ihre Prioritäten behält. Medienabfragen ermöglichen es, CSS-Regeln an Bedingungen wie die verfügbare Darstellungsbreite zu knüpfen; die Dokumentation zu CSS-Medienabfragen beschreibt diesen Mechanismus.

Die Reihenfolge ist wichtig. Wenn Sie vor der Freigabe des Grundlayouts bereits viele Komponenten ausarbeiten lassen, investieren Sie möglicherweise in eine Richtung, die anschließend geändert werden muss. Wenn Sie dagegen zu lange an einer groben Skizze festhalten, ohne den Entwurf am echten Inhalt zu testen, bleiben Überläufe und unpassende Textmengen unentdeckt.

Screenshots als präzise Rückmeldung

Ein Screenshot macht sichtbar, worüber Sie sprechen. Er ersetzt keine Nutzertests, hilft aber, die Überarbeitung auf konkrete Abweichungen zu begrenzen. Erstellen Sie eine Aufnahme mit repräsentativem Inhalt und markieren Sie, was genau geprüft werden soll: die Überschrift wirkt gleichrangig mit dem Fließtext, der Abstand zwischen zwei Bereichen ist zu klein oder die primäre Aktion lässt sich kaum von Nebenaktionen unterscheiden.

Formulieren Sie Ihre Rückmeldung als Änderung plus Prüfkriterium. Zum Beispiel: „Vergrößere den Abstand zwischen Überschrift und Einleitung, ohne den Abstand innerhalb der Navigationsleiste zu verändern.“ Oder: „Reduziere die visuelle Gewichtung der sekundären Aktion; die primäre Schaltfläche soll als erste Aktion erkennbar bleiben.“ So weiß die KI, was sie ändern und was sie unverändert lassen soll.

Wie verbessert Screenshot-Feedback die Oberfläche Schritt für Schritt?

Ändern Sie pro Überarbeitungsrunde nur eine zusammenhängende Gruppe von Problemen. Wenn Sie gleichzeitig Farbpalette, Seitenstruktur, Schrift, Abstände und Text neu anfordern, können Verbesserungen schwer einer Ursache zugeordnet werden. Zudem kann die KI eine Vorgabe erfüllen und dabei eine andere verschlechtern.

Vergleichen Sie anschließend den neuen Screenshot mit der vorherigen Version. Fragen Sie nicht nur, ob er „besser“ wirkt. Prüfen Sie, ob das genannte Ziel erreicht wurde: Ist die Überschrift schneller erfassbar? Sind die Karten gleich ausgerichtet? Bleibt der Button bei echtem Text sichtbar? Wenn nicht, beschreiben Sie die verbleibende Abweichung, statt die vollständige Seite erneut generieren zu lassen.

Bei längeren Texten lohnt sich außerdem ein gezielter Lesbarkeitstest. Die WCAG nennt für Textabstände unter anderem 1,5-fachen Zeilenabstand, einen Absatzabstand von 2-facher Schriftgröße sowie definierte Mindestwerte für Zeichen- und Wortabstände. Diese Werte sind als Anforderung zur Veränderbarkeit von Textabständen erläutert, nicht als pauschale Empfehlung für jede Gestaltung; prüfen Sie die WCAG-Kriterien zu Textabständen. Damit erkennen Sie, ob eine Seite auch bei vergrößerten Abständen lesbar bleibt.

Wenn Ihre Oberfläche Animationen verwendet, berücksichtigen Sie außerdem Nutzereinstellungen für reduzierte Bewegung. Die Dokumentation zur CSS-Abfrage für reduzierte Bewegung erklärt, wie eine Website diese Präferenz erkennen kann. Verlangen Sie nicht, dass jede Animation entfernt wird; prüfen Sie vielmehr, ob dekorative Bewegung eine Aufgabe behindert oder auf Wunsch reduziert werden kann.

Prüfliste vor der Veröffentlichung

Bewerten Sie die Website mit echten Inhalten und anhand der zentralen Nutzeraufgabe. Eine allgemeine Aussage wie „sieht jetzt hochwertiger aus“ genügt als Abnahme nicht. Nutzen Sie stattdessen eine Liste, bei der jeder Punkt durch eine konkrete Beobachtung bestätigt werden kann.

[ ] Die wichtigste Aufgabe ist im ersten relevanten Seitenbereich erkennbar.
[ ] Überschriften, Fließtext und Hinweise lassen sich klar voneinander unterscheiden.
[ ] Gleichartige Komponenten verwenden dieselben Farb-, Abstands- und Typografieregeln.
[ ] Die primäre Aktion ist von sekundären Aktionen unterscheidbar.
[ ] Texte, Bilder und Schaltflächen werden durch echte Inhalte nicht abgeschnitten oder überlagert.
[ ] Die Seite bleibt bei schmaler Ansicht nutzbar und verlangt kein horizontales Scrollen für den normalen Lesefluss. Die WCAG-Anforderung zum Umbruch beschreibt die relevante Prüfung für schmale Darstellungsbereiche.
[ ] Tastaturfokus und Rückmeldungen zu Formularfehlern sind sichtbar.
[ ] Interaktive Ziele lassen sich zuverlässig bedienen, auch wenn sie nahe beieinanderliegen.
[ ] Eine Änderung an einer wiederverwendeten Komponente erzeugt keine unerwarteten Stilabweichungen auf anderen Seiten.
[ ] Die wichtigsten Aufgaben lassen sich mit realistischen Inhalten und in der vorgesehenen Reihenfolge erledigen.

Wenn ein Punkt nicht erfüllt ist, schreiben Sie auf, wo und unter welchen Bedingungen das Problem auftritt. „Die mobile Ansicht ist schlecht“ ist zu ungenau. „Bei schmaler Darstellung wird die Hauptaktion unter die Zusatzlinks verschoben und ist erst nach dem langen Beschreibungstext sichtbar“ lässt sich dagegen gezielt bearbeiten.

Der passende nächste Schritt für Ihr Projekt

Wenn Ihre Website noch nicht überzeugt, müssen Sie nicht sofort das gesamte Frontend neu erzeugen lassen. Wählen Sie eine zentrale Seite, notieren Sie Nutzeraufgabe und visuelle Richtung, prüfen Sie die wiederkehrenden Regeln und dokumentieren Sie eine konkrete Abweichung per Screenshot. Kontrollieren Sie danach, ob genau diese Abweichung behoben wurde und ob die Änderung auf weiteren Seiten konsistent bleibt. So wird KI-Codegenerierung zu einem steuerbaren Teil des UI-Designs statt zu einer Folge unverbundener Versuche.

Wenn Sie für Entwicklung oder Vorschau eine separate Mac-Umgebung erwägen, wägen Sie den Bedarf gegen Ihre bestehende Arbeitsweise ab. Lokale Geräte vermeiden zusätzliche Mietkosten und sind für dauerhaft intensive Arbeit oft naheliegend. Eine wechselnde lokale Ausstattung kann dagegen Tests erschweren; entfernte Umgebungen bringen Abhängigkeiten von Netzwerkverbindung, Zugriffsschutz und stabiler Sitzung mit sich. Prüfen Sie daher zuerst, ob ein solcher Arbeitsablauf für Ihr Vorhaben tatsächlich einen Vorteil bietet. Für Fragen zur Nutzung und zum Ablauf können Sie sich außerdem an das deutschsprachige Hilfezentrum von Hashvps wenden. Für Arbeiten mit Agenten kann die Seite zur OpenClaw-Umgebung von Hashvps als ergänzende Orientierung dienen.