Ein einziger Satz kann genügen, um aus einer Idee eine fertige Landing Page zu machen. Genau das zeigt dir dieses Tutorial. Du lernst, wie du in Claude Design ein erstes Design erstellst, welche Angaben dein Prompt braucht und wie du das Ergebnis direkt überarbeitest. Am Ende hast du einen klickbaren Prototyp, den du präsentieren oder an dein Team weitergeben kannst.
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
Als Beispiel dient eine Landing Page für ein KI-Tool, das Meeting-Zusammenfassungen erstellt. Das Projekt ist bewusst überschaubar, damit du dich auf die Logik des Prompts konzentrieren kannst.
Wichtigste Erkenntnisse
- Ein vager Auftrag wie „Erstelle mir eine Landing Page“ liefert selten ein brauchbares Ergebnis. Je präziser du beschreibst, desto besser fällt es aus.
- Ein guter Prompt nennt Zielgruppe, Stil, Markenwirkung, Layout und visuelle Richtung.
- Ein Referenzbild, etwa ein Screenshot einer Seite, die dir gefällt, gibt der KI eine konkrete Vorlage für den Look.
- Claude stellt Rückfragen, wenn Angaben fehlen. Diese Fragen zeigen dir, welche Informationen dein Prompt noch braucht.
- Ein kleineres Modell verbraucht weniger Kontingent und reicht für einfache Entwürfe oft aus.
Schritt-für-Schritt-Anleitung
1. Projekt anlegen
Öffne Claude Design und wähle die Option zum Erstellen eines neuen Projekts. Gib dem Projekt einen aussagekräftigen Namen, zum Beispiel „Landing Page“. Anschließend öffnet sich das Design-Panel mit dem Design File, in dem alle Entwürfe dieses Projekts gespeichert werden. Von hier aus kannst du jederzeit weiterarbeiten.
2. Die Oberfläche verstehen
Auf der linken Seite findest du das Designsystem, das du auswählen kannst. Hier lassen sich außerdem Screenshots, Bilder, Dokumente, Code oder sogar ein Figma-File einfügen. Gibt es bereits Templates oder Dateien, werden sie oberhalb des Eingabefelds angezeigt. Für deinen ersten Versuch kannst du das vorgeladene Designsystem entfernen, damit du mit einem leeren Projekt startest.
3. Das passende Modell wählen
Im Eingabebereich kannst du das Modell auswählen. Das leistungsstärkste Modell ist nicht immer die beste Wahl. Da dein Tageskontingent begrenzt ist, lohnt es sich, für einfache Entwürfe ein schlankeres Modell zu nehmen. Im Video wird dafür Haiku 4.5 verwendet. Für komplexe Projekte kannst du später bewusst auf ein größeres Modell wechseln.
4. Einen Prompt mit klarer Struktur schreiben
Hier entscheidet sich, wie gut das Ergebnis wird. Ein Satz wie „Erstelle eine Landing Page“ ist zu allgemein. Formuliere stattdessen einen vollständigen Auftrag, der diese fünf Punkte abdeckt: Zielgruppe, Stil, Markenwirkung, Layout und visuelle Richtung. Ein Beispiel: „Erstelle eine moderne SaaS-Landing-Page für ein KI-Tool zur Meeting-Zusammenfassung. Minimalistischer Stil mit viel Weißraum, ähnlich wie Linear oder Stripe.“ Sobald du diese Bausteine formulierst, weiß die KI genau, in welche Richtung sie arbeiten soll.
5. Ein Referenzbild hinzufügen
Ein Referenzbild zeigt der KI den gewünschten Look deutlich besser als Worte. Öffne dafür eine Website, deren Stil dir zusagt, und mache einen Screenshot der Landing Page. Diesen kannst du entweder abspeichern und über die Upload-Funktion hochladen oder direkt aus der Zwischenablage mit Strg+V (bzw. Cmd+V) einfügen. Das Bild erscheint anschließend im Projekt und kann bei jedem weiteren Prompt wiederverwendet werden.
6. Auf die Rückfragen von Claude antworten
Nach dem Absenden deines Prompts kann Claude einen kurzen Fragebogen anzeigen, wenn Angaben fehlen. Beantworte die Fragen direkt im Dialog. Im Beispiel geht es um den Produktnamen, etwa „Meeting AI“, die Zielgruppe, nämlich kleine und mittelständische Unternehmen, sowie den Call to Action. Dazu gehören ein kostenloser Test als Hauptbutton und die drei Kernfeatures: automatische Transkription, Action Items und Slack-Integration. Außerdem gibst du die Unternehmensphase an, hier „early Stage“. Die Fragen sind übrigens ein gutes Lernwerkzeug: Wenn du beim nächsten Prompt diese Punkte gleich mitnennst, entfallen die Rückfragen.
7. Gestalterische Entscheidungen treffen
Lege nun die Farbrichtung fest. Im Beispiel wird ein kräftiges Blau mit Lila gewählt, das an Stripe erinnert. Anschließend bestimmst du, wie viele Varianten entstehen sollen. Eine einzige finale Version spart Token, mehrere Optionen lohnen sich aber, wenn du Alternativen vergleichen möchtest. Auch die Sections legst du fest. Für eine minimalistische Seite reichen Hero Section und Call to Action. Weitere Abschnitte kannst du jederzeit nachträglich ergänzen. Wenn du Anpassungswünsche hast, kannst du diese ebenfalls direkt angeben, andernfalls startet die Generierung.
8. Das Ergebnis prüfen
Während Claude das Design erstellt, siehst du den Fortschritt. Bei einfachen Seiten ist der Entwurf oft schon nach kurzer Zeit nutzbar, auch wenn die Verifizierung noch läuft. Prüfe die Ergebnisse auf Typografie, Farben, Layout und Atmosphäre. Im Beispiel enthält die Seite ein Navigationsmenü, zwei Call-to-Action-Buttons und eine Darstellung für mobile Geräte. Du kannst die mobile Ansicht direkt öffnen und kontrollieren, ob Texte und Buttons sauber umbrechen. Beachte, dass nicht alle Buttons funktionieren, wenn du bewusst nur Header und Call to Action gewählt hast. Für einen Prototyp genügt das in der Regel.
9. Den Prototyp präsentieren und teilen
Wenn dir das Ergebnis zusagt, kannst du es im Präsentationsmodus in der Großansicht zeigen. Außerdem gibt es verschiedene Möglichkeiten, den Entwurf zu teilen, beispielsweise per Link. So kannst du ihn an Kolleginnen und Kollegen oder an dein Entwicklungsteam weitergeben. Weitere Bearbeitungsfunktionen wie Erweitern, Editieren und Zeichnen behandelt das nächste Kapitel.
Zusammenfassung – Claude Design Anleitung: Erstes Design per Prompt erstellen
Du hast gelernt, wie du in Claude Design ein Projekt anlegst, das richtige Modell wählst und einen strukturierten Prompt schreibst. Ein Referenzbild und die Antworten auf Rückfragen helfen dabei, das Ergebnis gezielt zu steuern. Der Prototyp lässt sich anschließend prüfen, präsentieren und teilen. Je klarer dein Auftrag formuliert ist, desto schneller entsteht ein Design, das deinen Vorstellungen entspricht.
FAQ
Muss ich ein Referenzbild hochladen?Nein, es ist nicht zwingend nötig, erleichtert der KI aber die Orientierung beim Stil erheblich.
Welche Angaben gehören in einen guten Prompt?Zielgruppe, Stil, Markenwirkung, Layout und visuelle Richtung. Wenn du diese Punkte nennst, stellt Claude meist keine Rückfragen mehr.
Kann ich das Modell später wechseln?Ja, die Modellauswahl lässt sich vor dem Absenden jedes Prompts anpassen. Für einfache Entwürfe reicht ein schlankeres Modell in der Regel aus.
Warum sollte ich mehrere Designvarianten erstellen lassen?Mehrere Varianten helfen beim Vergleich, kosten aber mehr Token. Für den ersten Entwurf ist eine finale Version oft ausreichend.
Kann ich das Design nach der Erstellung noch ändern?Ja, du kannst das Ergebnis im Projekt erweitern, editieren und mit Tweaks anpassen. Das nächste Kapitel zeigt dir, wie das funktioniert.
