slideshowvon HeyGen

Slideshow Skill.

Ein Claude Code- und Codex-Skill für PPT und Präsentationsfolien: interaktive HyperFrames-Diashows mit Fragmenten, Verzweigungen und Präsentationsmodus.

Presentations
HTML-Folien

OpenDesign herunterladen Anleitung ansehen

heygen-com/hyperframes · skills/slideshow/SKILL.mdSKILL.md

--- name: slideshow description: Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't explicitly ask for a slideshow, confirm before authoring. Unclear → /hyperframes. --- ## Output — a navigable deck, not a linear MP4 ## Intent confirmation ## The two pieces ## Schema ## Slide writing rules ## Porting source pages

Vorspann und Abschnittsüberschriften gelesen aus der Upstream-Datei am 14.09.2026 · 33.631 Zeichen insgesamt

01 Was es tut

Was der slideshow-Skill in Claude Code und Codex macht

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Erstellt HyperFrames-Slideshows — Präsentationen, Pitch-Decks oder interaktive Decks mit einzelnen Folien, Fragment-Reveals, Verzweigungen, Hotspot-Navigation und integriertem Präsentationsmodus mit Sprechernotizen. Wandelt auch bestehende Seiten in Decks um. Das Ergebnis ist ein navigierbares Deck, das mit vorhandenen Hyperframes ausgeliefert wird, kein gerendertes MP4. Verwendet einen JSON-Island-Skriptblock, um Folien und Verbindungen zu deklarieren. Unterstützt Fragmente (Reveal-Haltepunkte innerhalb einer Folie), Verzweigungen über Hotspots zu Offline-Sequenzen und einen Präsentationsmodus mit editierbaren Notizen, die über einen BroadcastChannel synchronisiert werden.

Erfordert eine Bestätigung vor der Erstellung, sofern nicht explizit angefordert. Setzt strenge Regeln für das Schreiben von Folien durch: Überschriften als vollständige Satzaussagen, ein Gedanke pro Folie, Bottom-up-Marktgrößenbestimmung, mindestens 30pt Schriftgröße. Durchsucht den Live-Katalog, bevor ein benanntes visuelles Element manuell erstellt wird. Beim Übertragen von Ausgangsseiten bleiben Original-Design, Bewegung, Interaktionen und Medienverhalten erhalten, während die Seitenbewegung in Übergänge von Folie zu Folie übersetzt wird.

Was er erzeugt

Eine HyperFrames-Komposition mit Scenes, Clips, GSAP-Timelines und einem JSON-Island-Manifest
Ein navigierbares Deck, das mit vorhandenen Hyperframes ausgeliefert wird, einschließlich Präsentationsmodus mit Sprechernotizen

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Absicht bestätigen
Wenn der Nutzer explizit eine Slideshow anfordert, fahren Sie fort; andernfalls pausieren Sie und erklären Sie, was eine HyperFrames-Slideshow bedeutet (lauffähiges Deck, Navigation, Präsentationsmodus), bevor Sie um Bestätigung bitten.
02
Scenes mit Timing-Attributen deklarieren
Jede Folie wird durch eine Scene unterlegt. Deklarieren Sie jede mit data-composition-id, data-start, data-duration und data-label.
03
Fügen Sie das JSON Island hinzu
Fügen Sie der Composition-HTML genau einen Script-Block mit dem Typ application/hyperframes-slideshow+json hinzu.
04
Schreiben Sie Slides nach festen Regeln
Überschriften müssen vollständige, aussagekräftige Sätze sein. Eine Idee plus eine Visualisierung pro Slide. Beginnen Sie mit der Kernaussage. Nur Bottom-up-Marktgrößenbestimmung. Schriftgröße mindestens 30pt-Äquivalent.
05
Durchsuchen Sie den Catalog, bevor Sie Visualisierungen erstellen
Führen Sie für jeden Look, Effekt, Chart oder Übergang, den ein Slide benötigt, npx hyperframes catalog --query in einfachem Englisch aus und lesen Sie die Top-Ergebnisse, bevor Sie mit dem Erstellen beginnen.

02 Finden Sie Ihren Favoriten

Wann Man Den slideshow Skill Verwendet

Verwenden Sie den slideshow Skill in Claude Code oder Codex, wenn es um PPT und Slide Decks dieser Art geht. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

Präsentationen, Pitch-Decks oder interaktive Decks mit einzelnen Slides
Decks mit Fragment-Reveals, Verzweigungen, Hotspot-Navigation und Presenter-Modus
Umwandlung einer bestehenden Seite in ein Deck

Grenzen kennen

Anfragen, bei denen die Slideshow-Absicht unklar ist – muss vor dem Erstellen bestätigt werden
Text kleiner als 40px, den das Publikum lesen muss

Was Sie bereitstellen sollten

Figma-Quell-URL (optional)Wenn der Inhalt oder das Storyboard des Decks von einer figma.com-URL stammt, führen Sie zunächst /figma aus, um Assets zu exportieren, Brand-Tokens abzurufen und das Storyboard zu rekonstruieren, bevor Sie mit dem Erstellen beginnen.

03 Innerhalb des Skills

Regeln, die das slideshow-Skill Claude Code und Codex vorgibt

7 konkrete Anweisungen, Voreinstellungen und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Eine Idee plus eine Visualisierung pro Slide
Wenn Sie versucht sind, einen zweiten Bullet-Cluster oder ein zweites Chart hinzuzufügen, teilen Sie den Slide auf.
Schriftgröße mindestens 30pt-Äquivalent
Bei 1920×1080 ist eine Überschrift 72–96px groß; Fließtext 48px. Gehen Sie bei Text, den das Publikum lesen muss, niemals unter 40px.
Nur Bottom-up-Marktgrößenbestimmung
Schreiben Sie niemals ein TAM von 50 Mrd. USD, ohne die Rechnung zu zeigen. Bauen Sie von den Unit Economics aufwärts: Accounts × ACV oder Transaktionen × Take-Rate.
Durchsuchen Sie den Catalog, bevor Sie manuell erstellen
Führen Sie für jede benannte Visualisierung, die ein Slide benötigt, npx hyperframes catalog --query aus und lesen Sie die Top-Ergebnisse, bevor Sie mit dem Erstellen beginnen. Ein echter Block ist besser als eine vereinfachte Annäherung.
Rendern Sie Slideshows nicht als MP4
Ein Deck wird als mehrere Top-Level-Scene-Compositions ohne Master-Root-Composition erstellt, sodass das Rendern nur die erste Composition auflöst und ein stillschweigend abgeschnittenes MP4 erzeugt.
Fragment-Zeiten sind absolute Positionen auf der composition-timeline
Fragmentzeiten verwenden denselben Koordinatenraum wie data-start, nicht Offsets relativ zum Start der Szene. Sie müssen innerhalb des Start-Ende-Bereichs der Folie liegen (einschließlich).
Bei der Portierung die visuelle Treue der Quellseite bewahren
Bewahren Sie das ursprüngliche visuelle Design, die Bewegungssprache, das interaktive Verhalten, das Medienverhalten und die Präsentationsmerkmale der Originalseite so genau wie praktikabel möglich.

04 In Betrieb nehmen

slideshow In Claude Code Oder Codex Installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

slideshow Zu Claude Code, Codex Oder Ihrem Agent Hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill slideshow

Generische skills-CLI-Form für skills/slideshow/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Geben Sie dem Skill eine erste PPT- und Folienpräsentationsaufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Build a HyperFrames slideshow for a Series A pitch deck. Start with a hook slide showing SMBs lose $40B/year to manual scheduling. Add a problem slide with three pain points that reveal as fragments: no-shows cost 23% of revenue, manual reminders take 4h/week per staff, and rescheduling friction drives 40% churn. Include a hotspot on the $40B figure that branches to a market-sizing slide showing the bottom-up math: 2.3M SMBs × $17k ACV. End with a solution slide: [product name] automates scheduling for service SMBs, cutting no-shows by 80% in 90 days. Include speaker notes for each slide.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Korrigieren Sie die Datei und führen Sie sie erneut aus, bis Lint 0 Fehler meldet und die Validierung keine Laufzeitfehler meldet
Überprüfen Sie, dass jede slide.sceneId über data-composition-id auf eine vorhandene Szene verweist
Überprüfen Sie, dass jedes hotspot.target auf eine definierte slideSequence-ID verweist
Überprüfen Sie, dass die Fragmentzeiten innerhalb des Start-Ende-Bereichs jeder Folie liegen

In OpenDesign importieren Sie slideshow über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes Branch main
Skill-Datei: skills/slideshow/SKILL.md Inhalts-Prüfsumme bei Verifizierung aufgezeichnet; Commit 558c11b
License: Apache-2.0 Aus LICENSE.
Repository-Sterne: 49.761 GitHub-Snapshot vom 14.09.2026 für das gesamte heygen-com/hyperframes-Repository, das 9 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für slideshow.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Vertrag zur Slideshow-ErstellungEine HyperFrames-Slideshow ist eine normale Composition plus eine JSON-Insel, die Folien und Verbindungen deklariert
Ausgabe — ein navigierbares Deck, kein linearer MP4Mit vorhandenen hyperframes bereitstellen; nicht zu MP4 rendern, da dies auf die erste Composition kürzt
AbsichtsbestätigungVor der Erstellung bestätigen, sofern der Nutzer nicht explizit eine Slideshow angefordert hat; weitergeleitete Absicht ist bereits bestätigt
Die beiden BestandteileSzenen, deklariert über data-composition-id und Timing; JSON-Insel mit den Arrays slides und slideSequences
SchemaFelddefinitionen und Anforderungen für SlideshowManifest, SlideRef, SlideHotspot und SlideSequence
Regeln für das Schreiben von FolienÜberschriften als vollständige Sätze, eine Idee pro Folie, Größenanpassung von unten nach oben, mindestens 30pt, zuerst im Katalog suchen
Portierung von QuellseitenUrsprüngliches Design, Bewegung, Interaktionen, Medien bewahren; Seitenbewegung in Folienübergänge übersetzen; Medien-Events verdrahten
Fragmente: Haltepunkte innerhalb einer Folie offenlegenAbsolute Timeline-Zeiten innerhalb des Folienbereichs; der Controller springt bei Next zu jedem Fragment; keine Wiedergabe dazwischen
Verzweigung: Hotspots und Slide-SequenzenVerzweigungsfolien sind von der Hauptlinie ausgeschlossen; ein Hotspot-Klick legt auf den Navigations-Stack; Zurück kehrt zum übergeordneten Element zurück
Ausgearbeitetes Beispiel: 3-Folien-Deck mit Fragmenten und einer VerzweigungVollständiges HTML-Grundgerüst mit Szenen, JSON-Insel, GSAP-Timeline und einer Verzweigungssequenz
Umschließende KomponenteIn hyperframes-slideshow einbetten; bietet Navigation, Tastatur, Touch, Hotspots; Present öffnet einen Publikums-Tab; globale Stummschaltung
Slideshow eigenständig ausführen (Übergangslösung)Eigenständige Demos erfordern Workarounds, bis die Engine-gehostete Vorschau verfügbar ist; siehe references/standalone-harness.md

Die eigene Beschreibung des Skills

„Erstellen Sie eine HyperFrames-Slideshow – eine Präsentation, ein Pitch Deck oder ein interaktives Deck mit einzelnen Folien, Fragmentübergängen, Verzweigungen, Hotspot-Navigation und integriertem Präsentationsmodus mit Sprechernotizen; konvertiert auch eine bestehende Seite in ein Deck. Das Ergebnis ist ein navigierbares Deck, kein gerendertes MP4. Wenn der Nutzer nicht explizit nach einer Slideshow gefragt hat, bestätigen Sie vor der Erstellung. Unklar → /hyperframes."

Front-matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 33.631 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

06 Vor der Installation

Fragen zum slideshow-Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Was sind Fragmente und wie funktionieren sie?

Ein Fragment ist eine absolute Composition-Timeline-Zeit in Sekunden innerhalb des Start-Ende-Bereichs einer Folie, an der der Controller einen Reveal-Zustand hält.

Der Player betritt eine fragmentierte Folie bei fragments[0] und springt dann bei jedem Next zum nächsten Fragment. Nach dem letzten Fragment geht Next zur nächsten Folie über. Die Navigation ist seek-gesteuert, nicht play-gesteuert.

Slideshow

Führen Sie slideshow für eine echte PPT- und Slide-Decks-Aufgabe aus.

OpenDesign herunterladen, slideshow über den SKILL.md-Link importieren, den obigen Prompt einfügen und den Plan vor dem Ergebnis lesen.

OpenDesign herunterladen Alle Skills durchsuchen