Video Add Content Cards
Verwandle bestätigte semantische Momente in eine kohärente HyperFrames-Grafiküberlagerung. Verwende gemeinsame Beweise und die kanonische Timeline; transkribiere oder analysiere die Quelle in diesem Skill nicht erneut.
Abhängigkeiten
/video-understand ist eine Voraussetzung. Führe es zuerst aus, damit Karten validierte semantische Beweise und die kanonische Timeline verwenden.
Bevor du beginnst, überprüfe, ob es installiert ist. Wenn nicht, warne den Benutzer, dass diese Voraussetzung fehlt, und stoppe vor der Medienverarbeitung.
Erfordert ffmpeg im PATH, Python und Node.js >= 22 (für npx hyperframes, wird bei Bedarf abgerufen). hyperframes render/snapshot verwendet ein Headless-Chrome – es verwaltet sein eigenes chrome-headless-shell und fällt auf ein System-Chrome zurück (setze CHROME zum Überschreiben), wenn das zwischengespeicherte nicht verwendbar ist. Überprüfe diese vor der Medienverarbeitung.
Eingaben
work/project.json: Betriebsrevisionen und Abhängigkeitenwork/understand/understanding.json: Überprüfte semantische Momente und Beweisework/timeline.json: Quell-zu-Programm-Mapping oder eine Identitätstimeline, wenn kein Schnitt existiert- optionale ausgewählte Farbkorrektur-Revision, wenn Kontrast oder Palette gegen diesen Look beurteilt wird
Der Skill ist ohne Schnitt oder Farbkorrektur gültig. Wenn Untertitel aktiv sind, führe sie zuerst aus, hänge von ihrer aktuellen Revision ab und behandle ihre belegte Region als harte Ausschlusszone. Inhaltkarten müssen der Grafikbewegung vorausgehen, wenn beide aktiv sind. Diese relativen Regeln gelten für jedes ausgewählte Paar. Deklariere nur tatsächlich verbrauchte Abhängigkeiten und zeichne ihre aktuellen Revisionen in based_on auf.
Behandle das sichtbare Gesicht und die Kopfsilhouette jeder primären oder vorderen Person, jedes Sprechers, Präsentators, Interviewten oder semantisch wichtigen Person als harte Ausschlusszone während der gesamten Karteneinblendung, einschließlich Ein- und Ausgängen. Eine zufällige Hintergrundperson, die kein narrativer oder visueller Fokus ist, ist ausgenommen; schütze unsichere Fälle. Wenn eine Karte ein geschütztes Gesicht oder einen Kopf schneidet, positioniere sie zuerst neu, skaliere oder gestalte sie dann neu. Überspringe die Karte, wenn keine konforme Platzierung existiert.
Arbeitsdateien
work/content-cards/cards-plan.json # dauerhafter Redaktionsplan
work/cache/content-cards/index.html # Code-ist-der-Schnitt-Komposition
work/cache/content-cards-overlay.mov # transparenter Renderbeitrag
review/03-content-cards/card-stills/ # ein nützliches Standbild pro Karte
review/03-content-cards/content-cards-preview.mp4 # optionale kurze Einblendungsfenster
review/03-content-cards/content-cards-summary.md
review/03-content-cards/content-cards-review.html # lokale Kandidaten-Übersichtsseite
review/03-content-cards/content-cards-review-assets/ # ein Quellframe pro Kandidat
review/03-content-cards/content-cards-review.json # validierte menschliche Auswahlen
Die wiederverwendbare Übersichtsseite ist unter skills/video-add-content-cards/assets/content-cards-review.html abgelegt.
Das befüllte HTML, Screenshots, Overlay und Vorschau-Renderings sind reproduzierbar. Halte den Plan außerhalb von cache/. Er muss jeden sichtbaren String, Zeitpunkt, Platzierung, visuelle Behandlung, Renderer-Kompositionspfad, Renderer-Asset-Pfad und Quell-FPS enthalten, die zum Neugenerieren des wegwerfbaren HTML und der Alpha-Assets nach dem Löschen von work/cache/ benötigt werden. Zeichne ein Plannahes renderer_recipe mit dem Quellbeispiel/-template, dem Ausgabepfad der Komposition, der Rendering-Engine und jedem lokalen Laufzeit-Asset-Ausgabepfad, der genauen Version, Herkunft und SHA-256 auf. Eine zwischengespeicherte HTML-Datei oder ein heruntergeladenes Skript ohne dauerhaftes Rezept erfüllt die Neugenerierung nicht.
Arbeitsablauf
1. Befragen vor dem Entwurf
Lies zuerst understanding.json und die aktive Timeline. Zähle berechtigte Grafikmomente und berechne die empfohlene Zielkartenanzahl vor der Befragung:
min(berechtigte Momente, max(1, round(Programmminuten / 0.75)))
Dies ist ein Ziel, keine automatische Kürzungsregel. Bevor du eine Frage stellst, öffne die echten animierten Beispiele selbst mit dem nativen Befehl für das aktuelle Betriebssystem. Führe genau einen aus:
# Windows PowerShell
Start-Process (Resolve-Path 'skills/video-add-content-cards/examples/gallery-animated.html')
# macOS
open skills/video-add-content-cards/examples/gallery-animated.html
# Linux Desktop
xdg-open skills/video-add-content-cards/examples/gallery-animated.html
Wenn der Befehl fehlschlägt, diagnostiziere und wiederhole ihn. Ersetze diese Aktion nicht durch eine URI oder bitte den Benutzer, die Datei zu finden und anzuklicken. Die Galerie vergleicht alle sechs Designs und kann eine Spalte mit ihrem nativen Auswähler fokussieren:
| Design | Anfangszeichen |
|---|---|
almanac | warme Cremefarbe, Serife, bedacht |
teal | dunkles Broadcast, Cyan-Akzent |
editorial | dokumentarisch, Tinte und Bernstein |
dotgrid | Pixel-Mono, technisch |
apex | energiegeladener Sport, Rot-Akzent |
air | transparente Lexend-Typografie, keine Trägerplatten oder Sichtschutze |
Stelle genau eine Frage nach der anderen in dieser Reihenfolge:
- Welches Design soll dieser Schnitt verwenden?
- Welche Zielkartenanzahl soll dieser Schnitt verwenden? Biete die berechnete Empfehlung als Standard an.
- Welche Kartentypen müssen enthalten sein? Biete
intro,key-quote,stat,listundoutroan; standardmäßig keine.
Präsentiere + STOPPE nach jeder Frage. Nach der dritten Antwort fasse das Design, die Zielanzahl, die erforderlichen Typen und alle vom Benutzer bereitgestellten Notizen zusammen; bitte um Bestätigung. Wenn der Benutzer abbricht, behalte die Analyse, lasse die Operation im Status draft, und erstelle oder rendere keine Karten.
2. Entwurf von Karten aus gemeinsamem Verständnis
python skills/video-add-content-cards/scripts/build_cards_plan.py `
work/understand/understanding.json `
work/timeline.json `
work/content-cards/cards-plan.json `
--target-card-count 6 `
--theme editorial `
--must-include-type stat `
--notes "Behalte Produktnamen wörtlich bei"
Das Skript ordnet beibehaltene semantische Momente der Programmzeit zu und lässt vom Schnitt entfernte Momente aus. Es bewahrt Quellbereiche und Beweisreferenzen, begrenzt die Dauer auf den enthaltenen Clip und markiert Kopie/Platzierung/visuelle Behandlung als draft. Ein stat beginnt mit metric-spotlight; ein list beginnt mit side-by-side; die Kandidatenprüfung kann das normale Layout beibehalten oder ein List in parallel-columns umwandeln.
Das bestätigte Interview wird als brief in cards-plan.json gespeichert. Wiederhole --must-include-type für mehrere Werte; lasse Flags weg, die nicht zutreffen. Ältere optionale Brief-Felder bleiben aus Kompatibilitätsgründen akzeptiert, sind aber nicht Teil des normalen Interviews.
3. Redaktionelle Auswahlen treffen
Lies die Beweise zu jeder Kartenzeit. Korrigiere ASR-Namen und Zahlen, entferne schwache Kandidaten, schreibe prägnante Texte, wähle eine Platzierung, die geschützte Gesichter, sichtbare Kopfsilhouetten und Untertitel freihält, und genehmige die visuelle Behandlung. Behandle Analysetext niemals als endgültige Kopie.
Speichere alle Bildschirmtexte unter copy.display (zum Beispiel eyebrow, title und detail), nicht nur eine Zusammenfassung oder einen vorgeschlagenen Titel. Setze placement.face_clearance nur auf verified, nachdem du ein zusammengesetztes Standbild gegen die obige Definition von geschütztem Gesicht und Kopf überprüft hast, und speichere den protokollrelativen Pfad dieses Standbilds unter placement.review_still. Speichere die HyperFrames-Komposition, das Alpha-Asset und die genauen rationalen FPS unter renderer.
Verwende diese Zuordnungen als Ausgangspunkt:
| Semantische Art | Kartentyp |
|---|---|
| hook | intro |
| key-point, quote, question | key-quote |
| stat | stat |
| list | list |
| cta | outro |
repetition, tangent und risk sind redaktionelle Beweise, keine automatischen Karten.
Behalte die fünf kanonischen Kartentypen. Speichere die folgenden optionalen Layouts unter visual_treatment.layout, anstatt neue übergeordnete Kartentypen zu erstellen:
| Kanonischer Kartentyp | Erlaubtes Layout |
|---|---|
stat | default, metric-spotlight, bar-chart, pie-chart, line-chart |
list | default, side-by-side, parallel-columns |
Verwende metric-spotlight nur, wenn eine durch Beweise gestützte Zahl, ein Prozentsatz, Betrag, Multiple, Jahr oder eine Dauer hervorgehoben werden soll. Setze die Zahl zwischen präzisen oberen und unteren Kontext, passe lange Werte ohne Überlappung an und halte die Zahl visuell zwischen diesen Beschriftungen zentriert. Verwende side-by-side oder parallel-columns für zwei bis vier kurze parallele, kontrastierende, gegensätzliche oder korrespondierende Konzepte. Bevorzuge kurze Phrasen; verwende die Überprüfung, um die Ausrichtung zu wählen, die zum verfügbaren Material passt und das Subjekt freihält.
Verwende ein Diagramm nur, wenn das erhaltene Transkript einen vollständigen, durch Beweise gestützten Datensatz bereitstellt. Lies reference/chart-data.md, bevor du Diagrammdaten erstellst. Speichere manuell die Dimension, Metrik, Einheit, den Zeitraum, geordnete Punkte und die Transkriptbeweise jedes Punktes unter data; leite niemals Werte aus einer Analysezusammenfassung ab oder kombiniere Punkte aus verschiedenen Videos. Verwende bar-chart für 2-6 vergleichbare Kategorien, pie-chart für 2-6 sich gegenseitig ausschließende Teile eines nachgewiesenen Ganzen und line-chart für 3-8 sinnvoll geordnete Punkte. Wenn erforderliche Werte, Beschriftungen, ein Nenner, eine Zeitreihenfolge oder Einheiten fehlen, verwende metric-spotlight, eine normale Statistik-Karte oder keine Karte. Für Diagramm-Layouts komprimiere lange Erklärungen in prägnante unterstützende Texte, ohne ihre Bedeutung zu ändern. Das Diagramm sollte hauptsächlich die Schlüsselwerte und ihre Änderung oder Beziehung kommunizieren. Zähle keine Werte, Beschriftungen, Zeiträume oder Einheiten auf, die bereits im Diagramm sichtbar sind.
Behalte alle durch Beweise gestützten Kandidaten in dieser Phase. Strebe die Zielkartenanzahl des Briefs an, erlaube aber einen stärkeren oder sparsameren Satz, wenn die Beweise dies rechtfertigen.
4. Kandidatenauswahlen prüfen und anwenden
Generiere eine projektspezifische Browser-Übersicht, nachdem der Kandidatenplan existiert. Übergib das Quellvideo, das auf den source_range des Plans und die aktive Timeline abgestimmt ist. Das Skript begrenzt jede Beweismitte auf ihren enthaltenen, beibehaltenen Clip und befüllt dann die festgelegte Vorlage mit einem entsprechenden Quellframe pro Kandidat:
python skills/video-add-content-cards/scripts/build_review_page.py `
work/content-cards/cards-plan.json `
review/03-content-cards/content-cards-review.html `
--video input/source.mp4 `
--timeline work/timeline.json `
--captions-plan work/captions/captions-plan.json
Lassee --captions-plan weg, wenn das Projekt keinen aktiven Untertitelvorgang hat. Bei einem aktiven Untertitelplan zeigt der Übersichts-Frame die tatsächlich belegten oberen, mittleren oder unteren Bereiche an.
Öffne sofort die befüllte Übersicht selbst mit dem nativen Befehl für das aktuelle Betriebssystem. Führe genau einen aus:
# Windows PowerShell
Start-Process (Resolve-Path 'review/03-content-cards/content-cards-review.html')
# macOS
open review/03-content-cards/content-cards-review.html
# Linux Desktop
xdg-open review/03-content-cards/content-cards-review.html
Wenn der Befehl fehlschlägt, diagnostiziere und wiederhole ihn; bitte den Benutzer nicht, die Datei zu finden. Die Seite zeigt jeden Quellframe, Karten-ID, Programmzeit, bearbeitbare Kopie, visuelle Behandlung und Platzierung. Diagramm-Layouts zeigen auch bearbeitbare strukturierte Daten und die Punkt-Beweisreferenzen. Überprüfe jeden Wert gegen seine angezeigten Beweise, bevor du ihn genehmigst.
Jeder Kandidat beginnt nicht ausgewählt mit auf bottom gesetzter Platzierung. Das Ändern der Platzierung bewegt einen grauen Karten-Proxy über den echten Frame, sodass das Kollisionsrisiko vor der Genehmigung sichtbar ist. Der Benutzer wählt Karten aus, bearbeitet Texte, wählt Behandlung und Platzierung, klickt auf Copy summary und fügt die sichtbare Zusammenfassung zurück in die Unterhaltung ein.
Präsentiere + STOPPE. Warte auf die eingefügte Auswahlzusammenfassung. Erstelle kein HTML aus ungeprüften Kandidatenentwürfen. Konvertiere die Zusammenfassung in review/03-content-cards/content-cards-review.json: schreibe einen Eintrag für jede Plan-Karte, markiere ausgewählte Zusammenfassungs-IDs mit ihrer gewählten Kopie, visuellen Behandlung und Platzierung und markiere alle anderen IDs als nicht ausgewählt mit ihrer aktuellen Entwurfskopie und einer leeren Platzierung. Speichere die Übersichtsauswahl als Zeichenfolgenfeld mit dem Namen visual_treatment. Wende dann die validierte Überprüfung an:
python skills/video-add-content-cards/scripts/apply_cards_review.py `
work/content-cards/cards-plan.json `
review/03-content-cards/content-cards-review.json
Der Anwendungsschritt lehnt unbekannte, doppelte oder fehlende Karten-IDs sowie leere ausgewählte Texte, ungültige Platzierungen und Behandlungen ab, die mit dem kanonischen Kartentyp inkompatibel sind, ohne den Plan zu ändern. Bei Erfolg behält er ausgewählte Karten und markiert ihre Kopie, Platzierung, visuelle Behandlung und die übergeordnete Prüfung als approved. Lies die resultierende ausgewählte Anzahl gegen das Brief-Ziel, bevor du fortfährst.
Bei ausgewählten Diagramm-Layouts validiert der Anwendungsschritt auch die vollständigen strukturierten Daten und markiert data.status als approved. Jede ungültige ausgewählte Diagramm lehnt die gesamte Prüfung ab, bevor der Plan kopiert wird. Die Wahl eines Nicht-Diagramm-Layouts entfernt ungenutzte Entwurfsdiagrammdaten. Nach der Anwendung bleiben Gesichts- und Untertitel-Freiräume ausstehend, bis die Komposition anhand echter zusammengesetzter Frames überprüft wird.
5. Erstelle eine HyperFrames-Komposition
Verwende ein index.html und eine pausierte GSAP-Timeline. Jede genehmigte Karte wird zu einem .clip, der durch program_start_s und duration_s des Plans gesteuert wird. Halte die Bewegung suchsicher und leite Timing aus Datenattributen ab, nicht aus Wanduhr-Timern.
Für Diagrammeinblendungen animiere nur durch diese pausierte Timeline zu absoluten Kompositionszeiten. Balken enthüllen von einer Null-Baseline; Kreisdiagramm-Sektoren enthüllen in Punktreihenfolge mit proportionaler Geometrie zu den Werten; Linienpfade werden in X-Achsen-Reihenfolge gezeichnet, bevor ihre Punkte erscheinen. Verwende quellrelative Größenangaben und feste Layout-Boxen, sodass Suchen, Beschriftungen und dynamische Werte keine Layoutsprünge verursachen. Vorgeschlagene Dauern sind 5-6 Sekunden für Balken und Kreis und 6-8 Sekunden für Linien, immer auf den beibehaltenen Clip begrenzt.
Beginne mit dem nächstliegenden Repository-Beispiel:
examples/index-almanac.htmlexamples/index-apex.htmlexamples/index-dotgrid.htmlexamples/index-editorial.htmlexamples/index-teal.htmlexamples/index-air.html
Behalte eine visuelle Sprache in allen Karten bei, verwende quellrelative Größenangaben und sorge für ausreichenden Kontrast gegen den ausgewählten Look. Die fünf Deckpanel-Designs können eine Karte oder einen Sichtschutz für die Lesbarkeit verwenden. air muss Szene- und Textcontainer transparent halten und sich ausschließlich auf Schriftstärke und Schatten für die Lesbarkeit stützen; verwende keine Hintergrundboxen. Füge immer eine abschließende Standard-air-Fallback-Karte ein (kein Hintergrund, weiße Version der Schriftfamilie), wenn air als Design ausgewählt ist, um vollständige Kompatibilität über alle Kombinationen von Kompositionszeit und Hintergrund hinweg zu gewährleisten. Für alle anderen Designs füge eine vollständig bereichsbasierte, deckende Platten-Karte in der Plan-Karten-Reihenfolge als Fallback ein.
6. Rendern und überprüfen
Rendere das transparente Video mit:
npx hyperframes render work/cache/content-cards/index.html --output work/cache/content-cards-overlay.mov --clear-color "rgba(0,0,0,0)"
Erstelle Qualitäts-Standbilder und eine Überprüfungszusammenfassung:
python skills/video-add-content-cards/scripts/render_content_cards.py `
--plan work/content-cards/cards-plan.json `
--html work/cache/content-cards/index.html `
--overlay work/cache/content-cards-overlay.mov `
--stills-dir review/03-content-cards/card-stills `
--summary review/03-content-cards/content-cards-summary.md
Erstelle dann eine vollständige Vorschau-Kollage von Einblendungsfenstern auf schwarzem Hintergrund mit Platzhalter auf der Zeitachse:
python skills/video-add-content-cards/scripts/assemble_preview.py `
--overlay work/cache/content-cards-overlay.mov `
--source input/source.mp4 `
--plan work/content-cards/cards-plan.json `
--output review/03-content-cards/content-cards-preview.mp4
Präsentiere + STOPPE. Zeige content-cards-summary.md. Biete an, das transparente Overlay, die Vorschau-Kollage und die Standbilder zu teilen. Wenn der Benutzer Änderungen anfordert, kehre zu Schritt 3 zurück, wobei du die bereits authorisierten, redigierten, verifizierten Karten-Kopien, Platzierungen, Layouts und Daten beibehältst. Überarbeite, rendere neu und zeige die aktualisierte Zusammenfassung erneut an. Wiederhole dies, bis der Benutzer genehmigt oder abbricht.
Ausgaben
work/cache/content-cards-overlay.mov: Alphakanal-Komposition, die bereit zum Überlagern auf dem Quellvideo istreview/03-content-cards/content-cards-summary.md: Überprüfbare Entscheidungsaufzeichnungreview/03-content-cards/card-stills/: Ein nützliches Einzelbild pro Kartereview/03-content-cards/content-cards-preview.mp4: Vollständige Vorschau-Kollage aller Einblendungsfensterreview/03-content-cards/content-cards-review.html: Befüllte lokale Kandidaten-Übersichtsseitereview/03-content-cards/content-cards-review.json: Validierte menschliche Auswahlen