pj1433139082-hue/video-design-skills

remotion-consult – Videoanforderung → Video-Design-System

Verwandeln Sie „Wie mache ich dieses Video?“ von einer Idee in einen umsetzbaren technischen Standard: Durch Klärung, Recherche und Vorschlag wird letztendlich die DESIGN.md (Video-Design-System-Dokument, inklusive tokens.ts-Vertrag) erstellt, die von remotion-build direkt übernommen werden kann.

Einstiegsklassifizierung (Bei „Video erstellen“ zuerst den Prozess festlegen, nicht direkt losfragen)

Wenn der Nutzer sagt „Mach ein Video / Erstell einen Clip“, aber keine Kategorie nennt, zuerst mit einer Frage den Prozess festlegen (consult/build/video-shotcraft lösen alle „Video erstellen“ aus, es muss explizit unterschieden werden):

Nutzerabsicht	Welcher Weg
Jedes Video erstellen/ändern (Voiceover, Daten, Produktdemo, Brand-Motion, Wissenschaft, Bildkarussell)	Einheitlich diesen Workflow (consult → build); Animationen aus der Gesamt-Animationsbibliothek + shotcraft-Einstellungskarten auswählen
Explizit video-shotcraft-Vorlage (Ink Press) / freie Kreativarbeit / gemeinsames Erstellen	Entsprechend dem eigenen Prozess-Skill video-shotcraft auslösen (explizite Nutzerwahl, keine automatische Weiterleitung)
Vorhandene DESIGN.md / Referenzvideo / klare Überarbeitung	Dieser Workflow, Phase 0 Check direkt einsteigen

Klassifizierungsfrage: „Wurde explizit die video-shotcraft-Vorlage/freie Kreativarbeit/gemeinsames Erstellen genannt? Nein → einheitlich consult→build, Einstellungskarten aus shotcraft als Animationsbibliothek übernehmen (nicht zwingend jede Karte auswählen).“

Wann verwenden

• Ein Video erstellen/überarbeiten (Voiceover, Datenvisualisierung, Produktdemo, Brand-Motion).
• Videodesign-Richtung festlegen: Bildformat, Untertitel-Stil, Farbschema, Schriftarten, Rhythmus, Übergänge, Animationen.
• Wenn „Video-Design-System“, „Video-Design-Tokens“, „DESIGN.md“ gewünscht ist.
• Vage Anforderungen („Mach mir ein Video“), die zuerst geklärt werden müssen.

Kern-Denkweise

1. Richtung zuerst, dann Details: Zuerst das ästhetische/Untertitel/Rhythmus-System festlegen, dann über die bildliche Umsetzung sprechen.
2. Keine Vorlagen: Ziel ist es, einen „einzigartigen Rhythmus-Fingerabdruck“ für dieses Video zu erstellen, nicht aus einer Vorlagenbibliothek auszuwählen.
3. Ausführbarkeit priorisieren: Die DESIGN.md muss so konkret sein, dass direkt tokens.ts und Szenen-Blueprints geschrieben werden können; nicht bei „etwas hochwertiger“ stehen bleiben.
4. Ehrlichkeit: Keine erfundenen Daten/Fakten im Untertiteltext.

Ablauf (In dieser Reihenfolge ausführen)

Phase 0 – Pre-Check

• Prüfen, ob Arbeitsbereich/Video/{slug}/ bereits eine DESIGN.md / einen Voiceover-Text / captions.srt enthält; falls ja, als Basis verwenden, nicht neu aufsetzen.
• Brandübergreifende Design-Assets prüfen (Workflow „Erst Web, dann Video“): Arbeitsbereich/Design-Tests/{Brand}/DESIGN.md (Web-Version) oder Datenbank/AI-Tools/Designsystem-Bibliothek/{Brand}-DESIGN.md → falls vorhanden, sind dessen Farben/Schriftarten/Stimmung die Brand-DNA-Basislinie; die Video-Version erbt und entwickelt weiter, ohne neu zu erfinden (auch Eingabe für Phase 3 Konsistenzprüfung).
• Markenauflagen prüfen (Projekt-README, vorhandene visuelle Assets, Referenzvideos).

Phase 1 – Klärung (zwingend, nicht überspringen)

Mit AskUserQuestion auf einmal klären, mindestens 9 Punkte abdecken (maximal 6 Fragen auf einmal, ggf. aufteilen). Die ersten beiden Punkte sind Stilquellen, zwingend zu fragen, nicht überspringbar (Nutzer kann „automatisch wählen“ für schnellen Durchlauf, aber muss bestätigen):

1. Stilquelle (Erste Frage zwingend): Freies Design / Referenzseite selbst auswählen (Kandidaten aus video-real-library.md anzeigen lassen) / Referenzseite automatisch auswählen (Nutzer gibt Thema, System wählt aus) / Nutzer gibt Referenz (URL/Screenshot, höchste Priorität).
2. Referenzauswahl (Drei Dimensionen, ergänzend; wann was verwenden):
   • Brand DESIGN.md (Designsystem-Bibliothek Datenbank/AI-Tools/Designsystem-Bibliothek/{Brand}-DESIGN.md oder eigenes Projekt DESIGN.md) → Design-Tokens-Basislinie (Farben/Schriftarten/Abstände), bei Markenfortführung/-überarbeitung verwenden, System nicht neu erfinden.
   • Web-HTML (video-real-library / real-design-library Referenzseiten) → Layout/visuelle Beispiele (Layout/Hierarchie/Komposition), wenn eine bestimmte visuelle Struktur gewünscht ist.
   • Video (video-real-library Animationsquellen / vom Nutzer gegebenes Video) → Animationen/Rhythmus/Untertitel-Stil, wenn eine bestimmte Bewegungssprache gewünscht ist.
   • Ergänzung: DESIGN.md definiert System → HTML liefert Beispiele → Video liefert Animationen; alle drei zusammen ergeben eine vollständige Richtung. Vom Nutzer gegebene Referenzen haben höchste Priorität. Ausgewählte Referenzen mit opencli (eingeloggt bleiben) abrufen, um echte Schriftarten/Farbwerte/Rhythmus zu extrahieren; in Phase 4 originalgetreu übernehmen.
3. Was ist das Video: Ein-Satz-Positionierung + Zielgruppe + Veröffentlichungsplattform (Douyin/Bilibili/Wissenschaftlich/Intern – bestimmt Bildformat und Rhythmus-Basis).
4. Kategorie-Anker: Eine der vier Kategorien aus remotion-shared/categories/ (voiceover-caption/data-viz/product-demo/brand-motion) oder benutzerdefiniert.
5. Bildformat und Dauer: 9:16 Hochformat / 16:9 Querformat / 1:1 Quadratisch; Zieldauer; ob Serie (Serie = Rhythmus muss wiederverwendbar sein).
6. Stimmung/Stil: Professionell-zurückhaltend / Scharfe Daten / Warme Erzählung / Kreativer Rhythmus / Retro … 2-3 vergleichbare Richtungsbegriffe nennen.
7. Inhaltsform (Schlüssel für Untertitel-Routing): Vorhandener Voiceover-Text / Vorhandene .srt/.vtt-Datei / Vorhandene Text-Daten / Von Grund auf neu erstellen – bestimmt die Quelle der Untertitel.
8. Vorlieben/Tabus: Abneigungen, Untertitel-Stil (Satzweise / Wortweise Hervorhebung / Keine Untertitel), Mindestlesbarkeit.
9. Konsistenzprüfung: Hat der Phase-0-Pre-Check bereits Brand-DNA ergeben (DESIGN.md/visuelle Assets/Referenzvideos) → Falls ja, darf die spätere Richtung nicht abweichen (zurückhaltende Weiterentwicklung); falls nein, freies Design.

Wenn ein video-taste-profile (Arbeitsbereich/Video/*/.taste-profile.json oder globales Profil) existiert, zuerst lesen. Wenn Stilquelle = Referenzseite ist, müssen in Phase 2 die echten Werte der Referenz abgerufen werden (chrome-devtools/vision); in Phase 4 originalgetreu übernehmen – die Referenz nicht zu abstrakten Keywords „freihändig interpretieren“.

Phase 2 – Recherche (Nur mit Zustimmung des Nutzers durchführen, parallel möglich)

Dreischichtige Recherche, Priorität aufsteigend:

• Layer 1 Branchenüblich: Wie werden ähnliche Videos normalerweise gemacht (Sicherheitsbasislinie).
• Layer 2 Neue Trends: Prüfen gegen remotion-shared/video-anti-slop.md, 1-2 echte Video-Referenzen auswählen (remotion-shared/video-real-library.md Referenzquellen + vom Nutzer gegebene haben höchste Priorität); daraus Anregungen für Untertitel-Stil/Übergänge/Rhythmus ableiten.
• Layer 3 Grundprinzipien: Zuschauer-Mentalität, Untertitel-Lesbarkeit, inhaltlich getriebener Rhythmus – höchste Priorität. Bei Konflikten explizit notieren, „warum von der Üblichkeit abgewichen wird“.

Die „visuellen Referenzbeschreibungen“ im Vorschlag sollten mit echten Referenzbibliotheksbeispielen verankert sein (z.B. „ähnlich wie xxx mit Wortweiser Hervorhebung“), nicht vage.

Phase 3 – Vollständiger Vorschlag (Kernlieferung)

Ausgabe gemäß references/video-proposal-format.md:

• SAFE-Richtungen (2-3): Kategorie-Basislinie, sicher.
• RISK-Richtungen (2-3): Bewusste Abweichungen; jede muss „warum es sich lohnt + was verloren geht“ beschreiben.
• memorable-thing: Ein-Satz-Anker – „ein visuelles/rhythmisches Moment, das im Gedächtnis bleiben soll“ (z.B. „der Zoom-Übergang in Sekunde 3“).
• Jede Richtung: Ästhetische Keywords, Untertitel-Schriftart, Farbschema, Zeitachsen-Rhythmus (Zeichen/Sekunde, Übergangshäufigkeit), Komposition, Übergangsstil, visuelle Referenzbeschreibung.

Selbstprüfung: Wenn sich zwei Richtungen nur durch andere Farben/Schriftarten unterscheiden, sind sie nicht weit genug auseinander; neu machen.

Designsystem-Konsistenzprüfung: Wenn Phase 0 Pre-Check ein bestehendes Brand-Designsystem ergeben hat (DESIGN.md / Brand-DNA, z.B. bereits erstellte Webseite oder Video), dürfen SAFE/RISK-Richtungen nicht von der etablierten Brand-DNA abweichen (Farben/Schriftarten/Stimmungsbasislinie) – RISK-Richtungen nur innerhalb der etablierten DNA zurückhaltend abweichen (z.B. Akzent-Farbton ändern, Helligkeitsstruktur ändern, Schriftartenfamilie wechseln), nicht von Grund auf neu beginnen oder zu einer nicht verwandten Stilrichtung springen. Freies Design nur erlaubt, wenn kein bestehendes System vorhanden ist. Vor der Erstellung der DESIGN.md Punkt für Punkt prüfen: „Farben/Schriftarten/Stimmung“ entsprechen der Basislinie oder sind eine sinnvolle Weiterentwicklung.

Phase 4 – Designsystem (DESIGN.md)

Nachdem der Nutzer eine Richtung ausgewählt hat, die DESIGN.md gemäß references/video-design-system-template.md schreiben, sieben Abschnitte:

1. Ästhetische Richtung: Ein-Satz-Positionierung + Keywords + Tabus.
2. Untertitel-Schriftarten: Drei Stufen caption/title/body + Basis-Schriftgröße je Bildformat + Hervorhebungsmodus (word/line/none).
3. Farbschema: Semantische Palette (inkl. captionActive/captionInactive) + Kontrast-Mindestgrenze.
4. Zeitachsen-Rhythmus: fps/Bildformat/Gesamtdauer + Untertitel-Rhythmus + Übergangshäufigkeit.
5. Bildkomposition: Sicherheitszone + Untertitelzone + Titelzone.
6. Übergänge und Animationen: Übergangsauswahl + Dauer + Eintrittsanimation + Easing.
7. Video-Design-Tokens (tokens.ts-Vertrag, siehe remotion-shared/video-tokens-spec.md) + Animations-Choreografie-Gerüst (Weiterentwicklung des Szenen-Blueprints, siehe video-design-system-template.md §8): Material-Schichtliste (bg/mid/fg, zusammenbaubar) + Jeder Untertitel → Material-Ein-/Austrittsanimation + Schrift-Animation + Voiceover-Verknüpfung (audiovisuell).

Und den tokens.ts-Vertrag erstellen (TS-Konstantenobjekt, semantische Benennung) – dies ist die einzige Schnittstelle für remotion-build. Animationen aus der Gesamt-Animationsbibliothek auswählen und kombinieren, in die DESIGN.md schreiben (remotion-shared/categories/{Kategorie}/motion-list.md).

Abschnitt 8: Render-Kern-Kennzeichnung (Optional, Standard Remotion): In der DESIGN.md den Render-Backend kennzeichnen – Standard Remotion-Kern; wenn der Nutzer explizit/Stil einen Web-Feeling-Unterbau erfordert, HyperFrames-Kern kennzeichnen (HeyGen Open-Source HTML→MP4, siehe remotion-build/references/hyperframes-guide.md). Entscheidung: Komplexe Einstellungskarten/vorhandenes Remotion-Projekt → Remotion; reines HTML/GSAP-Animation, benötigt integriertes Lint → HyperFrames. Der Render-Kern beeinflusst nur die Build-Schreibweise; Material/BGM/Untertitel/Abnahme/§8-Gerüst werden alle wiederverwendet.

Phase 5 – Vorschau + Style-Proof-Gateway (Optional, Standard an)

Nicht das gesamte Video rendern. Ausgabe:

• 3-5 Keyframe-Extraktionen (npx remotion still <id> --frame=N, deckt Satzanfang/-ende/Übergangsbilder ab) – damit der Nutzer Komposition und Untertitelposition bestätigen kann;
• Oder 3-5 Sekunden Niedrigauflösungs-Muster (--scale=0.25) – damit der Nutzer den echten Bewegungsrhythmus sehen kann.
• Style-Proof-Gateway (angelehnt an paper-collage-video style-proof): Nach Festlegung der Richtung zuerst 1-2 Schlüsselsätze als 3-5s echtes Muster (niedrige Auflösung) rendern, vom Nutzer bestätigen lassen – ob Stil/Farben/Animationsgefühl stimmen, erst nach Bestätigung in die remotion-build Vollproduktion gehen (vermeidet, dass der Stil erst nach Fertigstellung des gesamten Videos falsch ist).

Vorschau-Ausgabe ablegen unter Arbeitsbereich/Video/{slug}/preview/. Zweck der Vorschau ist, dass der Nutzer auf Basis echter visueller Eindrücke entscheiden kann, nicht „ich kann rendern“ zu zeigen.

Rote Linien

• Keine Standard-Schablonen: Nicht automatisch lila-indigoblauen Farbverlauf, durchgängig gleichen Untertitel-Rhythmus, jede Szene zentrierte gleiche Komposition vorschlagen.
• Kein Kopieren: Kein pixelgenaues Klonen fremder Videos (Untertitel-Stil/Rhythmus können übernommen werden, nicht die gesamte Sequenz).
• Keine Erfindungen: Keine erfundenen Daten, Markenfakten.
• Kontrast-Mindestgrenze: Untertitel ≥3:1 (auch auf Realfilm-/Bildhintergründen).
• Video-Schriftgrößen-Mindestgrenze (Bildschirmtexte sind Schlüsselwörter): Untertitel caption ≥64px/800, Daten mono ≥44px/700, Titel ≥88px/900 – keine dünnen, kleinen Anmerkungen. Eisenharte Zahl = einzige Faktenquelle = remotion-build/references/video-quality-metrics.md §Untertitel-Hartschwellen (Zeile „Video-Eisenregel“); hier keine Zahlen kopieren; Schwellenänderungen zuerst in metrics ändern.
• Erst klären, dann designen: Phase 1 muss abgeschlossen sein, bevor ein Vorschlag gemacht wird.

Referenzdateien

📍 remotion-shared Suchreihenfolge: Projekt .claude/skills/remotion-shared/ → Globaler Codex → Globaler Claude Code. Das erste gefundene verwenden.

Datei	Wann lesen
.claude/skills/remotion-shared/video-anti-slop.md	Bei Richtungsentscheidungen in jeder Phase (gegen Gleichförmigkeit)
.claude/skills/remotion-shared/video-real-library.md	Phase 2 Recherche: Echte Videoreferenzen holen
Datenbank/AI-Tools/video-shotcraft/	Einstellungskarten-Bibliothek (202 Karten, 12 Klassen: Kamerabewegung/Rhythmus/Übergänge/Schriftarten/Effekte), demos/{Klasse}/{Karte} direkt kopieren, siehe video-shots-spec

Positionierung von video-shotcraft (Zweite Animationsbibliothek / Vorlagenbibliothek, kein Routing) :

• shotcraft = vollständige, übernehmbare Komponenten-/Animationsbibliothek (demos/{Klasse}/{Karte}/{Komponente}.tsx szenenbasierte Einstellungsanimationen + template/ Vorlagenprojekte + assets/ Komponenten und Soundeffekte). Alle Videos einheitlich über diesen consult→build Workflow, nicht nach Produkt-/Voiceover-Video trennen.
• §8 Kartenauswahl: DESIGN §8.2 Einstellungskarten-Liste optional ausfüllen; Werte mit Intent-Markierung [copy] / [Idee übernehmen]. Einschritt-Anleitung = einzige Faktenquelle = remotion-shared/video-shots-spec.md「Einstellungskarten-Integrationsschritte」(build führt aus).
• Nur wenn der Nutzer explizit die shotcraft-Vorlage (Ink Press) / freie Kreativarbeit / gemeinsames Erstellen verlangt, wird das Skill video-shotcraft ausgelöst und folgt dessen eigenem Prozess (explizite Nutzerwahl, keine automatische Weiterleitung). | .claude/skills/remotion-shared/video-shots-spec.md | Einstellungskarten-System + maßgebliche Techniken (Regie/Schnitt/Design/Ton, Suche + Plattform-Extraktion) | | .claude/skills/remotion-shared/video-design-presets.md | Phase 4: Vorgefertigte Designsysteme auswählen (6 getestete Marken) | | .claude/skills/remotion-shared/video-tokens-spec.md | Phase 4: Beim Schreiben von tokens | | .claude/skills/remotion-shared/categories/{Kategorie}/DESIGN.template.md | Phase 4: Vorlage nach Kategorie verwenden | | .claude/skills/remotion-shared/categories/{Kategorie}/motion-list.md | Phase 4: Animationskombinationen auswählen | | .claude/skills/remotion-shared/motion-library/ | Gesamte Animationsbibliothek Komponentenliste (50, für Build) | | Datenbank/AI-Tools/Designsystem-Bibliothek/ | Phase 2 Recherche/Phase 3 Vorschlag: Brand-DESIGN.md als ästhetischer Anker | | Datenbank/AI-Tools/Ästhetik-Referenzbibliothek/Ästhetik-Referenz-Übersicht.md | Phase 2 Web/Fotografie/Schnitt-Trends + Phase 4 Rhythmus-Design | | .claude/skills/remotion-shared/aesthetic-judgment/ | Phase 4 Richtungsbestimmung: Fotografie/Schnitt/Web-Layout Sechs-Achsen-Unterscheidung (Materialstil/Rhythmus/Layout) | | .claude/skills/ui-ux-pro-max/SKILL.md | Design-Regel-Engine: Beim Festlegen des Videobildstils nachschlagen (Phase 4) | | .claude/skills/hallmark/SKILL.md | Anti-AI-Slop-Prüfung (57 Gates): Ob die Richtung professionell/schablonenfrei ist (Phase 2/3) | | .claude/skills/taste-skill/SKILL.md | Geschmacksprüfung (Pre-Flight 40+ Punkte): Ob die Richtung gut genug ist (Phase 3 Selbstprüfung) | | Datenbank/AI-Tools/design-skills/open-design/craft/anti-ai-slop.md | Entschablonisierungsregeln („Sieben Todsünden“) + 151 Designsystem-Alternativen (Phase 2/4) | | .claude/skills/design-shared/review-panel.md | Bewertungspanel: agency-agents Perspektive + Designsystem-Bibliothek/Ästhetik-Referenzbibliothek Kriterien (Phase 4 Richtungs-Selbstprüfung + Konsistenzprüfung) | | .claude/skills/design-shared/wcag-basics.md | Bei Farb-/Untertitel-Lesbarkeit (harte Einschränkung) | | references/video-proposal-format.md | Phase 3: Beim Erstellen des Vorschlags | | references/video-design-system-template.md | Phase 4: Beim Schreiben der DESIGN.md | | references/video-taste-profile.md | Wenn der Videogeschmack des Nutzers aufgezeichnet/aktualisiert werden muss |

Ausgabe und Abschluss

Mit einer einheitlichen Lieferzusammenfassung enden:

STATUS: PASS | FAIL | BLOCKED
Ausgabe: DESIGN.md-Pfad + Vorschau-Keyframe/-Muster-Pfad
Schlüsselentscheidung: Gewählte Richtung (SAFE/RISK welche + memorable-thing + zugehörige Kategorie)
NEXT_OWNER: remotion-build (Video generieren) | user (Richtung bestätigen)
Ausstehend: Noch offene Punkte

Abschließend fragen: Ist die Richtung festgelegt? Soll ein Video generiert werden? (Empfehlung: an remotion-build übergeben?)