hyperframes-creativevon HeyGen

HyperFrames Creative Skill.

Ein Skill für Claude Code und Codex für Motion und Video: Creative Direction für HyperFrames-Videos: Farbpalette, Typografie, Komposition, Voice-over, Timing.

Motion & Video
Video

OpenDesign herunterladen Anleitung ansehen

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

--- name: hyperframes-creative description: Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`. --- ## Workflow ## Routing ## Scripts ## Boundaries

Front Matter und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 6.317 Zeichen insgesamt

01 Was es tut

Was der hyperframes-creative Skill in Claude Code und Codex leistet

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

Nicht-animationsbezogene kreative Ausrichtung für HyperFrames-Videos, eingesetzt nachdem der technische Vertrag aus hyperframes-core steht. Behandelt das Parsen von Design-Spezifikationen (frame.md / design.md mit Frontmatter als Brand-Wahrheit), Paletten, Typografie, Erzähltext, Beat-Planung, audioreaktive Visuals, Kompositionsmuster und Markenentscheidungen.

Zwei Referenzen setzen sich bei nicht-trivialer Arbeit über Web-Instinkte hinweg: house-style.md erklärt, wie Prompts zu interpretieren sind und echter Content mit Hintergrund-/Vordergrund-Layer-Rezepten erzeugt wird, während video-composition.md Skalierung, Tiefe und Vordergrunddetails im Videomedium definiert, um leere webseitenartige Layouts zu vermeiden. Für atomare Bewegungsmuster, Szenen-Blueprints, Übergänge und CSS-Markereffekte verwenden Sie stattdessen hyperframes-animation.

Was er erzeugt

HTML-Komposition unter Verwendung von Skalierung, Tiefenmustern und markenkonsistenten Farben und Typografie im Videomedium
Kontrastbericht von contrast-report.mjs zur Prüfung der Barrierefreiheit gerenderter Frames
Audio-Band-Datendatei von extract-audio-data.py für audioreaktive Kompositionen

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Lesen Sie zuerst die Design-Spezifikation
Wenn ein Projekt frame.md, design.md oder DESIGN.md enthält, lesen Sie diese zuerst und behandeln Sie die Frontmatter-Tokens als Brand-Wahrheit für Farben, Schriften, Abstände, Tonalität und Einschränkungen.
02
Wählen Sie eine visuelle Richtung
Wenn keine Design-Spezifikation vorliegt, verwenden Sie ein vorgefertigtes Frame-Preset aus frame-presets/, wählen Sie einen benannten Stil aus visual-styles.md, nutzen Sie schnelle Vorgaben aus house-style.md oder führen Sie eine interaktive Auswahl über design-picker.md durch.
03
Beats vor dem Schreiben von HTML planen
Bei Arbeiten mit mehreren Szenen konsultieren Sie beat-direction.md, um Rhythmus und Timing zu planen, bevor Sie HTML schreiben. Für Szenenübergänge wechseln Sie zu hyperframes-animation/transitions/.
04
Motion-Leitplanken anwenden
Bei bewegungsintensiven Arbeiten lesen Sie zunächst motion-principles.md für übergeordnete Leitplanken und wechseln dann zu hyperframes-animation für atomare Motion-Regeln.

02 Finden Sie Ihren Favoriten

Wann Sie den hyperframes-creative Skill verwenden

Verwenden Sie den hyperframes-creative Skill in Claude Code oder Codex, wenn die Aufgabe Motion und Video dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

Umgang mit Design-Spezifikationen für frame.md- oder design.md-Dateien mit Frontmatter-Tokens, die die Markenrichtung definieren
Palettenauswahl, Typografie-Entscheidungen sowie Marken- oder Stilentscheidungen für HyperFrames-Videos
Kompositionsmuster wie Bild-in-Bild, Text-hinter-Motiv, Titelkarten und Diashows
Audio-reaktive Visuals mit vorberechneten Audio-Bändern, die auf Bewegung gemappt werden

Grenzen kennen

Atomare Motion-Muster, die stattdessen in hyperframes-animation gehören
Szenen-Blueprints, Übergänge und CSS-Markierungseffekte – dafür hyperframes-animation verwenden

Was Sie bereitstellen sollten

Nutzer-Prompt für die visuelle AusrichtungWenn keine Design-Spezifikation vorliegt, geben Sie eine Anfrage für einen benannten Stil, eine Stimmung oder einen offenen Prompt an, um über visual-styles.md oder prompt-expansion.md zu leiten.

03 Innerhalb des Skills

Regeln, die der hyperframes-creative Skill Claude Code und Codex vorgibt

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

Zuerst house-style.md und video-composition.md lesen
Lesen Sie bei jeder nicht trivialen Komposition zunächst references/house-style.md und references/video-composition.md, bevor Sie Farben auswählen oder HTML schreiben.
Frontmatter-Tokens sind die Markenwahrheit
Behandeln Sie in Design-Spezifikationen Frontmatter als normativ und Fließtext als Kontext. Frontmatter-Tokens für Farben, Schriften, Abstände, Tonalität und Einschränkungen überschreiben andere Vorgaben.
Niemals die technischen Regeln von hyperframes-core überschreiben
Überschreiben Sie nicht den technischen Vertrag, der von hyperframes-core festgelegt wird und die grundlegende Struktur und Einschränkungen definiert.
Keine unaufgeforderte Inhaltserweiterung
Fügen Sie keine zusätzlichen Szenen, Erzähltexte, Musik, Untertitel oder Übergänge hinzu, außer die Anfrage verlangt dies ausdrücklich oder Sie schlagen die Erweiterung dem Nutzer zuerst vor.
Recipe-Referenzen aufgabenspezifisch halten
Lesen Sie nicht jede Referenzdatei für einfache Änderungen. Laden Sie nur die Referenzen, die für die konkrete Aufgabe relevant sind.
Reihenfolge der Design-Spezifikations-Priorität
Wenn Sie festlegen müssen, welche Design-Spezifikation gelesen werden soll, gehen Sie nach dieser Priorität vor: zuerst frame.md, dann design.md, dann DESIGN.md.
Skripte vom Repository-Root aus ausführen
Führen Sie alle Skripte mit expliziten Pfaden ab dem Repository-Root aus, zum Beispiel: python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>.
Kein Design System für minimale Arbeiten erforderlich
Für eine minimale technische Komposition ist kein vollständiges Design System erforderlich. Der Skill skaliert mit der Aufgabenkomplexität.

04 In Betrieb nehmen

hyperframes-creative 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.

hyperframes-creative 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 hyperframes-creative

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

Geben Sie dem Skill eine erste Motion- und Video-Aufgabe

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

Starter prompt

Create a 45-second product announcement video for [product name] using a cyberpunk visual style with fast pacing and high-contrast palette. Plan the beats to open with a hook about [customer pain point], then reveal three key features with audio-reactive text reveals. Use the brutalist frame-preset from frame-presets/ and generate voice-over narration that matches the technical tone from our existing design.md.

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:

Prüfen Sie die Design-Konformität bei Farben, Typografie, Ecken, Abständen und Tiefe gemäß design-adherence.md
Prüfen Sie, ob die Dichte- und Skalierungsregeln aus video-composition.md eingehalten werden, um Webseiten-Layouts zu vermeiden

In OpenDesign importieren Sie hyperframes-creative über dessen 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/hyperframes-creative/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 hyperframes-creative.
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

HyperFrames CreativeMarken-, Tempo-, Stil-, Erzähl- und Kompositionsvorgaben für den Einsatz nach dem technischen Vertrag von hyperframes-core
WorkflowVierstufiger Prozess: Design-Spezifikation lesen, visuelle Ausrichtung wählen, Beats planen, Motion-Leitplanken anwenden
RoutingTabelle, die Themen auf Referenzdateien für Paletten, Komposition, Erzählung, Audio-Reaktivität und Stil-Presets abbildet
Skriptecontrast-report.mjs, extract-audio-data.py, package-loader.mjs; vom Repository-Root aus mit expliziten Pfaden ausführen
GrenzenÜberschreiben Sie keine Kernregeln, verlangen Sie keine Design Systems, fügen Sie keine unaufgeforderten Inhalte hinzu und lesen Sie nicht jede Referenz

Die eigene Beschreibung des Skills

Nicht-Animations-Creative-Direction für HyperFrames-Videos. Verwenden für Design-Spec-Handling (frame.md / design.md), Paletten, Typografie, Narration, Beat-Planung, audio-reaktive Visuals, Kompositionsmuster und Brand-/Style-Entscheidungen. Für atomare Motion-Patterns und Szenen-Blueprints `hyperframes-animation` verwenden.

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

HyperFrames Creative

Führen Sie hyperframes-creative auf einer echten Motion-und-Video-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie hyperframes-creative über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

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

Was der hyperframes-creative Skill in Claude Code und Codex leistet

In den eigenen Worten des Skills

So funktioniert es

Wann Sie den hyperframes-creative Skill verwenden

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

Regeln, die der hyperframes-creative Skill Claude Code und Codex vorgibt

Zuerst house-style.md und video-composition.md lesen

Frontmatter-Tokens sind die Markenwahrheit

Niemals die technischen Regeln von hyperframes-core überschreiben

Keine unaufgeforderte Inhaltserweiterung

Recipe-Referenzen aufgabenspezifisch halten

Reihenfolge der Design-Spezifikations-Priorität

Skripte vom Repository-Root aus ausführen

Kein Design System für minimale Arbeiten erforderlich