KI-Agenten wie Claude Code, OpenAI Codex oder Cursor schreiben in Minuten eine komplette Website. Das Problem zeigt sich meistens erst nach dem Launch: Der Kunde möchte die Öffnungszeiten ändern – und findet sich in einem Block mit 400 Zeilen HTML wieder. Oder in einem Page-Builder, den er nicht bedienen kann.
In diesem Artikel zeigen wir den Weg, der für beide Seiten funktioniert: Entwickler bauen mit KI, Kunden pflegen im ganz normalen WordPress-Editor.
Drei Wege, mit KI eine WordPress-Seite zu bauen
1. KI schreibt HTML und CSS
Schnell, flexibel – aber das Ergebnis landet in „Custom HTML“-Blöcken oder einem eigenen Theme-Template. Für den Kunden ist es eine Black Box. Jede Textänderung wird zum Ticket.
2. KI-Funktionen im Page-Builder
Viele Builder haben inzwischen KI-Assistenten für Texte und Abschnitte. Du bleibst aber im Builder-Ökosystem: proprietäres Format, zusätzliche Lizenzen, mehr CSS und JavaScript im Frontend – und kein Zugriff aus deinem Terminal oder deiner IDE.
3. Coding-Agent baut native Gutenberg-Blöcke
Der Agent bekommt direkten Zugriff auf WordPress und baut Seiten aus den Standard-Blöcken des Editors: Überschrift, Absatz, Bild, Buttons, Spalten, Gruppe, Cover. Das Ergebnis ist eine ganz normale WordPress-Seite. Genau dafür haben wir Blockwerk gebaut.
Schritt für Schritt: Website mit Claude Code & Blockwerk
1. WordPress vorbereiten
Installiere WordPress mit einem Block-Theme – Twenty Twenty-Five ist ein hervorragender, schlanker Start. Block-Themes erlauben es dem Agenten, auch Header, Footer und das globale Design zu steuern.
2. Blockwerk installieren und verbinden
Plugin hochladen, Lizenzschlüssel eintragen, Token erstellen und den angezeigten Befehl ausführen:
claude mcp add --transport http blockwerk https://kunde.de/wp-json/blockwerk/v1/mcp \
--header "Authorization: Bearer bw_…"3. Erst das Design-System, dann die Seiten
Der wichtigste Tipp für wartbare Websites: Lass den Agenten zuerst Farben, Schriften und Abstände in den Global Styles festlegen. Die Seiten verwenden dann diese Tokens statt fest eingebauter Farbwerte. Will der Kunde später ein anderes Grün, ändert er es an einer Stelle.
„Richte das Design-System ein: Schrift Manrope für alles, Farben Petrol #0f4c5c, Sand #e9dcc9, Off-White #faf7f2. Buttons vollständig abgerundet.“
4. Seiten beschreiben, nicht programmieren
„Bau die Startseite: großer Hero mit Foto und Button ‚Termin vereinbaren‘, darunter drei Leistungen als Karten, ein Abschnitt über das Team, Öffnungszeiten als Tabelle und ein FAQ mit fünf Fragen. Schreib die Texte für eine Physiopraxis in Leipzig.“
Der Agent legt die Seite als Entwurf an und schickt dir den Vorschau-Link. Änderungen machst du per Prompt („Hero kürzer, Button in Sand“) oder direkt im Editor – beides funktioniert, weil es dieselben Blöcke sind.
5. Header, Footer, Menü, Startseite
„Header: Logo links, Menü rechts mit Leistungen, Team, Preise, Kontakt. Footer mit Adresse, Öffnungszeiten und Instagram. Setz die neue Seite als Startseite.“
6. Übergabe
Dein Kunde bekommt eine Website, die er sofort versteht: Blöcke anklicken, Text ändern, speichern. Keine Builder-Schulung, kein zusätzliches Abo.
Worauf du achten solltest
- Inhalte prüfen. KI schreibt überzeugend, aber nicht immer korrekt. Preise, Öffnungszeiten und rechtliche Aussagen immer gegenlesen.
- Bildrechte. Nutze eigene oder lizenzierte Bilder. Beim „Nachbauen“ einer Referenz-Website gilt: Layout und Stil ja, Texte und Bilder nein.
- Barrierefreiheit & SEO. Eine H1 pro Seite, logische Überschriften, Alt-Texte, Meta-Beschreibung – Blockwerk weist den Agenten darauf hin, prüfen solltest du trotzdem.
- Rechtstexte. Impressum und Datenschutzerklärung gehören in menschliche (bzw. anwaltliche) Hände.
Fazit
KI macht den Bau einer WordPress-Website dramatisch schneller. Ob das Projekt ein Erfolg wird, entscheidet sich aber nach dem Launch – wenn der Kunde selbst etwas ändern will. Native Gutenberg-Blöcke und ein sauberes Design-System sind der Unterschied zwischen „schnell gebaut“ und „gut gebaut“.