video-shotcraft: Filmische Produktvideoproduktion

Eine eigenständige Produktionsbibliothek: 152 Shot-Rezeptkarten (mit Demo-Quellcode und dynamischen Musterclips in einer Galerie), eine geprüfte vollständige Werbevideo-Vorlage, wiederverwendbare Komponenten und Audio-Assets, ein sechsstufiger Workflow. Der aktuelle Fokus liegt auf Werbevideos für Web-/Desktop-Produkte, aber die Shot-Karten selbst sind ein universelles Bewegungsvokabular – man kann auch einzelne Shots für beliebige Videos daraus entnehmen.

Vor dem Aufruf den Modus bestimmen

Es gibt drei sich gegenseitig ausschließende Modi für ein vollständiges Werbevideo. Bevor mit der Materialerfassung, dem Storyboarding oder der Umsetzung begonnen wird, muss geprüft werden, ob der Benutzer bereits eine klare Wahl getroffen hat; wenn bereits eine Wahl getroffen wurde, wird direkt ausgeführt, ohne erneut zu fragen und ohne in einen anderen Modus zu wechseln.

Vorlage direkt verwenden: Behalte den ursprünglichen Austauschprozess von Ink Press bei. Lese template/TEMPLATE.md und ersetze Screenshots, Text und Markeninformationen des Zielprodukts gemäß der vorhandenen Shot-Struktur.
Autonome freie Kreation: Lese references/pipeline.md. Der Agent entscheidet basierend auf den vorhandenen Anforderungen des Benutzers und dem Projektinhalt autonom über die visuelle Richtung, Shot-Zuordnung, Storyboard, Material und Audio und arbeitet kontinuierlich bis zum fertigen Video; er pausiert nicht in den Phasen Produkt-Briefing, Styleframe, Shot-Zuordnung oder Storyboard, um auf die Bestätigung des Benutzers zu warten.
Gemeinsame Kreation: Lese references/guided-free-creation.md. Der Agent legt zuerst fundierte Urteile und Vorschläge vor, und der Benutzer bestätigt nacheinander das Produkt-Briefing, die Anforderungsentscheidungen, die visuelle Richtung, die Shot-Zuordnung und das endgültige Storyboard; erst nach Freigabe des Storyboards wird in die endgültige Materialerfassungs- und Produktionsphase von references/pipeline.md eingestiegen.

Wenn der Benutzer einen Projektpfad, eine URL, einen Bildschirmrekord oder einen Screenshot bereitgestellt hat, aber noch keinen Modus ausgewählt hat, wird zuerst eine minimale, schreibgeschützte Produktprüfung durchgeführt: Verstehen der Produktpositionierung, Hauptfunktionen, visuelle Darstellung der Seite, vorzeigbarer Zustand und Materialrisiken; das Geschäftsprojekt wird nicht geändert, keine sensiblen Daten werden erfasst, kein Videocode wird geschrieben. Nach der Prüfung werden die drei Modi vorgestellt und erläutert:

Ob Ink Press für das Produkt geeignet ist, mit konkreten Gründen für und wider;
Ob autonome freie Kreation und gemeinsame Kreation jeweils geeignet sind und welche visuellen Hinweise des Produkts voraussichtlich beibehalten werden;
Welchen Modus der Agent empfiehlt, mit Begründung und Abwägungen.

Dann wird klar gefragt: "Basierend auf der obigen Produktprüfung empfehle ich den Modus ××. Soll ich mit diesem Modus fortfahren?" Gleichzeitig wird der Benutzer informiert: Er kann unter https://vincentwei1021.github.io/video-shotcraft/ die dynamischen Musterclips durchstöbern und die gewünschten Bewegungsshots für das Video auswählen.

Wenn der Benutzer noch kein prüfbares Projekt oder keine prüfbare Seite bereitgestellt hat, werden die drei Modi kurz vorgestellt und dann nachgefragt; Ink Press sollte nicht allein deshalb als Standard empfohlen werden, weil es eine fertige Vorlage ist.

Benutzer wählt Vorlage: Vollständiges Lesen von template/TEMPLATE.md, Ausführung nach dem ursprünglichen Vorlagen-Workflow.
Benutzer wählt autonome freie Kreation: Vollständiges Lesen von references/pipeline.md, der Agent arbeitet autonom, ohne schrittweise auf Bestätigung zu warten.
Benutzer wählt gemeinsame Kreation: Vollständiges Lesen von references/guided-free-creation.md, Zusammenarbeit gemäß den darin definierten Bestätigungspunkten.
Benutzer hat sich noch nicht entschieden: An dieser Stelle auf die Auswahl warten; keine Standardauswahl für den Benutzer treffen und nicht mit der Produktion beginnen.

Ausnahme 1: Wenn der Benutzer die Ink Press-Vorlage explizit genannt hat, gilt der Vorlagenmodus als ausgewählt. Zum Beispiel: "Mach ein Werbevideo für mein Produkt mit der Ink Press-Vorlage." In diesem Fall nicht mehr nachfragen, direkt template/TEMPLATE.md vollständig lesen und dem Vorlagenpfad folgen.

Ausnahme 2: Wenn der Benutzer klar angegeben hat, bestimmte Shot-Karten verwenden oder darauf verweisen zu wollen, sind die Shot-Beschränkungen bereits festgelegt. Zum Beispiel: "Verwende deck-deal-flyin und row-embed für dieses Video" oder "Beziehe dich auf den Effekt von spotlight-hero-card". In diesem Fall die Vorlage nicht vorstellen und nicht fragen, ob die Vorlage verwendet werden soll; die angegebenen Shots gemäß der Galerie-Namensauflösungsregel bestätigen, jede Karte vollständig lesen und gemäß der "Referenzimplementierung" der Karte den genauen Demo-Quellcode lokalisieren. Einzelne Shots können nach Festlegung des Zielmaterials ausgeführt werden; für ein vollständiges Werbevideo, wenn noch nicht angegeben wurde, ob autonome freie Kreation oder gemeinsame Kreation verwendet wird, nur nach diesen beiden Modi fragen. Die angegebenen Shots dienen als nachgelagerte Einschränkung und sind nicht automatisch gleichbedeutend mit gemeinsamer Kreation.

Vier Verwendungsmöglichkeiten

Vollständiges Werbevideo (Vorlagenpfad): Für Ergebnisse, die dem Vorlagenvideo sehr ähnlich sind → Lese template/TEMPLATE.md und befolge den "Leitfaden zur Wiederherstellung durch Produktaustausch", um Material Shot für Shot anzupassen.
Vollständiges Werbevideo (autonome freie Kreation): Für einen neuen Stil und Autorisierung des Agenten zur autonomen Entscheidung → Lese references/pipeline.md und arbeite vom Produktverständnis kontinuierlich bis zur Endkontrolle, ohne zwischendurch schrittweise auf Bestätigung zu warten.
Vollständiges Werbevideo (gemeinsame Kreation): Für Teilnahme an wichtigen Entscheidungen → Lese references/guided-free-creation.md, bestätige Produkt-Briefing, Anforderungsentscheidungen, visuelle Richtung, Shot-Zuordnung und endgültiges Storyboard; nach Freigabe mit der endgültigen Materialerfassung aus der Pipeline fortfahren.
Einzelner Shot / Einzelne Bewegung: Wähle eine Karte aus references/shots/ (oder lass den Benutzer in der gallery/-Galerie wählen), lese den vollständigen Kartentext und lokalisiere gemäß der "Referenzimplementierung" den genauen Demo-Quellcode, passe ihn an das Zielmaterial an.

Grenzen zwischen autonomer freier Kreation und gemeinsamer Kreation

Autonome freie Kreation überlässt dem Agenten die kreativen und technischen Entscheidungen. Der Agent leitet dynamisch aus dem Projektinhalt die Produktschwerpunkte, die visuelle Richtung, die Shot-Zuordnung, das Storyboard, die Materialbehandlung und den Audio-Plan ab, dokumentiert die Schlüsselentscheidungen und führt sie direkt aus; es sei denn, es fehlen notwendige Eingaben, die nicht sicher abgeleitet werden können, wird keine Frage gestellt, keine Phase pausiert und der Benutzer nicht aufgefordert, Zwischenergebnisse zu bestätigen. Vorhandene klare Anforderungen des Benutzers sind stets bindend und dürfen nicht durch die Standardwahl des Agenten überschrieben werden.

Gemeinsame Kreation verwendet die schrittweise Bestätigung. Standardmäßig wird references/guided-free-creation.md gelesen, jede Runde werden nur 1–3 Fragen gestellt, die Nacharbeiten am besten reduzieren, und es wird bei Produkt-Briefing, Anforderungsentscheidungen, visueller Richtung, Shot-Zuordnung und endgültigem Storyboard pausiert, um auf die Bestätigung des Benutzers zu warten. Der Benutzer bestätigt die geschäftlichen und kreativen Richtungen; der Agent erledigt autonom die Erfassungsmethode, Implementierungsparameter, SFX-Keyframes, Remotion-Projekt, Rendering und technische Qualitätssicherung.

Wenn der Benutzer bei der gemeinsamen Kreation klar sagt: "Entscheide du voll und ganz" oder "Überspringe die Bestätigung und mach es einfach", wird zur autonomen freien Kreation gewechselt und diese Wahl dokumentiert; es wird nicht einerseits behauptet, autonom vorzugehen, und andererseits weiterhin schrittweise Bestätigung verlangt.

Die Zuordnung von Funktionen zu Shots ist nur "welche Bewegungsgrammatik verwendet wird", nicht ein vollständiges Storyboard. Nach Bestätigung der Zuordnung bei der gemeinsamen Kreation muss der Agent weiterhin Shot-Reihenfolge, -Dauer, spezifische Bildinhalte, Seitenzustand, Materialquellen, Untertitel, Übergänge und SFX angeben; erst nach Bestätigung des vollständigen Storyboards wird mit der endgültigen Materialerfassung begonnen. Wenn der Benutzer einen Shot-Namen aus der Galerie kopiert, muss nur der Kartenname oder "Kartenname · Stilname" angegeben werden; der Agent ist für das Lesen der lokalen Rezeptkarte und des Demo-Quellcodes verantwortlich.

Kernprinzipien

Bestehende Seiten müssen mit echten Screenshots nachgebildet werden; handgefertigte UI ist auf Nicht-Nachbildungsszenarien beschränkt, und Qualität und Ausdrucksklarheit sind harte Hürden. Für die Darstellung einer echten Produktseite wird zuerst ein lokaler dev server gestartet und ein kopfloser Browser verwendet, um Fullpage 2x Texturen + elementweises Ausschneiden + layout.json Koordinatentabelle zu erfassen. In Nicht-Nachbildungsszenarien (abstrakte Eröffnung/Markensegment/unabhängige Präsentationskomponente) ist handgefertigte UI erlaubt, aber wenn sie nicht publikationsreife Qualität erreicht oder der Betrachter nicht versteht, was sie ausdrückt, wird zum Screenshot-Pfad zurückgekehrt. Seitendaten werden nach Risiko behandelt: Öffentliche Demodaten dürfen nur nach ausdrücklicher Bestätigung im Produkt-Briefing behalten werden; Kunden-, persönliche, interne, schlüsselbezogene, Echtzeit- oder andere sensible Daten müssen mit fiktiven oder anonymisierten Inhalten ersetzt und vor der Erfassung eingefroren werden.
Die visuelle Sprache des gesamten Videos muss aus dem Produkt selbst erwachsen, nicht ein separates, unzusammenhängendes "Werbevideo-Skin" sein. Vor der Erstellung des Styleframes werden aus dem Designsystem, dem Quellcode oder den berechneten Stilen des Produkts/der Website die Design-Spec extrahiert und geschrieben: Schriftfamilie und -gewicht, Schriftgrößenhierarchie, Zeilenhöhe/Buchstabenabstand, Raster, Abstände, Ausrichtung, Informationsdichte und Eckenradius, sowie Hintergrund/Oberfläche/Fließtext/Hervorhebung/Statusfarben, Verläufe und Materialien. Alle Titel, Untertitel, Zahlen, Bildelemente, Typografie, Übergänge, Partikel, Lichteffekte und andere Bewegungseffekte im Video müssen diese Tokens wiederverwenden oder zurückhaltend erweitern und gleichzeitig den Charakter, den Geschmack und die Haptik des Produkts treffen. Bei Verwendung des Vorlagen- oder Shot-Karten-Pfads werden nur deren Shot-Struktur, Bewegungsgrammatik, Rhythmus und bereits eingestellte Parameter übernommen; Schriftart, Layout, Farbschema und Material müssen gemäß dem Zielprodukt neu angepasst werden. Weicht man aus erzählerischen Gründen von der Produktvisuellen ab, wird bei gemeinsamer Kreation zuerst der Grund erläutert und der Benutzer um Bestätigung gebeten; bei autonomer freier Kreation werden Grund und Abwägung in die Design-Spec geschrieben, bevor fortgefahren wird.
Filmische Qualität entsteht durch Kameraführung, Licht, Rhythmus und Klang, nicht durch effekthascherische Animationen. Wiederholt anerkannt wurden: Einzelner Protagonist mit vollständigem Bewegungsbogen (Licht bündeln → Heranzoomen → Schweben → Zurücksetzen), physikalisch metaphorisch getriebene Beschleunigung (Karten austeilen), seitlich geneigte Orbit-Kamera für Nahaufnahmen, riser → impact → sparkle Sound-Phrasen. Der Masseneintritt von Elementen erfolgt durch die Bewegung selbst, nicht durch einzelnes Aufleuchten – dekorative Glint-/Glanz-Massenabsendungen wirken billig, einzelne hochwertige Lichteffekte sind akzeptabel.
Jeder Shot zeigt nur eine Bewegung; nach dem Ende der Schlüsselinformation muss geatmet werden. Eine Animationsmethode (Einfliegen/Stapeln/Seitenumblättern) ist nur einmal im gesamten Film der Star, wiederholte Shots und wiederholte Taglines werden gestrichen. Der Rhythmus ist einseitig: Historisches Feedback zeigt alle auf "Verlangsamen/Verweilen", nie einmal "Zu langsam". Marken-Logo hält nach dem Setzen ≥1s, Massenbewegungsende lässt 0,5s Ruhe, die Hauptaktion der Eröffnung bekommt volle 3s. Beim Erstellen der Zeitleiste wird vorab ein Frame-Budget für Halten/Pause eingeplant.
Bei Videos mit stark rhythmischer BGM müssen alle Übergänge und Bewegungen auf den Beat passen. Wenn der Benutzer bereits Musik ausgewählt hat → Vor Arbeitsbeginn eine Rhythmusanalyse durchführen (librosa Gitteranpassung für echten BPM/Phase + Kick/Snare/Hi-Hat Dreiklassifizierungs-Drum-Positionierung). Das Gitter wird erst nach bestandener Abnahme der Transientenabdeckung für das Storyboard verwendet; die Zeitleiste wird mit Beat-Frames beatF(n) geschrieben, seltene betonte Transienten werden auf echte Transienten genagelt, nicht auf Gitterinterpolationspunkte. Nach dem Rendern wird aus dem fertigen Video die Audiospur extrahiert und die Schnittpunktabweichung gemessen, sie muss ≤3f betragen. Die Methodik ist in references/music-beat-sync.md beschrieben. Videos mit BGM werden am Ende fest in zwei Versionen ausgeliefert: Mit BGM + Ohne BGM (SFX beibehalten), gerendert von derselben Zeitleiste über die bgm inputProp, damit der Benutzer später eigene Musik einfügen kann.
Bevor Shot-Karten-Bewegungen verwendet werden, muss der Galerie-Index geparst und der genaue Demo-Implementierungscode gelesen werden. Zuerst gallery/api/library.json verwenden, um den Kartennamen und den style-key zu validieren, dann gemäß der "Referenzimplementierung" im Kartendokument das spezifische TSX lokalisieren. Die Rezeptkarten geben semantische und Parametertabellen, der genaue Demo-Quellcode ist die Wahrheit der abgestimmten Parameter (Easing, Timing-Verhältnisse, Ausblendzeitpunkt, bekannte Fallstricke und deren Umgehung). Anpassungen sind erlaubt, aber die in der Karte als "Bekannte Fallstricke/Neuralgische Punkte" markierten Parameter dürfen nicht herabgestuft werden – der Qualitätsstandard darf nur steigen, nicht fallen. Aus dem Kartennamen und Verständnis heraus neu zu schreiben = den gesamten Abstimmungsaufwand aufgeben.
Bei gemeinsamer Kreation werden günstige Bestätigungen vorgezogen, bei autonomer freier Kreation werden dieselben Urteile als Ausführungsprotokoll festgehalten. Die Reihenfolge Produkt-Briefing → Anforderungs-zu-Ausführungs-Entscheidungstabelle → Textrichtung → Styleframe → Shot-Zuordnung → Storyboard bleibt gleich; bei gemeinsamer Kreation wird sie dem Benutzer schrittweise zur Bestätigung vorgelegt, bei autonomer freier Kreation wählt der Agent autonom und arbeitet kontinuierlich. In keinem der beiden Modi sollte mit der Shot-für-Shot-Implementierung begonnen werden, wenn die Richtung noch nicht festgelegt ist.
Qualitätssicherung durchgängig + unabhängige Schlussprüfung vor Auslieferung. Ab Phase 5 wird jeder Shot mit npx remotion still als Standbild zur Selbstkontrolle ausgegeben, nach jeder Änderungsrunde wird das gesamte Video gerendert + ffmpeg Einzelbilder zur Rückschau extrahiert; vor der Auslieferung muss ein Subagent mit sauberem Kontext eine unabhängige Endkontrolle durchführen. Die Prüfungseingabe umfasst das fertige Video, Keyframes, Produkt-Briefing, Anforderungs-zu-Ausführungs-Entscheidungstabelle, aktuellen Modus bestätigte oder protokollierte visuelle Richtung/Styleframe, Funktion-zu-Shot-Zuordnung, Galeriekartenname/Variante, genauen Demo TSX, Galerie-Referenzmuster/Extraktionsbilder, endgültiges Storyboard, ausgewählte Shot-Karten und ästhetische Kriterien; gemäß references/final-review.md werden gleichzeitig die Planungskonsistenz, funktionale Vollständigkeit, Shot-Treue, visuelle/audio-technische Qualität und Datensicherheit geprüft, mit frame-genauen Beweisen für jeden Punkt. Der Ersteller hat einen Bestätigungsfehler gegenüber seiner eigenen Arbeit; die Erstprüfung darf nie dem Benutzer überlassen werden.
Deterministisches Rendering: Date.now() / Math.random() sind verboten, alle Pseudozufälle haben feste Seeds (mulberry32/Hash, Seed vom Index abgeleitet), jedes Bild ist reproduzierbar.

Workflow

Bei autonomer freier Kreation wird references/pipeline.md ab Phase 0 kontinuierlich ausgeführt, ohne schrittweise auf Benutzerbestätigung zu warten. Bei gemeinsamer Kreation werden zuerst gemäß references/guided-free-creation.md die Phasen 0–3 (Produktverständnis, visuelle Richtung, Shot-Zuordnung und Storyboard-Bestätigung) abgeschlossen, dann mit Phase 4 der endgültigen Materialerfassung aus der Pipeline fortgefahren; keine Fragen wiederholen oder neues Design starten. In den Phasen 2–3 werden die Frontmatter der Karten in references/shots/ durchgesehen, um Shots nach Energieverlauf auszuwählen; in den Phasen 5–7 wird kontinuierlich gegen references/aesthetic-rules.md selbstgeprüft; Phase 6 liest references/sound-design.md; bei Beat-getakteten Videos wird durchgehend references/music-beat-sync.md befolgt.

Nach der Auslieferung des fertigen Videos wird standardmäßig einmal gefragt, ob auch ein Jianying-Projektfile exportiert werden soll (in Jianying können dann Untertitelinhalt/Schriftgröße/-farbe, Shot-Geschwindigkeit/-Reihenfolge geändert, Audio angepasst oder ersetzt werden); wenn der Benutzer dies benötigt oder den Export direkt anfordert, wird references/jianying-export.md gelesen und ausgeführt.

Wann welche Datei gelesen wird

Zeitpunkt	Lesen
Projektstart und Modus unbestimmt	Minimale schreibgeschützte Prüfung, dann drei Modi für vollständiges Werbevideo anbieten und empfehlen
Autonome freie Kreation	pipeline.md (Agent erledigt Phasen 0–7 autonom, wartet nicht schrittweise auf Bestätigung)
Gemeinsame Kreation	guided-free-creation.md (Phasen 0–3 bestätigen), dann ab Phase 4 von pipeline.md fortfahren
Benutzer hat BGM gewählt	music-beat-sync.md (zuerst analysieren, dann Storyboard)
Vorlagenpfad	template/TEMPLATE.md vollständig
Storyboard-Design	sequences/ Szenenvorlage (zuerst Filmskelett füllen); shots/ alle Frontmatter; ausgewählte Karten vollständig lesen
Shot-für-Shot-Implementierung	Vollständige Shot-Karte + genauer Demo-Quellcode gemäß "Referenzimplementierung" + entsprechende Komponenten aus assets/lib/
Sounddesign	sound-design.md + assets/audio/
Qualitätssicherung	final-review.md + aesthetic-rules.md vollständige Checkliste (durch unabhängigen Subagenten)
Nach Auslieferung (Jianying-Projektexport)	jianying-export.md + `jianying-export/` Plattformmodule

Asset-Nutzung

assets/lib/ Komponenten in ein neues Projekt kopieren und dann frei ändern (nicht aus dieser Bibliothek importieren). Verzeichnis: PageCam (2,5D Seitenkamera – Fundament aller "echten Seiten"-Shots), DigitRoll, FlashCut, Caption, FlatPanel, VerticalTicker (3D unendliche Scrollwand), helpers (rand/shake/camera/motion). FlatPanel und helpers/camera benötigen three + @react-three/fiber + @remotion/three Abhängigkeiten, der Rest nur remotion.
assets/scripts/capture-template.mjs kopieren und dann die CONFIG oben ändern (BASE/Route/Selektor).
assets/audio/ Soundeffekte direkt kopieren und verwenden (kostenlose kommerzielle Lizenz, siehe audio/ATTRIBUTION.md): audio/bgm/ enthält rhythmisch starke BGM-Optionen; audio/sfx/<Kategorie>/ 149 Soundeffekte in 16 Kategorien (transition impact riser camera ui text paper film light data scifi mech glass fluid crowd counter). Zur Suche zuerst in das Kategorieverzeichnis gehen, Liste siehe sound-design.md. Vokabeltabelle sparkle hat den Verzeichnisnamen light/ (kein sparkle/); S1 verbietet Klangfarbe, nicht Aktion – wenn das Bild tatsächlich einen Klick/Schalter hat, gehört ein passender Sound dazu, aber die Hälfte von ui/ sind automatische Feedback-Klänge (tone/bleep/notification), die einzeln angehört werden müssen, nicht als ganzes Verzeichnis freigegeben werden dürfen (Liste siehe sound-design 3.3); Lange Samples und leichte Audiomaterialien haben jeweils eigene Listen, die speziell behandelt werden müssen (sound-design 4.1).
demos/ Quellcode der Shot-Implementierungen: Die meisten sind eigenständige Graustufen-Demos (einige importieren demos/_fixtures/Fixtures.tsx gefälschte UI-Szenenkomponenten, einzelne importieren echte Seitenstrukturen aus demos/_textures/), in ein Remotion-Projekt kopieren und ausführen; einzelne Demos verwenden @remotion/motion-blur (CameraMotionBlur), benötigen npm i @remotion/motion-blur, Liste siehe demos/README.md.
template/ Vollständig rendergerechtes Projekt: npm install && npx remotion render src/index.ts AiflPromo out/promo.mp4.
jianying-export/ Jianying-Projektexportmodul: mac_draft.py (Mac Jianying 11.2 getestet), windows_draft.py (nach Upstream-Support-Pfad implementiert, nicht auf echter Hardware getestet), smoke_test.py (kleiner Rauchtest für neue Umgebungen). Ablauf, Zeitleisten-Extraktion und Spurerstellungsmethode siehe references/jianying-export.md; benötigt venv + pip install pyJianYingDraft.
gallery/ Statische Galerie: Vorzugsweise die Online-Version direkt an den Benutzer geben https://vincentwei1021.github.io/video-shotcraft/library.html; für lokale Ausführung zuerst gallery/fetch-media.sh ausführen, um Musterclips zu ziehen (mp4 nicht im Git), dann cd gallery && python3 -m http.server 4178. 152 Karten, 209 dynamische Musterclips können durchsucht/gefiltert/mehrfach ausgewählt werden – ideal, um den Benutzer beim Betrachten der Musterclips Shots auswählen zu lassen.

leecyno1/boutique-skills

Was ist boutique-skills?

In Ihrer bevorzugten KI fragen

Dokumentation