Ein Prompt mit drei Sätzen lässt sich schnell schreiben, aber Worte beschreiben Stil und Atmosphäre nur ungenau. Ein einziger Screenshot zeigt dagegen auf einen Blick, welche Richtung du meinst. Genau hier setzt dieses Tutorial an: Du lernst, wie du Screenshots, Mockups und Vorbilder als Referenzbilder in Claude Design einbindest und wie das Modell solche visuellen Vorlagen interpretiert.
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 ein Testprojekt mit einer Muttertags-Landingpage. Die Vorgehensweise lässt sich aber auf jedes andere Projekt übertragen.
Wichtigste Erkenntnisse
Referenzbilder ergänzen deinen Text, sie ersetzen ihn nicht. Je klarer du sagst, was du vom Bild übernehmen möchtest, desto besser fällt das Ergebnis aus. Arbeite außerdem immer nur einen Schritt pro Prompt ab, damit du Veränderungen nachvollziehen kannst. Claude stellt häufig Rückfragen, und genau diese Fragen decken Lücken in deinen Vorgaben auf.
Schritt-für-Schritt-Anleitung
Schritt 1: Dateien über „attach File“ hochladen
Unterhalb des Eingabefelds findest du die Funktion „attach File“. Darüber kannst du Dateien aller Art hinzufügen: Word-Dokumente, PDFs, Bilder und sogar Videos. Für Designaufgaben sind Bilder meist am nützlichsten, weil Claude daraus Farben, Abstände, Typografie und Bildsprache ablesen kann.
Schritt 2: Einen Screenshot als Vorlage erstellen
Der schnellste Weg zu einem Referenzbild ist ein Screenshot. Du öffnest eine Website, die dir gefällt, machst einen Ausschnitt und fügst ihn in das Chatfenster ein. Im Beispiel ist es eine Seite mit minimalistischem Stil, die als Vorbild dient. Der Screenshot liefert nicht nur die Optik, sondern auch Hinweise auf Layout und Aufbau.
Schritt 3: Referenzbild und Prompt miteinander verbinden
Ein Bild allein reicht nicht. Du musst im Prompt festhalten, was Claude aus dem Bild übernehmen soll. Im Beispiel lautet die Anweisung sinngemäß: Gestalte die Seite im Muttertagsdesign, aber so minimalistisch wie auf dem Referenzbild, und übernimm den animierten Chat aus der Vorlage. So ist eindeutig, was das Bild vermitteln soll und was du selbst ergänzt.
Schritt 4: Nur einen Schritt pro Prompt abschicken
Es ist verlockend, mehrere Wünsche in einen einzigen Prompt zu packen. Das empfehle ich dir jedoch nicht. Schicke zuerst nur die Grundgestaltung mit dem Referenzbild ab und warte, bis sie fertig ist. Danach ergänzt du einen zweiten Prompt, etwa für den animierten Chat. So erkennst du sofort, welche Änderung welchen Effekt hatte. Im Tutorial wurden beide Wünsche bewusst gleichzeitig getestet, um die Grenzen des Werkzeugs auszuloten. Als Regel gilt aber: ein Schritt nach dem anderen.
Schritt 5: Rückfragen von Claude beantworten
Claude stellt oft Fragen, bevor es loslegt. Nimm sie ernst, denn sie zeigen Stellen, an denen deine Vorgaben unvollständig sind. Im Beispiel wurde unter anderem geklärt, welche Hauptbotschaft der Hero-Bereich haben soll: „Schenk deiner Mutter mehr Zeit“. Außerdem wurden die Farbrichtung (elegant, nicht festlich, modern und minimalistisch), Floating Icons und ein Layout mit Full Hero und Chat unten festgelegt. Je präziser deine Antworten sind, desto weniger musst du später nachbessern.
Schritt 6: Ein zweites Referenzbild für konkrete Wünsche nutzen
Manche Wünsche lassen sich schwer in Worte fassen, etwa die Gestaltung der Buttons oder die Anordnung im Kopfbereich. Dafür machst du einen weiteren Screenshot der Stelle, die dir gefällt, und lädst ihn hoch. Du kannst dazu schreiben, dass diese Elemente beibehalten werden sollen. Selbst wenn der Designer die Vorlage nicht eins zu eins umsetzt, zeigt das Bild sehr deutlich, was du dir wünschst.
Schritt 7: Animationen gezielt beschreiben
Der Chat auf der Seite war zunächst statisch. Im Prompt ist es deshalb wichtig, Bewegung genau zu beschreiben: Die Nachrichten sollen unten animiert erscheinen und wie in einem Live-Chat einfliegen. Je konkreter du den Effekt beschreibst, etwa Richtung, Tempo und Reihenfolge, desto besser setzt Claude ihn um.
Schritt 8: Ergebnis aktualisieren und prüfen
Während Claude arbeitet, wird die Vorschau laufend aktualisiert. Warte deshalb, bis alle Inhalte vollständig geladen sind, bevor du das Ergebnis bewertest. Wenn eine Animation nur einmal beim Laden abgespielt wird, kannst du die Seite manuell neu laden. Im Beispiel flog der Chat erst nach dem Aktualisieren sichtbar ein, und beim Scrollen wiederholte sich der Effekt.
Schritt 9: Screenshots nachträglich überarbeiten
Der Workflow funktioniert nicht nur für neue Entwürfe. Du kannst auch bestehende Designs aus Screenshots, Dokumenten oder Beispielen, die dir gefallen, als Grundlage nehmen und umarbeiten lassen. Das ist besonders praktisch, wenn du eine Vorlage aus dem Netz hast, die du mit deinem eigenen Inhalt weiterentwickeln möchtest.
Zusammenfassung – Claude Design Referenzbilder: Screenshots gezielt einsetzen
Referenzbilder sind ein mächtiges Hilfsmittel, wenn du Stil und Richtung eines Designs vermitteln willst. Lade Screenshots oder Vorlagen über „attach File“ hoch und verknüpfe sie in deinem Prompt mit klaren Anweisungen. Arbeite Schritt für Schritt, beantworte Claudes Rückfragen sorgfältig und beschreibe Animationen konkret. Mit diesem Vorgehen kommst du schneller zu einem Ergebnis, das deinen Vorstellungen entspricht.
FAQ
Welche Dateitypen kann ich als Referenz hochladen?Du kannst Word-Dateien, PDFs, Bilder und Videos hochladen. Für Designaufgaben eignen sich vor allem Bilder und Screenshots.
Warum ist ein Screenshot oft besser als eine Textbeschreibung?Ein Screenshot zeigt Farben, Abstände, Layout und Stil direkt. Das spart lange Erklärungen und reduziert Missverständnisse.
Sollte ich mehrere Wünsche in einem Prompt zusammenfassen?Nein, es empfiehlt sich, nur einen Schritt pro Prompt abzuarbeiten. So erkennst du, welche Änderung welche Wirkung hat.
Was mache ich, wenn Claude Rückfragen stellt?Beantworte sie möglichst genau. Die Fragen decken oft Annahmen auf, die du selbst nicht ausgesprochen hast, zum Beispiel die Hauptbotschaft oder die Farbrichtung.
Warum wird eine Animation im Vorschaufenster nicht angezeigt?Oft ist die Ausgabe noch nicht vollständig geladen. Warte ab oder lade die Vorschau neu, wenn der Effekt nur einmal abgespielt wird.
Kann ich bestehende Designs aus dem Netz als Vorlage nutzen?Ja, du kannst Screenshots von Designs verwenden, die dir gefallen, und sie mit deinen eigenen Inhalten weiterentwickeln lassen.
