Bleib up-to-date mit unserem Newsletter!
KI-Wissen.org pro
Die Plattform für KI-Automatisierungen — wachse mit uns von Anfang an
Gründerpreis sichernClaude Design baut deine Landingpage – Claude veröffentlicht sie (gratis hosten)
Mit Claude Design erstellst du professionelle Landingpages ohne Programmierkenntnisse – und mit Claude Code veröffentlichst du sie anschließend kostenlos im Internet. Komplett automatisch, ohne einen einzigen Anbieter manuell aufzurufen.
In diesem Tutorial zeige ich dir den kompletten Workflow an zwei Praxisbeispielen: vom eigenen Design System über die fertige Landingpage bis zur automatischen Veröffentlichung über GitHub, Cloudflare Pages und eigener Subdomain. Am Ende hast du eine live erreichbare Landingpage unter deiner eigenen Domain – gehostet mit unbegrenzter Bandbreite und ohne monatliche Kosten.
Was ist Claude Design?
Claude Design ist ein visuelles Prototyping-Tool von Anthropic, das seit dem 17. April 2026 als Research Preview verfügbar ist. Es wird von Claude Opus 4.7 angetrieben und ist für Claude Pro-, Max-, Team- und Enterprise-Abonnenten zugänglich.
Mit Claude Design generierst du produktionsreifes HTML, CSS und JavaScript aus natürlicher Sprache – ohne eine Zeile Code selbst zu schreiben. Laut Anthropic richtet sich das Tool an Designer, Produktteams und Nicht-Entwickler, die interaktive Prototypen erstellen möchten.
Die fertigen Designs lassen sich als standalone HTML exportieren, als PDF speichern, zu Canva übertragen oder direkt an Claude Code übergeben – und genau das nutzen wir in diesem Tutorial für die automatische Veröffentlichung.
Design System erstellen: Eigene Farben, Schriften und Logo
Bevor du eine Landingpage baust, lohnt es sich, ein Design System anzulegen. Das spart später viel Zeit, weil alle zukünftigen Projekte automatisch im gleichen Look erstellt werden.
So funktioniert es
Im Bereich „Design Systems“ in Claude Design findest du oben und unten Textfelder. Diese sind keine einfachen Eingabefelder – alles, was du hier eingibst, wirkt sich direkt auf das generierte Design aus:
Claude generiert daraus ein komplettes Design System, das du weiter anpassen kannst – zum Beispiel vom Dunkelmodus in den Hellmodus wechseln, zusätzliche Schriften hinzufügen oder Farben ändern.
Profi-Tipp: Du kannst auch deine bestehende Website als Vorlage nutzen. Lass Claude die Seite beschreiben und erstelle daraus ein Design System – so übernimmt die KI automatisch deine Farben und Gestaltungselemente.
Achtung: Das Erstellen eines Design Systems verbraucht einige Tokens. Experimentiere daher nicht zu viel und speichere das Ergebnis ab, sobald du zufrieden bist.
Praxisbeispiel 1: Landingpage mit eigenem Design System
Im Reiter „Prototyp“ wird das gespeicherte Design System automatisch ausgewählt. Du gibst deinen Prompt ein – das kann eine kurze Beschreibung oder ein ausführlicher Brief sein.
Claude Design stellt Rückfragen
Das Besondere: Claude Design legt nicht sofort los, sondern stellt dir zunächst gezielte Rückfragen zu deinem Projekt. Du musst also nicht alles im Prompt formulieren, sondern klickst dich einfach durch die Fragen. Häufig gibt es dabei auch die Möglichkeit, zusätzliche Informationen einzugeben. Erst wenn du alles durchgegangen bist, startest du das Projekt.
Das Ergebnis
Das Ergebnis ist eine interaktive Landingpage, die die Design-Elemente deiner Vorgaben übernimmt. Im Video siehst du, dass die erstellte Landingpage deutliche Designähnlichkeiten mit der Original-Website aufweist – Farben, Schriften und Layout stimmen überein.
Diese Landingpage könntest du zum Beispiel als Subdomain vor deine eigentliche Website schalten, sodass du deine WordPress-Seite gar nicht bearbeiten musst und schnell KI-erstellte Landingpages einbinden kannst.
Praxisbeispiel 2: Von einer Website inspirieren lassen
Du kannst Claude Design auch den Link einer Website mitgeben, deren Stil dir gefällt. Dafür deaktivierst du zunächst dein eigenes Design System.
So gehst du vor
Das Ergebnis ist eine Mischung: Claude übernimmt Design-Elemente der Vorlage (Farben, Layoutstruktur, Gestaltungsmuster) und kombiniert sie mit deinen eigenen Inhalten. Dabei wird die Seite nicht kopiert – es entsteht ein eigenständiges Design mit der gleichen visuellen Sprache.
Anschließend kannst du die Landingpage weiter anpassen: Schriftgrößen ändern, Farben tauschen, direkt auf der Seite Kommentare hinterlassen oder über das Chatfeld Änderungswünsche eingeben.
Landingpage kostenlos veröffentlichen
Claude Design selbst bietet keine Möglichkeit, Landingpages direkt zu veröffentlichen. Aber genau hier kommt Claude Code ins Spiel.
Der Workflow in 3 Schritten
Exportieren
Landingpage in Claude Design fertigstellen und den Export-Code kopieren
Importieren
Claude Desktop-App öffnen, Code einfügen und bestätigen
Veröffentlichen
Den Prompt eingeben – Claude erledigt den Rest automatisch
Claude erstellt automatisch eine Subdomain, lädt die Dateien bei GitHub hoch, richtet Cloudflare Pages ein und verknüpft alles mit deiner Domain. Du musst nur noch die Berechtigungen bestätigen.
Voraussetzungen & benötigte Dienste
Damit die automatische Veröffentlichung funktioniert, brauchst du folgende Accounts:
Claude (Pro-, Max- oder Team-Abo)
Für Claude Design und Claude Code. Ab 20 $/Monat. Claude Design ist als Research Preview im Abo enthalten.
GitHub
Versionsverwaltung für deine Landingpage-Dateien. Private Repositories sind im Free-Tier unbegrenzt verfügbar.
Cloudflare Pages
Hosting mit unbegrenzter Bandbreite, 500 Builds/Monat, automatischem HTTPS. Kommerzielle Nutzung erlaubt.
Domain-Anbieter mit MCP-Server
Im Video: IONOS für DNS-Verwaltung. Funktioniert auch mit anderen Anbietern, sofern ein MCP-Server verfügbar ist.
MCP-Server einrichten
Damit Claude automatisch mit GitHub, Cloudflare und deinem Domain-Anbieter kommunizieren kann, müssen MCP-Server (Model Context Protocol) eingerichtet werden. Das sind Schnittstellen, die Claude Code den direkten Zugriff auf externe Dienste ermöglichen – ohne dass du die jeweiligen Websites manuell aufrufen musst.
Die 3 benötigten MCP-Server
Die Einrichtung ist einfach: In Claude Code gibst du den Anbieter ein und Claude richtet die Verbindung automatisch ein, sofern ein MCP-Server verfügbar ist. Achte bei der Auswahl deiner Dienste in Zukunft darauf, dass MCP-Server-Unterstützung vorhanden ist – das ist die Voraussetzung für automatisierte Workflows.
Der Prompt für die automatische Veröffentlichung
Wenn die MCP-Server eingerichtet sind, übernimmt Claude den kompletten Veröffentlichungsprozess mit einem einzigen Prompt. Kopiere den folgenden Prompt in Claude Code und passe Domain, Subdomain-Name und Repository-Name an dein eigenes Projekt an.
Was der Prompt Schritt für Schritt macht
1. Subdomain erstellen
Claude legt über den IONOS-MCP-Server die gewünschte Subdomain an (z. B. landingpage.ki-booster.org).
2. GitHub-Repository anlegen
Ein privates Repository wird erstellt und die Landingpage-Dateien (HTML, CSS, JS) werden hochgeladen.
3. Cloudflare Pages einrichten
Ein Hosting-Projekt wird erstellt und mit GitHub verknüpft. Bei jedem Push wird die Seite automatisch aktualisiert.
4. Domain verknüpfen
Custom Domain in Cloudflare hinzufügen + CNAME-Eintrag bei IONOS setzen. Inklusive automatischem SSL-Zertifikat.
Am Ende erhältst du die URL, unter der deine Landingpage live im Internet erreichbar ist.
Warum Cloudflare Pages?
Es gibt verschiedene kostenlose Hosting-Anbieter für statische Websites – darunter Vercel, Netlify und GitHub Pages. Cloudflare Pages hat für diesen Anwendungsfall entscheidende Vorteile:
Unbegrenzte Bandbreite
Auch im kostenlosen Tier kein Traffic-Limit. Zum Vergleich: Vercels Hobby-Tier begrenzt auf 100 GB/Monat.
Kommerzielle Nutzung erlaubt
Laut Cloudflare-Nutzungsbedingungen explizit erlaubt. Vercels kostenloses Hobby-Tier verbietet kommerzielle Nutzung.
500 Builds pro Monat
Das sind ca. 16 Deployments pro Tag – mehr als genug für die meisten Projekte und frühe Produktphasen.
Automatisches HTTPS + globales CDN
SSL-Zertifikate werden automatisch bereitgestellt. Deine Seite wird über das weltweite Cloudflare-Netzwerk ausgeliefert.
Automatische Updates: Nach der Verknüpfung mit GitHub wird bei jedem git push automatisch eine neue Version deployed. Zusätzlich bekommst du Preview-Deployments für Pull Requests, um Änderungen vor der Veröffentlichung zu testen.
Du willst KI-Workflows wie diesen in deinem Unternehmen einsetzen?
Ich zeige dir und deinem Team, wie ihr mit Claude, MCP-Servern und Automatisierungen produktiver arbeitet – praxisnah und auf euren Workflow zugeschnitten.
Häufige Fragen
Ist Claude Design kostenlos?
Nein, du brauchst ein Claude-Abo (Pro ab 20 $/Monat oder Team ab 30 $/Monat). Das Hosting über GitHub und Cloudflare ist aber komplett kostenlos – ohne Bandbreitenlimit und ohne Kreditkarte.
Kann ich meine eigene Domain verwenden?
Ja. Im Video zeige ich, wie du eine Subdomain bei IONOS erstellst und automatisch mit Cloudflare verknüpfst. Das funktioniert auch mit anderen Domain-Anbietern, sofern ein MCP-Server verfügbar ist.
Brauche ich Programmierkenntnisse?
Nein. Weder für das Erstellen der Landingpage in Claude Design noch für die Veröffentlichung. Claude übernimmt den kompletten technischen Prozess – vom GitHub-Repository bis zum DNS-Eintrag.
Was sind MCP-Server?
MCP-Server (Model Context Protocol) sind Schnittstellen, die es Claude ermöglichen, direkt mit externen Diensten wie GitHub, Cloudflare oder IONOS zu kommunizieren. Du richtest sie einmalig in Claude Code ein. Danach kann Claude diese Dienste per Prompt steuern.
Funktioniert das auch mit Codex statt Claude?
Ja, der Export und die Veröffentlichung funktionieren auch mit OpenAI Codex, sofern die entsprechenden MCP-Server dort eingerichtet sind. Die MCP-Server-Konfiguration ist in beiden Tools identisch.
Was passiert, wenn ich die Landingpage aktualisieren will?
Du änderst die Dateien lokal oder erstellst eine neue Version in Claude Design, pushst die Änderungen zu GitHub – und Cloudflare Pages deployed automatisch die neue Version. Das dauert in der Regel wenige Sekunden.