In diesem Artikel baue ich eine animierte Produktseite für einen fiktiven Retro-Kopfhörer. Das Ergebnis hat einen Hero-Bereich mit scrollgesteuertem Video, einen Übergang in eine Bildergalerie, ein rotierendes Produktvideo und eine Vorbestellsektion. Entscheidend ist dabei nicht ein besonders cleverer Trick in Claude Design, sondern die Vorbereitung davor.
Wenn du Claude Design noch gar nicht kennst, lies zuerst meine Claude Design Anleitung. Dort erkläre ich die Grundlagen von Designsystem bis Export.
Warum KI-Webseiten oft gleich aussehen
Ob Claude Design, Claude Code oder ein anderes KI-Tool: Viele generierte Webseiten haben denselben austauschbaren Stil. Der Grund ist fast immer derselbe. Der Prompt ist kurz und allgemein, also füllt das Modell die Lücken mit dem, was es am häufigsten gesehen hat.
Die Qualität der ersten Version hängt stark an deinem Prompt und an den Vorgaben, die du mitgibst. Je detaillierter beides ist, desto eigenständiger wird das Ergebnis. Mein Ablauf hat deshalb fünf Schritte:
- Moodboard mit Inspiration anlegen
- Wireframe skizzieren
- Ausführlichen Prompt mit Wireframe an Claude Design geben
- Eigene Produktbilder und Videos mit KI erzeugen
- Assets einsetzen und Feinschliff machen
Schritt 1: Ein Moodboard anlegen
Mein Prozess startet nicht in Claude Design, sondern in Figma, einem Design-Tool, das du kostenlos nutzen kannst. Dort lege ich eine leere Fläche (Canvas) an, auf der ich alles sammle, was mich inspiriert.
Der Use Case: Wir sind eine Marke, die einen Retro-Over-Ear-Kopfhörer auf den Markt bringt. Für Inspiration suche ich gerne auf Pinterest. Dort habe ich ein Bild eines Kopfhörers gefunden, um das sich die ganze Website drehen soll.
Danach recherchiere ich Beispiele von Webseiten, die mir gefallen, ebenfalls auf Pinterest oder auf Dribbble, einer Plattform mit tausenden UI- und UX-Designs.
Statt den Kopfhörer eins zu eins zu übernehmen, wollte ich ihn in ein Setting setzen. Retro-Technik verbinde ich oft mit Japan. Daraus wurde die Idee: ein Anime-Stil der 90er, kombiniert mit einer typisch japanischen, sehr minimalistischen Seitengestaltung. Auf dem Moodboard landeten deshalb:
- das Referenzbild des Kopfhörers,
- Beispiele für den Anime-Stil,
- minimalistische Webseiten in ähnlichen Farbtönen,
- die Verkaufsseite einer Kopfhörermarke als Orientierung für den klassischen Aufbau.
Schritt 2: Einen Wireframe skizzieren
Als Nächstes packe ich die Idee in einen Wireframe, also ein ganz grobes Grundgerüst der Seite. Auch das mache ich noch in Figma, und zwar mit nur zwei Werkzeugen:
| Taste | Werkzeug | Wofür |
|---|---|---|
| F | Frame | Eine Fläche im Desktop-Format anlegen und in die Länge ziehen |
| R | Rectangle | Kästen für Sektionen und Bilder platzieren und einfärben |
| T | Text | Überschriften und Beschriftungen einfügen |
Farben übernehme ich mit der Pipette direkt aus den Beispielseiten auf dem Moodboard. Schrift und Größe stelle ich rechts im Eigenschaftenfenster ein.
Du musst dafür aber kein Figma nutzen. Ein Wireframe auf Papier, abfotografiert, funktioniert genauso.
Was in meinem Wireframe steht
Der Wireframe beschreibt nicht nur das Layout, sondern auch die geplanten Effekte:
- Hero-Sektion: Im Hintergrund läuft ein Video. Beim Scrollen wandert das Video zur Seite und verschmilzt mit dem Container der nächsten Sektion.
- Feature-Galerie: Rechts wechseln drei Bilder beim Scrollen, links wird jeweils das passende Feature hervorgehoben, etwa „Ikonisches Design“ beim ersten Bild und „Aktive Geräuschunterdrückung“ beim zweiten.
- Produktvideo: Eine einfache Sektion, in der sich der Kopfhörer in 3D dreht.
- Pricing: Vorbestellung mit einem Produktbild.
- Footer.
Den kompletten Frame exportiere ich als JPEG, um ihn Claude Design mitzugeben.
Schritt 3: Der Prompt für Claude Design
Diesen Schritt unterschätzen die meisten. Meinen Prompt habe ich nicht selbst getippt, sondern mit Claude erarbeitet: Ich habe frei erzählt, was ich mir vorstelle, und Claude hat daraus einen ausführlichen Prompt formuliert.
Der Prompt war entsprechend umfangreich. Diese Bausteine waren enthalten:
- Auftrag und Stil: Entwickle eine elegante Produkt-Landing-Page im minimalistischen japanischen Stil auf Basis des beigefügten Wireframes.
- Platzhalter: Es gibt noch kein finales Bildmaterial. Alle Bilder und Videos sind vorerst Platzhalter und werden später eingefügt.
- Hero mit Scroll-Effekt: Ein fixierter Hintergrund, der sich beim Scrollen zunächst nicht bewegt. Das Video ist an die Scrollposition gekoppelt und spielt beim Scrollen ab.
- Morph-Effekt: Nach etwa 800 bis 1000 Pixeln Scrollweg verkleinert sich das Video nahtlos und geht rechts in das Medien-Panel über.
- Split-Layout: Rechts das Medium, links die Features, wie im Wireframe.
- Farben: konkret angegeben.
- Feature-Texte: die Features, die links eingeblendet werden.
In Claude Design hatte ich noch ein Designsystem vorausgewählt. Das habe ich für dieses Projekt entfernt, weil der Stil ganz eigenständig sein sollte. Dann den Wireframe anhängen, Modell auswählen (ich habe Fable 5 genutzt) und abschicken.
Während Claude Design arbeitet, kümmere ich mich um die Bilder und Videos.
Schritt 4: Eigene Produktbilder und Videos mit KI erzeugen
Stockfotos oder generische Platzhalter lassen eine Seite schnell beliebig wirken. Ich erzeuge die Assets deshalb mit einem KI-Tool für Bild- und Videogenerierung. Solche Plattformen bündeln mehrere Bild- und Videomodelle unter einer Oberfläche. Manche lassen sich inzwischen auch über einen MCP-Server direkt aus dem Claude-Chat steuern. MCP ist ein Standard, über den Claude externe Tools bedienen kann. Für die Arbeit in Claude Design brauchst du das aber nicht.
Auch hier gilt: Die Qualität des Prompts bestimmt die Qualität des Ergebnisses. Bild- und Videogenerierung braucht etwas Übung. Vorgefertigte Prompts und Beispiele der jeweiligen Plattform helfen beim Einstieg.
Produktbilder aus allen Perspektiven
Zuerst brauche ich den Kopfhörer im Anime-Stil aus verschiedenen Perspektiven, als Grundlage für alles Weitere. Ich lade das Referenzbild von Pinterest hoch und gebe diesen Prompt ein:
Generiere mir Produktbilder aus verschiedenen Perspektiven für diesen Kopfhörer.
Style: hand-drawn anime animation, detailed cel shading, line art, retro color palette
Die Stil-Stichworte habe ich mir vorher von Claude geben lassen: Ich habe Claude den Anime-Stil von meinem Moodboard analysieren lassen, und es hat die passenden Begriffe geliefert.
Als Bildmodell empfehle ich nach meiner Erfahrung GPT Image 2 oder Nano Banana Pro. Meine Einstellungen: Qualität hoch, Auflösung 2K, ein Bild pro Durchlauf.
Das Ergebnis war ein Bogen mit dem Kopfhörer aus allen möglichen Blickwinkeln, inklusive Anschlüssen, Bedienelementen und einer Beschriftung der jeweiligen Ansicht. Dieses Bild war für alle weiteren Schritte die wichtigste Referenz.
Einzelne Ansichten herauslösen
Brauchst du eine Ansicht einzeln, etwa als Marketingbild, machst du einen Screenshot davon, lädst ihn als Referenz hoch und promptest:
Erstelle eine Aufnahme der Draufsicht dieses Produkts als Marketingmaterial. Hintergrund: einfarbig in [Farbcode].
Style: hand-drawn anime animation, detailed cel shading, line art, retro color palette
Charakter für das Hero-Video
Für den Hero-Bereich hatte ich folgende Szene im Kopf: Eine Figur nimmt den Kopfhörer, setzt ihn auf, genießt die Musik und dreht sich dann zur Seite, passend zum Übergang in die Galerie.
Dafür habe ich zuerst den Charakter erzeugt, mit dem Produktbogen und dem Pinterest-Bild als Referenz:
Erstelle mir ein Porträtbild von dem männlichen Anime-Charakter, gleiches Outfit, der die Kopfhörer trägt. Hintergrund wieder die reine Farbe, keine weiteren Elemente, sehr minimalistisch. Erstelle mehrere Versionen davon in einer Collage.
Style: hand-drawn anime animation, detailed cel shading, line art, retro color palette
Format: 16:9. Der Trick mit der Collage: Du bekommst mehrere Varianten in einem Durchlauf und musst nicht fünf Einzelbilder generieren und auf jedes warten.
Die erste Version zeigte die Figur nur von der Seite. Ich habe den Prompt um einen Satz ergänzt, der Rest blieb gleich:
Der Blick ist nach vorne gerichtet, direkt in die Kamera. Die Person steht frontal zur Kamera.
Das Hero-Video generieren
Für das Video beschreibt der Prompt den Stil, den Charakter mit seinem Outfit und den Bewegungsablauf: Der Charakter hebt langsam den Kopfhörer an, setzt ihn auf, schließt die Augen. Die Kamera bleibt statisch, kein Zoom.
Als Videomodell habe ich Seedance 2.0 genommen, weil ich damit bisher die besten Ergebnisse hatte. Einstellungen: 7 Sekunden, 16:9, 720p, hohe Bitrate.
Ehrlich gesagt hat das nicht auf Anhieb geklappt. Im ersten Versuch hat die Kamera hineingezoomt, und die gewünschte Drehung um die eigene Achse fehlte. Im zweiten Versuch, mit explizitem „kein Zoom“ und „dreht sich mindestens einmal um die eigene Achse“, blieb der Zoom weg, die Drehung aber auch. Am Ende gefiel mir die erste Version wegen der weiteren Perspektive fast besser. Ich habe sie heruntergeladen und so geschnitten, dass sie an der Stelle endet, an der die Figur zur Seite blickt. Ab dort übernimmt die Bildergalerie.
Bilder für die Galerie
Für die Galerie habe ich Collagen von Menschen in Alltagssituationen mit dem Kopfhörer erstellen lassen. Dabei war der Kopfhörer nicht in jedem Bild konsistent. Die Lösung: einzelne Motive als Screenshot herauslösen und zusammen mit dem Produktbogen noch einmal generieren lassen. So trägt jede Person am Ende den richtigen Kopfhörer.
Schritt 5: Assets in Claude Design einsetzen
Zurück in Claude Design: Die erste Version stand bereits. Hero-Bereich mit Platzhalter und Scroll-Anzeige, der Morph-Effekt in die Galerie, Features, die beim Scrollen aktiv werden, Platz für das Produktvideo und den Product Shot am Ende. Die Struktur aus dem Wireframe war also sauber umgesetzt.
Platzhalter austauschen
Die Assets ziehst du einfach per Drag and Drop in den Chat und sagst Claude, wo sie hingehören:
Bitte setze das Video in der Hero-Sektion ein.
Bitte nimm das Bild für den Platzhalter Media State 01.
So arbeitest du dich Platzhalter für Platzhalter durch.
Im Vorschaumodus prüfen
Nach dem Einsetzen bewegte sich das Video im Editor zunächst nicht. Im Editor kann eine Seite anders aussehen als im Browser. Öffne die Seite deshalb im Vorschaumodus in einem neuen Tab. Dort lief das Video beim Scrollen wie geplant, und die Position des Kopfes passte zum Übergang in die nächste Sektion.
Feinschliff im Edit Mode
Die Überschrift war mir zu groß und überlappte das Video. Solche Kleinigkeiten promptest du nicht, du änderst sie selbst: Im Edit Mode das Element anklicken, unter Typografie die Schriftgröße einstellen (bei mir 44), speichern, Vorschau neu laden. Wie stark sich etwas überlappt, hängt auch von der Bildschirmgröße ab, da kannst du beliebig nachjustieren.
Das Produktvideo
Für das rotierende Produktvideo habe ich wieder den Produktbogen als Referenz genutzt und ein Marketingvideo beschrieben, in dem sich der Kopfhörer um 360 Grad dreht, mit stabiler Kamera, ohne Zoom und mit einfarbigem Hintergrund.
Hier brauchte es mehrere Durchläufe. Die erste Version sah zu sehr nach realistischem 3D aus, der Anime-Stil fehlte. Die zweite traf den Stil, ignorierte aber die Hintergrundfarbe und drehte sich nicht sauber. Auch mit einem von Claude überarbeiteten Prompt war das Ergebnis noch nicht so, wie ich es wollte. Für das Beispiel habe ich es trotzdem verwendet und Claude angewiesen:
Bitte tausche den Platzhalter für Entertainment Hero gegen dieses Video aus.
Zuletzt kam der Product Shot in die Call-to-Action-Sektion am Ende.
Das Ergebnis und was noch fehlt
Die fertige Seite: Das Hero-Video läuft beim Scrollen mit, geht in die Galerie über, die Features wechseln passend zu den Bildern, der Kopfhörer dreht sich (wenn auch nur halb), und am Ende steht die Vorbestellung. Der Footer ist noch recht generisch und bräuchte eine weitere Runde.
Für die Umsetzung als echte Website übergibst du das Design anschließend an Claude Code. Wie du ohne Export-Umweg direkt im Projekt designst, zeige ich in Design direkt in Claude Code: der /design-Skill. Und wenn du lieber direkt in Claude Code mit Prompts startest, findest du in meinen Website-Prompts zum Nachbauen fünf fertige Beispiele.
Einordnung: Die erste Version ist der Startpunkt
Eine zu 100 Prozent fertige Website auf Anhieb mit Claude Design zu erstellen, ist praktisch nicht realistisch. Nimm die erste Generierung als erste Iteration und baue darauf auf.
Was den Unterschied zum KI-Einheitslook ausmacht, passiert vor und nach dem Prompt: ein klares Moodboard, ein Wireframe mit Effekten, ein ausführlicher Prompt, eigene Bilder und Videos statt Platzhaltern und geduldiger Feinschliff. Gerade bei Videos musst du mit mehreren Anläufen rechnen.
Für eine Produktseite reicht dieser Ablauf. Soll hinter der Seite aber ein echtes, verkaufbares Produkt stehen, brauchst du für die Entwicklung einen ebenso strukturierten Prozess wie hier für das Design.
