akillness/jeo-skills

video-shotcraft：电影感产品视频制作

Ein autarkes Produktions-Framework: 106 Shot-Rezeptkarten (mit Demo-Quellcode und dynamischer Galerie), eine geprüfte vollständige Promo-Vorlage, wiederverwendbare Komponenten und Audio-Assets, sechsstufiger Workflow. Der Fokus liegt derzeit auf Web-/Desktop-Produktpromos, aber die Shot-Karten sind ein universelles Bewegungsvokabular – sie können auch als einzelne Aufnahmen in beliebigen Videos extrahiert werden.

Wann dieses Skill verwendet werden sollte

Verwendung wenn:

• Ein filmisches Produkt-Promo, ein Produkt-Launch oder ein Desktop-/Web-App-Demo-Video erstellt wird.
• Die Vorlage Ink Press (墨压) benannt oder angefordert wird, oder der Effekt der Vorlagen-Promo reproduziert werden soll.
• Eine bestimmte Motion-Design-Shot-Karte implementiert werden soll (z. B. deck-deal-flyin, row-embed, spotlight-hero-card).
• 2.5D-Kamerafahrten (PageCam), beat-synchronisierte Videoschnitte mit Remotion und Sounddesign benötigt werden.

Anleitung

Schritt 1: Vorlage vorstellen und Route bestätigen

Bei jedem Aufruf dieses Skills, bevor jegliches Material gesammelt, Storyboards erstellt oder implementiert wird, dem Benutzer erklären:

• Es existiert bereits eine geprüfte 36,2-Sekunden-Produktvideo-Vorlage Ink Press (墨压) im template/-Verzeichnis: 1920×1080, 30fps, Papier-Tinte-Bernstein-Stil, mit 10 vollständigen Shots, 2.5D echten Seiten-Kamerafahrten, Titelgrafiken, Übergängen und bereits abgestimmten filmischen SFX. Durch Austausch der Screenshots, Texte und Markeninformationen des Zielprodukts kann sie angepasst werden.
• Die Verwendung der Vorlage ist der schnellste und qualitativ hochwertigste Weg; falls der Benutzer eine neue visuelle Sprache wünscht, wird der freie Kreativprozess gewählt.

Explizit fragen: „Möchten Sie diese fertige Vorlage für die Erstellung dieses Videos verwenden?“ Den Benutzer darauf hinweisen, dass er unter https://vincentwei1021.github.io/video-shotcraft/ eine dynamische Galerie ansehen kann.

• Benutzer bestätigt Verwendung: Zuerst das gesamte template/TEMPLATE.md lesen, dann gemäß der Vorlagen-Route ausführen.
• Benutzer lehnt explizit ab: Gemäß Phase 0 von references/pipeline.md fortfahren, also den freien Kreativ- oder Einzel-Shot-Pfad wählen.
• Benutzer hat noch nicht entschieden: An dieser Stelle innehalten und auf die Auswahl warten; die Vorlage nicht standardmäßig anwenden und nicht mit der Produktion beginnen.

Ausnahmen:

• Falls der Benutzer explizit die Ink Press-Vorlage nennt (z. B. „Erstelle ein Promo-Video für mein Produkt mit der Ink Press-Vorlage“), gilt die Vorlagen-Route als gewählt. Direkt template/TEMPLATE.md lesen und ausführen.
• Falls der Benutzer explizit bestimmte Shot-Karten angibt (z. B. „Verwende deck-deal-flyin und row-embed für dieses Video“), gilt die Route als gewählt. Direkt die entsprechenden Shot-Karten und den Implementierungsquellcode unter demos/<Kartenname>/ lesen.

Schritt 2: Eine von drei Verwendungsarten wählen

1. Vollständiges Promo-Video (Vorlagen-Route) : template/TEMPLATE.md lesen, gemäß der „Anleitung zum Austausch des Produkts“ das Material Shot für Shot ersetzen.
2. Vollständiges Promo-Video (freie Kreativarbeit) : Gemäß der sechs Phasen von references/pipeline.md vorgehen (Start mit den drei Fragen zu Phase 0).
3. Einzel-Shot / Einzel-Effekt : Aus den Shot-Karten in references/shots/ wählen, die gesamte Karte + den Implementierungsquellcode unter demos/<Kartenname>/ lesen und an das Zielmaterial anpassen.

Schritt 3: Wann welche Datei gelesen werden sollte

Zeitpunkt	Lesen
Projektstart	pipeline.md (Phase 0: drei Fragen)
Benutzer hat BGM gewählt	music-beat-sync.md (zuerst analysieren, dann Storyboard)
Vorlagen-Route	template/TEMPLATE.md komplett
Storyboard-Design	Sequenz-Vorlagen in sequences/; alle Frontmatter der Shots in shots/; die ausgewählte Karte komplett lesen
Shot-für-Shot-Implementierung	Die gesamte Shot-Karte + den Implementierungsquellcode unter demos/<Kartenname>/ + die entsprechenden Komponenten in assets/lib/
Sounddesign	sound-design.md + assets/audio/
Abnahme	aesthetic-rules.md komplett durchgehen (Checkliste von unabhängigem Subagenten ausführen)

Beispiele

Beispiel 1: Vorlagen-Route (Ink Press)

"Erstelle ein 30-Sekunden-Promo-Video für mein Desktop-Produkt mit der Ink Press-Vorlage"
-> Automatisch Vorlagen-Route wählen, template/TEMPLATE.md lesen, Screenshots erfassen und Material ersetzen.

Beispiel 2: Spezifische Shot-Karten

"Erstelle die Motion-Effekte für meine Produkt-Demo mit Referenz zu den Shot-Karten deck-deal-flyin und row-embed"
-> Automatisch Einzel-Shot / Kombi-Shot-Route wählen, references/shots/ und Demos-Quellcode lesen und maßgeschneidert implementieren.

Best Practices

1. Echte Screenshots: Für die Nachbildung vorhandener Seiten müssen echte Screenshots verwendet werden. Im ersten Schritt einen Dev-Server starten und mit einem Headless-Browser 2x-Texturen + layout.json erfassen.
2. Native visuelle Sprache des Produkts: Tokens aus dem Designsystem des Produkts/der Website extrahieren (Schriftart, Schriftgröße, Farbschema, Eckenradius). Keine irrelevanten Skins erfinden.
3. Einzel-Shot, Einzel-Effekt und Atmung: Jeder Shot zeigt nur einen Effekt. Textgrafiken/wichtige Bildpunkte am Beat setzen und ≥1s halten.
4. Starker Rhythmus, strikter Beat: Echten BPM/Takt mit librosa analysieren, beatF(n) zur Bestimmung der Frames verwenden, Schnitt-Toleranz ≤3 Frames.
5. Demo-Quellcode referenzieren: Vor Verwendung einer Shot-Karte die abgestimmten Parameter-Wahrheiten und bekannte Fallstricke in demos/<Kartenname>/ lesen.
6. Deterministisches Rendering: Date.now()/Math.random() verbieten; festen Seed für Pseudozufall verwenden.

Referenzen

• template/TEMPLATE.md — Struktur der Ink Press-Vorlage und Anleitung zum Austausch des Produkts
• references/pipeline.md — Sechsstufiger Produktionsprozess-Standard
• references/aesthetic-rules.md — Checkliste für visuelle Prüfung und Abnahme
• references/music-beat-sync.md — Analyse des Musikrhythmus und Berechnung des Beat-Bezugs
• references/sound-design.md — Leitfaden für Sounddesign-Sprache und Kombination von Audio-Assets
• https://vincentwei1021.github.io/video-shotcraft/ — Dynamische Galerie mit 106 Shot-Karten online