/minara-videoscript — Minara-Videoskripte

Nur Skript, keine Animation. Die Ausgabe ist ein Markdown-Skriptdokument plus ein Ordner mit Standbildern (Keyframes). Nach der Freigabe durch den Operator wird es an die nachgelagerten Skills weitergeleitet:

Videotyp	Nachgelagerter Skill
Marketing-/Launch-/Demofilm (Bildaufbau im Code, UI kann neu gezeichnet werden)	`minara-video`
Anwendungsfall / Einsteiger-Tutorial (UI originalgetreu nachgebaut)	`minara-usecase-video`
Untertitel + Voiceover über eine eigene Bildschirmaufnahme des Operators	`minara-guide-video`
Aufnahme des gesprochenen Voiceovers zuschneiden und auf die Voiceover-Spur legen	`minara-voiceover` (liest die Spalten Voiceover und Time aus dem Keyframe-Blatt)
Musik / Soundeffekte	`minara-music` (liest den Musikabschnitt und die Sound-Cues aus diesem Dokument)

Aufbau: Eine Einzelszenen-Ergänzung besteht aus 5–8 Keyframes, die aus einer source.html stammen; ein vollständiger Film umfasst normalerweise 6–10 Szenen. Neue Skripte nur auf Englisch schreiben.

Die Kerneinheit: Der Keyframe

Ein Skript ist eine Abfolge von Keyframes. Ein Keyframe ist ein Standbild eines Moments, den der Zuschauer sehen muss, mit allem, was um ihn herum passiert, daneben beschrieben. Jeder Keyframe trägt dieselben sieben Felder:

Feld	Inhalt
Bild	`![K3](keyframes/<thema>/K3.png)`. Quell-Tag: `UI-Code` / `Figma` / `AIGC`.
Zeit	Timecode, den das Standbild repräsentiert (`40,5s`) und der Bereich, den es abdeckt (`39,8–41,6s`).
Dauer	Länge dieses Bereichs in Sekunden (Halten + die Bewegung hinein).
Bild	Was auf dem Bildschirm ist und was sich bewegt, in der richtigen Reihenfolge. Kamerabewegung, falls vorhanden (hineinzoomen auf die Workflow-Karte).
Voiceover	Der über diesen Bereich gesprochene Satz, oder `—`.
On-Screen-Text (花字)	Genauer Text, Stil, Position, Ein-/Aus-Zeit. Oder `—`. Regeln unten.
Musik	BGM-Energie für diesen Bereich + alle Sound-Cues mit genauer Zeit.

Grober Richtwert: ein Keyframe pro 2–4 Sekunden Film, mindestens einer pro Szene. Wähle die Frames, in denen etwas angekommen ist (die Eingabe wurde getippt, das Diagramm ist gezeichnet, die Benachrichtigung ist eingetroffen), nicht in der Mitte einer Bewegungsunschärfe.

Sprache: Nur Englisch (der Operator, 2026-10-19)

Alles im Skriptdokument ist Englisch: Titel, Notizen, Flusstabelle, Keyframe-Felder, Voiceover, On-Screen-Text, UI-Texte, Musiknotizen, offene Fragen. Keine chinesischen Übersetzungszeilen, keine "中文对照"-Spalten, keine anderen Sprachen. Gleiches gilt für Texte innerhalb der Keyframe-Bilder.
UI-Texte werden exakt so zitiert, wie sie in der englischen Produkt-UI erscheinen.
Der Operator kann auf Chinesisch briefen; übersetze die Bedeutung in das englische Skript. Sprich auf Chinesisch mit ihm im Chat, wenn er auf Chinesisch schreibt. Nur das Dokument ist auf Englisch.

Stimme: Ruhig, neutral, natürlich

Das Skript soll sich anfühlen, als hätte es ein Mensch geschrieben, nicht ein Modell. Ruhig und neutral: Beschreibe, was passiert, das Produkt spricht für sich.

Lies jede Voiceover-Zeile laut vor. Wenn sie sich wie eine Werbung, ein Slogan-Generator oder eine Pressemitteilung anhört, schreibe sie um. Wenn du es einem Kollegen nicht sagen würdest, streiche es.
Einfache Verben, kurze Sätze, Präsens. Kontraktionen sind in Ordnung (it's, you'll). Beispiel für den Sprachstil: Just ask. / Backtest it. / Minara builds the workflow. / Then it keeps watching.
Neutral, nicht aufgeregt: keine Hype-Adjektive, keine Ausrufezeichen, keine Großbuchstaben, kein Emoji.
Verbotene Wörter: exciting, powerful, seamless(ly), effortless(ly), revolutionary, game-changing, unlock, unleash, elevate, supercharge, empower, cutting-edge, next-level, robust, leverage, harness, journey, landscape, delve, transform(ative), "at your fingertips".
Verbotene KI-Muster:
- "Not just X, but Y" / "It's not X. It's Y."
- Dreierlisten für den Rhythmus ("faster, smarter, safer")
- "Imagine…", "What if…", "In a world where…", "Say goodbye to…", "Meet your new…"
- Rhetorische Fragen als Aufhänger
- Enthüllungen mit Doppelpunkt oder Gedankenstrich ("One thing changed: everything.")
- Nachgestellte -ing-Nebensätze, die falsche Tiefe verleihen ("…, giving you full control.")
- Bedeutungsaufblähung ("a pivotal moment", "redefines how…")
Vollständige Musterliste: Die KI-Schreibmusterliste (z. B. Wikipedia: "Signs of AI writing"). Überprüfe jede Voiceover-Zeile und jeden On-Screen-Text dagegen, bevor du es übergibst.
Keine Gewinnversprechen ("garantiert", "risikofrei"). Wenn Rücktests oder Renditen auftauchen, vermerke, wo der Risikohinweis hingehört (z. B. Die Wertentwicklung in der Vergangenheit ist keine Garantie für zukünftige Ergebnisse.).
Fakten, die nicht im Quellmaterial stehen, erhalten ⚠️ und werden zu "Offene Fragen". Erfinde nichts.

Arbeitsablauf

Sammle Eingaben: Brief, Screenshots, Frontend-Code-Pfad, Figma-Link, Funktionsnotizen, bestehender Schnitt, Musikreferenz, falls vorhanden. Frage einmal, in einer kombinierten Frage, nur nach dem, was nicht abgeleitet werden kann: Länge, Hoch-/Querformat, Plattform (X / Discord / Website), Voiceover oder nicht, wo es im Film sitzt, Musikstimmung, wenn der Operator eine im Kopf hat.
Lege die Präsentationsentscheidungen am Anfang des Dokuments fest, damit sie nicht abweichen: das Beispiel, die Oberfläche (Desktop / App / Web), Zeitzone, was nicht gezeigt wird. Wähle den Fall gemäß den Themenregeln unten.
Schreibe zuerst den Text: Abschnitt 1 (was vermittelt werden soll), der Benutzerfluss und UI-Texte, die Szenenliste mit Timings und die Keyframe-Liste (IDs, Zeiten, Bild, Voiceover, On-Screen-Text, Musik). Noch keine Bilder. Das verhindert, dass die Bildarbeit die Geschichte lenkt.
Erstelle die Keyframe-Bilder über die unten aufgeführten Wege in docs/keyframes/<thema>/K1.png …. UI-Frames zuerst (sie sind kostenlos und exakt); frage vor jedem AIGC-Frame, der Credits kostet.
Schreibe das Dokument in das docs/-Verzeichnis des Projekts (NN-skript-szene-N-<thema>.md für eine einzelne Szene; NN-skript-<slug>.md für einen vollständigen Film). Projektstamm, wenn es kein docs/ gibt. Öffne jedes Keyframe-PNG und überprüfe es gegen sein Bildfeld, bevor du es verlinkst.
Führe die Selbstkontrolle mit der Checkliste unten durch. Berechne die Voiceover-Wortanzahlen und das Timing; schätze nicht.
Sende an den Operator: Dateipfad plus 3–5 Zeilen (Länge, Anzahl der Szenen, Anzahl der Keyframes nach Quelle, Voiceover-Wörter / Anteil der Laufzeit, Musikrichtung in einer Zeile, Anzahl der offenen Fragen). Sie bearbeiten das Skript und markieren Keyframes, nicht Code. Keine Animation vor der Freigabe. Standbilder sind vor der Freigabe erlaubt; Bewegung nicht.
Nach der Freigabe: Übergabe. Das nachgelagerte, sekundengenaue Skript wird aus den Keyframe-Zeiten dieses Dokuments erweitert; nichts wird umgeschrieben. minara-music erstellt cues.json aus dem Musikabschnitt. Für ein Review-Board generiere storyboard.html aus minara-videos assets/storyboard-template.html; AIGC-Keyframes werden seinen AIGC-Zeilen zugeordnet.

Erstellen von Keyframe-Bildern

Drei Wege. Verwende den ersten, der passt; ein Skript kann sie mischen, und jeder Keyframe gibt an, welcher verwendet wurde.

Weg A – UI-Code (Standard für alles, was Produkt-UI ist)

Der Frame wird in HTML gezeichnet, daher ist der Text exakt und der Frame kann später von der Animation wiederverwendet werden.

Kopiere assets/keyframes-source-template.html nach docs/keyframes/<thema>/source.html. Ein <section class="k" id="K1"> pro Keyframe; ?k=K1 zeigt diesen Frame.
Fülle jeden Frame aus der echten UI: Übernimm Text, Daten und Struktur aus dem Frontend-Code (Komponenten, i18n-Strings) oder der bestehenden HyperFrames-Komposition. Zeichne großflächig gemäß den Videoregeln: Textkörper ≥28px, Titel ≥48px, Schlüsselzahlen 80–140px, 3–5 Elemente pro Bildschirm, nur Geist, Minara-Palette (#F2F2F2 Bühne, #15171A / #222222 / #FFFFFF UI, #B0B0B0 sekundär, Grün #07B56A nur für Aufwärts/Erfolg, Rot #F75D5F nur für Abwärts), keine Verläufe, "Illustrative data" unten rechts.
Zeichne den On-Screen-Text (花字) in den Frame an der Stelle, wo er sitzen wird, damit der Operator das tatsächliche Layout überprüft.
Render:
```
~/.claude/skills/minara-videoscript/scripts/shoot_keyframes.sh \
  docs/keyframes/<thema>/source.html docs/keyframes/<thema> landscape K1 K2 K3
```
Ausgabe ist 2560×1440 (portrait: 1440×2560), entsprechend der 2K-Auslieferung. Das Skript übergibt auch #k1, sodass auch ältere V2-Quellseiten (hash-selektiert) funktionieren.
Wenn die Animation bereits existiert und ein Keyframe ein Moment darin ist: Suche die Komposition auf, anstatt neu zu zeichnen. Verwende die Testseite des Projekts mit ?t=<sekunden> oder npm run snapshot -- <t1>,<t2>, kopiere dann das PNG als K<n>.png.

Weg B – Figma

Wenn das Design den Frame in Figma hat (neue Bildschirme, noch nicht im Code, Kampagnenlayouts).

Ermittle fileKey und nodeId aus dem Link (node-id=1-2 → 1:2). Lade die Figma-Design-to-Code-Anleitung vor get_design_context.
get_screenshot mit maxDimension: 2560, lade dann die URL mit curl herunter in docs/keyframes/<thema>/K<n>.png.
Verwende get_design_context / get_variable_defs, um den exakten Text und die Tokens für die UI-Texttabelle zu erhalten.
Wenn der Figma-Frame ein dichter Desktop-Bildschirm ist, dient er nur als Referenz: Baue ihn über Weg A großflächig nach und notiere Figma → UI-Code als Quelle.

Weg C – AIGC aus Screenshots

Für Frames, die keine Produkt-UI sind: ein Eröffnungsbild, eine Metapher, eine Person, die das Handy benutzt, eine Umgebung, ein Stimmungsbild. Niemals für Produkt-UI oder für alles mit echtem Text oder Zahlen; diese gehen über A oder B.

Frage zuerst. Die Bildgenerierung verbraucht Credits (Figmas generate_image nutzt Figma-KI-Credits; Weave-Modelle benötigen einen genannten Preis und eine explizite Zustimmung). Gib an, welche Frames, welches Modell und die Kosten, und warte dann.
Gib dem Modell den Screenshot oder einen Weg-A-Frame als Referenz, falls das Tool eine akzeptiert; beschreibe andernfalls die Referenz im Prompt.
Prompt-Regeln: 16:9 (oder 9:16), die Minara-Palette in Worten (hellgraue Bühne, fast schwarze UI, Weiß, Grün nur für Erfolg), sauber und minimalistisch, weiches Tageslicht, keine Verläufe, kein Lila-Pink-Orange, kein Text, keine Buchstaben, Zahlen oder Logos im Bild (Modelle verstümmeln sie; Text wird im Code hinzugefügt), keine Meme-Bilder, keine echten Personen oder andere Marken.
Speichere als K<n>.png und schreibe den genauen Prompt, das Modell, das Referenzbild und das Datum in docs/keyframes/<thema>/prompts.md, damit der Frame neu generiert oder an den Kollegen übergeben werden kann, der AIGC-Aufnahmen macht.
Öffne das Ergebnis. Lehne alles mit fremdem Text, falschen Händen, falschen Farben ab oder was wie Stock-KI-Kunst aussieht; generiere neu oder falle auf einen Weg-A-Layout zurück.

On-Screen-Text (花字)

On-Screen-Text ist jeder Text, der über das Bild gelegt wird und nicht Teil der UI selbst ist: Untertitelzeilen, ein Titel, eine Schlüsselzahl, der abschließende CTA.

Erlaubt: (1) die Voiceover-Zeile oder ein Teil davon, als Untertitel oder Betonung; (2) echter UI-Text, herausgelöst und vergrößert; (3) ein Titel, eine Schlüsselzahl oder ein CTA, den der Operator angefragt hat. Nichts anderes. Keine Erklärungswörter, Labelwände, schwebende Schlüsselwörter oder Feature-Tags. Wenn ein Konzept erklärt werden muss, zeige es mit Bild und Bewegung.
Die Voiceover-Regeln gelten: ruhig, einfach, keine verbotenen Wörter, keine Ausrufezeichen, Satzanfang groß.
Schreibe jedes Element als: "Einfach fragen." · 64px / 700 · #15171A · oben links über dem Fenster · Ein 12,4s, Aus 14,0s · steigt 24px mit minaraSnap.

Zur Auswahl stehende Stile (einen Film konsistent halten):

Stil	Verwendung	Spezifikation
Untertitel	Voiceover-Zeile als Text	40–48px / 500, unten mittig, weiß auf dunkel oder `#15171A` auf hell, keine Box
Überschrift	Titel oder die eine Aussage der Szene	64–96px / 700, Tracking −0,02em, linksbündig
Schlüsselzahl	Eine Zahl, die der Punkt des Shots ist	120–200px / 700, tabellarische Zahlen; grün/rot nur, wenn es ein Gewinn/Verlust ist
CTA	Endkarte	56–72px / 700 + Produktname oder URL

Bewegung: Ein mit minaraSnap (0,6–0,9s, kleiner Anstieg oder Skalierung von 0,96), Aus mit einem ≤0,3s Fade. Jedes Element bleibt mindestens so lange, wie es zum Vorlesen braucht (0,4s/Wort, mindestens 1,2s).
Kein Emoji, keine Verlaufsfüllungen, kein Glühen, kein umrandeter oder 3D-Text, keine Großbuchstaben.

Musik (BGM-Stil und Sound-Cues)

Das Dokument gibt minara-music alles, was es braucht, also wird die Musik mit dem Skript festgelegt, nicht danach.

Film-Level-Brief (ein Block): Tempo (BPM, Standard 120), Tonart (Standard a-Moll; C-Dur für helle Stücke), Stimmung in 1–2 klaren Zeilen (Leise Elektronik, warme Pads, leicht gezupftes Arpeggio, kein Gesang.), was vermieden werden soll (keine EDM-Drops, keine Trailer-Hits, kein Lo-Fi-Knistern, keine Vocal-Chops), und ein Referenztrack, falls der Operator einen angegeben hat. Lizenzierte Tracks kommen nur vom Operator.
Energie pro Keyframe: eine von silent / intro / light / build / full / breakdown / climax / outro (das minara-music-Vokabular), plus ein paar Worte zur Stimmung. Energie folgt der Geschichte: Der Produktname oder die Einführungsaussage bekommt climax; ein Privatsphären- oder Sicherheitstakt bekommt breakdown; die Endkarte bekommt outro.
Sound-Cues: nur für sichtbare Aktionen, jede mit genauer Zeit: tap 35,0s, typing 32,1–34,6s (cps 18), success 45,0s, notify 45,2s, whoosh 47,3s, thud 43,2s, bell 0,4s. Typen sind die minara-music-SFX-Liste.
Voiceover duckt die Musik; sage duck under VO im Brief, wenn es Voiceover gibt.

Skriptdokument-Vorlage

# Skript | <Thema>: <einzeilige Zusammenfassung>            ← vollständiger Film: "Skript | <Filmname>"

> Das aktuelle Skript für <Szene N / den gesamten Film>.
> Zweck: <ersetzt Szene N, XX–XXs / neuer Film>. Der bestehende Schnitt bleibt unverändert, bis dies genehmigt ist.
> Quellen: <Frontend-Code-Pfad / Figma-Link / Screenshot-Pfade / Produktdokument>. Mit ⚠️ markierte Elemente sind nicht in der Quelle und benötigen Produktbestätigung.
> **Präsentation (festgelegt)**: <Fall; Oberfläche; Zeitzone; was nicht gezeigt wird; ob es einen Schritt für Folgefragen gibt>.
> **Ausgabe**: <2560×1440 oder 1440×2560>, 60fps. Keyframes: `docs/keyframes/<thema>/` (Quelle: `source.html`, AIGC-Prompts: `prompts.md`).

## 1. Was hiermit vermittelt werden muss
1. <das Erste, an das sich ein Zuschauer erinnern soll>
2. … (max. 4; jedes führt zu mindestens einem Keyframe)

## 2. Benutzerfluss und UI-Texte
| Schritt | Benutzeraktion | UI-Text (exakt) | Quelle |
(Quelle = Code-Pfad / Figma-Node / Screenshot; Demo-Prompts sind als "(Demo)" markiert)

## 3. Keyframe-Blatt (<gesamt>s<, ersetzt XX–XXs>)
| Key | Zeit | Dauer | Szene | Bild (kurz) | Voiceover | On-Screen-Text | Musik | Bildquelle |
|---|---|---|---|---|---|---|---|---|
| K1 | 0,0–2,4s | 2,4s | S1 | Avatar landet zentriert | — | — | intro · bell 0,4s | UI-Code |
(Eine Zeile pro Keyframe; Bereiche angrenzend und summieren sich zur Gesamtzeit. Dies ist die Tabelle, die die nachgelagerten Skills lesen.)

## 4. Szenen und Keyframes
### <Szenen-ID> | <Start–Ende> | <Dauer>

**Was diese Szene vermitteln muss**
- <Erinnerungspunkt 1>
- … (max. 2)

**UI-Texte, die in dieser Szene vorkommen**

**Bild**
Beschreibung des Bildschirminhalts und der Bewegungen.

**Voiceover**
- *Zeit* Text
- (Wenn länger als 20s pro Szene, unterteile es)

**On-Screen-Text**
- "..." · Stil · Position · Ein Aus · Bewegung

**Sound-Cues**
| Zeit | Cue |
| tap 12,5s | |
| success 18,0s | |

…

## 5. Musikalische Richtung

**Film-Level**
- Tempo: 120 BPM
- Tonart: a-Moll
- Stimmung: Leise Elektronik, warme Pads, leicht gezupftes Arpeggio, kein Gesang.
- Vermeiden: EDM-Drops, Trailer-Hits, Lo-Fi-Knistern, Vocal-Chops.
- Referenz: (vom Operator bereitgestellt)
- duck under VO

**Pro Keyframe**
(Tabelle mit Key → Energie)

## 6. Offene Fragen
- ⚠️ Frage 1 (Kontext, warum sie nicht beantwortet werden konnte)
- …

## 7. Änderungsprotokoll
| Datum | Änderung |
| 2026-10-19 | Erster Entwurf |

Vollständiges Beispiel

Siehe docs/beispiele/ für ein vollständiges Beispielskript, das dieses Format verwendet.

Selbstkontrolle vor der Übergabe

Vor Schritt 7:

Fehlerbehebung

`shoot_keyframes.sh` findet keine Frames

Prüfe, ob die HTML-Datei <section class="k" id="K1"> (Groß-/Kleinschreibung beachten) enthält und das Skript die richtige ID übergibt.
Der alte V2-Stil #k1 wird unterstützt: Übergib #k1, wenn die Quelle id="k1" verwendet.
Führe shoot_keyframes.sh ohne Argumente für die Nutzungsinformationen aus.

Bildgröße stimmt nicht

Das Skript rendert standardmäßig 2560×1440 (Landschaft). Für Hochformat (1440×2560) übergib portrait als drittes Argument.

Figma-Screenshot schlägt fehl

Prüfe, ob fileKey und nodeId korrekt aus dem Link extrahiert wurden (node-id=1-2 → 1:2).
Stelle sicher, dass der Figma-Zugriffstoken gültig und berechtigt ist.
Wenn der Screenshot abgeschnitten ist, vergrößere die Ansicht im Figma-Design, bevor du den Screenshot machst.

AIGC-Bilder sehen falsch aus

Text im Bild ist nicht erlaubt; wenn das Modell Text generiert hat, lehne es ab und versuche es erneut.
Falsche Farben / Palette? Gib die Minara-Palette explizit im Prompt an.
Falsche Proportionen? Stelle sicher, dass der Prompt 16:9 (oder 9:16) und den Bildschirmseitenbereich erwähnt.

OliviaPp8/minara-video-skills

Was ist minara-video-skills?

In Ihrer bevorzugten KI fragen

Vorschau

Dokumentation