Quick Answer: Du kannst eine Landingpage mit KI erstellen, indem Du Claude Design für das Design-System und die HTML-Struktur nutzt, NovaMira als MCP-Bridge zu WordPress verwendest und die Seite automatisch als editierbare Divi-5-Seite veröffentlichst. Das Ergebnis ist keine starre HTML-Datei, sondern eine vollständig bearbeitbare WordPress-Seite, in etwa 60 bis 90 Minuten.
Key Takeaways
- Claude Design + NovaMira + Divi 5 ist ein eigenständiger KI-Workflow außerhalb von WordPress, der danach sauber importiert wird, kein Plugin-interner Builder
- NovaMira ist eine MCP-Bridge, die Claude Desktop vollen Zugriff auf Deine WordPress-Installation gibt, inklusive Divi 5, Gutenberg und anderen Page Buildern
- NovaMira Pro kostet aktuell rund 49 Euro im Jahr, eine überschaubare Investition für den Workflow
- Divi 5 (Release 26. Februar 2026) bringt eine neue JSON-Architektur mit, die KI-Flows wie diesen erst richtig möglich macht
- SeedProd, Divi AI und andere arbeiten nur innerhalb ihres eigenen Plugins, dieser Workflow ist bewusst anders und flexibler
- DSGVO, Cookie-Banner und Datenschutzhinweis übernimmt die KI nicht, das musst Du danach manuell ergänzen
- Kein Coding-Wissen nötig für den Grundworkflow, aber ein grundlegendes Verständnis von WordPress und Divi 5 ist hilfreich
- NovaMira funktioniert mit fast jedem Page Builder, Divi 5 ist aber meine persönliche Empfehlung für diesen Stack
Warum reines HTML aus Claude Design nicht ausreicht
Eine Landingpage mit KI erstellen klingt einfach, bis Du das fertige HTML in WordPress einfügst und feststellst, dass Du eine tote Seite hast. Kein Editor, keine Module, keine Anpassbarkeit.
Claude Design (ein Prototyping-Frontend von Anthropic Labs) ist hervorragend darin, saubere UI-Entwürfe und HTML-Landingpages zu generieren. Das Tool produziert strukturierten Code, denkt in Designsystemen und liefert schnell vorzeigbare Ergebnisse. Aber: Das Ergebnis ist statisches HTML. Wenn Du das direkt in einen WordPress-Custom-HTML-Block einfügst, bekommst Du zwar eine optisch ansprechende Seite, aber Du kannst sie nicht mehr bequem im Divi-5-Builder bearbeiten, Du kannst keine Module tauschen, keine Abstände anpassen, keine Texte über den Visual Editor ändern.
Das ist das eigentliche Problem. Und genau hier setzt NovaMira an.
Was diesen Workflow von SeedProd und Divi AI unterscheidet
Tools wie SeedProd oder Divi AI arbeiten als Landing Page Builder innerhalb ihres eigenen Plugins. Sie sind gut, aber sie sind geschlossene Systeme. Du erstellst eine Landingpage mit KI innerhalb des Tools, und bleibst dort.
Dieser Workflow hier ist anders. Claude Design läuft komplett außerhalb von WordPress. Du entwickelst Dein Design-System, Deine Struktur und Deine Inhalte in einer separaten KI-Umgebung. Erst dann, über NovaMira als Brücke, landet das Ergebnis in WordPress, direkt als editierbare Divi-5-Seite. Das gibt Dir mehr Kontrolle über das Designsystem, mehr Flexibilität beim Erstellen und ein saubereres Ergebnis im Builder.
Divi AI in Divi 5 nutzt inzwischen einen Multi-Agent-Flow für komplette Websites und Landingpages, das ist stark, aber es setzt voraus, dass Du im Divi-Ökosystem bleibst. Der Claude-Design-Workflow ist davon unabhängig.
NovaMira: Die Brücke zwischen Claude und WordPress
NovaMira ist ein WordPress-Plugin, das eine MCP-Bridge (Model Context Protocol) bereitstellt. Es gibt Claude Desktop vollen Zugriff auf Deine WordPress-Installation, inklusive der Möglichkeit, Seiten zu erstellen, Inhalte zu veröffentlichen und direkt mit Page Buildern wie Divi 5, Gutenberg oder Elementor zu arbeiten.
Das klingt technischer als es ist. In der Praxis bedeutet es: Du schreibst in Claude Desktop eine Anweisung wie „Erstelle eine Landingpage für mein Coaching-Angebot basierend auf diesem Design-System“, und NovaMira sorgt dafür, dass die Seite automatisch in Deiner WordPress-Installation erscheint, als vollständig bearbeitbare Seite.
NovaMira installieren: Free-Version und Pro
Die Free-Version von NovaMira ist im WordPress-Plugin-Verzeichnis verfügbar und deckt Grundfunktionen ab. Für den vollständigen Workflow mit Divi 5 und automatischer Seitenveröffentlichung brauchst Du die Pro-Version, aktuell für rund 49 Euro im Jahr eine sehr überschaubare Investition.
Installation Schritt für Schritt:
- Lade NovaMira aus dem WordPress-Plugin-Verzeichnis herunter oder kaufe die Pro-Version direkt auf der NovaMira-Website
- Installiere das Plugin über Plugins > Installieren > Plugin hochladen
- Aktiviere das Plugin nach der Installation
- Trage unter den Plugin-Einstellungen Deinen Lizenzschlüssel ein (Pro-Version)
- Verbinde Claude Desktop über die MCP-Verbindungseinstellungen
Bevor Du anfängst, gilt eine wichtige Regel.
Staging-Seite und Backup vor dem Start
Bevor Du NovaMira mit Deiner Live-Website verbindest, richte eine Staging-Umgebung ein oder erstelle ein vollständiges Backup. KI-generierte Aktionen in WordPress können unerwartete Ergebnisse produzieren, das ist kein Fehler des Tools, sondern einfach die Natur agentischer Workflows.
Für Backups nutze ich WP Vivid Pro für automatisierte WordPress-Backups. Das dauert fünf Minuten und schützt Dich vor unangenehmen Überraschungen. Viele Hoster wie All-Inkl bieten auch eingebaute Staging-Funktionen an.
Lizenz eintragen und Claude Desktop verbinden
Nach der Aktivierung gehst Du in den NovaMira-Einstellungen auf den Reiter MCP-Verbindung. Dort findest Du einen API-Endpunkt und einen Token, den Du in Claude Desktop einträgst. Claude Desktop (die Desktop-App von Anthropic) muss dafür installiert sein, das ist die Voraussetzung für diesen Workflow.
In Claude Desktop fügst Du NovaMira als MCP-Server hinzu. Das passiert über die Einstellungen unter Developer > MCP Servers. Du trägst den Endpunkt und den Token ein, speicherst und startest Claude Desktop neu.
Verbindung zwischen Claude und WordPress testen
Bevor Du mit der eigentlichen Landingpage beginnst, teste die Verbindung. Schreibe in Claude Desktop einfach: „Erstelle eine Test-Seite in WordPress mit dem Titel ‚NovaMira Test'“. Wenn die Seite in Deinem WordPress-Dashboard erscheint, funktioniert die Verbindung.
Falls nicht, prüfe: Ist der API-Endpunkt korrekt eingetragen? Ist der Token noch gültig? Läuft Deine WordPress-Installation auf HTTPS? NovaMira benötigt eine gesicherte Verbindung.
Design System und Landingpage in Claude Design erstellen
Mit funktionierender Verbindung geht es an den eigentlichen kreativen Teil. Und hier liegt der größte Unterschied zu anderen KI-Landingpage-Workflows: Du fängst nicht mit dem Inhalt an, Du fängst mit dem Designsystem an.
Design System in Claude Design erstellen
Ein Designsystem ist die Grundlage für konsistente Ergebnisse. Wenn Du Claude Design ohne Designsystem nutzt, bekommst Du jedes Mal einen anderen visuellen Stil. Mit einem Designsystem bleiben Farben, Typografie, Abstände und Komponenten konsistent, auch über mehrere Seiten hinweg.
Öffne Claude Design (labs.anthropic.com/design) und starte ein neues Projekt. Gib Claude folgende Informationen:
- Primärfarbe und Sekundärfarbe (Hex-Codes)
- Schriftarten (z.B. Inter für Fließtext, Playfair Display für Headlines)
- Tonalität (professionell, warm, modern, minimalistisch)
- Zielgruppe (z.B. Coaches und Berater, 35-55 Jahre)
- Hauptversprechen der Landingpage
Claude Design generiert daraus ein vollständiges Designsystem mit Farbpalette, Typografie-Skala, Abstandsregeln und UI-Komponenten. Speichere dieses Designsystem, Du wirst es für alle weiteren Seiten wiederverwenden.
Struktur einer guten Landingpage festlegen
Bevor Du die Landingpage generierst, lege die Struktur fest. Eine konvertierende Landingpage für Coaches und Kursanbieter folgt einem bewährten Muster:
| Abschnitt | Funktion | Priorität |
|---|---|---|
| Hero mit Headline | Sofort klarmachen, was Du anbietest | Hoch |
| Problem-Agitation | Besucher abholen, wo sie stehen | Hoch |
| Lösung / Angebot | Dein Angebot klar positionieren | Hoch |
| Social Proof | Vertrauen aufbauen (Testimonials, Zahlen) | Mittel |
| Über Dich | Kurze Vorstellung, Expertise zeigen | Mittel |
| CTA / Kontakt | Klare Handlungsaufforderung | Hoch |
| Footer | Impressum, Datenschutz, Links | Pflicht |
Gib diese Struktur als Prompt in Claude Design ein, zusammen mit Deinem Designsystem. Claude generiert dann eine vollständige HTML-Landingpage, die dieser Struktur folgt.
Landingpage in Claude Design generieren
Der Prompt für die Landingpage-Generierung sollte konkret sein. Beispiel:
„Erstelle eine vollständige HTML-Landingpage für einen Business-Coach, der Selbstständige dabei begleitet, ihr erstes digitales Produkt zu launchen. Nutze das folgende Designsystem: [Designsystem einfügen]. Struktur: Hero, Problem, Lösung, Testimonials, Über mich, CTA. Sprache: Deutsch, Du-Ansprache, direkt und klar.“
Claude Design generiert daraus sauberes, semantisches HTML mit eingebettetem CSS. Die Seite ist responsive, sieht professionell aus und folgt Deinem Designsystem. Das Ergebnis kannst Du direkt im Browser-Preview von Claude Design sehen.
Projekt-HTML exportieren und in Claude hochladen
Exportiere das generierte HTML als Datei. In Claude Desktop kannst Du diese Datei direkt hochladen und als Kontext für den nächsten Schritt nutzen. Alternativ kopierst Du den HTML-Code direkt in den Chat.
Landingpage automatisch in Divi 5 veröffentlichen
Jetzt kommt der entscheidende Schritt: NovaMira übersetzt das HTML in eine editierbare Divi-5-Seite.
In Claude Desktop lädst Du die HTML-Datei hoch und gibst folgenden Prompt:
„Veröffentliche diese Landingpage in WordPress als neue Seite mit dem Titel ‚Coaching Angebot‘. Nutze Divi 5 als Page Builder. Die Seite soll als Entwurf gespeichert werden, nicht sofort live gehen.“
NovaMira verarbeitet diesen Befehl, analysiert die HTML-Struktur und erstellt die Seite in WordPress. Dabei passiert etwas Wichtiges: NovaMira konvertiert das HTML nicht einfach in einen Custom-HTML-Block. Es erstellt echte Divi-5-Module, Sections, Rows, Text-Module, Button-Module, Image-Module. Die Seite ist danach vollständig im Divi-5-Builder bearbeitbar.
Das ist der Kernunterschied zu anderen Ansätzen. Und genau hier macht die neue JSON-Architektur von Divi 5 (seit dem Release am 26. Februar 2026) den Unterschied: Divi 5 speichert Seiten nicht mehr als PHP-Shortcodes, sondern als strukturiertes JSON. Das ist maschinell lesbar und schreibbar, ideal für KI-Workflows wie diesen.
Ergebnis im Divi-5-Builder anpassen
Nach der automatischen Erstellung öffnest Du die Seite im Divi-5-Builder. Was Du vorfindest, ist eine vollständig strukturierte Seite mit echten Modulen. Du kannst:
- Texte direkt im Visual Editor ändern, kein Code nötig
- Bilder austauschen, einfach per Klick
- Farben und Abstände anpassen, über die Divi-5-Designoptionen
- Module verschieben, duplizieren oder löschen, per Drag-and-Drop
- Neue Abschnitte hinzufügen, aus der Divi-5-Modulbibliothek
Für einen tieferen Einstieg in die Möglichkeiten von Divi 5 empfehle ich meinen Artikel über Divi 5, neue Möglichkeiten für Deine WordPress Website. Und wenn Du den kompletten Aufbau einer WordPress-Website mit Divi 5 lernen möchtest, findest Du alles in meiner Schritt-für-Schritt-Anleitung WordPress Website erstellen mit Divi 5.
Was KI nicht kann: DSGVO, Cookie-Banner, Datenschutz
Das ist der Teil, den viele übersehen, und der in Deutschland rechtlich relevant ist.
KI-Tools wie Claude übernehmen keine rechtlichen Pflichten. Eine automatisch generierte Landingpage hat standardmäßig:
- Keinen Cookie-Banner, Pflicht bei Einsatz von Tracking oder externen Ressourcen
- Keine Datenschutzerklärung, gesetzlich vorgeschrieben
- Kein Impressum, in Deutschland Pflicht für geschäftliche Websites
- Keine DSGVO-konformen Formulare, Einwilligungstexte und Hinweise fehlen
- Möglicherweise externe Schriftarten, Google Fonts direkt aus dem CDN verstoßen gegen die DSGVO
Diese Punkte musst Du nach der KI-Generierung manuell ergänzen. Das ist keine Kritik am Workflow, es ist einfach die Realität. KI kann Dir die Technik abnehmen, aber nicht die rechtliche Verantwortung.
Meine Checkliste nach der KI-Generierung:
- ✅ Cookie-Banner einrichten (z.B. Complianz oder Borlabs Cookie)
- ✅ Datenschutzerklärung verlinken (Footer)
- ✅ Impressum verlinken (Footer)
- ✅ Kontaktformular mit DSGVO-Hinweis versehen
- ✅ Google Fonts lokal hosten, wie das geht, erkläre ich in meiner Anleitung zu Divi Schriften DSGVO-konform installieren
- ✅ Analytics-Tool DSGVO-konform konfigurieren oder weglassen
Das klingt nach viel, ist aber in 30 bis 60 Minuten erledigt, wenn Du weißt, was zu tun ist.
Häufige Fragen zum Workflow
Was ist eine Landing Page und warum brauche ich sie?
Eine Landing Page ist eine einzelne Webseite, die auf ein konkretes Ziel ausgerichtet ist, meistens eine Anmeldung, ein Kauf oder eine Kontaktaufnahme. Anders als Deine Startseite hat sie keine Ablenkungen und führt Besucher direkt zur gewünschten Handlung. Für Coaches, Kursanbieter und Solopreneure ist eine gute Landing Page oft der wichtigste Traffic-Konversionspunkt überhaupt.
Wie hilft KI dabei, Landingpages schneller zu erstellen?
KI übernimmt die zeitaufwendigen Teile: Textentwürfe, Strukturvorschläge, HTML-Gerüst und Design-Entscheidungen. Was früher mehrere Stunden Arbeit war, Wireframe, Copywriting, Coding, Styling, dauert mit Claude Design und NovaMira zusammen rund 60 bis 90 Minuten. Du investierst Deine Zeit in die strategischen Entscheidungen, nicht in die Ausführung.
Claude Design vs. NovaMira vs. Divi 5, welches ist wofür zuständig?
Diese drei Tools erfüllen unterschiedliche Aufgaben im Workflow:
Claude Design ist das Kreativ-Tool: Designsystem, Struktur, HTML-Generierung
NovaMira ist die technische Brücke: Verbindet Claude Desktop mit WordPress und übersetzt HTML in Divi-5-Module
Divi 5 ist der finale Editor: Hier passt Du die importierte Seite an, ergänzt Inhalte und veröffentlichst
Keines der drei Tools ist allein ausreichend. Zusammen ergeben sie einen durchgängigen
Kann ich Landingpages mit KI erstellen, ohne zu programmieren?
Ja, für den Grundworkflow brauchst Du kein Coding-Wissen. Du musst Claude Desktop installieren und konfigurieren können, NovaMira in WordPress einrichten und grundlegend mit dem Divi-5-Builder umgehen. Das sind alles Klick-Aktionen, kein Code. Wer noch keine Erfahrung mit WordPress hat, sollte sich zuerst mit den Grundlagen vertraut machen, meine WordPress Website erstellen Schritt für Schritt Anleitung ist ein guter Startpunkt.
Was kostet es, eine Landingpage mit KI in WordPress zu erstellen?
Die Kosten sind überschaubar:
Claude Pro (für Claude Design und Claude Desktop): ca. 20 USD/Monat
NovaMira Pro: ca. 49 Euro/Jahr
Divi 5 (10 % Rabatt über meinen Link): ca. 89 USD/Jahr
Hosting (z.B. All-Inkl): ab ca. 10 Euro/Monat
Einmalige Gesamtinvestition für den Stack: unter 200 Euro. Im Vergleich zu einer Agentur-Landing-Page (typisch 800 bis 3.000 Euro) ist das ein erheblicher Unterschied. Wenn Du Divi noch nicht nutzt, lohnt sich ein Blick auf meine Divi Theme Experten-Seite für weitere Informationen.
Konvertiert KI-generierter Landing-Page-Content gut?
KI-generierter Content ist ein guter Ausgangspunkt, aber kein Selbstläufer. Claude produziert strukturell saubere Texte, die dem bewährten AIDA-Muster (Attention, Interest, Desire, Action) folgen. Was KI nicht kennt: Deine spezifische Zielgruppe, Deine persönliche Geschichte und die konkreten Einwände Deiner potenziellen Kunden. Nutze den KI-Text als Grundlage und überarbeite ihn mit Deiner eigenen Stimme und echten Kundenzitaten. Das macht den Unterschied zwischen einer durchschnittlichen und einer wirklich konvertierenden Seite.
Was sind häufige Fehler beim Einsatz von KI für Landingpages?
Die häufigsten Fehler, die ich in der Praxis sehe:
Kein Designsystem vorab, führt zu inkonsistentem Ergebnis
Zu generischer Prompt, „Erstelle eine Landingpage für Coaches“ reicht nicht
DSGVO ignorieren, rechtliches Risiko, besonders in Deutschland
Kein Backup vor dem NovaMira-Einsatz, kann zu unerwarteten Änderungen führen
Ergebnis nicht im Builder nachbearbeiten, KI-Output ist immer ein Entwurf, kein Endprodukt
Mobile Ansicht nicht prüfen, immer im Divi-5-Builder auf Mobiloptimierung testen
Kann ich KI-generierte Landingpages nach der Erstellung bearbeiten?
Ja, und das ist der entscheidende Vorteil dieses Workflows gegenüber reinen HTML-Importen. NovaMira erstellt echte Divi-5-Module, keine starren HTML-Blöcke. Du kannst nach der automatischen Erstellung jeden Text, jedes Bild, jede Farbe und jeden Abstand direkt im Divi-5-Builder ändern. Keine Programmierkenntnisse nötig.
Ist KI-Landingpage-Erstellung für Anfänger geeignet?
Mit einer Einschränkung: ja. Der Claude-Design-Teil ist sehr zugänglich. Die NovaMira-Konfiguration erfordert etwas technisches Verständnis (Claude Desktop installieren, MCP-Server konfigurieren). Wer noch nie mit WordPress gearbeitet hat, sollte sich zuerst die Grundlagen aneignen. Für erfahrene WordPress-Nutzer ist der Workflow nach einer Einarbeitungszeit von ein bis zwei Stunden sehr flüssig.
Wie lange dauert es, eine Landingpage mit KI-Tools zu bauen?
Für den vollständigen Workflow, Designsystem erstellen, Struktur festlegen, Landingpage generieren, importieren, nachbearbeiten, rechne mit 60 bis 90 Minuten beim ersten Mal. Ab dem zweiten Projekt, wenn Dein Designsystem bereits steht, reduziert sich das auf 30 bis 45 Minuten für eine neue Seite.
Funktionieren KI-Landingpage-Builder mit allen WordPress-Themes?
NovaMira selbst funktioniert mit fast jedem Page Builder, Divi 5, Gutenberg, Elementor und anderen. Divi 5 ist meine Empfehlung, weil die neue JSON-Architektur KI-Workflows besonders gut unterstützt. Bei anderen Themes ohne Page Builder ist das Ergebnis weniger flexibel bearbeitbar. Wenn Du Divi 5 noch nicht nutzt, findest Du alle Informationen in meinem Artikel Was ist Divi?
Können KI-generierte Landingpages bei Google ranken?
Ja, wenn Du SEO-Grundlagen beachtest. Claude kann auf Anfrage SEO-optimierte Texte mit Keyword-Integration generieren. Wichtig: Meta-Titel, Meta-Description und strukturierte Daten musst Du in WordPress manuell ergänzen, zum Beispiel über RankMath, das ich in meinem Artikel über SEO mit RankMath und Divi erkläre. KI-generierter Content ist für Google nicht von menschlich geschriebenem Content unterscheidbar, solange er hilfreich und relevant ist.
Wie optimiere ich eine KI-generierte Landingpage für Mobilgeräte?
Divi 5 hat eine eingebaute responsive Steuerung. Nach dem Import öffnest Du die Seite im Divi-5-Builder und wechselst in die Mobilansicht (Smartphone-Icon in der unteren Toolbar). Dort kannst Du Schriftgrößen, Abstände und Spaltenbreiten für Mobilgeräte separat anpassen. Prüfe besonders: Hero-Bereich, CTA-Button-Größe und Bilddarstellung. Eine gute Anleitung für spezifische Divi-5-Mobiloptimierungen findest Du in meinem Artikel über Divi 5, Reihenfolge von Spalten mobil ändern.
Vergleich: Landingpage mit KI selbst erstellen vs. vom Experten bauen lassen
| Kriterium | Mit KI selbst erstellen | Vom Experten bauen lassen |
|---|---|---|
| Zeitaufwand | 60-90 Min. (nach Einarbeitung) | 1-5 Werktage (Briefing bis Live) |
| Technisches Vorwissen | WordPress-Grundkenntnisse nötig | Keines, Experte übernimmt alles |
| Kosten | Tool-Abos (unter 200 €/Jahr) | 800-3.000 € einmalig |
| Design-Qualität | Gut mit Designsystem, variiert | Professionell, maßgeschneidert |
| DSGVO & Rechtliches | Muss manuell ergänzt werden | Experte prüft und integriert |
| Support danach | Selbst verantwortlich | Wartung und Anpassungen möglich |
Fazit: Lohnt sich der Workflow?
Ja, mit einer klaren Einschränkung.
Der Claude-Design-NovaMira-Divi-5-Workflow ist der bisher sauberste Weg, den ich kenne, um eine Landingpage mit KI erstellen zu lassen und danach ein vollständig bearbeitbares Ergebnis in WordPress zu haben. Kein starres HTML, keine Abhängigkeit von einem einzigen Plugin-Ökosystem, kein Lock-in.
Was mich besonders überzeugt: Das Designsystem-First-Denken. Wenn Du einmal ein gutes Designsystem in Claude Design aufgebaut hast, kannst Du damit beliebig viele weitere Seiten generieren, die alle konsistent aussehen. Das ist ein echter Produktivitätsvorteil für Coaches und Kursanbieter, die regelmäßig neue Angebote launchen.
Was Du nicht vergessen darfst: DSGVO, Cookie-Banner und Datenschutz sind Deine Aufgabe. KI nimmt Dir die Technik ab, nicht die Verantwortung. Plane 30 bis 60 Minuten für die rechtliche Nacharbeit ein, das ist keine Option, sondern Pflicht.
Für wen lohnt sich der Workflow besonders:
- Coaches und Kursanbieter, die regelmäßig neue Landing Pages für Angebote brauchen
- Solopreneure mit WordPress-Grundkenntnissen, die Agenturkosten sparen wollen
- WordPress-Nutzer, die bereits Divi 5 einsetzen und den Stack erweitern möchten
Für wen ist professionelle Unterstützung sinnvoller:
- Wer keine Zeit für die Einarbeitung hat
- Wer eine hochwertige, individuell konzipierte Seite für ein wichtiges Launch-Projekt braucht
- Wer DSGVO-Konformität und technische Absicherung lieber delegiert
Wenn Du Dir unsicher bist, welcher Weg für Dein Projekt passt, buch Dir ein kostenloses Erstgespräch auf web-begeistert.de. Wir schauen gemeinsam, ob der KI-Workflow für Dich Sinn macht oder ob eine professionelle Umsetzung die bessere Investition ist.
0 Kommentare