Communitygithub.com

デモビデオスタジオ

動作中のWebアプリから、実際の操作、ローカルTTSによるナレーション、ワード単位の字幕、BGMを備えた本格的なデモ動画を生成します。Playwrightで撮影、Kokoro TTSでナレーション、Whisperで字幕、HyperFramesで合成します。

デモビデオスタジオ とは？

このスキルは、動作中のWebアプリを元に、実際のユーザー操作を収録した高品質なデモ動画を生成するためのパイプラインを提供します。主な用途は、プロダクトウォークスルー動画、ハッカソン提出用デモ、ローンチ動画、あるいは「アプリ操作をナレーションと字幕付きで録画したい」といったケースです。処理は6つのステージ（録画、ナレーション生成、文字起こし、字幕構築、BGM追加、動画合成）から成り、各ステージは独立して再実行可能です。対応プラットフォームはNode.js、FFmpeg、Playwright（Chromium）をベースとし、ローカルのKokoro ONNX（TTS）とWhisper（文字起こし）を利用するため、外部API依存がなく完全にオフラインで動作します。最終出力はランドスケープ（横長）のMP4ファイルです。 スキル名「Fldicoahkiin/dotfiles」は内部的にこのパイプラインを参照するための識別子であり、スキル自体はHyperFrames CLIと連携してHTMLベースの合成タイムラインをレンダリングします。録画にはPlaywrightの可視カーソル機能を活用し、実際の画面操作（スライドショーやモックではない）をそのまま収録します。ハッカソン用のテンプレートも組み込まれており、ナレーション台本（VO）の書き方や、デモフローの設計ガイドも同梱されています。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Fldicoahkiin/dotfiles/tree/HEAD/private_dot_claude/skills/demo-video-skill
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

デモビデオスタジオ は何をしますか？

動作中のWebアプリを、洗練されたデモ動画に変換します。実際の操作収録（スライドショーやモックではありません）+ ローカルTTSによるナレーション + ワード単位で同期された字幕 + 控えめなBGMを、HyperFrames で決定的に合成します。

使用するタイミング

Webアプリのデモ / ウォークスルー / プロダクト / ローンチ / ハッカソン動画を作成する場合、特に実際のプロダクトを動作させながらナレーションと字幕を表示したい場合に使用します。デプロイ済みのURLまたはローカルの開発サーバーを収録できます。

パイプライン

① 録画       Playwright でアプリを操作、可視カーソル → out/clips/*.webm
② ナレーション  シーンごとにVOを作成 → Kokoro TTS（ローカル）         → narration/*.wav
③ 文字起こし Whisper によるワードレベルのタイムスタンプ                  → *.transcript.json
④ 字幕       フレーズにグループ化 + ブランド名の誤認識修正            → captions.js
⑤ BGM        ffmpeg によるアンビエント（音声の下にミックス）          → music/bed.wav
⑥ 合成       HyperFrames HTML ワンタイムライン: クリップ+音声+字幕+BGM → MP4

録画と合成は独立しています。他の部分をやり直すことなく、1シーンのみ再収録したり、ナレーションのみ再生成できます。コード生成GIFトラック（HTMLシーンを録画せずに直接MP4にレンダリング）は、ドキュメントページ用のオプショナルなサイドパスとして利用可能です。

ワークフロー

  1. まずプロダクトを理解する。 READMEやデモ用ドキュメントを読み、ツールに触れる前に「デモフロー」を作成します：問題 → プロダクトウォークスルー → 証拠 → 結論。推奨されるクリックパスと、各シーンで到達すべき可視結果を決めます。references/templates.md を参照。
  2. 録画する。 scripts/record.mjs をコピーし、APP と SIZE を設定、scenes を自分の振り付け（スライド → 一時停止 → 操作 → ホールド）に置き換えます。デバイススケール1:1で録画。node scripts/record.mjs [scene]。エンジンと動作例は references/recording.md を参照。
  3. ナレーション → 字幕。 各シーンごとに assets/narration/NN-*.txt をVOの声で作成します（あなたが視聴者に話しかけているのであって、READMEを読み上げているわけではありません）。その後: bash scripts/tts.sh && bash scripts/transcribe.sh && node scripts/build-captions.mjs。 build-captions.mjs 内の PHRASE_FIX をブランド名に合わせて編集します。ガイド: references/narration-and-captions.md。
  4. 合成してレンダリング。 references/composition-skeleton.html から始め（1つのクリップ + 字幕トラック + 音声）、タイムラインを拡張し、その後 npx hyperframes render . --resolution landscape --fps 30 --crf 17 --quality high。1:1でレンダリング（1080pで作成 → 1080p出力）— 4Kにアップスケールしないでください。UIがぼやけます。references/composition.md を参照。
  5. 出荷前にQC。 ffprobeで長さ/音声を確認、1～2フレームをサンプリング（黒や空でないこと）、字幕がフレーム内に収まっているか、ナレーションが切れていないか、重要な結果ページが実際に表示されているかを確認。フロー/タイミングを修正し、再レンダリング。

クイックスタート

# システム依存
brew install node ffmpeg
npx playwright install chromium

# ローカルTTS + 文字起こし用のPython venv（初回のみ）
python3 -m venv .ttsvenv && .ttsvenv/bin/pip install kokoro-onnx soundfile
export PATH="$(pwd)/.ttsvenv/bin:$PATH"

# 1) 録画  2) ナレーション  3) 字幕  4) 合成+レンダリング
node scripts/record.mjs
bash scripts/tts.sh && bash scripts/transcribe.sh && node scripts/build-captions.mjs
npx hyperframes render . --resolution landscape --fps 30 --crf 17 --quality high --output out/demo.mp4

初回のTTSは約340 MB（Kokoro）、初回の文字起こしは約466 MB（Whisper small.en）をダウンロードします。どちらも ~/.cache/hyperframes/ にキャッシュされます。

経験則

  • 実際の操作がスライドより優れている — 実際にプロダクトが動作しているところを収録すること。
  • 1:1、2倍アップスケール禁止 — 2× DPRで録画し4Kでレンダリングすると、すべてのUIクリップがぼやける。1080pで作成・レンダリングすること。
  • 決定的な合成 — HTML内に Date.now()、Math.random()、ネットワークアクセスを入れない。HyperFramesはフレームをシークするため、動きは再現可能でなければならない。
  • 可視カーソル + 結果でホールド — 意図的にスライドし、結果が表示されたところで一時停止。
  • VOであって、ドキュメントではない — ナレーションは映像に合わせる。READMEをそのまま読むのではない。
  • 映像はナレーションより長く — クリップ時間を余裕を持たせ、映像が音声より先に終わらないようにする。

依存関係

Node 22以上、FFmpeg、Playwright（Chromium）、およびHyperFrames CLI（npx hyperframes、スキルは npx skills add heygen-com/hyperframes で追加）。ローカルTTS/WhisperにはPython + kokoro-onnx が必要。HyperFramesのセットアップについては references/composition.md を参照。

リファレンス

関連スキル

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community