/motion-design: Kreativdirektionsebene für Remotion
Plugin-Hinweis. Dieser Skill wird aus dem Motion Design Director Marketplace installiert und als
/motion-director:motion-designaufgerufen. Die offiziellen Remotion-Skills, an die er delegiert, werden durch ihr Plugin namespaced, z. B./remotion:remotion-best-practicesund/remotion:remotion-markup. Im Folgenden bezeichnet/motion-designdiesen Skill und/remotion-*den jeweils passendenremotion:remotion-*-Skill. Das QA-Gatescripts/qa-frames.cjs, auf das der Text verweist, liegt als sofort kopierbare Datei unter${CLAUDE_PLUGIN_ROOT}/skills/motion-design/scripts/qa-frames.cjs(identisch mit der Kopie instarter-kit.md); kopieren Sie es in denscripts/-Ordner des Videoprojekts.
Sie sind der Creative Director, Motion Designer und QA-Lead für dieses Video. Die offiziellen Remotion-Agent-Skills wissen, wie Remotion funktioniert. Dieser Skill entscheidet, was das Video sagen, wie es aussehen und wie es sich bewegen soll – und er gibt nicht auf, bis die Frames es beweisen.
Offizielle Remotion-Skills -> technisches Wissen + Implementierung (APIs, Projekt-Setup, Studio, Rendering)
/motion-design (dieser) -> kreative Leitung, Story, Art Direction, Motion Language, Kamera, UI Motion, QA
Tags wie (P12) beziehen sich auf die nummerierten Prinzipien, nach denen dieser Skill geschrieben wurde. Tags wie (V2) markieren die v2-Kreativdirektionsebene: Projektwahrheit zuerst (1.1), echte Assets zuerst (1.2), Produktfilm, kein animiertes Dashboard (5.2), Feature-to-Motion-Übersetzung (5.3), ein Heldmoment (5.6), Objektkontinuität und transformative Übergänge (5.7, 6.6), eine motivierte Kamera (6.5), große UI (4.3) und ein Creative Director Review vor dem finalen Render (8.6). Tags wie (FX) markieren die Effektebene: die Effekte-Entscheidungsrichtlinie (1.3), den Personencheck (1.4) und die benannte Effekte-Bibliothek (Abschnitt 11, vollständige Spezifikationen in effects.md).
0. Wie dieser Skill mit den offiziellen Remotion-Skills zusammenarbeitet (P38)
Ändern Sie niemals die offiziellen Skills. Sie befinden sich im Remotion-Plugin-Verzeichnis und werden bei einem Upgrade überschrieben. Schreiben Sie nicht in einen plugins/**/remotion/**-Pfad. Dieser Skill fügt lediglich kreative Einschränkungen hinzu.
Aufgabenteilung
| Frage | Wer entscheidet |
|---|---|
| Welche Remotion-API, welches Prop, welches Paket, welches CLI-Flag, welche Dateistruktur | Offizielle remotion-*-Skills und aktuelle Doku. Sie gewinnen. |
| Welche Story, welcher Look, welche Motion Language, Kamera, welches Tempo, welche Qualitätslatte | Dieser Skill. Er gewinnt. |
| Echter Konflikt zwischen beiden | Siehe Konflikttabelle unten. |
Offizielle Skill-Übersicht. Laden Sie diese, wenn die Aufgabe diesen Bereich erreicht; paraphrasieren Sie sie nicht aus dem Gedächtnis.
| Bereich | Skill |
|---|---|
| Einstiegspunkt / Router für jede technische Remotion-Entscheidung | /remotion-best-practices |
| Neues Projekt-Scaffold, neue Komposition, Videolayout-Regeln | /remotion-create |
| Animation, Sequenzierung, Übergänge, Schriftarten, Medien, Bilder und Assets, Effekte, 3D, SFX, Bewegungsunschärfe, Kompositionen | /remotion-markup |
| Live-Vorschau öffnen (Studio) | /remotion-studio |
| Standbilder, Frames, finales MP4 rendern | /remotion-render |
Studio-bearbeitbare Struktur (Interactive.create(), Interactive.*, Tracks und Timeline-Struktur, verbundene Kompositionen) | /remotion-interactivity |
| Untertitel | /remotion-captions |
| Aktuelle API-Dokumentation nachschlagen (verwenden, wenn eine API oder ein Verhalten unsicher ist) | /remotion-docs |
| Medien-Metadaten, Trimmen, Zuschneiden im Browser | /remotion-multimedia |
| Player, Lambda, SaaS oder Automatisierung rund um Remotion | /remotion-saas |
| Ebenfalls verfügbar: geografische Karten, Remotion-Upgrade | /remotion-maps, /remotion-upgrade |
Lesen Sie bei unsicheren APIs die aktuelle Dokumentation über /remotion-docs (hängen Sie .md an eine Docs-URL), anstatt zu raten. Das Starter-Kit in Abschnitt 7.6 wurde gegen Remotion 4.0.532 typgeprüft und als Beispiel gerendert, und nach der Überarbeitung des Timing-Helfers für die Skill-Anleitung 4.0.538 erneut typgeprüft (was genau verifiziert wurde und was nicht, ist oben in starter-kit.md aufgeführt); überprüfen Sie erneut, ob das Projekt eine andere Version verwendet.
Konflikttabelle: Wo eine offizielle Vorgabe und eine kreative Anforderung nicht übereinstimmen
| Thema | Offizielle Vorgabe | Lösung in diesem Skill |
|---|---|---|
| Rendern | Nicht rendern, es sei denn, der Benutzer ist sehr explizit; stattdessen Studio-Vorschau anzeigen | Der Aufruf von /motion-design um ein Video zu erstellen ist die explizite Zustimmung zu QA-Standbildern und einem finalen MP4. Öffnen Sie dennoch zuerst das Studio und lassen Sie es geöffnet. Wenn der Benutzer "nur Vorschau" oder "nicht rendern" sagt, beachten Sie dies, überspringen Sie den finalen Render und melden Sie, dass dieses Gate absichtlich übersprungen wurde. |
Inline und handschriftlich bearbeitbares interpolate() und keine gemeinsamen Konstanten | Hält die Studio-Bearbeitung live | Helden-Elemente und Szenen-Timing (name, from, durationInFrames, trimBefore) bleiben inline, wobei Sekunden gegen die fps aus useVideoConfig() geschrieben werden (z. B. from={2 * fps}), niemals gegen eine feste FPS-Konstante. Systemische Bewegungen (Tokens, Spring-Presets, Staffelung, Diagramme, Kamera) können in Helfern leben. Die Design-System-Anforderungen des Benutzers haben Vorrang vor der Studio-Bearbeitbarkeit; akzeptieren Sie ausgegraute Werte für von Helfern gesteuerte Stile. |
scale/translate/rotate CSS-Eigenschaften anstelle von transform | Im Studio bearbeitbar | Verwenden Sie standardmäßig die Kurzformen (mit output: 'perceptual-scale' für scale). Verwenden Sie transform für Perspektive, Skew, reihenfolgeempfindliche Ketten und die Welt-Transformation des Kamera-Rigs: In einem Render-Test produzierten die Kurzformen translate/scale bei Zoom über etwa 2 und großen Offsets leere Frames, während ein einzelner transform-String korrekt rendert. |
| Programmatische Schleifen schaden der Instanzbearbeitung | Separater JSX-Knoten pro bearbeitbarem Element | Schleifen sind in Ordnung für wiederholte Elemente, die absichtlich eine Vorlage sind (Staffelungszeilen, Diagrammbalken, Zeichen). Szenen und Heldenkomponenten erhalten ihre eigenen JSX-Knoten. |
Lichtlecks, Bewegungsunschärfe und die eingebauten @remotion/effects (Weichzeichner, Glühen, Vignette, Farbkorrektur und mehr) existieren | Optionale Features; wenn ein Element das effects-Prop unterstützt, bevorzugen Sie einen eingebauten Effekt gegenüber einer CSS-Annäherung | Verwenden Sie den eingebauten Effekt, wenn einer passt, aber nur unter der von Menschen entworfenen Regel (Abschnitt 3): standardmäßig aus, nur mit einem angegebenen Zweck. Lichtleck-Overlays sind im hellen Modus standardmäßig ausgeschaltet. |
| Zwei Spring-APIs | Easing.spring() innerhalb von interpolate() und spring() | Verwenden Sie spring() für physikgesteuerte Bewegungen; verwenden Sie inline interpolate() mit Easing.bezier/Easing.spring für keyframed, bearbeitbare Bewegungen. Dieselben Preset-Objekte füttern beide. |
Beachten Sie auch die offizielle Regel: Benutzer können Code außerhalb des Gesprächs bearbeiten. Wenn sich eine Datei überraschend geändert hat, überschreiben Sie sie nicht; gehen Sie davon aus, dass dies beabsichtigt war, oder fragen Sie nach.
1. Betriebsablauf
Skalieren Sie den Aufwand nach der Anfrage. Eine einzelne animierte Komponente erhält einen kurzen Plan, eine Implementierung und zwei Frame-Inspektionen. Ein vollständiges Video durchläuft jede Phase.
| # | Phase | Ausgabe | Gate |
|---|---|---|---|
| 0 | Aufnahme und Erkundung: Briefing aus der Eingabeaufforderung ableiten (5.8); das reale Projekt und die Assets inspizieren, wenn vorhanden (1.1, 1.2); den Personencheck durchführen, wenn das Projekt Filmmaterial enthält (1.4) | Kreatives Briefing + Projekt-Faktenblatt + Asset-Prüfung + Annahmen + Presenter / Kein-Presenter-Entscheidung | Stellen Sie höchstens 1 oder 2 Fragen, nur wenn die Antwort den Film wesentlich verändern würde und das Projekt sie nicht liefern kann |
| 1 | Story: Story-Spine, Erzählmuster, ein Satz Takeaway, Heldenmoment, Feature → Motion-Ketten (5.3, 5.6) | Story-Spine + Heldenmoment | Haken, Heldenmoment und Payoff identifiziert |
| 2 | Art Direction: Markensystem, Tokens, Motion Language | Marken- + Motion-Spezifikation | Helles Design, sofern nicht anders angegeben |
| 3 | Storyboard: Szenenkarten, Energie-Kurve, Kontinuitätskette, Kamerplan, Cue-Blatt, Frame-Budget | Storyboard-Tabelle | Frame-Mathematik geht auf; jede Szenenkarte vollständig |
| 4 | Technisches Setup über offizielle Skills: Projekt existiert, Abhängigkeiten installiert, Studio offen | Laufendes Studio | Vorschau wird geladen, bevor die Kompositionsarbeit beginnt |
| 5 | Implementieren, in dieser Reihenfolge: Tokens, Motion-Presets, Primitiven, Produktkomponenten, Szenen, Bühne/Kamera/Zeitachse, Pro-Aspekt-Kompositionen | Code | Komponenten klein und wiederverwendbar |
| 6 | Typ-Prüfung | Sauberes tsc | Null Fehler |
| 7 | Vorschau im Studio | Verifizierte Vorschau | Komposition lädt, keine Konsolenfehler |
| 8 | Repräsentative Frames rendern, inspizieren, überarbeiten, erneut rendern, erneut inspizieren (Abschnitt 8) | Fehlerliste, Korrekturen | Mindestens zwei Inspektionsdurchgänge |
| 9 | Anti-AI und Motion-QA, dann Creative Director Review (8.5, 8.6); schwache Abschnitte neu gestalten | Überarbeitete Abschnitte | Abschnitt 8-Checklisten bestanden; keine schwache Überprüfungsantwort offen |
| 10 | Finaler Render, Datei überprüfen, letzten Frame inspizieren, Bericht erstatten | MP4 + Bericht | Liefergates (P39) alle wahr |
Behandeln Sie den ersten Render niemals als endgültig (P32). Überspringen Sie niemals Phase 8.
1.1 Projektbewusstsein: Das echte Projekt ist die Quelle der Wahrheit (V2)
Wenn der Benutzer ein Projekt, Repository, README, eine Website, einen Screenshot, eine Codebasis, einen Asset-Ordner, eine Produktspezifikation oder ein Designsystem bereitstellt, hat dieses Material Vorrang vor Ihren Annahmen über die Produktkategorie. Der Film muss sich wie ein Film über dieses Produkt anfühlen, niemals wie ein generisches Beispiel für "eine Kalender-App" oder "ein Dashboard".
Bevor Sie entwerfen, inspizieren Sie es (wenn Zugriff besteht) und schreiben Sie ein kurzes Projekt-Faktenblatt in design/:
| Herausfinden | Wo suchen |
|---|---|
| Was es wirklich tut und für wen | README, Landing-Text, package.json-Beschreibung, Routen-/Seitenliste, Doku |
| Echte Customer Journey und Interaktionen | Routen, Bildschirme, Formulare, API-Aufrufe, e2e-Tests, Seed- oder Demodaten |
| Echte UI-Zustände | Komponenten und ihre Loading/Empty/Success/Error-Varianten, Screenshots, Storybook |
| Echte Unterscheidungsmerkmale | Was das README hervorhebt, worauf der Code seine Mühe verwendet |
| Echtes Branding und Texte | Logo- und Schriftdateien, Theme-/Tailwind-Konfiguration, CSS-Variablen, Überschriften, Button-Beschriftungen, Microcopy |
| Echte Assets | public/, assets/, Bildordner, Design-Exporte (siehe 1.2) |
| Grenzen: Was NICHT behauptet werden darf | TODOs, "coming soon", Beta-Flags, unfertige oder fehlende Integrationen |
Echtheit des Projekts (P19). Erfinden Sie keine Features, Metriken, Behauptungen, Preise, Bewertungen, Kunden, Integrationen, Ergebnisse, Garantien, Kontaktdaten oder Fähigkeiten; verwenden Sie die eigenen Fakten und Formulierungen des Projekts. Wenn etwas Unbekanntes wichtig ist, stellen Sie eine Frage mit einer empfohlenen Vorgabe oder dokumentieren Sie es als Annahme im Briefing und halten Sie es als Behauptung vom Bildschirm fern. Füllen Sie Lücken niemals stillschweigend, um beeindruckender zu wirken. Für die Glaubwürdigkeit benötigte Beispieldaten (Namen, Zahlen) bleiben plausibel, intern konsistent und werden im Abschlussbericht als illustrativ aufgeführt. Wenn kein Projekt geliefert wird, leiten Sie es aus der Eingabeaufforderung ab (5.8) und erfinden Sie eine Platzhalter-Marke (4.2).
1.2 Asset-Intelligenz (V2)
Wenn echte Assets existieren (Screenshots, Produktfotos, Logos, Illustrationen, Videos, Mockups), inspizieren Sie sie, bevor Sie die visuelle Behandlung wählen. Öffnen Sie jeden Heldenkandidaten in einem bildfähigen Viewer und lesen Sie die Fakten mit npx remotion ffprobe -v error -show_entries stream=codec_name,pix_fmt,width,height -of csv=p=0 <file> (getestet auf PNG und JPEG; Remotions gebündeltes ffprobe ist ein schlanker Build, wenn es also ein Format nicht lesen kann, öffnen Sie die Datei oder verwenden Sie getImageDimensions() aus @remotion/media-utils).
| Überprüfen | Entscheidet |
|---|---|
| Auflösung, Dimensionen | Wie weit die Kamera hineinzoomen kann: benötigte Breite = Bildschirmbreite x max. Zoom. Überschreitet dies die Pixelbreite des Assets, wird es unscharf, also verkürzen Sie den Zoom oder wählen Sie einen anderen Ausschnitt |
| Seitenverhältnis | Einpassen wie es ist oder auf ein Detail zuschneiden; niemals strecken |
Transparenz (rgba oder yuva pix_fmt bedeutet, dass ein Alphakanal existiert, nicht dass er verwendet wird; rgb24 und yuvj* haben keinen; bestätigen Sie dies, indem Sie es vor einem kontrastierenden Hintergrund anzeigen) | Kann es schweben, überlappen und sich verformen, ohne eine Karte dahinter zu haben? |
| Hintergrund (einfarbig, Studio, unruhig, dunkel) und Zuschneidegrenzen | Ausgeschnittenes vs. gerahmtes Objekt; wo sich Motiv und Text befinden; welche Zuschnitte 9:16 überstehen |
| Schärfe | Held vs. reines Hintergrund-Asset |
Bewerten Sie die Assets und weisen Sie dann Rollen zu: Held (das eine oder zwei stärksten; sie bekommen die Makro- und den Heldenmoment), Nahaufnahme (übersteht einen Punch-In), Übergang (eine Kante oder Form, die sich verwandeln, maskieren oder in die nächste Szene überführen kann), Montage (viele ähnliche Elemente für einen schnellen rhythmischen Lauf: Raster, Galerie, Katalog).
- Bevorzugen Sie echte Assets gegenüber erfundenen. Generieren oder zeichnen Sie keine Ersatz-Assets (Logos, Produktaufnahmen, UI), wenn die echten vorhanden sind.
- Platzieren Sie Assets nicht einfach in Karten. Bei bildlastigen Produkten machen Sie die Assets zu den Bewegungs-Objekten: ausschneiden, skalieren, entlang von Pfaden bewegen, stapeln, auffächern, aufheben, kombinieren und im nächsten Zustand landen (Produkt → Karte → Auswahl → Kombi → Warenkorb). Beschneiden Sie auf das Detail, das zählt, und enthüllen Sie dann den Kontext.
- Niemals verzerren, niemals weit über die native Größe hochskalieren, niemals echte Marken-Assets umfärben. Laden Sie sie, wie die offiziellen Skills es beschreiben (
public/undstaticFile(),/remotion-markup-Bilder-Referenz).
1.3 Effekte: Entscheidungsrichtlinie (FX)
Benannte Effekte (/logo-orbit, /number-roll, /portal und die anderen) sind in Abschnitt 11 indiziert und in effects.md spezifiziert. Der Benenner nennt sie im Briefing; diese Richtlinie entscheidet, was als nächstes passiert. Für benannte Effekte ersetzt sie die "entscheiden, nicht fragen"-Vorgabe von 5.8.
Zuerst der Zweck. Bevor Sie einen Effekt anwenden, beantworten Sie eine Frage: "Was versteht oder fühlt der Zuschauer besser wegen dieses Effekts?" Wenn die ehrliche Antwort "nichts, es fügt nur Bewegung hinzu" lautet, sagen Sie das und empfehlen Sie, ihn wegzulassen (der Zwecktest aus Abschnitt 3).
Direkt anwenden, ohne zu fragen, nur wenn alle diese Bedingungen erfüllt sind:
- Jede erforderliche Eingabe ist vorhanden (Filmmaterial, Maske, Text, Assets, echte Daten mit einer Quelle).
- Es gibt einen offensichtlichen Slot: ein passendes gesprochenes Wort, einen Schnitt oder einen leeren Bildschirmabschnitt, der die Dauer des Effekts abdeckt.
- Es kollidiert nicht mit einem bestehenden Effekt oder Text und bleibt innerhalb des Dichte-Budgets (11.3).
Wenden Sie es dann an, rendern Sie QA-Standbilder und berichten Sie, was mit den Timeline-Details getan wurde.