RoleModel Brand für HyperFrames
Wir haben bereits umfangreiche HyperFrames-Tooling. Starte von diesem Bestand, nicht von Grund auf. Dieser Skill ist nur die Markenschicht oben drauf: woher unsere Werte kommen, welchen du verwenden sollst und was wir nicht tun.
Der Bestand
Es sind zwei Sets installiert, die sich überschneiden. Wisse, welches du aufrufst.
Offiziell (HeyGen) in ~/.claude/skills:
| Skill | Greif danach, wenn |
|---|---|
hyperframes | Kompositionserstellung, Timing, Medien, der Produktionsworkflow |
hyperframes-core | der Kompositionsvertrag und data-* Timing-Attribute |
hyperframes-animation | Bewegungsregeln, Szenen-Blaupausen, GSAP und andere Laufzeiten |
hyperframes-keyframes | Punch-Ins, Kamerafahrten, Reframes, suchgeschützte Keyframes |
hyperframes-creative | Paletten, Beat-Planung, Narration, Kompositionsmuster |
hyperframes-audio | Abmischen eines bereits platzierten Tracks – Fades, Ducking, Automation |
hyperframes-cli | init, lint, check, preview, render, transcribe, tts |
hyperframes-registry | Installieren von Blöcken und Komponenten |
media-use | Beschaffen oder Generieren von Musik, SFX, Bildern, Stimme |
Standard (unsere) in ~/.claude/skills/synced:
| Skill | Greif danach, wenn |
|---|---|
hyperframes | unser eigener Kompositions-Skill – liest design.md, house-style.md |
hyperframes-cli | unsere eigenen CLI-Notizen |
hyperframes-direction-harness | bevor einer finalen index.html, wenn die Richtung nicht festgelegt ist |
optics-context | alles, was auch eine Produktoberfläche sein muss |
gsap | GSAP-Spezifisches |
impeccable | unsere handwerkliche Basis |
Namenskonflikt.
hyperframesundhyperframes-cliexistieren in beiden Sets. Wenn es darauf ankommt, welches du bekommst, sag es explizit.
Wiederhole hier keine ihrer Regeln. Der Kompositionsvertrag, Lint-Fehler, Track-Kollisionen, pausierte Zeitleisten – all das gehört zu diesen Skills und wird dort gepflegt. Eine zweite Kopie driftet, sobald sie ein Release ausliefern, und niemand bemerkt es. Wenn eine Regel fehlt, korrigiere sie upstream, nicht in dieser Datei.
Die Marke erreicht HyperFrames über design.md
Der Standard-HyperFrames-Skill liest bereits design.md aus dem Projektverzeichnis als „die Quelle der Wahrheit für Markenfarben, Schriftarten und Einschränkungen“ und wird angewiesen, deren exakte Werte zu verwenden, anstatt selbst welche zu erfinden. Das ist der Haken. Nutze ihn.
Das Marken-Repo generiert eine:
cp rolemodel-brand/dist/design.md <video-project>/design.md
Sie wird aus rolemodel-brand/tokens/brand.json durch scripts/build-tokens.mjs generiert und kann daher nicht von den Tokens abweichen, die jede andere RoleModel-Oberfläche verwendet. Ändere sie nie von Hand – verändere brand.json und führe das Skript erneut aus.
Diese Datei enthält Farbe, Typografie, die vollständige Bewegungsskala, die vier Bewegungsprinzipien und die untenstehenden Einschränkungen. Sobald sie im Projekt ist, erledigt der vorhandene Skill den Rest.
Für CSS-Custom-Properties in der Komposition selbst:
<link rel="stylesheet" href="rolemodel-brand/css/academy-theme.css">
<body data-theme="academy">
Auswahl eines Motion Tokens
Die vollständigen Werte stehen in design.md. Die Regel für die Auswahl ist kurz:
Wähle nach dem, was das Element tut, nicht danach, wie es aussieht.
- Ein Element, das ankommt →
--duration-base+--ease-enter - Dasselbe Element, das verschwindet →
--duration-fast+--ease-exit. Gehen ist immer schneller als Ankommen. - Etwas, das bereits auf dem Bildschirm ist und den Ort oder die Größe ändert →
--ease-move - Ein bewusster „Schau-mich-an“-Effekt →
--ease-emphasis, die einzige Kurve, die überschwingen darf - Eine Gruppe → ein
--staggerzwischen Geschwistern, niemals alle auf einmal
Verwende niemals eine rohe Dauer oder ein rohes cubic-bezier in einer Komposition. Dieselbe Regel, die das Studio auf Farbe anwendet, aus demselben Grund.
Was wir nicht tun
Diese Regeln sind verbindlich. Einige werden durch npm run check im Toolkit durchgesetzt, und alle stehen in design.md, wo sie der Kompositions-Skill lesen wird.
- Keine radialen Verläufe, nirgendwo. Die Marke ist linear – Richtung, keine Kleckse.
- Keine Frame-Wipes. Zeichne keinen weißen oder hell umrandeten Rahmen, Rand oder Kasten, der als Szenenübergang über den Bildschirm wischt. Claude greift unaufgefordert danach; es ist ein Standard-Template-Trick, nicht wir, und es lenkt die Aufmerksamkeit auf nichts. Übergang durch Schnitt oder durch Einblenden des neuen Inhalts mit
--ease-enter. Nichts zeichnet einen Kasten um den Rahmen. - Keine dekorativen Linien, Unterstreichungen oder Trennlinien. Unterstreiche keine Überschrift, setze keine Trennlinie zwischen Abschnitten und zeichne keinen Rahmen um eine Karte, Statistik, ein Zitat oder Lower Third. Claude greift danach, um Struktur zu signalisieren; sie signalisieren nur, dass etwas hinzugefügt wurde. Trennung entsteht durch Abstand, Gewicht und Grund. Die einzige erlaubte Linie im System ist der kurze Markenbalken unter einem Titel, und
rm-titlezeichnet ihn – füge niemals von Hand eine zweite hinzu. - Ein Rand ist eine durchgezogene Linie, kein Verlauf. Das regelt, wie ein notwendiger Rand gezeichnet wird; es ist keine Lizenz, einen hinzuzufügen. Wenn ohne den Rand nichts mehrdeutig ist, gibt es keinen Rand.
- Orange ist nur ein Akzent – niemals ein Hintergrund.
- Kein Ornament. Wenn ein Element keine Information trägt oder die Aufmerksamkeit lenkt, entferne es.
Wenn die Richtung nicht festgelegt ist
Beginne nicht mit dem Schreiben von index.html. Verwende hyperframes-direction-harness – es wurde genau dafür entwickelt und erstellt ein überprüfbares Board, bevor irgendeine Komposition entsteht:
01_intake.md → 02_design_direction.md → 03_critical_frame_plan.md
→ direction_board.html (Director Workbench, reviewed)
→ 04_render_plan.md (ready only after review)
→ hand off to the hyperframes skill
Dies umgehen nur für kleine Änderungen an einer bestehenden Komposition – einen Tippfehler, eine Timing-Anpassung, eine Farbe, einen Lint-Fix.
Welches Tool welches Problem löst
HyperFrames komponiert; es zeichnet nicht auf. Wenn das Video die echte Produkt-UI zeigen muss, ist es das falsche Werkzeug.
| Eingabe | Werkzeug | Bleibt aktuell? | |
|---|---|---|---|
| Aufnehmen | dein Bildschirm | openscreen | nein – manuell neu aufnehmen |
| Komponieren | ein Skript oder ein Briefing | HyperFrames | Skript erneut ausführen |
| Aus einem Test | eine Playwright-Trace | playwright-recast | ja – Test erneut ausführen |
Verwende HyperFrames für Titelcards, Lower Thirds und Motion Graphics, die auf einer Aufnahme sitzen.
Narration, Timing, Auslieferung
Synthetisiere keine Sprachausgabe innerhalb der Komposition.
rm-voice <project> --script opener --voice af_nova
Ein Clip pro Zeile, jeder gemessen, SRT aus bereits bekannten Dauern geschrieben – daher sind Timings exakt durch Konstruktion und eine Textkorrektur synthetisiert nur das neu, was geändert wurde. Kokoro läuft lokal: kein API-Key und nichts über ein unveröffentlichtes Kundenprodukt verlässt den Rechner.
Ein Render und eine Narrationsspur haben unterschiedliche Takte. playwright-recast komprimiert Leerlaufzeiten; die Narration dauert so lange, wie die Worte brauchen. Brenne einen 22-Sekunden-Untertitel-Track in einen 3,8-Sekunden-Render und Cue 1 hält für den gesamten Clip, während der Rest stillschweigend fallen gelassen wird – es sieht so aus, als hätte es funktioniert.
rm-mux --video demo.mp4 --audio narration.wav --srt narration.srt -o final.mp4
rm-share final.mp4 --project "Ridgeline Railing"
rm-share liefert einen Link, den ein Kunde ohne Konto öffnen und zeitgestempelte Kommentare hinterlassen kann. rm-share --check sagt, ob es konfiguriert ist.
Vor einem Kundenprojekt
export HYPERFRAMES_NO_TELEMETRY=1
Telemetrie ist standardmäßig aktiviert. Projektnamen und Videoinhalte werden nie erfasst, aber hyperframes auth login verknüpft deine HeyGen-Konto-E-Mail mit deiner Nutzung und verbindet frühere anonyme Aktivität damit. Setze den Opt-Out in die Grundstruktur.
Pinne die Version. HyperFrames ist Apache-2.0 – keine Sitzplatzanzahl, keine Firmengrößenschwelle, weshalb es unser Standard ist – aber es ist vor 1.0 und wird fast täglich ohne erklärte Kompatibilitätsgarantie ausgeliefert. Ein Kundenprojekt, das heute rendert, sollte in sechs Monaten genauso rendern.
Credits
Die Drei-Ebenen-Strukturierung und der Schnitt → Storyboard → Motion-Graphics-Pipeline stammen von hyperframes-helper von Jay bei RoboNuggets, verwendet unter CC BY 4.0. Behalte die Quellenangabe bei, wenn du diese weitergibst – das ist die Lizenz.