Stell dir vor, du sollst einer Kundin oder einem Teammitglied innerhalb weniger Minuten zeigen, wie eine fertige Verkaufsseite aussehen könnte. Genau das schaffst du mit Claude Design, wenn du weißt, wie du den Prompt aufbaust, die Anforderungen sauber formulierst und das Ergebnis anschließend als HTML veröffentlichst. In dieser Anleitung begleite ich dich durch ein komplettes Beispielprojekt: eine responsive Landingpage für einen Onlineshop mit Premium-Hundespielzeug. Du siehst jeden Schritt vom Prompt bis zum Live-Link.
Das Video wird erst beim Abspielen von YouTube geladen – dabei werden Daten (u. a. deine IP-Adresse) an YouTube bzw. Google übertragen. Mehr dazu in der Datenschutzerklärung
Die Anleitung baut auf den bisherigen Lektionen zu Prompts, Struktur und Stil auf. Wenn du die Grundlagen schon kennst, wirst du viele Entscheidungen wiedererkennen. Neu ist vor allem, dass du nun ein zusammenhängendes Projekt aus einem Guss erstellst und nicht mehr einzelne Sektionen bearbeitest.
Wichtigste Erkenntnisse
Wichtigste Erkenntnisse
- Ein Prototyp braucht ein klares Ziel. Je genauer du beschreibst, wer die Seite nutzt und was sie zeigen soll, desto besser fällt das Ergebnis aus.
- Du musst den Prompt nicht allein schreiben. Eine KI wie Claude, Gemini oder ChatGPT kann dir auf Basis deiner bisherigen Informationen einen Entwurf liefern.
- Die Struktur der Seite (Header, Hero, Vorteile, Bestseller, Testimonials, FAQ, Call to Action, Footer) gehört ausdrücklich in den Prompt.
- Die KI stellt Rückfragen. Beantworte sie knapp, und lass bei Unsicherheiten ruhig die KI selbst entscheiden.
- Für einen schnellen Showcase reicht der Export als standalone HTML, den du kostenlos über Netlify Drop für eine Stunde online stellen kannst.
Schritt-für-Schritt-Anleitung
Schritt 1: Ziel festlegen – eine vollständige Seite statt Einzelteile
Bisher hast du mit einzelnen Sektionen gearbeitet, die sich gut für Ideen eignen, aber noch keine Seite ergeben. Für dieses Projekt willst du eine komplette Seite, die du online stellen oder zum Herzeigen verschicken kannst. Bevor du loslegst, notiere dir daher knapp das Ziel: Wer soll die Seite sehen, und welche Handlung soll sie auslösen? Im Beispiel geht es um einen Onlineshop für Premium-Hundespielzeug.
Schritt 2: Einen Prompt von einer KI erstellen lassen
Du musst nicht bei null anfangen. Lass Claude, Gemini oder ChatGPT auf Basis aller bisherigen Informationen einen Prompt für deine Landingpage schreiben. Achte darauf, dass im Entwurf die Zielgruppe, die Stimmung und die gewünschten Abschnitte auftauchen. Diesen Prompt speicherst du anschließend als Textdatei, damit du ihn im nächsten Schritt hochladen kannst.
Schritt 3: Neues Projekt im Prototyp-Modus anlegen
Wechsle in den Bereich Prototyp und vergib einen eindeutigen Projektnamen, zum Beispiel „Testprojekt 1“. Wähle die Option High Fidelity, damit das Ergebnis möglichst detailliert und visuell ausgereift wird. Lade anschließend deinen Prompt hoch und schicke ihn ab. Claude beginnt dann mit der Erstellung der Seite.
Schritt 4: Die Seitenstruktur im Prompt festhalten
Der Prompt sollte den Aufbau der Seite Abschnitt für Abschnitt beschreiben. Lege fest, dass die Seite komplett responsive sein soll. Gib einen Header mit Logo-Platzhalter und Navigationslinks vor. Danach folgen Hero-Bereich, Trust-Bereich mit Social Proof und Kundenlogos, Vorteile, Bestseller, Testimonials, FAQ, Call to Action und ein Footer mit Links und Copyright. Je vollständiger diese Liste ist, desto weniger musst du später nachbessern.
Schritt 5: Stil, Stimmung und Farben definieren
Für die Optik beschreibst du Stimmung und Gestaltung. Im Beispiel soll die Seite warm, modern und familienfreundlich wirken, mit einem verspielten, fröhlichen Charakter. Übernimm außerdem die Farben, die du bereits in früheren Tests verwendet hast, damit das Ergebnis zu deinem bisherigen Stil passt. Bei Animationen und Schriftarten darfst du in einem Prototyp großzügig sein, denn es geht hier um den ersten Eindruck und nicht um ein finales Design.
Schritt 6: Rückfragen der KI beantworten
Nach dem Absenden stellt Claude oft Rückfragen, bevor es die Seite generiert. Im Beispiel wurde „Playful und Fun“ als Stil bestätigt. Für den Hero-Bereich wurde ein glücklicher Hund mit Spielzeug festgelegt. Die Call-to-Action-Buttons heißen „Shop Now“ und „Show More“. Für die Vorteile stehen Produktqualität und das Hundeerlebnis im Vordergrund, und die Testimonials sollen lustige Zitate enthalten. Du musst dabei nicht jede Antwort bis ins Detail ausformulieren. Bei einem Prototyp genügen klare Stichworte.
Schritt 7: Mobile und Desktop gleichwertig berücksichtigen
Eine wichtige Rückfrage betrifft die Gewichtung der Geräte. Im Beispiel entschied man sich für eine Optimierung, die sowohl Mobil als auch Desktop gleich gut abdeckt. Wenn du aber weißt, dass der Großteil deiner Besucher den Shop per Smartphone nutzt, solltest du die mobile Ansicht stärker gewichten. Diese Information hilft der KI, die Layouts richtig zu priorisieren.
Schritt 8: Zusatzinhalte bewusst weglassen
Claude fragt häufig nach weiteren Inhalten, etwa einem Blog. Überlege dir, ob sie für dein Ziel wirklich nötig sind. Für eine Landingpage im Prototyp-Stadium reicht das aus, was du definiert hast. Bestätige die Auswahl und fahre fort. Jeder unnötige Bereich verlängert die Generierung und lenkt vom Kern ab.
Schritt 9: Das Ergebnis durchklicken und prüfen
Sobald die Seite fertig ist, öffnet sich eine verspielte Vorschau mit Überschrift, zwei Buttons und einem Hund als Platzhalter. Darunter findest du Award-Winning-Hinweise, die Vorteile, Bestseller mit Preisen und Bewertungen. Der Warenkorb oben rechts ist bereits funktionsfähig. Klicke die gesamte Seite einmal durch und notiere dir, was dir gefällt und was du später anpassen möchtest. Die Seite wirkt im Beispiel etwas überladen und zu verspielt, was sich in einer späteren Überarbeitung korrigieren lässt.
Schritt 10: Die Seite als standalone HTML exportieren
Klicke oben rechts auf Share und wähle die Option Export as standalone HTML. Diese Datei enthält alle Inhalte in einer einzigen Datei und lässt sich ohne weiteres Werkzeug öffnen. Alternativ kannst du das Projekt an Claude Code übergeben, wenn du weiterentwickeln möchtest, oder an Canva schicken, wenn ein Designer das Layout anpassen soll. Für eine schnelle Präsentation ist der HTML-Export der einfachste Weg.
Schritt 11: Die HTML-Datei auf Netlify Drop hochladen
Lade die Datei herunter und öffne anschließend die Seite netlify.com/drop im Browser. Wähle im Dateidialog die heruntergeladene HTML-Datei aus deinen Downloads aus. Netlify Drop nimmt sie entgegen und erstellt automatisch eine Online-Version. Du musst dich dafür nicht anmelden, und die Datei kann vorher ruhig umbenannt werden.
Schritt 12: Den Link teilen und die Grenzen kennen
Nach dem Upload erhältst du einen Link, der eine Stunde lang live ist und mit einem Passwort geschützt wird. Dieses Passwort gibst du zusammen mit dem Link an Kunden oder Teammitglieder weiter. Möchtest du die Seite länger verfügbar halten, musst du dich bei Netlify anmelden. Beachte, dass dieser Link nur für Präsentationen gedacht ist. Eine echte Website benötigt professionelles Hosting, eine Domain und weitere technische Schritte.
Zusammenfassung – Eine komplette Landingpage mit Claude Design bauen
Du hast gesehen, wie aus einem gut strukturierten Prompt in wenigen Minuten eine vollständige, responsive Landingpage entsteht. Entscheidend waren die klare Zielsetzung, die vollständige Liste der Seitenbereiche und die präzise Beschreibung des Stils. Die Rückfragen der KI hast du mit knappen Antworten beantwortet, und mit dem Export als standalone HTML sowie Netlify Drop hast du das Ergebnis direkt teilbar gemacht. Im nächsten Schritt geht es darum, Texte, Farben und Abstände gezielt zu überarbeiten.
FAQ
Wie lange dauert es, bis Claude Design die komplette Landingpage erstellt?Die Generierung dauert je nach Umfang einige Minuten, und du kannst während dieser Zeit die Rückfragen beantworten, die die KI stellt.
Muss ich den Prompt selbst schreiben?Nein, du kannst einen Entwurf von Claude, Gemini oder ChatGPT erstellen lassen und ihn anschließend um deine eigenen Anforderungen ergänzen.
Kann ich nachträglich Änderungen an der Seite vornehmen?Ja, du kannst Call-to-Action-Buttons, Weißraum, Social Proof und das Farbschema im Projekt anpassen, bevor du exportierst.
Was ist der Unterschied zwischen dem HTML-Export und dem Link zum Teilen?Der HTML-Export ist eine eigenständige Datei, die du weiterverarbeiten oder hochladen kannst. Der Link über Share ist eine direkte Freigabe für Teammitglieder oder Partner innerhalb von Claude.
Ist der Netlify-Drop-Link dauerhaft online?Nein, er ist ohne Anmeldung eine Stunde lang aktiv und durch ein Passwort geschützt. Für eine längere Laufzeit musst du dich bei Netlify anmelden.
Kann ich die Seite direkt als echte Website veröffentlichen?Für eine produktive Website brauchst du in der Regel Hosting, eine eigene Domain und weitere technische Einrichtung. Der Netlify-Drop-Link dient nur der Präsentation.
