Michaela Werner DSGN digital Hannover
KI & Webdesign

Drei Websites, komplett mit KI gebaut.

Was die KI dabei wirklich übernimmt, was WordPress von sich aus schon mitbringt — und warum die Seiten am Ende schneller sind als das, was ich früher von Hand gebaut habe.

Michaela Werner6 Min. LesezeitACF · Claude Code · WordPress
Verlauf aus Wellen und Kugeln, der in schwebende Website-Entwürfe übergeht — Sinnbild für Websites, die mit KI entstehen

Drei Auftritte sind in den letzten Monaten auf demselben Weg entstanden: ki-canvas.de, pink-leadership.de und ernaehrungsberatung-hahn.de. Gebaut mit KI, auf WordPress, ohne Pagebuilder. Die vierte liest du gerade — meine eigene Seite ist genauso entstanden, bis hin zu diesem Beitrag.

Drei Projekte, drei Ausgangslagen.

Startseite von KI-Canvas01 / 03

KI-Canvas

Ein Angebot ohne Ort

KI-Coaching für Führungskräfte mit Terminbuchung auf der Seite. Der Auftritt lädt beim Aufruf kein einziges Stylesheet nach: Das gesamte CSS steht im Dokument, die Schriften liegen auf dem eigenen Server.

Startseite von Pink Leadership02 / 03

Pink Leadership

Onepager, Führungsprogramm

Sechs Abschnitte, ein eigenes Design-System, dazu Impressum, Datenschutz und Teilnahmebedingungen im selben Kleid. Die Startseite lädt neun Dateien — kein nachgeladenes Stylesheet, kein nachgeladenes JavaScript.

Startseite von Ernährungsberatung Hahn03 / 03

Ernährungsberatung Hahn

Die Seite stand schon

Kein Neubau, sondern Modernisierung mit Budget im Blick. Die Abschnitte sind Stück für Stück neu entstanden, auf dem vorhandenen Theme und mit den Plugins, die ohnehin liefen.

Was die KI übernimmt — und was nicht.

Alles, was Code ist. Das Markup der Abschnitte, die Stile, die kleinen PHP-Bausteine, die die Seite ausliefern, die Feldgruppen für die spätere Pflege. Ich schreibe dafür kein HTML mehr von Hand, sondern beschreibe, was entstehen soll, und prüfe, was entstanden ist.

Was sie nicht übernimmt: deine Positionierung. Deine Zielgruppe. Die Entscheidung, welche vier Beratungsfelder aus zwanzig Jahren Erfahrung auf die Seite kommen und welche sechzehn nicht. Diese Arbeit passiert vorher, im Gespräch — und sie ist der Grund, warum drei Seiten aus derselben Technik nichts miteinander zu tun haben.

Jede Stunde, die nicht in Standardfunktionen fließt, bleibt für das übrig, was deinen Auftritt ausmacht.

WordPress bringt das Fundament schon mit.

Eine Website ist mehr als ihre Oberfläche. Darunter liegt eine ganze Schicht, die niemand sieht und ohne die nichts geht:

01Benutzerkonten, Rollen und Rechte
02Zwei-Faktor-Anmeldung und Schutz vor automatisierten Anmeldeversuchen
03Datenbank, Medienverwaltung und Versionsstände jedes Textes
04Backups und Updates
05Cookie-Banner, das Skripte bis zur Einwilligung blockiert
06Formulare mit Spam-Schutz
07Suchmaschinen-Grundlagen, Weiterleitungen, Sitemap

Bei einer frei programmierten Seite ist jeder dieser Punkte ein eigenes kleines Projekt. In WordPress sind es eingerichtete Plugins — Software, die auf unzähligen Seiten im Einsatz ist, gepflegt wird und deren Fehler längst andere gefunden haben. Auf Patricias Seite blockiert der Cookie-Banner die Skripte, bis zugestimmt wurde. Auf meiner eigenen kümmert sich ein SEO-Plugin um die Angaben für Suchmaschinen.

ACF: die Oberfläche, an der du danach selbst arbeitest.

Damit eine Seite dir gehört, musst du sie ändern können, ohne mich zu fragen. Dafür sorgt Advanced Custom Fields: Jeder Text, jede Zahl, jedes Bild hängt an einem benannten Feld. Im Backend siehst du keine Baukasten-Werkzeuge, sondern Reiter — Hero, Leistungen, Stimmen, Kontakt — und darin beschriftete Eingabefelder. Es sind die Reiter dieser Seite hier: Was du gerade liest, pflege ich selbst genauso.

Du änderst eine Überschrift, ohne an ein Layout zu geraten. Du tauschst ein Bild, ohne eine Spalte zu verschieben. Das ist der Unterschied zum Pagebuilder: Dort bearbeitest du das Layout und hoffst, dass der Inhalt mitkommt. Hier bearbeitest du den Inhalt, und das Layout steht.

Schnell, weil so wenig dazwischen liegt.

Ein Pagebuilder setzt bei jedem Aufruf ein Layout zusammen und bringt dafür eigene Stylesheets und Skripte mit. Das ist der Preis für die Bedienoberfläche — und dein Publikum bezahlt ihn bei jedem Seitenaufruf mit.

9

Dateien auf pink-leadership.de

15

Dateien auf ki-canvas.de

0

Nachgeladene Stylesheets

WebP

Bilder, lazy geladen

Das merkt nicht nur dein Publikum. Google bewertet Ladezeit mit, und KI-Assistenten, die deine Seite lesen, kommen schneller an deinen Text, wenn er nicht unter Schichten von Builder-Markup liegt.

Wie so ein Projekt abläuft.

Der größte Unterschied zu früher liegt nicht im Bau, sondern davor.

01

Gespräch

Angebot, Zielgruppe, Ziel der Seite. Ohne diesen Schritt baut die beste Technik am Thema vorbei.

02

Prototyp und CI-Guide

Eine anklickbare Seite — kein Bild, sondern etwas, durch das du dich bewegen kannst — und dazu ein Leitfaden mit Farben, Schriften und Abständen.

03

Bau

Claude Code übernimmt genau dieses Ergebnis und macht daraus die WordPress-Seite. Kein Übersetzungsschritt dazwischen, bei dem Details verloren gehen.

04

Staging

Alles steht zuerst auf einer Testumgebung. Du siehst die fertige Seite, bevor sie jemand anders sieht.

05

Übergabe

Zugänge, eine Einweisung in die Felder, und danach bin ich erreichbar — aber du bist nicht auf mich angewiesen.

Der zweite Schritt ist der, der die Zusammenarbeit wirklich verändert hat. Du siehst, wie deine Seite aussehen wird, bevor eine Zeile Produktionscode existiert. Änderungswünsche kosten an dieser Stelle Minuten statt Tage — und sie kommen von dir, nicht aus meiner Vorstellung von deinem Geschäft.

Was das für Zeit und Budget heißt.

Ein Auftritt, für den früher wochenlange Handarbeit nötig war, entsteht heute in einem Bruchteil der Zeit. Die gewonnene Zeit verschwindet nicht — sie wandert an die Stellen, an denen sie etwas bewirkt: Struktur, Texte, Abstimmung mit dir. Das Ergebnis ist nicht billiger aussehend, sondern durchdachter. Und es bedeutet, dass ein professioneller Auftritt für Selbstständige und kleine Unternehmen in einer Preisklasse liegt, die vor zwei Jahren so nicht möglich war.

Wo die Grenzen liegen.

Damit kein falscher Eindruck entsteht: KI kennt deinen Markt nicht. Sie schreibt gefällige Sätze, die nichts behaupten, wenn ihr niemand sagt, was wahr ist. Sie baut ein Formular, das gut aussieht und nirgendwo ankommt, wenn es niemand abschickt.

Deshalb geht bei mir nichts ungeprüft live: jede Seite zuerst auf Staging, jeder Link geklickt, jedes Formular einmal getestet, Bedienung per Tastatur und Kontraste geprüft, Ladezeit gemessen. Die KI baut schnell. Geprüft wird trotzdem von Hand.

Häufige Fragen.

Kann eine Website wirklich vollständig mit KI erstellt werden?

Der Code ja — Layout, Stile, die Bausteine, die die Seite ausliefern. Was nicht aus der KI kommt, ist die Grundlage: deine Positionierung, deine Inhalte, die Entscheidung, was auf die Seite gehört und was nicht. Und geprüft wird von Hand, bevor etwas live geht.

Warum WordPress und nicht ein KI-Baukasten?

Ein Baukasten liefert schnell etwas Fertiges, behält deine Seite aber in seinem System. WordPress ist das meistgenutzte Content-Management-System der Welt: Die Inhalte liegen in deiner Datenbank, auf deinem Hosting, und für Standardaufgaben wie Cookie-Banner, Formulare oder Weiterleitungen gibt es gepflegte Erweiterungen, die niemand nachbauen muss.

Brauche ich noch einen Pagebuilder wie Elementor?

Nein. Der Pagebuilder ist eine Bedienoberfläche, die deine Besucherinnen und Besucher bei jedem Aufruf mitladen. Die Pflege übernimmt bei mir Advanced Custom Fields: beschriftete Felder statt Baukasten. Die ausgelieferte Seite bleibt dadurch schlank.

Wie pflege ich die Inhalte später selbst?

Über benannte Felder im WordPress-Backend, nach Reitern sortiert — Hero, Leistungen, Stimmen, Kontakt. Du änderst Text oder Bild, das Layout bleibt, wie es ist. Zur Übergabe gehört eine Einweisung.

Wie schnell sind die Seiten?

Die Startseite von pink-leadership.de lädt neun Dateien: vier Schriftschnitte, drei Bilder, ein WordPress-Skript. Kein nachgeladenes Stylesheet, kein nachgeladenes JavaScript. Möglich ist das, weil kein Pagebuilder dazwischenliegt, die Schriften lokal liegen und Bilder als WebP ausgeliefert werden.

Wie lange dauert ein Website-Projekt?

Den anklickbaren Prototyp siehst du nach wenigen Tagen. Wie lange es insgesamt dauert, hängt weniger an der Technik als an Texten, Bildern und Freigaben — in der Regel sind es Wochen, nicht Monate.

Ist eine so gebaute Seite datenschutzkonform?

Technisch fallen die üblichen Stolperstellen weg: Schriften liegen auf dem eigenen Server statt bei Google, ein Cookie-Banner blockiert Skripte bis zur Einwilligung, das Hosting lässt sich mit Auftragsverarbeitungsvertrag in Deutschland wählen. Die rechtliche Prüfung deiner Texte ersetzt das nicht.

Werde ich damit auch in KI-Assistenten gefunden?

Die Voraussetzungen stimmen: sauberes HTML, eine klare Struktur, strukturierte Daten und Antworten auf echte Fragen. Ob ein Assistent dich nennt, entscheidet er selbst — aber eine Seite, die er nicht lesen kann, hat von vornherein keine Chance.

Gehört mir die Website hinterher?

Ja. Domain, Hosting und Zugänge laufen auf dich, die Inhalte liegen in deiner Datenbank. Du kannst weiterarbeiten, mit mir oder mit jemand anderem.

Erstgespräch

Neugierig, ob das zu deinem Projekt passt?

Erzähl mir in einem kostenlosen Erstgespräch, woran du gerade arbeitest. Ich sage dir ehrlich, ob dieser Weg für dich der richtige ist — und wenn nicht, welcher es wäre.

Erstgespräch vereinbaren

30 Minuten · kostenfrei · ohne Verkaufsdruck