Stell dir vor, du öffnest eine leere Seite und sollst direkt eine komplette Landingpage liefern. Genau davor schützt dich der Ansatz in diesem Tutorial: Du baust die Website nicht in einem Rutsch, sondern Sektion für Sektion. Jeder Baustein bekommt seinen eigenen Prompt, sein eigenes Design und seinen eigenen Test. So erkennst du schnell, welcher Teil funktioniert und welcher noch Feinschliff braucht.
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
Einleitung
Du erfährst in dieser Anleitung, wie du in Claude Design die einzelnen Sektionen einer Landingpage erzeugst. Am Beispiel eines Onlineshops für Hundespielzeug baust du nacheinander den Hero-Bereich, die Vorteile und den Call to Action. Dabei siehst du, wie du Prompts formulierst, die Rückfragen des Tools beantwortest und das Ergebnis über Tweaks und Edits anpasst.
Wichtigste Erkenntnisse
Jede Sektion wird als eigener Prototyp erstellt, damit du sie gezielt testen kannst. Ein gutes Briefing enthält Inhalte, Stil, Farben und Verhalten, etwa Responsive-Design und Hover-Effekte. Die Rückfragen des Tools sind kein Hindernis, sondern eine Checkliste für alles, was du noch festlegen musst. Kleine Änderungen wie Button-Größe oder Texte erledigst du über Tweaks und Edits, ohne jedes Mal neu zu prompten.
Schritt-für-Schritt-Anleitung
Schritt 1: Prompts aus dem Vorbereitungsdokument übernehmen
Bevor du den ersten Prompt schreibst, öffne das Dokument mit deinen vorbereiteten Prompts. Darin hast du bereits im Chat zusammengetragen, welche Inhalte deine Landingpage braucht. Diese Vorarbeit spart dir viel Zeit, denn du musst nicht bei null anfangen. Übernimm die Inhalte einfach per Kopieren und Einfügen in deinen Prompt.
Schritt 2: Den Hero-Bereich mit Inhalten beschreiben
Starte mit einer klaren Anweisung, etwa „Build a prototype of a modern e-commerce hero section für diese Company“. Beschreibe danach die Bestandteile: eine starke Überschrift, eine Unterüberschrift, einen Call to Action wie „Shop Now“ und einen Vertrauensbaustein, zum Beispiel „10.000+ Happy Dogs“. Je konkreter du bist, desto weniger musst du später korrigieren. Wenn im Chat bereits viele Informationen stehen, kannst du sie problemlos mit in den Prompt kopieren.
Schritt 3: Stil, Farben und Atmosphäre festlegen
Nun bestimmst du den Look deiner Seite. In diesem Beispiel soll das Design warm, modern und familienfreundlich wirken. Als Akzente wählst du Orange und ein warmes Beige auf weißem Hintergrund. Ergänze außerdem „clean“ und „spacious“. Spacious bedeutet vor allem viel Weißraum. Diese Begriffe prägen die Gestaltung stärker, als du vielleicht erwartest.
Schritt 4: Den Prototyp benennen und als High Fidelity festlegen
Achte darauf, dass du einen Prototyp mit hoher Detailtreue (High Fidelity) anforderst und keinen einfachen Wireframe. Ein Wireframe zeigt nur die grobe Struktur, während ein High-Fidelity-Prototyp bereits wie eine echte Website aussieht. Gib dem Projekt außerdem einen eindeutigen Namen, zum Beispiel „Projekt 1 Hero Section“. Jede Sektion bekommt dann ihr eigenes Design, sodass du sie unabhängig voneinander prüfen kannst.
Schritt 5: Prompt absenden und Geduld haben
Sobald der Prompt vollständig ist, sendest du ihn ab. Die Generierung dauert einen Moment, weil Claude Design die Oberfläche komplett aufbaut. Nutze die Wartezeit, um dir weitere Anpassungen zu überlegen, die du direkt im Anschluss senden kannst.
Schritt 6: Mit einem Tweak-Prompt nachjustieren
Du musst nicht alles im ersten Versuch perfekt treffen. Mit einem zusätzlichen Prompt wie „make the primary call to action button larger and add a subtle hover animation“ passt du den Call to Action gezielt an. Falls der Button bereits groß genug ist und eine Animation besitzt, schadet der Prompt nicht. Er zeigt dir allerdings, dass du jederzeit weiter verfeinern kannst.
Schritt 7: Die Rückfragen des Tools gezielt beantworten
Danach stellt das Tool dir Fragen zur Gestaltung. Antworte präzise. Für das Layout wählst du eine bildbetonte, hohe Hero-Sektion (Image dominant, tall). Die Buttons sollen als ausgefüllte Flächen (Solid Fill) erscheinen. Bei den Trust-Badges legst du fest, dass sie als horizontale Reihe unter den Buttons stehen. Für die Platzhalterbilder wählst du abgerundete Ecken mit Hover-Effekt und einer sanften Einblendung. Diese Fragen wirken anfangs vielleicht kleinteilig, aber sie verhindern viele Überarbeitungen später.
Schritt 8: Stil-Kombination, Schriften und Responsive-Verhalten festlegen
Bei der Stilrichtung wählst du „Playful and Premium“, also verspielt und zugleich hochwertig. Für die Typografie nimmst du ein Font Pairing aus Google Fonts, das dir das Tool vorschlägt. Wichtig ist außerdem das Responsive-Design. Damit ist gemeint, dass die Seite auf dem Smartphone genauso sauber aussieht wie auf dem Desktop. Bitte zusätzlich um Tweakable Options. Dadurch kannst du später Farben direkt im Vorschau-Bereich ändern, ohne neu zu prompten.
Schritt 9: Das Ergebnis prüfen und mit Tweaks die Farben anpassen
Wenn der Prototyp fertig ist, siehst du ihn in der Vorschau. Über die Tweaks auf der rechten Seite kannst du Farben, Akzente, Überschriften und Subtexte verändern. Achte bei dieser Gelegenheit auf die Farbcodes. Eine Änderung kann dazu führen, dass Farben im Format RGB übernommen werden, obwohl du einen klaren Orangeton wolltest. Stelle dann den ursprünglichen Wert wieder her. So siehst du direkt, wie sich jede Einstellung auf die Gesamtwirkung auswirkt.
Schritt 10: Trust-Badges und Responsive-Darstellung prüfen
Kontrolliere, ob die Trust-Badges tatsächlich horizontal angeordnet sind. Falls nicht, formuliere das in einer Nachricht im Chat. Beachte auch, warum die Seite so aussieht, wie sie aussieht: Sie ist für mobile Geräte optimiert. Auf dem Desktop würde der Text breiter wirken und das Layout anders aussehen. Lade die Vorschau nach jeder Änderung neu, wenn du die aktuelle Version sehen möchtest.
Schritt 11: Buttons mit einem zweiten Prompt vergrößern
Im Anschluss kannst du den Call to Action per Prompt weiter verbessern. Der Button wird dadurch spürbar größer und erhält den gewünschten Hover-Effekt. Hier zeigt sich der Vorteil der Arbeitsweise: Du änderst gezielt nur ein Element, während der Rest der Sektion unverändert bleibt.
Schritt 12: Unpassende Elemente im Chat benennen
Nicht alle Trust-Badges passen nebeneinander in eine Reihe. Das liegt an der Breite des Layouts. Du könntest die Elemente direkt im Editor löschen, doch sauberer ist es, das Problem im Chat zu beschreiben. Nur so weiß das Tool, dass es die Anordnung gezielt überarbeiten soll. Auf dem Smartphone kann die Darstellung trotzdem passen. Entscheide, ob du den aktuellen Stand übernimmst oder noch einmal nachbesserst.
Schritt 13: Die Vorteile-Sektion erzeugen
Damit ist der Hero-Bereich abgeschlossen. Lege nun einen neuen Prototyp für die Vorteile an, wieder als High Fidelity und im Projekt „Projekt 1 Vorteile“. Beschreibe die Inhalte präzise: sechs Vorteile in Karten, angeordnet im Raster 3 x 2, jeweils mit Emoji, kurzem Titel und ein bis zwei Sätzen Beschreibung. Inhaltlich sollen Sicherheit, Langlebigkeit und das Glück des Hundes im Vordergrund stehen. Ergänze abschließend den gewünschten Stil.
Schritt 14: Das Ergebnis der Vorteile-Sektion beurteilen
Die Karten erscheinen in kurzer Zeit und wirken hochwertig. Die Emojis bewegen sich leicht, und beim Überfahren mit der Maus reagieren die Karten sichtbar. Prüfe, ob du etwas ändern möchtest. In diesem Fall war kein Eingriff nötig. Gute Ergebnisse brauchen keine Korrekturen, und du kannst direkt weitermachen.
Schritt 15: Die Call-to-Action-Sektion anlegen
Für den letzten Baustein erstellst du einen weiteren Prototyp, diesmal für den Abschluss der Seite. Formuliere eine emotionale Überschrift mit zwei bis drei Sätzen und den Call to Action „Find the perfect toy“, also „Finde das perfekte Spielzeug“. Lege außerdem fest, dass du nur ein Design möchtest und dass es verspielt wirken soll.
Schritt 16: Die Rückfragen zur Call-to-Action-Sektion beantworten
Auch hier stellt das Tool Fragen. Du entscheidest dich für ein einziges Design, ein Hundebild auf der Seite und gut gefüllte Button-Stile. Die Sektionshöhe soll ausgewogen sein, die Hover-Effekte bleiben erhalten, und es gibt nur einen Call to Action. Diese Antworten bestimmen, wie kompakt und fokussiert der Abschluss deiner Seite wirkt.
Schritt 17: Texte und Details über Edits anpassen
Das Ergebnis sieht bereits gut aus, doch einige Formulierungen gefallen dir nicht. Statt einen neuen Prompt zu schreiben, nutzt du die Edit-Funktion und änderst den Text direkt in der Vorschau. Ein zusätzliches Emoji kannst du ebenfalls selbst einfügen oder erneut prompten. Dieser Weg ist oft am schnellsten, wenn es nur um einzelne Wörter geht.
Schritt 18: Die drei Prototypen als Grundlage für die Gesamtseite nutzen
Am Ende hast du drei getestete Sektionen: den Hero-Bereich, die Vorteile und den Call to Action. Diese Bausteine bilden die Grundlage für die nächste Stufe, in der du sie zu einer kompletten Seite zusammenführst. Das gelingt in einem einzigen Prompt, weil jede Sektion bereits geprüft und abgestimmt ist.
Zusammenfassung – Claude Design: Landingpage-Bausteine Schritt für Schritt bauen
Du hast gelernt, wie du eine Landingpage nicht als Ganzes, sondern Sektion für Sektion aufbaust. Mit präzisen Prompts legst du Inhalte und Stil fest, mit den Rückfragen des Tools verfeinerst du das Design, und mit Tweaks und Edits passt du Details an. Diese Methode macht jede Sektion einzeln testbar und führt zu einer stimmigen Gesamtseite.
FAQ
Wie lang sollte ein Prompt für eine Sektion sein?Ein Prompt sollte alle Inhalte, den Stil und die Funktionen nennen, die du brauchst. Die Rückfragen des Tools ergänzen fehlende Details, deshalb muss der Prompt nicht jede Frage vorwegnehmen.
Muss ich alle Rückfragen des Tools beantworten?Ja, es lohnt sich. Jede Antwort schärft das Ergebnis, und unbeantwortete Punkte führen oft zu Überarbeitungen.
Was ist der Unterschied zwischen Wireframe und High Fidelity?Ein Wireframe zeigt nur die grobe Struktur einer Seite. Ein High-Fidelity-Prototyp enthält bereits Farben, Schriften und Abstände und wirkt wie eine fertige Website.
Wann nutze ich Tweaks, wann einen neuen Prompt?Tweaks eignen sich für Farben, Schriftgrößen und andere einfache Werte. Für größere Änderungen am Layout oder an der Struktur ist ein neuer Prompt sinnvoller.
Kann ich Texte nachträglich ändern?Ja, über die Edit-Funktion in der Vorschau kannst du Texte direkt überschreiben. Das geht schneller als ein erneuter Prompt.
Warum sehen Platzhalter statt echter Bilder?Das Tool erzeugt im Prototyp Platzhalter. Echte Bilder fügst du später selbst ein.
