KI Webdesign: fünf Prüfschritte, bevor Sie live gehen

KI Webdesign erzeugt heute in etwa der Zeit, die man für einen Kaffee braucht, eine plausible Startseite. Das Tempo ist echt, und genau darin liegt die Falle. Eine generierte Seite wirkt lange, bevor sie fertig ist. Die unfertigen Teile, also Kontrast, Überschriftenfolge, gespiegelte Layouts und die Disziplin bei Design-Tokens, entdeckt ein Kunde meist erst drei Wochen nach dem Start. Hier ist die Abfolge, mit der wir das Tempo behalten und die Überraschungen streichen: fünf Gates, in fester Reihenfolge, jedes mit klarem Bestanden oder Nicht bestanden.

Warum wirkt eine generierte Website fertig, obwohl sie es nicht ist?

Weil das Modell auf das optimiert, was ein Screenshot zeigt. Hero-Bereich, drei Feature-Karten, eine Reihe mit Referenzen, ein Footer. Jedes dieser Elemente ist statistisch vertraut, deshalb liest sich die ganze Seite auf den ersten Blick professionell. Was ein Screenshot nicht zeigen kann, entscheidet aber darüber, ob die Website die Übergabe an den Kunden übersteht.

Nehmen wir die Barrierefreiheit. Der WebAIM Million 2026 Bericht fand auf 95,9 % der Startseiten der meistbesuchten eine Million Websites erkennbare WCAG-2-Fehler. Bei 83,9 % waren Texte zu schwach kontrastiert. Ein Modell, das auf diesem Web trainiert wurde, reproduziert dieses Web. Es liefert Ihnen eine blasse graue Bildunterschrift auf cremefarbenem Hintergrund, und zwar mit voller Überzeugung.

Das zweite unsichtbare Problem ist der Ort der Designentscheidungen. Eine generierte Seite trägt Farben, Größen und Abstände oft als feste Werte, verstreut über das Markup. Ändert sich das Markenblau im nächsten Quartal, suchen Sie sich durch vierzig Blöcke. Diese Wartungsrechnung zahlt der Freelancer, nicht das Modell.

Die nützliche Frage lautet also nicht: Kann KI diese Website gestalten? Sie kann einen Entwurf liefern. Die nützliche Frage lautet: Welche Entscheidungen überlasse ich ihr, und wo prüfe ich ihre Arbeit? Die fünf Gates beantworten genau das.

Gate eins: Schreiben Sie das Briefing, bevor Sie das Tool öffnen

Enttäuschende KI-Ergebnisse gehen fast immer auf einen Einzeiler zurück. „Eine Website für eine Bäckerei in Casablanca“ erlaubt dem Modell, alles zu erfinden: Zielgruppe, Tonalität, Seitenliste, Handlungsaufforderungen. Es erfindet sie aus dem Durchschnitt aller Bäckereiseiten, die es je gesehen hat.

Ein brauchbares Briefing passt auf eine halbe Seite. Wer besucht die Seite, und was will die Person in den ersten zehn Sekunden erreichen? Welche drei Seiten müssen existieren? Welche eine Aktion soll die Seite auslösen, etwa buchen, anrufen oder bestellen? Nennen Sie zwei Seiten, die der Kunde bewundert, und eine, die er hasst. Und die Sprachen, inklusive Leserichtung: Erscheint die Seite auf Arabisch oder Hebräisch, sagen Sie es jetzt, nicht nachdem das Layout freigegeben ist.

Dieser letzte Punkt wiegt schwerer, als er scheint. Rechts-nach-links ist eine Eigenschaft des Layouts, keine Übersetzungsaufgabe. Ein Modell, dem man nichts darüber sagt, liefert ein linksbündiges Design mit eingefügtem arabischem Text. Die Richtung im Briefing zu nennen verändert, welche Layouts das Tool vorschlägt. Es kostet einen Satz.

Verzichten Sie auf Adjektive wie „modern und sauber“. Sie transportieren keine Information. „Dicht und redaktionell, wie der Aufmacher einer Zeitungsseite“ transportiert dagegen eine Menge.

Gate zwei: Fordern Sie Richtungen an, niemals fertige Seiten

Die günstigste Nutzung von KI in diesem ganzen Ablauf ist das Erkunden. Lassen Sie drei bis fünf verschiedene Richtungen als grobe Layouts und Schriftpaarungen entwerfen, und wählen Sie, bevor irgendetwas gebaut wird. Sechs Skizzen kosten ein paar Minuten. Eine abgelehnte Seite neu zu bauen kostet einen Nachmittag.

Wichtig ist, sie günstig zu halten. Lassen Sie das Tool für jede Richtung keine vollständigen Seiten mit generierter Fotografie rendern. Kunden verlieben sich in die Fotos und können danach Layout und Bilder nicht mehr trennen. Graue Kästen und echte Überschriften genügen. Kann der Kunde sich nicht zwischen drei Layouts aus grauen Kästen entscheiden, lag das Briefing falsch, und Sie haben das umsonst gelernt.

Bei der Werkzeugkategorie lohnt sich Deutlichkeit. Generatoren für komplette Websites wie 10Web bauen aus einem Prompt, einer URL oder einer Figma-Datei eine vollständige WordPress-Seite. Die Pläne beginnen bei $10 pro Monat bei jährlicher Abrechnung für eine Website. Gehostete Baukästen wie Durable machen aus ein paar Antworten in etwa einer halben Minute eine fertige Seite für kleine Unternehmen. Beide sind bei Gate zwei hervorragend und bei Gate vier schwach, weil sie die Designentscheidungen besitzen, statt sie offenzulegen. Nutzen Sie sie, um Optionen zu sehen. Seien Sie misstrauisch, wenn Sie sie als finalen Bau einer Seite verwenden, die Sie jahrelang warten werden.

Gate drei: Fixieren Sie das Design in theme.json, bevor Sie bauen

Dieses Gate überspringen die meisten Abläufe, und genau es trennt eine Website, die Sie warten können, von einer, die nur als Demo taugt. Sobald eine Richtung feststeht, übertragen Sie ihre Entscheidungen in Tokens und schreiben sie in theme.json: Farbpalette, Schriftfamilien und -größen, Abstandsskala, Inhaltsbreite. Ab dann verweist jeder Block über seinen Slug auf ein Token, nie auf einen festen Wert.

Die theme.json-Referenz existiert genau dafür. Sie gibt einem Block-Theme einen Ort, an dem Palette und Skalen festgelegt werden, die der Editor dann als Bedienelemente anbietet. Ändert sich das Markenblau, ändern Sie eine Zeile. Öffnet ein Kunde den Site-Editor, wählt er aus Ihrer Palette, statt an einem freien Farbrad zu drehen. Das verhindert leise eine ganze Klasse markenfremder Änderungen.

Hier verdient die KI ihr Geld auf andere Weise. Geben Sie ihr die gewählte Richtung und bitten Sie um einen Token-Satz. Dann prüfen Sie ihn anhand zweier Regeln. Jedes Paar aus Text und Hintergrund muss für normalen Text mindestens 4,5:1 erreichen, die WCAG-AA-Schwelle. Rechnen Sie die Verhältnisse selbst nach und vertrauen Sie der Aussage des Modells nicht. Außerdem muss die Skala klein sein: fünf oder sechs Abstandsstufen, eine Typoskala mit sechs Größen. Modelle liefern gern vierzehn fast identische Grautöne. Streichen Sie elf davon.

Ein praktischer Test, ob dieses Gate gehalten hat: Öffnen Sie das fertige Theme und suchen Sie in einer Vorlage nach einem Hex-Code. Finden Sie einen, ist eine Entscheidung aus dem System entwichen.

Gate vier: Bauen Sie mit nativen Blöcken und halten Sie den Generator heraus

Jetzt wird gebaut. Die Struktur, die das Modell vorgeschlagen hat, lohnt sich meist zu behalten: Abschnittsreihenfolge, Spaltenlogik, der Rhythmus zwischen dichten und offenen Bereichen. Das erzeugte Markup dagegen meist nicht. Bauen Sie die genehmigte Struktur mit Core-Blöcken nach (Gruppe, Spalten, Cover, Abfrageschleife), nutzen Sie Ihre Tokens, und behandeln Sie die generierte Ausgabe als Referenzzeichnung, nicht als Quelldatei.

Das klingt langsamer. Unserer Erfahrung nach ist es ab der zweiten Seite schneller, weil native Blöcke die Tokens übernehmen, auf den Site-Editor reagieren und sich korrekt verhalten, wenn ein Kunde sie bearbeitet. Generiertes Markup, das Styles fest codiert, kämpft gegen all das. Page-Builder liegen am anderen Ende desselben Kompromisses. Divi, im Februar 2026 als Divi 5 neu gebaut, liefert Divi AI in der Pro-Stufe für $277 im Jahr, und die Ausgabe bleibt im Modulsystem von Divi. Für eine Agentur, die auf Divi festgelegt ist, ist das eine legitime Wahl. Es ist aber ein anderes Produkt als ein Block-Theme mit anderen Ausstiegskosten, und diese Ausstiegskosten sollten Sie in das Angebot einpreisen.

Wo KI-Generierung im Bau ihren Platz behält, ist die repetitive Schicht: eine Variante eines Preisabschnitts, Platzhaltertexte in der Form der echten Texte, alternative Hero-Anordnungen, die der Kunde vergleichen kann. Behandeln Sie jede davon als Entwurfsmuster, das aufgeräumt und registriert werden muss, nie als fertige Arbeit.

Eine ehrliche Grenze: Braucht das Projekt echte Interaktion, etwa gefilterte Archive, eigene Abfragelogik oder irgendetwas mit JavaScript-Verhalten, trägt kein Generator das. Ein Entwickler schreibt diesen Teil, und der KI-Anteil bleibt an den Rändern.

Gate fünf: Prüfen Sie, was ein Screenshot nicht zeigen kann

Führen Sie bei jeder Website dieselbe kurze Prüfung in derselben Reihenfolge durch, damit daraus eine Gewohnheit wird und keine Stimmungssache.

Erstens der Kontrast. Prüfen Sie die tatsächlich gerenderten Paare, auch Text über Bildern sowie die Zustände für deaktiviert und Hover, an die das Modell nie gedacht hat. Zweitens die Überschriftenstruktur: genau ein H1, Überschriften, die absteigen, ohne Stufen zu überspringen, und keine Überschrift, die nur wegen ihrer Größe gewählt wurde. Drittens die Tastatur: Tabben Sie durch die ganze Seite, prüfen Sie, ob der Fokus sichtbar ist und die Reihenfolge der Lesereihenfolge folgt. Viertens Alt-Texte bei jedem Bild mit Aussage, und leere Alternativen bei den übrigen.

Der fünfte Punkt unterscheidet diese Prüfung von einer allgemeinen Checkliste: die Richtung. Hat die Website eine arabische oder hebräische Version, betrachten Sie sie von rechts nach links und suchen Sie nach allem, was nicht gespiegelt wurde. Icons, die in die falsche Richtung zeigen, ein Hero-Bild, dessen Motiv nun neben dem Text steht, Innenabstände als margin-left statt als logische Eigenschaft wie margin-inline-start. All das ist in diesem Gate leicht zu beheben und peinlich, wenn es im Screenshot eines Kunden auftaucht.

Bewahren Sie die Prüfnachweise auf: ein Vorher-Nachher-Paar pro Seite, eine Notiz, was durchgefallen ist, und eine Notiz, was Sie geändert haben. So wird „mit KI unterstützt“ von einer vagen Behauptung zu einem Liefergegenstand. Außerdem ist es der Absatz in Ihrem Übergabedokument, der Ihr Honorar gegenüber einem Kunden rechtfertigt, der letztes Wochenende selbst einen Generator ausprobiert hat.

Was ist mit den Ein-Prompt-Baukästen?

Sie haben ihren Platz, und der ist eng. Ein Ein-Prompt-Baukasten eignet sich für einen Wegwerf-Prototyp für eine Akquise, eine Landingpage für ein Wochenendevent oder einen visuellen Ausgangspunkt für einen Kunden, der nicht beschreiben kann, was er will. Framer verbindet einen KI-Seitengenerator mit einer freien Arbeitsfläche und einem kostenlosen Tarif. Das macht es gut für genau diese schnelle, wegwerfbare visuelle Arbeit. Der Basic-Plan beginnt bei $10 im Monat.

Verzichten Sie auf sie, wenn die Seite auf WordPress laufen muss, von einem nicht technischen Kunden bearbeitet wird oder ein Publikum von rechts nach links bedient, denn die Ausgabe müssen Sie ohnehin in Blöcke nachbauen. Der Prototyp war trotzdem nützlich, die Seite selbst war es nicht wert, ausgeliefert zu werden. Zu wissen, welches von beiden Sie gerade in der Hand haben, spart am meisten Zeit.

Was Sie beim nächsten Briefing ausprobieren sollten

Wählen Sie ein laufendes Projekt und führen Sie nur Gate eins und Gate drei durch. Schreiben Sie das halbseitige Briefing und fixieren Sie dann Palette und Skalen in theme.json, bevor eine einzige Seite existiert. Messen Sie die Zeit und vergleichen Sie sie mit der Dauer, die Ihre letzte Website bis zu einem stabilen Design gebraucht hat. Hält das Ergebnis, fügen Sie die anderen drei Gates einzeln hinzu. Welches Gate hätte Ihnen auf der letzten Website, die Sie ausgeliefert haben, am meisten Ärger erspart?