Communitygithub.com

screenshot-motion-skill

Erstellen Sie Produktvideos aus Screenshots mit Vorlagen wie Karten-Spotlight, dunkler Launch-Film, Orbital-Galerie, kinetische Grafiken, prismatische Falten oder Seitenumblätter-Storybook, mit editierbarem Text, optional lizenzierter Musik und portablen Desktop-Editing-Paketen.

Was ist screenshot-motion-skill?

Diese Fähigkeit ermöglicht es, aus einer Reihe von Screenshots automatisch professionelle Produktvideos zu generieren. Sie bietet sechs verschiedene videografische Effekte: Karten-Spotlight, kinetische Grafiken, prismatische Akkordeon-Falten, Orbit-Galerie, dunklen Launch-Film und ein Seitenumblätter-Storybook. Der Workflow ist stark automatisiert: Der Agent identifiziert das Produkt und die Screenshot-Reihenfolge, schreibt kurze erklärende Texte, konfiguriert das Projekt (1920×1080, 30 fps), bereitet einen isolierten Job vor, installiert Abhängigkeiten (Node.js 22+, Chrome/Chromium) und rendert schließlich das Video – inklusive optionaler Audiomischung. Die Ausgabe ist kein fertiges Demo-Video, sondern ein editierbares Projekt, das später in Desktop-Editoren weiterverarbeitet werden kann. Die Fähigkeit unterstützt wiederholte Änderungen in natürlicher Sprache ohne manuelles JSON-Schreiben und enthält umfangreiche Qualitätsprüfungen. Die Bibliothek ist als erweiterbare Vorlagensammlung konzipiert, sodass neue Effekte hinzugefügt werden können, ohne bestehende zu ersetzen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/simwy/screenshot-motion-skill/tree/HEAD

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht screenshot-motion-skill?

Erstellen Sie ein echtes, editierbares Video mit einer von sechs implementierten Vorlagen:

VorlageEffektScreenshotsDauer
spotlightFünf Karten entfalten sich, der mittlere Screenshot wird zum Helden, dann kehrt die Reihe zurückGenau 512 Sekunden
kineticFette Schrift, geteilte Bildschirme und grafische ÜberblendungenGenau 516 Sekunden
prismAkkordeon-Bildschirme, geschichtete Glas-Enthüllungen und LichtstreifenGenau 518 Sekunden
orbitNeon-Orbital-Galerie, Tiefenrotation und finale ReiheGenau 518 Sekunden
launchDunkler redaktioneller Promo mit Collage, Feature-Nahaufnahmen, großen Schlagzeilen und CTAGenau 520 Sekunden
storybookHardcover öffnet sich, illustrierte Doppelseiten blättern, Cover schließt1–12Konfigurierbare Haltezeiten; 5 Seiten standardmäßig 32 Sekunden

Lesen Sie Vorlagenauswahl und -zuordnung, bevor Sie Screenshots anordnen. Folgen Sie einem explizit ausgewählten Effekt. Andernfalls empfehlen/wählen Sie die engste Übereinstimmung aus der Absicht des Benutzers, wobei vorherige Entscheidungen beibehalten werden; standardmäßig werden nicht alle Anfragen auf ein Buch gesetzt. Das maßgebliche Vorlagenregister ist templates.json. Dies ist eine erweiterbare Bibliothek, keine gebündelten fertigen Demovideos.

Eingaben und Entscheidungen

Identifizieren Sie das beworbene Produkt, die bereitgestellte Screenshot-Reihenfolge und die Ausgabesprache aus der Anfrage. Behalten Sie vorherige Entscheidungen bei. Wenn das Produkt mehrdeutig ist, klären Sie es, bevor Sie werbliche Behauptungen aufstellen; andernfalls verwenden Sie angemessene Standardwerte und fahren Sie fort. Standard: 1920×1080, 30 fps, vier Sekunden Haltezeit für Storybook, englischer Erklärungstext, keine gesprochene Erzählung.

Überprüfen Sie Screenshots, bevor Sie Text schreiben. Verwenden Sie die echte Benutzeroberfläche, ohne Bedienelemente, Kundenzahlen, Leistungsbehauptungen, Preise oder Download-Adressen zu erfinden. Der erklärende Text ist eine separate editierbare Ebene; in Screenshots eingebrannter Text kann durch Ändern von Bildunterschriften nicht geändert werden. Verwenden Sie benutzerbereitgestellte oder ordnungsgemäß lizenzierte Medien. Bewahren Sie private Screenshots und generierte Aufträge außerhalb des installierten Skill-Verzeichnisses auf.

Benutzerinteraktion

Behandeln Sie den Aufruf als Anfrage zur Erstellung des Videos. Fragen Sie nach Screenshots und Produktdetails nur, wenn diese fehlen; schreiben Sie die Konfiguration und führen Sie Vorbereitung, Rendering und Mischung selbst durch, wenn Werkzeuge verfügbar sind. Geben Sie dem Benutzer keine Python-Befehle in die Hand oder verlangen Sie, dass er JSON als normalen Arbeitsablauf verfasst. Überprüfen Sie lokale Abhängigkeiten und melden Sie konkrete fehlende Anforderungen. Beachten Sie Ausführungsberechtigungen; erklären Sie jede Aktion, die der Benutzer ausführen muss, wenn Ihre Umgebung sie nicht ausführen kann.

Akzeptieren Sie Überarbeitungswünsche in natürlicher Sprache, aktualisieren Sie das generierte Projekt und rendern Sie ein überarbeitetes Ergebnis. Bei Änderungen der Screenshot- oder Storybook-Dauer bereiten Sie einen neuen Auftrag vor, damit die Kompositionsmetadaten konsistent bleiben. Halten Sie technische Befehle in der Agentenausführung oder Fehlerbehebung für Entwickler, es sei denn, der Benutzer fordert sie explizit an. Siehe Entwickler-Rendering-Befehle für die manuelle Verwendung.

Erstellen des Videos

  1. Lesen Sie die Konfigurationsreferenz. Schreiben Sie ein Projekt-JSON neben die Assets des Benutzers, wobei Sie das passende Beispiel in examples/ als Ausgangspunkt verwenden. Schreiben Sie kurze, konkrete Erklärungen, eine Funktion pro Screenshot. Wählen Sie --template spotlight, --template launch, --template orbit, --template kinetic, --template prism oder --template storybook; der untenstehende Befehl veranschaulicht storybook. Beachten Sie die validierten Zeilenlimits.
  2. Bereiten Sie einen isolierten Auftrag vor:
    python3 /pfad/zu/screenshot-motion-skill/scripts/motion.py prepare --template storybook --config /pfad/zu/project.json --out /pfad/zu/neu-job
    
    Vorhandene Aufträge werden von prepare niemals überschrieben. Der Auftrag enthält seinen eigenen Renderer, kopierte Screenshots und normalisierte Konfiguration; er ist nach der Vorbereitung bis auf die Hilfs-CLI nicht vom Skill abhängig.
  3. Installieren Sie Abhängigkeiten innerhalb des neuen Auftrags mit npm install. Node.js 22+ und Chrome/Chromium sind erforderlich. Verwenden Sie npm run studio in diesem Auftrag für die interaktive Vorschau.
  4. Rendern Sie zuerst repräsentative Standbilder für die ausgewählte Vorlage:
    python3 /pfad/zu/screenshot-motion-skill/scripts/motion.py render --job /pfad/zu/neu-job --frame 150 --browser /pfad/zu/chrome
    
    Überprüfen Sie das resultierende PNG. Korrigieren Sie Text, Ausschnitt oder Layout vor einem vollständigen Render. Nützliche Vorschau-Frames: spotlight 105/190/330; launch 60/150/250/355/450/550; orbit 45/170/270/380/490; kinetic 35/100/170/245/320/430; prism 70/150/240/330/470; storybook 150 und 90 + holdFrames + 21 für den ersten Seitenumblätter-Mittelpunkt. Wählen Sie Frames innerhalb der Auftragsdauer.
  5. Rendern Sie ohne --frame. Dies erstellt out/video-silent.mp4. Geben Sie einen vorhandenen Browser explizit an, wenn die automatische Erkennung fehlschlägt; das Skript lädt keinen Browser herunter.
  6. Führen Sie motion.py mix --job /pfad/zu/neu-job aus, um out/video.mp4 zu erstellen. Ohne Audioeingaben erstellt es eine stille Kopie. Für Musik, Übergangsgeräusche oder Papiergeräusche lesen Sie Audio und Lizenzierung. Fügen Sie keine Erzählung hinzu, es sei denn, sie wird angefordert und ein geeigneter autorisierter Sprachdienst ist verfügbar.
  7. Befolgen Sie die Ausgabeprüfungen, überprüfen Sie die gerenderte Datei anstelle nur des Quellcodes, und geben Sie dann das tatsächliche Video und den Auftragspfad zurück. Seien Sie präzise, ob Erzählung, Hörprobe oder Echtzeit-Wiedergabe durchgeführt wurde. Wenn das Rendering blockiert ist, melden Sie die spezifische fehlende Abhängigkeit; ersetzen Sie kein Standbild und nennen Sie es ein Video.

Desktop-Editing-Bereitstellung

Auf Anfrage folgen Sie Editierexport und Kompatibilität. Rendern Sie den sauberen Modus und exportieren Sie das portable Paket mit editierbaren SRT-Untertiteln, unabhängigen Audiospuren, Originalscreenshots und Shot-Clips. Erklären Sie, dass Bewegungsgeometrie fest eingebacken bleibt und importierte Untertitel Editor-Styling benötigen. Behalten Sie das endgültige gestylte MP4 als Referenz. Überprüfen Sie die App/Version des Benutzers, bevor Sie native Draft-Unterstützung behaupten; der optionale Legacy-Jianying-Adapter ist experimentell und nicht in aktuellen macOS/Windows oder CapCut verifiziert. Installieren Sie niemals stillschweigend Drafts in die Bibliothek einer Anwendung.

Stabile Implementierungsdetails

Die folgenden Seitenumblätter-Notizen gelten für storybook. Für spotlight bewahren Sie die Farbtrennung und die Bildschirmbeschriftungen. Für launch verwenden Sie normalisierte region-Zuschnitte nur dort, wo sie von der sichtbaren Benutzeroberfläche unterstützt werden; verwenden Sie niemals die Pixelkoordinaten eines vorherigen Produkts erneut.

  • Eine sich umblätternde rechte Seite hat den alten Screenshot auf ihrer Vorderseite und die nächste Erklärung auf ihrer Rückseite. Überblenden Sie nicht gesamte Doppelseiten oder spiegeln Sie den umgekehrten Text.
  • Die gesamte Geometrie folgt Bildnummern; führen Sie niemals Wanduhr-Animation oder ungesäten Zufall ein.
  • Das Canvas2D-Streifen-Mesh vermeidet verschachtelte 3D-Kompositionsprobleme des Browsers. Behalten Sie den schnellen Flachseiten-Pfad, kleine Streifenüberlappung und kontinuierliche Lichtüberlagerung bei: Antialiasing-Schattierung pro Streifen erzeugt sichtbare Linien über Text.
  • Kameraabstand 3000 hält angehobene Seitenenden innerhalb des 1080p-Bildrahmens. Überprüfen Sie die vollständige Blätterhülle nach Kamera- oder Seitenformatänderungen erneut.
  • Der Standard-Renderer passt Bilder ohne Zuschnitt an. Querformat-Screenshots werden unterstützt; strecken Sie sie nicht in ein Hochformat-Seitenverhältnis.
  • Rendern Sie standardmäßig sequentiell. Erhöhte Parallelität erfordert eine weitere visuelle Überprüfung der aufgenommenen Frames.

Der ursprüngliche Code des Pakets ist MIT-lizenziert. Remotion und Medien haben separate Lizenzen; siehe THIRD_PARTY_NOTICES.md. Dieser Skill autorisiert nicht das Veröffentlichen, Hochladen von Benutzer-Assets, Ändern von Kontoeinstellungen oder die globale Installation.

Erweitern der Bibliothek

Wenn Sie aufgefordert werden, einen weiteren Effekt hinzuzufügen, folgen Sie dem Erweiterungsvertrag. Fügen Sie einen Renderer, einen Registrierungseintrag und ein Beispiel hinzu, anstatt vorhandene Vorlagen zu ersetzen. Überprüfen Sie sowohl den neuen Effekt als auch relevante vorhandene Vorlagen.

Verwandte Skills