So gestaltest du eine Landingpage mit Claude Design: Eine Schritt-für-Schritt-Anleitung

Vor ein paar Wochen hatten wir ein Kennenlerngespräch mit einem Interessenten, der eine Landingpage-Überarbeitungbrauchte. Er erwähnte beiläufig, dass er fast eine ganze Woche damit verbracht hatte, es selbst mit Claude Designzu versuchen. Er ging davon aus, dass KI-gestütztes Design ein Kinderspiel sei, und musste am Ende demütig feststellen, wie wenig er eigentlich wusste.

Die Wahrheit ist: Die Standardergebnisse von Claude Design erreichen auf einer 100-Punkte-Skala, mit der Experten die Effektivität von Landingpages bewerten, gerade einmal 38 bis 45 Punkte. Mit einem richtig durchdachten Workflow lässt sich dieser Wert auf 68 bis 78 steigern. Genau diese Lücke ist der Grund, warum manche Entwürfe aus Claude Design veröffentlicht werden und andere stillschweigend im Papierkorb landen. Und so gut wie niemand schreibt darüber, wie man diese Lücke schließt.

Claude Design ist die visuelle Arbeitsumgebung von Anthropic, getrennt von Claude Code und der normalen Chat-Oberfläche. Seit dem Start im April 2026 verzeichnet das Tool bereits 222.000 Suchanfragen pro Monat weltweit – ein Zeichen dafür, dass die Nutzung die hilfreichen Anleitungen bei weitem überholt. Die meisten, die es zum ersten Mal öffnen, erstellen etwas, das ganz passabel aussieht, denken, sie seien fertig, und wundern sich später, warum die Seite nicht die gewünschte Performance bringt.

Wir haben diesen Leitfaden geschrieben, um Gründern, Marketern und Produktmanagern alles zu vermitteln, was sie über das Designen einer Landingpage mit Claude Designwissen müssen – egal, ob du nur einen schnellen Entwurf oder eine perfekt ausgearbeitete Seite für den Livegang brauchst. Design- oder Programmierkenntnisse sind nicht erforderlich.

Das erwartet dich in diesem Guide:

• Was Claude Design ist und wie es sich von Claude Code und Figma unterscheidet
• Wie es im Vergleich zu anderen KI-Designtools wie v0, Framer AI und Lovable abschneidet
• Was du vorbereiten solltest, bevor du Claude Design zum ersten Mal öffnest
• Wie du ein Design-System aufbaust, damit deine Ergebnisse nicht nach 08/15 aussehen
• Wie du einen ersten Prompt schreibst, der auch wirklich brauchbare Ergebnisse liefert
• Wie du deine Entwürfe über das Tweaks-Panel und die On-Canvas-Tools verfeinerst
• Der menschliche Feinschliff, den die meisten auslassen – und warum das teuer werden kann
• Vom Prototyp zur Live-Seite: Drei Wege für die Veröffentlichung
• Die häufigsten Fehler und wie du sie vermeidest

{{freebie}}

‍

Wenn du komplett neu bei Claude Design bist, empfehlen wir dir, hier mit der Lektüre unseres Startup-Guides für Claude Design zu starten.

‍

Was ist Claude Design?

Claude Design ist der spezielle Arbeitsbereich von Anthropic für visuelle Kreationen, getrennt vom normalen Claude-Chat. Hier erhältst du eine Arbeitsfläche, auf der du beschreiben kannst, was du erstellen möchtest, Marken-Assets hochladen kannst und Claude eine designte, programmierte Seite generieren lässt, die du weiter anpassen und schließlich veröffentlichen kannst.

Es ist wichtig, klarzustellen, was Claude Design nicht ist, da hier oft Verwirrung herrscht. Es ist kein Ersatz für Figma. Es ist nicht dasselbe wie Claude Code, das Kommandozeilen-Tool von Anthropic zum Schreiben und Bereitstellen von Code. Und es ist auch nicht dasselbe wie Claude Artifacts, das interaktive Inhalte direkt im Chatfenster erstellt. Claude Design hat seinen ganz eigenen Zweck: Es ist die Brücke zwischen „Ich habe eine Idee“ und „Ich habe einen funktionierenden Prototyp, den ich jemandem zeigen kann.“

Am besten versteht man die Stärken und Grenzen von Claude Design, wenn man es direkt mit einem klassischen Design-Tool vergleicht:

‍

Stell dir Claude Design wie einen UX-Strategen, Texter und Frontend-Entwickler vor, die auf Basis deines Briefings arbeiten. Es ist kein Grafikdesigner, der maßgeschneiderte visuelle Assets erstellt.

Noch ein wichtiger Hinweis vorab: Wenn Mike Krieger, der Mitgründer von Instagram, der später in den Vorstand von Figma wechselte, hat Figma verlassen, um bei Anthropic als Chief Product Officer einzusteigen – und das war kein Zufall. Der Start von Claude Design im April 2026 ließ den Aktienwert von Figma an einem einzigen Tag um 7 % einbrechen. Der Wettbewerbsdruck ist hier absolut real und erklärt, warum Claude Design so konzipiert wurde, dass es einen Großteil des Design-Workflows ohne professionelle Designer bewältigen kann.

Mike Krieger, Co-Leiter von Anthropic Labs

"2026 könnte das Jahr werden, in dem KI in großen Unternehmen damit beginnt, den Menschen zuverlässig Arbeit abzunehmen."

‍

Claude Design im Vergleich zu anderen KI-Designtools

Claude Design ist nicht das einzige KI-Tool, das diesen Anspruch erhebt. Hier ist der Vergleich mit den wichtigsten Alternativen anhand von fünf entscheidenden Kriterien:

‍

Der Hauptvorteil von Claude Design gegenüber v0 und Lovable liegt darin, dass es UX-Strategie, Copywriting und Code-Generierung in einem Workflow vereint, anstatt nur von einem Design-Prompt auszugehen und Code zu erstellen. Die größte Einschränkung im Vergleich zu Framer AI ist, dass der Output von Framer bereits für eine spezifische Publishing-Plattform optimiert ist, was den Weg zur Live-Seite für technisch weniger versierte Nutzer direkter macht. Wir gehen in Schritt 4 detailliert auf die Bereitstellungsoptionen ein.

{{cta}}

‍

Was du brauchst, bevor du mit Claude Design loslegst

Bevor wir die einzelnen Schritte durchgehen, sollten wir ehrlich darüber sprechen, welchen Plan du benötigst und für wen dieser Workflow eigentlich gedacht ist.

Zum Plan-Zugang: Claude Design ist in der kostenlosen Version verfügbar, allerdings mit deutlichen Einschränkungen bei der Anzahl der Projekte und der Iterationsmöglichkeiten pro Sitzung. Der vollständige Workflow, wie er in diesem Leitfaden beschrieben wird – inklusive Einrichtung des Design-Systems, Verfeinerung der Prompts und Export –, funktioniert am besten mit dem Pro-Plan (ca. 20 $ pro Monat). Wenn du die kostenlose Version nutzt, stößt du möglicherweise mitten im Workflow an Sitzungslimits, was gerade bei Verfeinerungen frustrierend sein kann. Zwei intensive Design-Sitzungen können bis zu 58 % des wöchentlichen Limits eines Pro-Plans verbrauchen – das solltest du also vorher wissen.

Für wen ist das geeignet: Dieser Leitfaden richtet sich an Gründer, Marketer und Produktmanager, die eine funktionierende Landingpage benötigen und gerade keinen professionellen Designer zur Hand haben. Du musst nicht programmieren können. Du brauchst keine Designerfahrung. Was du jedoch brauchst, ist ein klares Verständnis deines Produkts, deiner Zielgruppe und davon, was Besucher tun sollen, wenn sie auf deiner Seite landen.

Bevor du Claude Design öffnest, halte Folgendes bereit:

• Dein Produktname und eine kurze, verständliche Beschreibung, was es genau macht
• Deine Zielgruppe (werde konkret: „B2B-SaaS-Gründer in Unternehmen mit 10 bis 50 Mitarbeitern“ ist hilfreicher als „Unternehmen“)
• Dein primäres Conversion-Ziel (Demo buchen, kostenlose Testversion starten, Leitfaden herunterladen)
• Deine Hauptkonkurrenten (drei bis fünf Namen)
• Dein wichtigstes Alleinstellungsmerkmal (was du machst, was sie nicht machen, in einem Satz)
• Deine Logodatei und dein Brand-Guide als PDF, falls vorhanden
• Deine aktuelle Website-URL, falls vorhanden
• Drei bis fünf URLs von Landingpages, die du gut findest, egal von welcher Firma

Die letzten beiden Punkte auf dieser Liste sind wichtiger, als die meisten denken. Wir erklären dir im nächsten Abschnitt, warum.

‍

Schritt 1: Dein Design-System einrichten

Wenn es eine Claude-Design-Fähigkeit gibt, die du unbedingt als Erstes lernen solltest, dann diese. Für Teams, die gezielt nach der Claude-Frontend-Design-Fähigkeitgesucht haben: Genau hier kommt sie zum Einsatz. Es ist die Kontextebene, die darüber entscheidet, ob der Frontend-Code von Claude zu deiner Marke passt oder ob er nur eine Standardvorlage ausspuckt. Das Design-System zu überspringen ist der häufigste Grund, warum Ergebnisse austauschbar wirken.

Wenn du Claude Design öffnest, eine kurze Produktbeschreibung eingibst und auf „Generieren“ klickst, ohne vorher ein Design-System anzulegen, erhältst du etwas, das aussieht wie jede andere KI-generierte Landingpage: sauber, solide, aber absolut austauschbar mit deiner Konkurrenz. Das Design-System ist der Weg, wie du Claude einen dauerhaften visuellen Kontext gibst. Ohne dieses System trifft Claude visuelle Entscheidungen völlig willkürlich. Mit dem System basieren Claudes Entscheidungen direkt auf deiner Marke.

So richtest du es ein:

1. Gehe zu claude.ai/design und melde dich mit deinem Anthropic-Konto an.
2. Wähle die Design-Systeme Tab in der linken Navigationsleiste.
3. Klicke auf Design-System erstellen und gib deinen Firmennamen sowie eine kurze Produktbeschreibung ein (zwei bis drei Sätze reichen völlig aus).
4. Lade deine Marken-Assets hoch. Dazu gehören dein Logo, dein Brand-Guide als PDF (falls vorhanden) und alle verwendeten Schriftarten. Wenn du keinen Brand-Guide hast, lade drei bis fünf Screenshots deiner aktuellen Website oder deiner Marketingmaterialien hoch, damit Claude visuelle Anhaltspunkte hat.
5. Wenn du eine aktive Website hast, füge die URL in das Feld für die Markenextraktion ein. Claude übernimmt dann automatisch deine Farbpalette und Typografie von der Seite, was dir viel Zeit bei der Einrichtung spart.
6. Füge eine Notiz zur Markenstimme hinzu. Das ist ein kurzer Textblock (drei bis fünf Sätze), der den Ton beschreibt, den die Seite treffen soll. Zum Beispiel: „Direkt und selbstbewusst, ohne dabei aggressiv zu wirken. Spricht erfahrene Anwender an, die Hype gegenüber skeptisch sind. Verwendet eine einfache Sprache und vermeidet Fachjargon. Erkennt an, dass das Problem komplex ist, bevor die Lösung präsentiert wird.“

Ein zusätzlicher Schritt unterscheidet professionelle Workflows von Anfängern: Erstelle eine CLAUDE.md-Datei oder eine gespeicherte Marken-Kurzinfo, die du in neue Sitzungen kopieren kannst. Profis nutzen Design-Richtlinien, die oft 300 Zeilen oder mehr umfassen und Typografie-Skalierung, Abstandsregeln, Farbnutzung, Komponentenverhalten und den Tonfall der Texte abdecken. Du musst nicht gleich mit 300 Zeilen anfangen. Selbst eine einseitige Zusammenfassung, die du zu Beginn jeder neuen Sitzung einfügst, verhindert den Qualitätsverlust, der entsteht, wenn Claude ein neues Projekt ohne den Kontext deiner vorherigen Sitzungen startet.

Schritt 2: Schreibe einen Prompt, der wirklich funktioniert

Die häufigste Frage, die sich Leute stellen, nachdem sie Claude Design verstanden haben, ist, warum ihre Ergebnisse generisch aussehen, während die von anderen sofort veröffentlichungsreif und einzigartig wirken. Die Antwort liegt fast immer im Prompt. Die meisten Anleitungen sagen „schreibe einen detaillierten Prompt“ und zeigen dann ein Beispiel für einen vagen Prompt, der nur mittelmäßige Ergebnisse liefert. Der Qualitätsunterschied zwischen einem Einzeiler und einem strukturierten Prompt ist enorm. Untersuchungen von Anwendern, die die Ergebnisse von Claude Design systematisch bewertet haben, zeigen, dass Standard-KI-Outputs auf einer 100-Punkte-Skala nur zwischen 38 und 45 Punkten liegen. Ein durchdachter Workflow hebt diesen Wert auf 68 bis 78. Fast dieser gesamte Unterschied liegt im Prompt begründet.

Der Grund für diese große Lücke ist, dass Überschrift, Unterüberschrift und CTA-Text zusammen etwa 55 % der Conversion-Kraft einer Landingpage ausmachen. Wenn du einen schwachen Prompt schreibst, generiert Claude für alle drei Bereiche generische Texte. Mit einem strukturierten Prompt hat Claude genügend Kontext, um spezifische und differenzierte Entscheidungen zu treffen.

Nutze diese Vorlage mit mehreren Platzhaltern. Fülle alle Felder aus, bevor du den Prompt abschickst:

Die Landingpage-Prompt-Vorlage für Claude Design

ZIELGRUPPE: [Beschreibe deine Zielgruppe in einem Satz. Nenne Unternehmensgröße, Rolle und die spezifische Situation, in der sie sich befinden, wenn sie auf deine Seite stoßen.]

PROBLEM: [Beschreibe den konkreten Schmerzpunkt, den sie gerade erleben. Was haben sie bereits versucht? Warum hat es nicht funktioniert?]

PRODUKT: [Nenne dein Produkt und beschreibe in zwei Sätzen, was es macht und wie es funktioniert.]

ALLEINSTELLUNGSMERKMAL: [Was machst du anders als deine Hauptkonkurrenten? Werde konkret. Vermeide allgemeine Aussagen wie „einfacher“ oder „schneller“, es sei denn, du kannst sie belegen.]

SEKTIONEN: [Liste die gewünschten Seitenabschnitte in der richtigen Reihenfolge auf. Beispiel: Hero, Problem, Funktionsweise, Features, Social Proof, Preise, FAQ, CTA]

AKTION: [Was ist die eine Hauptaktion, die Besucher ausführen sollen? Nur eine einzige Aktion.]

VORGABEN: [Beschreibe den visuellen Stil und den Tonfall. Beispiel: „Clean und modern, viel Weißraum, professionell, aber nicht steif, keine Stockfotos, direkter und selbstbewusster Text.“]

So sieht ein ausgefülltes Beispiel für ein Design-Abo für B2B-SaaS aus:

ZIELGRUPPE: Gründer und Marketingleiter von B2B-SaaS-Unternehmen mit 10 bis 100 Mitarbeitern, die kontinuierlich hochwertiges Design benötigen, sich aber keinen festangestellten Senior-Designer leisten können.

PROBLEM: Sie warten wochenlang auf Agenturergebnisse, zahlen für unzuverlässige Freelancer oder lassen Entwickler Designaufgaben übernehmen, für die ihnen die Expertise fehlt. Sie haben Design-Marktplätze ausprobiert und wurden von langsamen Prozessen und mangelnder Qualität enttäuscht.

PRODUKT: magier ist ein Design-Abo für B2B-SaaS-Unternehmen. Gegen eine monatliche Pauschale erhalten Kunden unbegrenzte Designanfragen, eine Bearbeitungszeit von 48 Stunden und Zugriff auf ein Team aus geprüften Senior-Designern.

ALLEINSTELLUNGSMERKMAL: Im Gegensatz zu Design-Marktplätzen wurde jeder Designer bei magier durch einen 50-Punkte-Qualitätscheck geprüft. Anders als bei Agenturen gibt es keine Projektangebote, keine langwierigen Verhandlungen und keine bösen Überraschungen bei der Rechnung.

SEKTIONEN: Hero, Problem, Funktionsweise, Zielgruppe, Vertrauensbeweise (Logos + Testimonials), Preise, FAQ, CTA

AKTION: Kostenloses Strategiegespräch buchen

VORGABEN: Cleane, moderne SaaS-Ästhetik. Hoher Kontrast. Viel Weißraum. Direkte, selbstbewusste Texte ohne Buzzwords. Keine Stockfotos. Der Tonfall sollte so klingen, als würde ein erfahrener Profi mit einem anderen auf Augenhöhe sprechen.

Wenn du diesen Prompt einreichst, hat Claude genügend Kontext, um fundierte Entscheidungen für jedes Element der Seite zu treffen. Wenn du nur „Entwirf eine Landingpage für meinen Design-Abo-Service“ schreibst, liefert Claude nur generische Ergebnisse, da ihm die nötigen Informationen fehlen.

So gibst du visuelle Inspiration vor

Eine der am meisten unterschätzten Techniken für Claude Design ist die Kombination deines Text-Briefings mit visuellen Referenz-Screenshots. Lade vor oder zusammen mit deinem strukturierten Prompt Screenshots von Landingpages hoch, deren Layout und visuellen Stil Claude als Vorlage nutzen soll. Das müssen keine Konkurrenten sein. Es können beliebige Seiten sein, deren Design dir gefällt. Das Ziel ist es, Claude ein visuelles Ziel zu geben, da Textbeschreibungen für Designstile immer etwas vage bleiben.

Profis, die mit Claude Design konstant starke Ergebnisse erzielen, sammeln 50 oder mehr Inspirationsbeispiele, bevor sie ein Projekt starten. Tools wie FigJam und Miro eignen sich gut dafür. Für eine einzelne Landingpage musst du zwar nicht so weit gehen, aber wenn du drei bis fünf aussagekräftige Referenz-Screenshots zu deinem Prompt hochlädst, verhinderst du effektiv, dass das Ergebnis zu allgemein ausfällt.

Ein kurzer Hinweis zu jedem Screenshot bewirkt Wunder. Sätze wie „Mir gefällt, wie hier mit Leerraum gearbeitet wird“ oder „Ich möchte, dass mein Preisbereich so aufgeräumt wirkt“ geben Claude den nötigen Kontext.

Schritt 3: Überprüfen und verfeinern

Sobald Claude den ersten Entwurf erstellt hat, wirst du wahrscheinlich dazu neigen, ihn entweder direkt zu übernehmen oder die ganze Seite neu generieren zu lassen. Beides ist keine gute Idee. Wenn du dir vor der Feinabstimmung Beispiele von Claude Design ansehen möchtest, um deine Ergebnisse besser einzuschätzen, findest du im Reiter „Beispiele“ in der Hauptoberfläche eine Galerie mit fertigen Designs als Orientierungshilfe.

Den Entwurf einfach so zu übernehmen bedeutet, dass du KI-generierte Texte und Platzhalter-Social-Proof veröffentlichst, was deine Conversion-Rate und deine Marke schwächen wird. Die Seite komplett neu zu generieren ist ebenfalls ineffizient, da es einen großen Teil deines Sitzungslimits für Änderungen verbraucht, die man auch gezielt hätte vornehmen können. Das ist wichtig, denn im Pro-Tarif können zwei intensive Design-Sitzungen fast 60 % deines wöchentlichen Token-Kontingents aufbrauchen.

Claude Design bietet dir vier spezielle Werkzeuge zur Verfeinerung. Nutze sie am besten in dieser Reihenfolge:

1. Direkte Textbearbeitung auf der Arbeitsfläche: Klicke ein beliebiges Textelement auf der Arbeitsfläche an und bearbeite es direkt. Das eignet sich perfekt für kleine Textkorrekturen, neue Überschriften oder geänderte Beschriftungen. Das kostet keine Tokens.
2. Das Zeichen-Tool: Damit kannst du Elemente auf der Arbeitsfläche einkreisen oder markieren, die angepasst werden müssen. Beschreibe danach im Chat, was genau geändert werden soll. Das ist präziser als eine reine Textbeschreibung, da Claude genau sieht, worauf du dich beziehst.
3. Inline-Kommentare: Hinterlasse Kommentare an bestimmten Blöcken, indem du mit der rechten Maustaste darauf klickst und die Kommentar-Option wählst. Das ist ideal, wenn du etwas für später vormerken möchtest, anstatt es sofort zu bearbeiten.
4. Das Anpassungs-Panel: Dies ist das am meisten unterschätzte Werkzeug in Claude Design. Das Anpassungs-Panel bietet dir Regler für Abstände, Schriftgrößen und andere visuelle Parameter. Diese Anpassungen lösen keine komplette Seitengenerierung aus, sodass du das Design verfeinern kannst, ohne Sitzungs-Tokens zu verbrauchen. Wenn die Seite zu gedrängt oder zu leer wirkt, nutze erst das Anpassungs-Panel, bevor du Claude per Chat-Prompt um eine Korrektur bittest.

Für die schrittweise Bearbeitung per Chat empfiehlt sich die „Eine-Frage-nach-der-anderen“-Methode. Anstatt Claude eine Liste mit fünf Korrekturen zu schicken, sende lieber eine konkrete Anfrage, prüfe das Ergebnis und mache dann erst mit der nächsten weiter. Das führt zu vorhersehbareren Ergebnissen und macht es einfacher, Fehler schnell zu erkennen.

Worauf du beim ersten Entwurf achten solltest:

• Macht die Hauptüberschrift eine konkrete Aussage oder klingt sie so, als könnte sie auf jedes beliebige Unternehmen deiner Branche zutreffen?
• Hat die Seite eine klare visuelle Hierarchie oder wirkt alles gleich wichtig?
• Sind die Übergänge zwischen den Abschnitten logisch oder springt die Seite ohne roten Faden von Thema zu Thema?
• Verwendet der Text deine tatsächlichen Alleinstellungsmerkmale oder hat Claude auf allgemeine Standardfloskeln zurückgegriffen?

Wenn das Ergebnis zu allgemein wirkt, liegt die Lösung fast immer darin, den Prompt anzupassen und konkretere Informationen hinzuzufügen, anstatt die Generierung mit denselben Eingaben einfach zu wiederholen.

Der menschliche Qualitätscheck, den du nicht überspringen solltest

Hand aufs Herz: Mit Claude Design erstellst du schneller eine gut strukturierte und optisch stimmige Landingpage als mit jedem anderen Tool zuvor. Aber „gut strukturiert und optisch stimmig“ bedeutet noch lange nicht „veröffentlichungsreif“. Bevor die Seite live geht, musst du noch einmal manuell drübergehen – ein Schritt, den die meisten auslassen, weil das Ergebnis auf den ersten Blick schon ganz gut aussieht.

Dass dieser Schritt unverzichtbar ist, liegt an den 55 % Conversion-Gewichtung. Die drei Elemente, die über mehr als die Hälfte deines Erfolgs entscheiden, sind die Headline, die Subheadline und der CTA. Claude Design liefert dir zwar alle drei – sie sind grammatikalisch korrekt und logisch aufgebaut, aber eben auch völlig austauschbar. Sie in deiner eigenen Sprache und mit deinen spezifischen Argumenten neu zu formulieren, ist die effektivste Maßnahme, die du nach der Generierung ergreifen kannst.

Hier ist die Checkliste für den menschlichen Qualitätscheck:

• Formuliere jede Headline und Subheadline neu: Nicht nur bearbeiten. Umschreiben. Die KI-Version dient dir als Gerüst, an dem du dich abarbeiten kannst. Deine Version sollte eine konkrete, belegbare Aussage treffen, die ein Konkurrent so nicht ehrlich von sich behaupten könnte.
• Formuliere jeden CTA neu: „Jetzt starten“ oder „Demo buchen“ sind keine echten CTAs, sondern nur Platzhalter. Dein CTA sollte genau benennen, was der Besucher bekommt: „Buche dein kostenloses 30-minütiges Strategiegespräch“ oder „Starte noch heute deine erste Design-Anfrage“.
• Ersetze jeden Platzhalter-Testimonial durch ein echtes: Wenn Claude Social Proof generiert hat, lösche es und ersetze es durch Zitate echter Kunden – inklusive deren echtem Namen und Firmennamen.
• Entferne oder ersetze Logo-Leisten mit Platzhalter-Markennamen: Wenn du nicht genug echte Kundenlogos für eine Leiste hast, lösche den Bereich lieber ganz oder nutze eine andere Form von Social Proof.
• Füge Mikro-Interaktionen oder Animationen manuell hinzu: Claude Design erstellt statische Seiten. Scroll-Effekte, Hover-Zustände oder Animationen musst du nachträglich über Claude Code oder direkt in deiner Deployment-Plattform einbauen.

Wenn du 80 % deiner Zeit in den ersten Entwurf steckst und nur 5 % in den Qualitätscheck, investierst du deine Energie falsch herum.

"Wenn du Claude Design immer noch als Werkzeug behandelst, das Designer ersetzt, wirst du enttäuscht sein. Wenn du es als Werkzeug behandelst, das die Hürde zwischen einer Idee und einem Prototyp abbaut, ist es wahrhaftig eines der besten Dinge, die wir seit Jahren gesehen haben."

Maximilian Fleitmann

Mitgründer @ magier

‍

Schritt 4: Exportieren und live gehen

In diesem Schritt wird aus einem Website-Konzept von Claude Design etwas Reales. Der Weg vom Prototyp zur Live-Seite ist kein einzelner Schritt, sondern hängt von deinem technischen Know-how und der gewünschten Beständigkeit ab. Es gibt drei verschiedene Wege.

Hier ist der Vergleich der drei Optionen:

‍

OneClickLive

Das ist der schnellste Weg. Dein Claude Design-Entwurf wird dabei sofort als Live-Seite unter einer temporären URL veröffentlicht – ganz ohne Einrichtung. Das ist ideal, um Prototypen mit Stakeholdern zu teilen oder frühzeitig Feedback von Nutzern einzuholen, aber keine dauerhafte Lösung für den Live-Betrieb. Nutze es immer dann, wenn Schnelligkeit wichtiger ist als Beständigkeit.

GitHub Pages

Damit erhältst du eine dauerhafte Seite, die du mit einer eigenen Domain verknüpfen kannst. Der Prozess: Exportiere dein Claude Design als eigenständiges HTML, erstelle ein GitHub-Repository, lade die Dateien hoch und aktiviere GitHub Pages in den Repository-Einstellungen. Jeder dieser Schritte ist gut dokumentiert und erfordert keine Programmierkenntnisse, setzt aber voraus, dass du dich mit technischen Anleitungen zurechtfindest. Wenn du das reine HTML nur an einen Entwickler weitergeben willst, statt es selbst zu hosten, GitHub Gist ist die schnellere Alternative. Hier kannst du den exportierten HTML-Code einfach in ein öffentliches oder privates Snippet einfügen, auf das jeder mit dem Link zugreifen kann – ganz ohne Repository. Das ist der richtige Weg für die meisten Gründer und Marketer, die eine dauerhafte Seite ohne Hosting-Kosten suchen.

Claude Code-Übergabe

Das ist der Weg für die professionelle Entwicklung. Du exportierst dein Claude Design als strukturiertes Implementierungs-Paket und übergibst es an Claude Code, das die Seite dann als vollständige React- oder Next.js -Anwendung mit Tailwind CSS -Styling aufbaut. So integrieren Design-Teams bei Unternehmen, die Webflow, Frameroder eigene Entwicklungs-Stacks nutzen, Claude Design in ihren professionellen Workflow. Das erfordert zwar einen Entwickler oder einen technisch versierten Gründer, liefert aber das sauberste und wartungsfreundlichste Ergebnis der drei Optionen.

Wenn du dir unsicher bist, welcher Weg der richtige ist, hilft dieser einfache Test: Wenn die Seite noch heute zu Testzwecken online gehen muss, nimm OneClickLive. Wenn sie dauerhaft erreichbar sein soll und du dich mit den Grundlagen von GitHub auskennst, wähle GitHub Pages. Wenn die Seite Teil eines echten Produkts wird oder sich in ein bestehendes Design-System einfügen muss, ist die Claude Code-Übergabe die beste Wahl.

Häufige Fehler bei Claude Design

Das sind die fünf Fehler, die in Community-Diskussionen und bei der Analyse von Projekten immer wieder auftauchen. Jeder davon lässt sich beheben, aber nur, wenn man weiß, worauf man achten muss.

Das Design-System überspringen

Das ist der kostspieligste Fehler, weil man die Auswirkungen erst bemerkt, wenn man das Ergebnis mit einer korrekt vorbereiteten Sitzung vergleicht. Wenn du das Design-System weglässt, trifft Claude visuelle Entscheidungen völlig willkürlich. Das Ergebnis wird zwar sauber, aber austauschbar sein. Die Lösung ist nicht, auf einer schlechten Basis weiter zu experimentieren. Die Lösung ist, einen Schritt zurückzugehen und das Design-System aufzubauen, bevor du irgendetwas generierst.

Einen Ein-Zeilen-Prompt schreiben

„Entwirf eine Landingpage für mein SaaS-Produkt“ ist kein Prompt. Es ist die Aufforderung an Claude, alle wichtigen Entscheidungen für dich zu treffen – ohne jegliche Vorgaben. Genau deshalb gibt es die Multi-Slot-Prompt-Vorlage in Schritt 2. Wenn dein Prompt kürzer als 150 Wörter ist, fehlen wahrscheinlich Informationen, die Claude dringend braucht.

KI-generierte Texte ungeprüft veröffentlichen

Die Texte von Claude Design sind strukturell solide, aber völlig allgemein gehalten. Überschriften wie „Die intelligentere Art, deinen Workflow zu verwalten“ und CTAs wie „Jetzt kostenlos starten“ werden deine Zielgruppe nicht überzeugen. Der menschliche Feinschliff in Schritt 3 ist kein optionaler Zusatz. Hier entscheidet sich, ob deine Conversion-Rate steigt oder nicht.

Die ganze Seite neu generieren, statt gezielte Werkzeuge zu nutzen

Wenn etwas nicht stimmt, ist der erste Instinkt oft, ganz von vorne anzufangen. Im Pro-Tarif verbrauchen vollständige Neugenerierungen jedoch viele Token. Bevor du neu generierst, prüfe, ob sich das Problem nicht durch eine direkte Bearbeitung auf der Canvas, eine Anmerkung mit dem Zeichen-Tool oder eine Anpassung im Tweaks-Panel lösen lässt. In neun von zehn Fällen klappt das.

Nicht wissen, wann der Wechsel von Claude Design zu Claude Code ansteht

Claude Design ist ein Prototyping-Tool, keine Entwicklungsumgebung für die Produktion. Sobald deine Seite komplexe Animationen, dynamische Inhalte, API-Integrationen oder ein langfristig wartbares Komponentensystem benötigt, ist es Zeit für den Wechsel zu Claude Code oder einem professionellen Entwicklungs-Workflow. Zu versuchen, Claude Design für produktionsreife Arbeit zu erzwingen, führt nur zu immer komplizierteren Iterationsschleifen, die dein Sitzungslimit aufbrauchen, ohne bessere Ergebnisse zu liefern.

Wann man Claude Design, Claude Code oder Figma verwendet

Diese drei Tools werden oft so diskutiert, als stünden sie in Konkurrenz zueinander. In der Praxis nutzen Profi-Teams alle drei nacheinander. Die Frage ist nicht, welches besser ist, sondern welches für die aktuelle Phase das richtige ist.

‍

Ein typischer professioneller Workflow sieht so aus: Nutze Claude Design, um das Konzept zu erstellen und zu validieren, verwende Figma für Abstimmungen im Team und die Dokumentation von Komponenten, und setze Claude Code für die finale Implementierung ein. Claude Design macht die Prototyping-Phase, für die man früher einen Profi-Designer brauchte, überflüssig. Es ersetzt jedoch nicht die Aufgaben, die Figma und Claude Code in den darauffolgenden Phasen übernehmen.

v0 von Vercel, Framer AIund Lovable decken jeweils angrenzende Bereiche ab. v0 ist stark für Entwicklerteams, die schnell React-Komponentencode benötigen. Framer AI ist ideal für Teams, die bereits die Framer-Plattform nutzen und für den gesamten Prozess vom Design bis zur Veröffentlichung in einem Tool bleiben möchten. Lovable ist perfekt für Gründer ohne technisches Vorwissen, die ihre Idee ohne eine einzige Zeile Code in eine vollständige Anwendung verwandeln wollen. Claude Design ist in puncto Zugänglichkeit am ehesten mit Lovable vergleichbar, bietet jedoch eine deutlich stärkere UX-Strategie und integrierte Funktionen für Copywriting direkt im Workflow.

Fazit

Claude Design ist der schnellste Weg von der Produktidee zur funktionierenden, professionell gestalteten Landingpage, die sofort live gehen kann. Es beseitigt die Hürden beim Prototyping, für die man bisher entweder einen Profi-Designer oder wochenlange Arbeit in Figma brauchte. Für Gründer, Marketer und Operatoren, die ihre Ideen schnell testen müssen, ist das ein riesiger Vorteil.

Der in diesem Guide beschriebene Workflow ist jedoch keine Abkürzung. Die Einrichtung des Designsystems, das strukturierte Prompting, die manuelle Qualitätskontrolle und die Entscheidung für das Deployment erfordern echte Arbeit und fundierte Entscheidungen. Claude Design nimmt dir das Nachdenken nicht ab. Es beseitigt lediglich die technische Barriere, die bisher zwischen dem Konzept und dem Ergebnis stand.

Wenn du Claude Design für deine nächste Landingpage nutzen möchtest, startest du am besten mit der Prompt-Vorlage aus Schritt 2. Fülle alle Felder aus, bevor du das Tool öffnest. Dieser eine Schritt wird für bessere Ergebnisse sorgen als alles andere, was du in der ersten Sitzung tust.

Falls dein Team Landingpages auf professionellem Niveau benötigt, ohne sich selbst um den KI-Workflow kümmern zu müssen, schau dir an, wie magier arbeitet. Wir übernehmen das Design, die Iterationen und die Qualitätsprüfung – mit einer Bearbeitungszeit von 48 Stunden, mehreren Korrekturschleifen und einem festen monatlichen Preis. Unsere Arbeit findest du hier.

{{cta}}