Claude Design: Animiertes Marketing-Video
Mit dem "Animated video"-Skill produziert Claude Design vollständige animierte Sequenzen — keine GIFs, keine Slide-Transitions, sondern Motion Graphics mit Szenen-Übergängen, Effekten und Audio-tauglichem Pacing. Diese Übung produziert ein Launch-Video für Social Media, das erste echte Anwendung des in Übung 3 publizierten Design-Systems.
Teil 4 von 5 — Lies zuerst Übung 3 (Design System). Animierte Videos profitieren am meisten von einem hinterlegten Brand-System.
Was der Skill kann — und was er nicht kann
Was funktioniert
- Cinematic Motion Graphics — Szenen mit Übergängen, Entrance-Animations, kontinuierliche Mikro-Bewegung
- Typografie-Animationen — Headlines die einfliegen, einblenden, Schreibmaschinen-Effekte
- Daten-Visualisierungen in Bewegung — Counter, Balken-Wachstum, Karten-Reveals
- Brand-konforme Outputs — wenn ein Design-System hinterlegt ist, übernimmt das Video Farben, Typo und Komponenten
- Captions — als Toggle, wichtig für Sound-off-Viewing
- Custom Tweak-Controls — für Caption-Toggle, Akzent-Farben, CTA-Text, CTA-URL
- Aspect Ratios — 16:9 (YouTube), 9:16 (Reels/TikTok), 1:1 (Feed)
Was nicht (noch nicht) funktioniert
- Keine echte Videodatei — der Output ist HTML/CSS/JS, kein MP4. Workaround: Bildschirmaufnahme.
- Keine organischen Animationen — Figuren, fluide Bewegungen, frame-by-frame sind nicht die Stärke
- Kein Audio — Voice-over oder Musik musst du separat in einem Schnittprogramm hinzufügen
- Keine Stockmaterial-Integration — keine direkte Anbindung an Stock-Video-Libraries
Für Brand-Announcements, Erklär-Snippets, Produkt-Launches und Daten-Storys auf Social Media: bereits jetzt produktiv einsetzbar. Für klassisches Werbe-Filming mit Schauspielern oder organischen Szenen ist das nicht das richtige Tool.
Warum animierte Videos jetzt zugänglich sind
Animierter Content war bisher eines von drei Dingen:
- Teurer Externer: Motion-Designer beauftragen — 1.500–15.000 € pro Video, Lieferzeit 1–6 Wochen
- Tool-Marathon: After Effects lernen — Monate Einarbeitung, teure Lizenz
- Verzicht: Statische Grafiken nutzen — verschenkter Reichweiten-Hebel auf Plattformen, die Bewegung priorisieren
Ein 30-Sekunden-Launch-Video, das früher 3.000 € gekostet hat, entsteht jetzt in einer Stunde.
Schritt 1: Szenen-Briefing vorbereiten
Wie bei Decks gilt auch hier: erst Story, dann Design. In einem normalen Claude.ai-Chat die Szenen ausarbeiten, bevor du in Claude Design gehst.
Beispiel-Prompt:
Ich brauche ein Szenen-Briefing für ein 35-sekündiges animiertes
Launch-Video.
Marke: Bergwerk Coffee — wöchentliches Bohnen-Abo für
österreichische Gastronomie.
Ziel: Awareness für das Abo + Conversion zum "Probierpaket bestellen".
Format: 9:16 vertikal, Social Media (Instagram Reels, TikTok).
Tonalität: Editorial, direkt, craft-oriented. Kein Marketing-Sprech.
Liefere:
- 6–7 Szenen mit jeweils 3–6 Sekunden
- Pro Szene: Headline (max. 5 Wörter), Sub-Text (max. 8 Wörter),
Visual-Beschreibung, gewünschte Animation
- Total: 30–40 Sekunden
- Letzte Szene: klarer CTA
Beispiel-Output (Auszug):
Szene 1 (3s) — Brand-Intro
Headline: Bergwerk Coffee
Sub: Seit 2017
Animation: Letter-by-letter reveal, sanfter Fade
Szene 3 (6s) — Promise
Headline: Sieben Tage frisch.
Visual: Datums-Counter zählt von 30 auf 7
Animation: Counter-Decrement, Hard-Cut auf "Punkt."
Szene 7 (5s) — CTA
Headline: Probierpaket bestellen.
Sub: 250 g gratis. Unverbindlich.
Animation: Button-Reveal, sanftes Pulsieren
Speichere das als video-script.md.
Schritt 2: Projekt anlegen und Skills auswählen
- Geh auf claude.ai/design → "New Project" → "Prototype"
- Name: z.B. "Launch Video — 9:16"
- Design system: dein in Übung 3 publiziertes System auswählen
- Klick "Create"
Skills-Kombination:
| Kategorie | Skill | Warum | |-----------|-------|-------| | Output-Type | Animated video | Timeline-based Motion Design | | Behavior | Make tweakable | Aktiviert Live-Controls für Speed, Captions, Farben etc. | | Export-Format | Save as standalone HTML | Damit du das Video als HTML-Datei downloaden kannst |
Wenn kein Design-System vorhanden: zusätzlich "Frontend design" aktivieren.
Schritt 3: Eröffnungs-Prompt + Briefing-Upload
Lade das Briefing als .md-Datei hoch:
Make an animated video from the attached scene briefing.
Format: 9:16 vertical, 35 seconds, social media
(Instagram Reels, TikTok, LinkedIn Video).
Audience: Café and restaurant owners, age 30–55, scrolling their
feeds — most likely with sound off.
Visual style: Use the Bergwerk Coffee design system (editorial,
cream/ink/terracotta, Fraunces display, IBM Plex Sans body,
generous whitespace).
Pacing:
- Hard cuts between most scenes
- Reserve 2–3 effect transitions for key moments
- Subtle continuous motion within scenes (breathing, micro-rotation)
so nothing feels static
Captions: On by default — German, lower third, ink-on-cream
background pill for contrast.
End frame: Hold for 2 seconds on the CTA.
Schritt 4: Was danach passiert — kein Clarifying-Questions-Flow
Bei animierten Videos kommt kein Clarifying-Questions-Flow. Claude legt direkt los. Stattdessen siehst du live, welche Pacing- und Animation-Entscheidungen getroffen werden:
Pacing details
- Each scene uses a different easing mix (easeInQuad for falls,
easeOutBack for tags, easeInOutCubic for camera moves)
- Continuous micro-motion: drum glow oscillates, steam wobbles,
beans breathe, CTA button pulses twice
Captions: lower-third pill, mono eyebrow + sans headline.
Hidden on the CTA scene since that scene IS its own typographic
composition.
Tweaks panel: caption toggle, accent color swatches, CTA copy + URL.
Das ist nützlicher als ein Fragebogen — du siehst direkt, welche Easing-Strategie pro Element gewählt wurde.
Schritt 5: Caveats lesen
Wie bei Design Systems gibt Claude am Ende eine Caveats-Liste:
Caveats
- Product names in scene 4 are placeholders per the design-system
note — swap real product names before publish
- The QR is a stylised placeholder, not a scannable code.
Replace with a real QR before export.
Claude erfindet keine Fake-Produkte und keine scanbaren QR-Codes — alles was nicht echt ist, wird transparent benannt.
Schritt 6: Playback-Steuerung
Keyboard-Shortcuts für das Review:
| Taste | Aktion | |-------|--------| | Leertaste | Play / Pause | | ← | Zurück | | → | Vorwärts | | 0 | Auf Anfang zurücksetzen |
Plus eine Timeline-Leiste am unteren Rand für gezieltes Springen in Szenen.
Strategie: Mindestens 2 komplette Durchläufe beobachten vor der ersten Iteration:
- Pacing pro Szene — zu lang? zu kurz?
- Szenen-Übergänge — gewollt oder zufällig wirkend?
- Lesbarkeit der Captions bei dynamischen Backgrounds
- End-Frame — bleibt der CTA lange genug stehen?
Schritt 7: Das Tweak Panel
Mit aktivem "Make tweakable"-Skill erscheint das Tweak Panel (Toggle rechts oben). Anders als bei Render-Tools mit fixen Effekt-Slidern baut Claude die Controls passend zum konkreten Output.
Aus einer realen Bergwerk-Session:
| Control | Typ | Wirkung | |---------|-----|---------| | Show captions | Toggle | Captions ein-/ausschalten — live sichtbar | | Scene progress bar | Toggle | Fortschritts-Indikator | | Accent | Farb-Swatches | 5 Farben aus dem Design-System — live wechselbar | | Button | Text-Feld | CTA-Text direkt editierbar | | URL | Text-Feld | CTA-Ziel-URL direkt editierbar |
Effizienz-Hebel: Dasselbe Video für mehrere Kampagnen variieren ohne neu zu generieren — verschiedene Akzent-Farben für A/B-Tests, verschiedene CTAs für verschiedene Funnels.
Fehlende Controls explizit anfordern:
"Add a tweak control for video playback speed —
a slider from 0.7× to 1.4×."
"Add a font-size slider for captions (24–40px) —
different platforms need different sizes."
Schritt 8: Iteration via Inline-Comments
Klick direkt in die Szene die du ändern willst:
[Klick in Szene 3]
"Counter zählt zu schnell — verlängere auf 3 Sekunden.
'Punkt.' soll als Hard-Cut nach 0.3s Pause einsetzen."
[Klick in Szene 5]
"Stagger zwischen den 4 Karten auf 0.1s reduzieren."
[Klick in CTA-Szene]
"Pfeil-Pulsieren verlangsamen auf 1.2s Cycle."
Pro Comment eine Änderung. Bei fünf gemischten Änderungen in einem Comment übersieht Claude oft eine.
Strukturelle Änderungen via Chat:
"Alle Szenen-Übergänge: von weichen Blenden auf harte Cuts
wechseln, außer der Übergang von Szene 6 zu 7."
"Subtile Vignette über das gesamte Video legen — stärker
als Standard, filmischer Look."
Export — der Workaround
Der Output ist HTML/CSS/JS, kein MP4. Zwei realistische Export-Pfade:
Pfad A: Standalone HTML
- Download als einzelne HTML-Datei
- Im Browser abspielbar, offline-fähig
- Direkt auf Landing Pages einsetzbar oder als Showroom-Link teilbar
Pfad B: Bildschirmaufnahme → MP4
- macOS: QuickTime Player → "Bildschirmaufnahme" → Canvas-Bereich auswählen
- Windows: Xbox Game Bar (Win + G) oder OBS
- Das resultierende MP4 oder MOV direkt auf Instagram, TikTok, LinkedIn hochladen
Für professionellere Exports: Loom, Cleanshot X oder ScreenStudio aufzeichnen — diese Tools liefern bessere Framerate und Qualität als System-Standard-Aufnahme.