Kurz gesagt: KI-generierte Website-Designs sind ein guter Startpunkt und ein schlechter Bauplan. Sie sehen fertig aus, sind es aber nicht: keine Mobil-Ansicht, keine echten Maße, erfundene Inhalte, oft schlechter Kontrast. Wer so ein Design in WordPress umsetzt, muss es erst zu Ende denken. Wie das geht, und was du vorher prüfen solltest, steht hier.
Warum gerade jetzt so viele KI-Designs ankommen
In den letzten Wochen kamen bei mir mehrere Anfragen mit demselben Muster: Jemand hat sich ein Website-Design von einer KI generieren lassen, ist zufrieden damit und sucht jetzt jemanden, der es in WordPress baut. Die Tools dafür sind gut geworden. Midjourney und Ideogram liefern Screens, die aussehen wie aus einer Agentur. Figma AI, v0, Lovable oder Relume liefern sogar Layouts mit Struktur. Der Weg von der Idee zum Bild ist kurz geworden.
Der Weg vom Bild zur Website ist es nicht. Und genau da entscheidet sich, ob das KI-Design ein Gewinn war oder teure Nacharbeit.
Was KI-Designs gut können
Ich sage das ohne Ironie: Vieles davon ist brauchbar. Ein KI-Design gibt dir schnell eine Richtung. Farbwelt, Stimmung, grobe Aufteilung, welche Sektionen es gibt. Das ist die Phase, die früher Tage gekostet hat, mit Moodboards und drei Entwurfsrunden. Wenn du als Unternehmer weißt, wie deine Seite sich anfühlen soll, bevor du mit jemandem sprichst, spart das beiden Seiten Zeit.
Tools wie Relume oder v0 gehen weiter und liefern schon HTML-ähnliche Strukturen. Die sind als Skizze für den Seitenaufbau wertvoll, auch wenn der Code selbst nicht in WordPress landet.
Wo KI-Designs scheitern
Es gibt keine Maße. Ein Midjourney-Bild hat keine Abstände, keine Schriftgrößen, keine Raster. Ich sehe, dass da ein Abstand ist, aber nicht, ob er 24 oder 32 Pixel hat. Jede Umsetzung ist damit eine Interpretation. Das ist okay, wenn man es weiß und abstimmt. Es ist ein Problem, wenn der Kunde erwartet, dass die Seite „genau so“ aussieht wie das Bild.
Es gibt keine Mobil-Ansicht. Fast alle KI-Designs zeigen einen Desktop-Screen. Wie die drei Spalten auf dem Handy untereinander fallen, wie das Menü aussieht, was mit dem großen Hero-Bild passiert, hat sich niemand überlegt. Mehr als die Hälfte deiner Besucher kommt aber mit dem Handy.
Die Inhalte sind erfunden. Der Text im Design ist Blindtext mit schönen Wörtern. Die Bilder zeigen Menschen, die es nicht gibt, und Produkte, die du nicht hast. Sobald deine echten Texte und Fotos rein kommen, bricht das Layout, weil dein Firmenname länger ist und dein Angebot mehr Erklärung braucht als drei Stichwörter.
Kontrast und Barrierefreiheit fehlen fast immer. Hellgrauer Text auf weißem Grund, Buttons ohne erkennbaren Fokus, Texte auf Bildern. Das sieht in der Vorschau elegant aus und ist auf einer echten Website ein Problem, rechtlich und praktisch. Seit dem Barrierefreiheitsgesetz ist das für viele Unternehmen keine Geschmacksfrage mehr.
Der Code ist nicht wartbar. Wenn ein Tool direkt Code ausgibt, ist der für genau diese eine Seite gebaut. Neue Unterseite im gleichen Stil? Nochmal von vorn. Farbe ändern? An vierzig Stellen.
So wird aus dem KI-Design eine Website
Ich behandle ein KI-Design wie einen guten Erstentwurf, nicht wie eine Bauzeichnung. Konkret passiert dann Folgendes:
- Design-System ableiten. Aus dem Bild lese ich Farben, Schrift-Charakter und Abstands-Rhythmus aus und lege sie als feste Werte an: drei bis fünf Farben, zwei Schriften, eine Abstandsskala. Das ist die Grundlage, auf der die ganze Seite steht.
- Kontrast prüfen und korrigieren. Jede Text-Hintergrund-Kombination wird gegen WCAG 2.2 gemessen. Was durchfällt, wird angepasst, so nah am Original wie möglich.
- Mobil-Ansicht entwerfen. Für jede Sektion lege ich fest, wie sie umbricht, und stimme das mit dir ab, bevor ich baue.
- Mit echten Inhalten bauen. Ich baue nicht mit Blindtext. Deine echten Texte und Bilder kommen zuerst, das Layout passt sich ihnen an, nicht umgekehrt.
- In WordPress mit Bricks umsetzen. Sauber, mit zentralem Design-System, so dass du später selbst Seiten anlegen kannst, die genauso aussehen.
Das Ergebnis sieht dem KI-Design ähnlich, aber nicht identisch. Es ist die Version davon, die auf jedem Gerät funktioniert, lesbar ist und in einem Jahr noch pflegbar.
Was du vorher prüfen solltest
- Hat das Design eine Mobil-Version? Wenn nicht, plane Zeit für die Abstimmung ein.
- Sind Texte und Bilder deine eigenen, oder ist alles Platzhalter? Je mehr echt ist, desto genauer wird die Umsetzung.
- Ist der Text auf dem Design lesbar, auch klein? Wenn du die Augen zusammenkneifen musst, wird das ein Kontrastproblem.
- Darfst du das Design nutzen? Bei den meisten Tools ja, aber die Bilder darin sind oft nicht für die Website gedacht.
- Was soll die Seite in einem Jahr können? Blog, Referenzen, Team-Seite. Das entscheidet, wie ich die Bausteine anlege.
Häufige Fragen
Kann ich den Code aus v0, Lovable oder Relume direkt in WordPress verwenden?
Direkt nicht. Diese Tools erzeugen React- oder Tailwind-Code für eigenständige Seiten, kein WordPress-Theme. Ich nutze den Code als Strukturvorlage und baue die Seite in Bricks nach. Das dauert nicht länger als das Anpassen des Fremdcodes und ist danach pflegbar.
Wird die Website genauso aussehen wie das KI-Bild?
Ähnlich, nicht identisch. Maße, Mobil-Ansicht und Kontrast muss jemand erst festlegen, das Bild liefert sie nicht. Ich zeige dir die Abweichungen, bevor ich baue.
Was kostet die Umsetzung eines KI-Designs?
Die Basis ist dieselbe wie bei einem fertigen Design: Onepager ab 890 Euro, mehrseitig ab 2.900 Euro, jeweils netto. Dazu kommt die Arbeit am Design-System und an der Mobil-Ansicht, die beim KI-Design noch fehlen. Wie viel das ist, sehe ich am Entwurf und sage es dir vor dem Festpreis. Details auf der Seite Design-Umsetzung.
Kann ich KI auch beim Bauen der Seite selbst nutzen?
Ja, und das ist der spannendere Teil. Eine KI, die per MCP an deine WordPress-Installation angeschlossen ist, kann Seiten lesen, anlegen und prüfen. Wie das geht, zeige ich in der Schulung KI mit WordPress.
Muss die Seite barrierefrei sein?
Wenn du online an Verbraucher verkaufst oder bestimmte Dienstleistungen anbietest, seit Juni 2025 ja. Und auch sonst: Ein KI-Design, das den Kontrast-Check nicht besteht, ist für einen Teil deiner Kunden schlicht nicht lesbar.
Du hast ein KI-Design und willst wissen, was davon umsetzbar ist? Schick es mir. Ich sage dir ehrlich, was daran funktioniert, was nicht, und was die Umsetzung kostet.