ming-xwolf/create-template-video-zh

Create Template Video（中文版）

一条中文内容を縦型（9:16）または横型（16:9）のショート動画に変換します。デザインとアニメーションはすべて templates/ 内の HyperFrames テンプレートが担当します。あなたはテキストスロットと script.json の作成のみを行います。

本機インストール情報（DSH環境、必ず先に読むこと）

• PROJECT_DIR = /Users/ming/.agents/skills/create-template-video-zh （スキル本体 + パイプライン + テンプレート；node_modules はベトナム語版にシンボリックリンク、依存関係共有）

• ディレクトリ構成：SKILL.md、templates/（17テンプレート + CATALOG.md）、 src/（CLI/パイプライン）、package.json、.env（中文TTSエンドポイント）。

• ツールマッピング：原文ではClaude Codeのツール名を使用していますが、ここではDSHに対応させます： WebFetch → web_fetch、Read → read、Write → write、Bash → bash。

• 環境依存関係：ffmpeg/ffprobe ✓、Chrome ✓、Node ✓。

• 中文TTSは本機にデプロイ済み：OmniVoice（MPS）+ 標準語クローンボイス voice-zh.pt、 8124 ポートで動作（ベトナム語版は固定で8123を使用、両バージョンは干渉しません）：

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

  このスクリプトは /health をチェックし、バックグラウンドでサービスを起動して準備完了を待ちます（約4秒）。ログは /tmp/omnivoice-zh.log に出力されます。起動後、中文のプローブリクエストで確認します：

  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/接続不可 = 起動していません。起動しない場合はユーザーに伝え停止します。オーディオを偽装しないでください。 サービスディレクトリとデプロイノート：/Users/ming/Documents/dsh_workspace/omnivoice（SETUP.md）。

• 初回レンダリングは npx -y [email protected] が HyperFrames をダウンロードします（インターネット接続が必要、 各シーン約 15–20 秒；8–10 シーン合計 3–5 分）。

• 言語：動画全体が中文。画面上のテキストは中文と英文の混在が可能（AI、GPT、Apple は原文のまま）、 ただし voiceText は中文でなければならず、数字は以下のルールに従って漢字で記述します。

入力

1 つのパラメータ：ニュースURL（http:///https://）または .txt ファイルパス。

ワークフロー（厳密な順序で実行）

Step 1–3：コンテンツ取得 + 出力ディレクトリ作成

• URL → web_fetch で本文を取得し、title、content（本文 800–2000 字）、 ogImage（og:image または null）、domain を抽出します。 失敗（ペイウォール/純粋JS/4xx）→ ユーザーに本文を .txt に保存して再実行するよう促し、停止します。
• .txt → read で読み取り；title = 最初の行（≤40 字）、content = 残りの本文、 ogImage = null、domain = "local"。
• slug：優先的に英語または拼音のキーワードを使用（≤40 文字、[a-z0-9-]）、例えば xiaomi-17-price、ai-coding-jobs。純粋な中文タイトルをASCIIに変換できない場合は、あなたが拼音を記述します。 どうしてもない場合は zh-video（コード内にも同名のフォールバックがあります）。 timestamp = YYYYMMDD-HHmm； outputDir = <現在のワークスペース>/videos/<slug>-<timestamp>/ —— ワークスペース内に配置： 納品に便利で、スキルディレクトリを汚染しません（DSHサンドボックスは通常ワークスペースへの書き込みのみを許可）。mkdir -p。 効果音ライブラリの場所は .env の SFX_DIR でスキル内 assets/sfx を指し、出力ディレクトリとは独立しています。 効果音ライブラリが空の場合、このステップは自動的にスキップされ、メインフローに影響しません。

Step 4：テンプレートディレクトリを読み取る

PROJECT_DIR/templates/CATALOG.md を読み取り、テンプレートとスロットを確認します。 CATALOG にある templateId のみを使用できます。 現存のもの：

HOOK（これのみを使用）： frame-liquid-bg-hero —— オーロラ風の光の斑点 + 大見出し + CTA。

BODY（内容に応じて選択、Step 5 参照）：

• frame-vignelli —— 1 つの数字、ダークカーボン背景 + 赤。
• frame-pentagram-stat —— 1 つの数字/基準値、暗めの背景にネオン（スイスグリッド、オレンジの発光数字 + シアンのアクセント + 棒グラフ）。
• frame-bold-poster —— 複数行の強い宣言 + 大きい数字。
• frame-build-minimal —— 短い決め台詞、暗めの背景 + 特大の太字単語（オレンジのglow、一文字ずつ出現）。
• frame-creative-voltage —— クリエイティブなスローガン、エレクトリックブルーの分割 + 筆記体。
• frame-glitch-title —— サイバーパンクRGBグリッチ（ノイズ背景）、速報・テクノロジー向け。
• frame-aicoding-list —— リスト 2–5 項目（各項目にアイコン + レベルラベル）、暗めのグラデーション背景。
• frame-aicoding-comparison —— A vs B 比較（2つのグラデーションカード + WINバッジ + データ）。
• vfx-text-cursor —— グリッチテキスト + 点滅カーソル、強い意見/引用に最適（1つの単語を強調可能）。
• frame-light-leak-cinema —— 映画的な光漏れ + フィルムノイズ + セリフの見出し、感情的なオープニング/チャプターカードに最適。
• frame-bold-signal —— チャプター/セクションカード、暗めの背景 + オレンジの大きいカード + 大きなチャプター番号 + パンくずリスト。
• frame-data-chart-nyt —— 折れ線グラフ、紙の背景 NYT スタイル、data[{label,value}] でリアルタイムに曲線を描画、最後のセグメントは赤い破線で転換点をマーク可能。
• frame-decision-tree —— 判断ツリー、1つの質問 + 2つの分岐 + 2つの結論カード、「要不要/選哪个」を説明するのに最適。
• frame-swiss-grid —— スイスグリッド、紙の背景 + 大見出し + 3つの数字、「1つの判断 + 3つの数値」の結論ページに最適。

OUTRO： frame-logo-outro（デフォルト：ロゴglow + ブランド + タグライン + url）； frame-statement-outro（代替：紙の背景の赤いカード）。

17 のテンプレートに組み込まれているサンプル値（data-composition-variables）はすべて中文のサンプルに置き換えられています。 プレビューで完成イメージを直接確認でき、そのまま script.json にコピーして編集することもできます。 ただしレンダリング時は明示的に inputs を渡してください：渡さないと実行時に変数を取得できず、テキストが空になります。

17 のテンプレートすべてに 9:16 と 16:9 の両バージョンがあります（compositions/portrait.html と index.html）。 動画全体の縦横比は script.json 上部の aspect で決定されます。正方形（1:1）は現在提供されていません。

Step 5：script.json の生成

{
    "version": "1.0",
    "renderer": "hyperframes",
    "aspect": "9:16",   /* または "16:9"；両方の比率に対応する各テンプレートのレイアウトがあります */
    "metadata": {
        "title": "...",
        "source": { "url": "...", "domain": "...", "image": null },
        "channel": "中文频道名"
    },
    "voice": { "provider": "omnivoice", "speed": 1.0 },
    "scenes": [
        /* 8–12 シーン：1 hook + 6–10 body + 1 outro */
    ]
}

• provider は固定で omnivoice（ローカルTTS、voiceId/APIキー不要）。
• 各シーン：{ id, type, voiceText, templateId, inputs }；inputs は CATALOG 内のそのテンプレートの必須スロットをすべてカバーしている必要があります。
• scenes[0].type = "hook"；scenes[-1].type = "outro"（frame-logo-outro）。
• 8–12 シーン；voiceText の合計は約 350–450 字（≈90–120 秒、中文の話速は約 4.5 字/秒；最終的な長さはナレーションに依存し、パイプラインがナレーションに合わせて調整します）。各 body シーンは 30–45 字で、1つのポイントのみを説明します。1つの段落に2つのポイントがある場合は、2つのシーンに分割します。 目標：各シーンの表示時間は 6–10 秒。

コンテンツ → テンプレートマッピング：

• hook → 固定で frame-liquid-bg-hero（スロット：kicker, headline, subheadline, cta, brand）。headline はデフォルトで黄→紫のグラデーション、headline_from/headline_to（2つのhex値）で色調を変更可能。
• body → 内容に最適なテンプレートをあなたが選択し、できるだけ多様に、同じものをすべてのbodyに使用しないでください：
  • frame-vignelli：シーンに強調すべき1つの数字がある場合（kicker, number, label, note, brand）。
  • frame-pentagram-stat：1つの基準/パーセンテージ数字と棒グラフ感がある場合（label, headline=数字, subtitle, anchor, footer_left, footer_right）。
  • frame-build-minimal：短い決め台詞/1つのキーワード（eyebrow, hero=1単語, desc, side_left, side_right）。
  • frame-bold-poster：複数行の強い宣言 + 大きい数字（kicker, date, figure, headline[], standfirst, footer_left, footer_right）。headline の2行目は自動的に赤くなります。
  • frame-creative-voltage：クリエイティブなスローガン（meta, display_lines, accent_index, script, caption）。
  • frame-glitch-title：速報/テクノロジー/スリル感（title, subtitle）。
  • frame-aicoding-list：リスト/比較 2–5 項目（title, accent, accent_from, accent_to, subtitle, items[]）。各項目 {icon, title, desc, tag, level}：icon はあなたが絵文字を選択（🚫 ⚠️ ✅ ❌ 📈 💡 🔒 🚀 …）；level ∈ danger|warn|good|info で色を決定；tag は中文の短いラベル（高危 / 注意 / 利好 / 稳健）；accent_from/accent_to はあなたが2つのhex値を選択。
  • frame-aicoding-comparison：2つを比較するのに最適（badge, pre, vs, post, left{}, right{}）。 各辺 {label, from, to, icon?, bullets[], stat?, stat_label?, win?}； from/to はグラデーションの2色のhex値（両辺の冷暖対照が良い）；win: true で勝者をマーク。
  • vfx-text-cursor：1つの強い意見/引用、グリッチテキスト + カーソル（line1, line2, line3, accent, byline, header_* , footer_*）。accent は line2 の中で強調する単語。
  • frame-light-leak-cinema：感情的なオープニング/チャプターカード、映画的な光漏れ + セリフの見出し（kicker, title_line1, title_line2, subtitle, header_, footer_）。
  • frame-bold-signal：チャプター区切り/強い宣言（section, nav[], card_label, title, footer）。
  • frame-data-chart-nyt：トレンド/成長を説明する場合に使用、折れ線グラフ（kicker, title, highlight, subtitle, data[{label,value}], unit, accent_tail, source_*）。
  • frame-decision-tree：「要不要/選哪个」を説明する場合（kicker, question, yes{label,tag,title,desc}, no{...}, footer_*）。分岐は2つだけ。
  • frame-swiss-grid：結論ページ、1つの判断 + 3つの数値（label, title, subtitle, stats[{value,label}], accent_index, footer_*）。
  • リズムの提案：数字のシーンが多い場合、frame-vignelli（カーボンブラック+赤/黄）と frame-pentagram-stat（ダークネオンオレンジ/シアン）を交互に使用。数字以外のシーンでは frame-build-minimal を使用。
• outro → frame-logo-outro（brand_name, tagline, primary_url）。

画面比率（aspect、動画全体で統一）：

• "9:16"（デフォルト、抖音/視頻号/Shorts）→ 各テンプレートは compositions/portrait.html をレンダリング。
• "16:9"（Bilibili/YouTube/横型埋め込み）→ index.html（テンプレートの横型バージョン）をレンダリング。
• "1:1"（情報フロー正方形）→ compositions/square.html が必要；現在17のテンプレートすべてに正方形バージョンはありません、 1:1 を選択すると 16:9 にフォールバックして WARN を表示し、画面比率が合わなくなります——正方形が必要な場合は先に square.html を追加してください。
• 両方の比率で同一のスロット名を共有するため、テキストはそのまま再利用できます；違いは行幅のみ： 16:9 の場合は1行に20–24字配置可能、9:16 の場合は10–14字。
• ナレーション、長さ、結合ロジックは比率に依存しません。

中文排版ルール（画面テキスト inputs）

• 中文は英語/ベトナム語より「場所を取る」：1行を 10–14 漢字に制限（16:9 横型の場合は20–24字まで緩和可能）、超えたら改行または削減； headline は最大3行。2行半に詰め込むより、2文字少なくした方が良い。
• テンプレートのフォントは Inter Tight + system-ui、中文は苹方（PingFang SC）にフォールバック、 通常は問題ありません；レンダリング結果が豆腐（□□）になる場合、該当テンプレートの compositions/portrait.html の font-family の先頭に "PingFang SC", "Noto Sans SC", を挿入してから再レンダリングしてください。
• 中文では単語間のスペースは不要；中文で手動で letter-spacing の負の値を追加しないでください、テンプレート標準の -3px は漢字でくっつく可能性があります。見出しが詰まっている場合は、該当クラスで letter-spacing: -1px を上書きしてください。
• 画面テキストは絵文字を許可しますが、各フィールド0–1個にし、一文字ずつポップアップ表示されるフィールド（frame-build-minimal の hero など）には入れないでください。アニメーションが壊れる可能性があります。
• 数字は画面上では適切な形式を保持（4499 元、82.7%、17）、voiceText でのみ漢字に変換します。

中文TTSルール（voiceText は厳守）

OmniVoice は一文字ずつ読み上げるため、アラビア数字、小数点、通貨記号は誤読されたり英語で読まれたりすることがよくあります。 そのため voiceText ではすべての数字を漢字で記述します；inputs（画面テキスト）は数字を保持します。

形式	誤った例	正しい書き方
小数	82.7%	百分之八十二点七
バージョン番号	iOS 18.2	iOS 十八点二
製品モデル	小米 17	小米十七
ピクセル	200MP	两百万像素
バッテリー容量	5000mAh	五千毫安时
数量オーダー	1M tokens	一百万 token
人民元	¥4499	四千四百九十九元
米ドル	$5	五美元
倍数	2x	两倍
パーセンテージ	30%	百分之三十
時間	60s	六十秒
比率	3:1	三比一
年	2026 年	二零二六年
億/兆	21 万亿	二十一万亿
ランキング	Top 3	前三名

• 英語の略語はプローブで確認してから決定：AI、GPT、API、5G、GPU は中文TTSで 一字ずつ読まれる（「A-I」）こともあれば、英単語として読まれることもあります。動画全体に書き込む前に、プローブで2つの文を同時に読み上げて比較してください： AI 很强大 vs 人工智能很强大、聞いて自然な方を選び、動画全体で統一してください。
• ブランド名は原文を保持（Apple、OpenAI、小米）、中文ブランドはそのまま中文で記述。
• voiceText は絶対に禁止：絵文字/アイコン、URL、および & % $ # + = / などの記号； 文末は 。 または ？ を使用して自然な間を作りましょう；コンマは ,。
• 数字の「两」と「二」の統一：口語的な数量詞には「两」を使用（两千、两万、两倍）、 序数/年には「二」を使用（二零二六年、第二季度）。

Step 6：自己チェック

• scenes[0] は hook、最後のシーンは outro；各 templateId は CATALOG 内に存在； 各 inputs は必須スロットをカバー；
• 中文の行幅 ≤14 字、headline ≤3 行；voiceText にアラビア数字/記号/絵文字がないこと； 絵文字は inputs のみに出現；動画全体で使用する単語と略語の読み方が統一されていること；
• voiceText の合計が 350–450 字であること。静かな修正は最大2ラウンド。

Step 7：script.json を書き込む

write ツールを使用して、<outputDir>/script.json に書き込みます（事前に mkdir -p で出力ディレクトリを作成）。

Step 8：パイプラインを実行する

最初に中文TTSを起動し（冒頭参照）、プローブでオーディオを確認してから、フォアグラウンドで実行：

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

CLI は renderer: "hyperframes" に従ってテンプレートパイプラインを実行します：TTS → テンプレートごとのレンダリング → ナレーション時間に合わせたアライメント → 結合 + ミキシング。失敗した場合は、明確にエラーを報告し、outputDir パスを出力します（既にレンダリングされた voice/scene-*.mp3、clips/scene-*.mp4 は再利用され、削除して再レンダリングできます）。

中文テキストを修正して再実行する場合、最初に該当する voice/scene-*.mp3 を削除してください。削除しないと古いナレーションが再利用されます。

Step 9：納品

3つの成果物をセッションワークスペースにコピーし、ユーザーが直接開けるようにします：

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

その後、報告します（クリック可能なリンクを使用）：

✓ Video: videos/<slug>/video.mp4
✓ Audio: videos/<slug>/voice.mp3 — 剪映用（自動字幕/口パク同期）
✓ Script: videos/<slug>/script.txt — 絵コンテテキスト、手動修正に便利
総時間: XX.Xs

備考

• 各シーンのレンダリング時間は約 15–20 秒（Chromium）；8–10 シーンで約 3–5 分。
• TTS は冪等（voice/scene-*.mp3 を保持）、クリップも冪等（clips/scene-*.mp4 を保持）。
• 中文TTSの M2 Max における RTF（リアルタイムファクター）は約 2.8：1分の完成動画に約3分の純粋なTTS時間が必要。 高速化したい場合は、サーバー側の OMNIVOICE_STEPS を 16 に設定（品質がやや低下、時間は半減）して再起動してください。
• assets/sfx が空の場合、効果音は0層でメインフローに影響しません；効果音が必要な場合は npm run sfx:download（インターネット接続が必要）を実行してから生成（デフォルトでスキル内 assets/sfx/ にダウンロード、 つまり .env の SFX_DIR が指す場所に）。セマンティックキーワードはすでに中文で追加されています （警告/失敗/纪录/首次/倒计时/史诗/悬念…）。
• ベトナム語版 create-template-video との違い：TTSポート 8124 + 中文音色、 中文数字読み上げテーブル、中文排版制約、中文SFXキーワード、zh-video slug フォールバック。 コードは独立したコピー（node_modules のみベトナム語版にシンボリックリンク）；テンプレート/パイプラインの変更は このディレクトリにのみ影響します。ベトナム語版を削除する場合は、npm ci で依存関係を再構築してください。
• 新しいテンプレートの追加：templates/CATALOG.md の最後のセクションの説明に従い、CATALOG に行を追加してください。