create-template-video-zh

Create Template Video（中文版）

Erstelle aus einem chinesischen Inhalt ein vertikales 9:16 Kurzvideo. Design und Animation werden von den HyperFrames-Vorlagen in templates/ übernommen. Du schreibst nur die Textfelder und das script.json.

Informationen zur lokalen Installation (DSH-Umgebung, bitte zuerst lesen)

• PROJECT_DIR = /Users/ming/.agents/skills/create-template-video-zh (Skill + Pipeline + Vorlagen; node_modules ist mit der vietnamesischen Version verlinkt, Abhängigkeiten werden geteilt)

• Verzeichnisstruktur: SKILL.md, templates/ (11 Vorlagen + CATALOG.md), src/ (CLI/Pipeline), package.json, .env (chinesischer TTS-Endpunkt).

• Tool-Mapping: Das Original verwendet Claude Code-Toolsnamen, hier das DSH-Äquivalent: WebFetch → web_fetch, Read → read, Write → write, Bash → bash.

• Umgebungsabhängigkeiten: ffmpeg/ffprobe ✓, Chrome ✓, Node ✓.

• Chinesischer TTS ist lokal bereitgestellt: OmniVoice (MPS) + Mandarin-Klonstimme voice-zh.pt, läuft auf Port 8124 (die vietnamesische Version verwendet fest 8123, beide Versionen stören sich nicht):

  bash "$HOME/.agents/skills/create-template-video-zh/scripts/start-tts-zh.sh"
  

  Das Skript prüft /health, startet den Dienst im Hintergrund und wartet auf Bereitschaft (ca. 4 s), das Log befindet sich in /tmp/omnivoice-zh.log. Nach dem Start mit einem chinesischen Testton bestätigen:

  curl -s -X POST http://127.0.0.1:8124/tts -H 'Content-Type: application/json' \
    -d '{"text":"大家好，这是中文配音测试。"}' -o /tmp/zh-probe.mp3 && ls -l /tmp/zh-probe.mp3
  

  000/keine Verbindung = nicht gestartet; falls es nicht startet, den Benutzer informieren und keine Audio-Datei fälschen. Dienstverzeichnis und Bereitstellungsnotizen: /Users/ming/Documents/dsh_workspace/omnivoice (SETUP.md).

• Beim ersten Rendern wird npx -y [email protected] HyperFrames heruntergeladen (Internet erforderlich, pro Szene ca. 15–20 s; 8–10 Szenen insgesamt 3–5 Minuten).

• Sprache: Das gesamte Video ist auf Chinesisch. Bildschirmtexte können gemischt chinesisch-englisch sein (AI, GPT, Apple bleiben im Original), aber voiceText muss auf Chinesisch sein, Zahlen werden gemäß der folgenden Tabelle in chinesische Schriftzeichen umgewandelt.

Eingabe

1 Parameter: eine Nachrichten-URL (http:///https://) oder ein .txt-Dateipfad.

Workflow (strikt in der Reihenfolge)

Schritt 1–3: Inhalt holen + Ausgabeverzeichnis erstellen

• URL → Mit web_fetch den Textkörper holen, title, content (800–2000 Zeichen), ogImage (og:image oder null), domain extrahieren. Fehlschlag (Paywall/rein JS/4xx) → Den Benutzer bitten, den Text als .txt zu speichern und erneut auszuführen, dann anhalten.
• .txt → Mit read lesen; title = erste Zeile (≤40 Zeichen), content = restlicher Text, ogImage = null, domain = "local".
• slug: Vorzugsweise englische oder Pinyin-Schlüsselwörter (≤40 Zeichen, [a-z0-9-]), z. B. xiaomi-17-price, ai-coding-jobs. Wenn ein rein chinesischer Titel nicht direkt in ASCII umgewandelt werden kann, schreibst du Pinyin; falls gar nichts geht, verwende zh-video (auch im Code als Fallback vorhanden). timestamp = YYYYMMDD-HHmm; outputDir = <aktuelles Arbeitsverzeichnis>/videos/<slug>-<timestamp>/ – im Arbeitsverzeichnis anlegen: Einfacher zur Auslieferung und verunreinigt nicht das Skill-Verzeichnis (DSH-Sandboxen erlauben meist nur Schreibzugriff auf das Arbeitsverzeichnis). mkdir -p. Der Soundeffekt-Ordner wird durch SFX_DIR in .env auf assets/sfx im Skill verwiesen, unabhängig vom Ausgabeverzeichnis; wenn der Soundeffekt-Ordner leer ist, wird diese Schicht automatisch übersprungen, ohne den Hauptablauf zu beeinträchtigen.

Schritt 4: Vorlagenverzeichnis lesen

PROJECT_DIR/templates/CATALOG.md lesen, um Vorlagen und Slots zu bestätigen. Es dürfen nur templateIds aus dem CATALOG verwendet werden. Vorhanden:

HOOK (nur dieser): frame-liquid-bg-hero – Aurora-Lichtflecken + großer Titel + CTA.

BODY (nach Inhalt auswählen, siehe Schritt 5):

• frame-vignelli – 1 Zahl, dunkler Kohle-Hintergrund + Rot.
• frame-pentagram-stat – 1 Zahl/Benchmark, dunkler Neon-Hintergrund (Schweizer Raster, orange leuchtende Zahlen + türkise Akzente + Balkendiagramm).
• frame-bold-poster – Mehrzeilige starke Aussage + große Zahl.
• frame-build-minimal – Kurzer prägnanter Satz, dunkler Hintergrund + ein übergroßes fettgedrucktes Wort (oranger Glow, erscheint Buchstabe für Buchstabe).
• frame-creative-voltage – Kreativer Slogan, elektrisch blaue Trennung + Handschrift.
• frame-glitch-title – Cyberpunk RGB-Glitch-Störung (Rauschen-Hintergrund), geeignet für Eilmeldungen/Technik.
• frame-aicoding-list – Liste mit 2–5 Punkten (jeweils Icon + Level-Label), dunkler Farbverlaufshintergrund.
• frame-aicoding-comparison – A vs B Vergleich (zwei Farbverlaufskarten + WIN-Abzeichen + Daten).

OUTRO: frame-logo-outro (Standard: Logo-Glow + Marke + Tagline + URL); frame-statement-outro (Alternative: Papierhintergrund + rote Karte).

Die 11 Vorlagen enthalten bereits Beispielwerte (data-composition-variables), die alle auf chinesische Beispiele umgestellt wurden. Du kannst die Effekte direkt in der Vorschau sehen oder die Werte in dein script.json übernehmen und anpassen. Gib beim Rendern jedoch explizit inputs an: Ohne Parameterübergabe zur Laufzeit werden keine Variablen abgerufen, und die Texte bleiben leer.

Schritt 5: script.json generieren

{
    "version": "1.0",
    "renderer": "hyperframes",
    "aspect": "9:16",
    "metadata": {
        "title": "...",
        "source": { "url": "...", "domain": "...", "image": null },
        "channel": "中文频道名"
    },
    "voice": { "provider": "omnivoice", "speed": 1.0 },
    "scenes": [
        /* 8–12 Szenen: 1 Hook + 6–10 Body + 1 Outro */
    ]
}

• provider ist fest omnivoice (lokaler TTS, kein voiceId/API-Key erforderlich).
• Jede Szene: { id, type, voiceText, templateId, inputs }; inputs müssen alle im CATALOG für diese Vorlage als erforderlich gekennzeichneten Slots abdecken.
• scenes[0].type = "hook"; scenes[-1].type = "outro" (frame-logo-outro).
• 8–12 Szenen; voiceText insgesamt ca. 350–450 Zeichen (≈90–120 s, chinesische Sprachgeschwindigkeit ca. 4,5 Zeichen/s; die endgültige Dauer richtet sich nach der Tonspur, die Pipeline richtet sich nach der Tonspur). Jede Body-Szene 30–45 Zeichen, die nur einen Punkt behandelt; wenn ein Absatz zwei Punkte hat, auf zwei Szenen aufteilen. Ziel: Jede Szene 6–10 s lang.

Inhalt → Vorlagen-Zuordnung:

• Hook → fest frame-liquid-bg-hero (Slots: kicker, headline, subheadline, cta, brand). headline standardmäßig gelb→violett Farbverlauf, mit headline_from/headline_to (zwei Hex-Werte) zur Farbänderung.
• Body → Von dir nach Inhalt am besten geeignete Vorlage wählen und möglichst abwechslungsreich, nicht alle Body-Szenen mit derselben Vorlage:
  • frame-vignelli: Szene mit 1 zu betonenden Zahl (kicker, number, label, note, brand).
  • frame-pentagram-stat: Mit 1 Basis-/Prozentzahl + Balkendiagramm-Gefühl (label, headline=Zahl, subtitle, anchor, footer_left, footer_right).
  • frame-build-minimal: Kurzer prägnanter Satz/ein Schlüsselwort (eyebrow, hero=ein Wort, desc, side_left, side_right).
  • frame-bold-poster: Mehrzeilige starke Aussage + große Zahl (kicker, date, figure, headline[], standfirst, footer_left, footer_right). Die 2. Zeile von headline wird automatisch rot.
  • frame-creative-voltage: Kreativer Slogan (meta, display_lines, accent_index, script, caption).
  • frame-glitch-title: Eilmeldung/Technik/Grusel-Gefühl (title, subtitle).
  • frame-aicoding-list: Liste/Vergleich mit 2–5 Punkten (title, accent, accent_from, accent_to, subtitle, items[]). Jeder Punkt {icon, title, desc, tag, level}: icon von dir mit Emoji auswählen (🚫 ⚠️ ✅ ❌ 📈 💡 🔒 🚀 …); level ∈ danger|warn|good|info bestimmt die Farbe; tag ist ein kurzer chinesischer Tag (高危 / 注意 / 利好 / 稳健); accent_from/accent_to von dir mit zwei Hex-Werten wählen.
  • frame-aicoding-comparison: Genau für Vergleiche (badge, pre, vs, post, left{}, right{}). Jede Seite {label, from, to, icon?, bullets[], stat?, stat_label?, win?}; from/to sind zwei Hex-Werte für den Farbverlauf (besser kalte/warme Kontraste); win: true markiert den Gewinner.
  • Rhythmus-Tipp: Bei vielen Zahlenszenen frame-vignelli (Kohle+Rot/Gelb) und frame-pentagram-stat (dunkler Neon Orange/Türkis) abwechseln; bei Nicht-Zahlen-Szenen frame-build-minimal verwenden.
• Outro → frame-logo-outro (brand_name, tagline, primary_url).

Regeln für chinesische Typografie (Bildschirmtexte inputs)

• Chinesisch braucht mehr Platz als Englisch/Vietnamesisch: Eine Zeile auf 10–14 chinesische Zeichen begrenzen, bei Überschreitung umbrechen oder kürzen; headline maximal 3 Zeilen. Lieber zwei Zeichen weniger als zwei halbe Zeilen.
• Die Vorlagen-Schriftart ist Inter Tight + system-ui, Chinesisch fällt zurück auf PingFang SC, normalerweise in Ordnung; falls beim Rendern Kästchen/Quadratzeichen angezeigt werden, in der entsprechenden Vorlage compositions/portrait.html ganz vorne in font-family "PingFang SC", "Noto Sans SC", einfügen und neu rendern.
• Chinesisch benötigt keine Leerzeichen zwischen Wörtern; kein manuelles letter-spacing mit negativem Wert in chinesischen Texten einfügen, da die Vorlage standardmäßig -3px hat, was bei chinesischen Zeichen zu Zusammenkleben führen kann. Falls eine Überschrift zu gedrängt wirkt, in der entsprechenden Klasse letter-spacing: -1px überschreiben.
• Emojis sind in Bildschirmtexten erlaubt, aber pro Feld 0–1 Emoji, nicht in Felder einfügen, die Buchstabe für Buchstabe erscheinen (z. B. hero von frame-build-minimal), da sonst die Animation zerstört wird.
• Zahlen auf dem Bildschirm in gut lesbarem Format belassen (4499 元, 82.7%, 17), nur in voiceText in chinesische Schriftzeichen umwandeln.

Regeln für chinesischen TTS (voiceText strikt einhalten)

OmniVoice liest Zeichen für Zeichen vor, arabische Ziffern, Dezimalpunkte, Währungssymbole werden oft falsch oder auf Englisch ausgesprochen. Daher in voiceText alle Zahlen in chinesische Schriftzeichen umwandeln; inputs (Bildschirmtexte) behalten Ziffern.

Form	Falsches Beispiel	Richtige Schreibweise
Dezimalzahl	82.7%	百分之八十二点七
Version	iOS 18.2	iOS 十八点二
Produktmodell	小米 17	小米十七
Pixel	200MP	两百万像素
Akkukapazität	5000mAh	五千毫安时
Größenordnung	1M tokens	一百万 token
RMB	¥4499	四千四百九十九元
USD	$5	五美元
Multiplikator	2x	两倍
Prozent	30%	百分之三十
Dauer	60s	六十秒
Verhältnis	3:1	三比一
Jahr	2026 年	二零二六年
Billionen	21 万亿	二十一万亿
Rang	Top 3	前三名

• Englische Abkürzungen zuerst testen, dann entscheiden: AI, GPT, API, 5G, GPU werden im chinesischen TTS manchmal Buchstabe für Buchstabe ausgesprochen ("A-I"), manchmal als englisches Wort. Vor dem endgültigen Schreiben mit einem Test beide Varianten anhören: AI 很强大 vs 人工智能很强大, die natürlich klingende Schreibweise wählen und im gesamten Video einheitlich verwenden.
• Markennamen im Original belassen (Apple, OpenAI, 小米), chinesische Marken direkt auf Chinesisch schreiben.
• voiceText absolut verboten: Emojis/Symbole, URLs sowie & % $ # + = / und andere Zeichen; Satzende mit 。 oder ？ für natürliche Pausen; Komma mit ，.
• Einheitlich „两“ oder „二“ verwenden: Für Mengenangaben „两“ (两千、两万、两倍), für Ordnungszahlen/Jahreszahlen „二“ (二零二六年、第二季度).

Schritt 6: Selbstkontrolle

• scenes[0] ist ein Hook, die letzte ein Outro; jede templateId ist im CATALOG enthalten; jedes inputs deckt die erforderlichen Slots ab;
• Chinesische Zeilenbreite ≤14 Zeichen, headline ≤3 Zeilen; voiceText enthält keine arabischen Ziffern/Symbole/Emojis; Emojis nur in inputs; Schreibweise und Aussprache der Abkürzungen im gesamten Video einheitlich;
• voiceText insgesamt 350–450 Zeichen. Maximal 2 Runden stillschweigende Korrektur.

Schritt 7: script.json schreiben

Mit dem write-Tool in <outputDir>/script.json schreiben (zuvor mkdir -p für das Ausgabeverzeichnis).

Schritt 8: Pipeline ausführen

Zuerst den chinesischen TTS starten (siehe oben) und bestätigen, dass der Testton eine Audio-Datei erzeugt, dann im Vordergrund ausführen:

cd "$HOME/.agents/skills/create-template-video-zh" && npm run pipeline -- "<outputDir>/script.json"

Das CLI folgt dem renderer: "hyperframes" und durchläuft die Vorlagen-Pipeline: TTS → Rendern pro Vorlage → nach Tonspur-Länge ausrichten → Zusammenfügen + Audiomixing. Bei Fehlschlag die Fehlermeldung klar angeben und den outputDir-Pfad nennen (bereits gerenderte voice/scene-*.mp3 und clips/scene-*.mp4 werden wiederverwendet, Löschen ermöglicht Neurendern).

Beim erneuten Ausführen nach Änderungen am chinesischen Text zuerst die entsprechenden voice/scene-*.mp3 löschen, sonst wird die alte Tonspur wiederverwendet.

Schritt 9: Auslieferung

Die drei Ergebnisdateien in das Arbeitsverzeichnis der Sitzung kopieren, damit der Benutzer sie direkt öffnen kann:

mkdir -p "<cwd>/videos/<slug>" && cp "<outputDir>"/{video.mp4,voice.mp3,script.txt} "<cwd>/videos/<slug>/"

Dann Bericht erstatten (mit anklickbaren Links):

✓ Video: videos/<slug>/video.mp4
✓ Audio: videos/<slug>/voice.mp3 — für剪映 (automatische Untertitel/Lippensynchronisation)
✓ Script: videos/<slug>/script.txt — Storyboard-Text, einfach manuell zu bearbeiten
Gesamtdauer: XX.Xs

Hinweise

• Jede Szene rendert ca. 15–20 s (Chromium); 8–10 Szenen ca. 3–5 Minuten.
• TTS ist idempotent (behält voice/scene-*.mp3), Clips sind ebenfalls idempotent (behalten clips/scene-*.mp4).
• Chinesischer TTS auf M2 Max hat einen RTF (Echtzeitfaktor) von ca. 2,8: 1 Minute fertiges Video benötigt ca. 3 Minuten reine TTS-Zeit. Für mehr Geschwindigkeit OMNIVOICE_STEPS auf dem Server auf 16 setzen (etwas niedrigere Qualität, halbe Zeit) und neu starten.
• Wenn assets/sfx leer ist, wird die Soundeffekt-Schicht auf 0 gesetzt und beeinträchtigt den Hauptablauf nicht; für Soundeffekte npm run sfx:download ausführen (Internet erforderlich) und dann erneut generieren (standardmäßig in assets/sfx/ im Skill herunterladen, also dem Pfad, auf den SFX_DIR in .env zeigt). Semantische Schlüsselwörter wurden um chinesische Begriffe ergänzt (警告/失败/纪录/首次/倒计时/史诗/悬念…).
• Unterschiede zur vietnamesischen Version create-template-video: TTS-Port 8124 + chinesische Stimme, Tabelle für chinesische Zahlenleseweise, chinesische Typografie-Einschränkungen, chinesische SFX-Schlüsselwörter, zh-video-Slug-Fallback. Der Code ist eine unabhängige Kopie (nur node_modules ist mit der vietnamesischen Version verlinkt); Änderungen an Vorlagen/Pipeline betreffen nur dieses Verzeichnis. Wenn die vietnamesische Version gelöscht wird, mit npm ci die Abhängigkeiten neu aufbauen.
• Neue Vorlage hinzufügen: Gemäß den Anweisungen am Ende von templates/CATALOG.md vorgehen und dann eine Zeile im CATALOG ergänzen.

---

Dieses Skill wird vom Agenten ming-xwolf bereitgestellt.