Communitygithub.com

Fldicoahkiin/dotfiles

라이브 웹앱에서 시네마틱한 제품/데모 비디오를 제작합니다. Playwright가 보이는 합성 커서로 실제 화면 상호작용을 녹화하고, 로컬 Kokoro TTS가 내레이션하며, Whisper가 단어 동기화 자막을 만들고, HyperFrames HTML 구성이 클립, 음성, 자막 및 배경 음악을 하나의 MP4로 조합합니다. 사용자가 데모 비디오, 제품 워크스루, 화면 녹화 데모, 해커톤 제출 영상, 출시 클립 또는 '내레이션과 자막이 있는 앱 녹화'를 원할 때 사용하세요. 단일 가로 MP4를 출력하며, 해커톤 구조가 템플릿으로 내장되어 있습니다.

dotfiles란 무엇인가요?

Demo Video Studio는 실행 중인 웹 애플리케이션을 전문적인 데모 비디오로 변환하는 AI 에이전트 스킬입니다. 슬라이드쇼나 모의 화면이 아닌 실제 상호작용을 Playwright로 녹화하며, 보이는 합성 커서를 통해 사용자 조작을 시각적으로 보여줍니다. Kokoro TTS를 사용한 로컬 내레이션과 Whisper 기반 단어 단위 자막 타임스탬프를 생성하여 정확한 자막 동기화를 제공합니다. HyperFrames HTML 컴포지션 엔진을 통해 클립, 음성, 자막 및 배경 음악을 결정론적으로 조합하고 1080p 해상도의 단일 MP4로 렌더링합니다. 이 스킬은 데모 비디오, 제품 워크스루, 해커톤 제출 영상, 출시 클립 등에 적합하며, Node.js, FFmpeg, Playwright, HyperFrames CLI에 의존합니다. 각 단계(녹화, 내레이션, 자막 생성, 음악 추가, 컴포지션)가 독립적으로 실행 가능하여, 한 장면만 다시 녹화하거나 내레이션만 다시 실행하는 등 유연한 워크플로우를 지원합니다.

지원 대상~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Fldicoahkiin/dotfiles/tree/HEAD/private_dot_claude/skills/demo-video-skill
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

데모 비디오 스튜디오

실행 중인 웹 앱을 세련된 데모 영화로 변환합니다: 실제 녹화된 상호작용(슬라이드쇼나 모의 화면이 아님) + 로컬 TTS 내레이션 + 단어 동기화 자막 + 부드러운 배경 음악, HyperFrames를 사용하여 결정론적으로 구성됩니다.

사용 시기

웹 앱의 데모/워크스루/제품/출시/해커톤 비디오를 제작할 때, 특히 실제 제품이 실행되는 모습을 내레이션과 자막과 함께 보여주어야 할 때 사용합니다. 배포된 URL 또는 로컬 개발 서버를 녹화합니다.

파이프라인

① 녹화    Playwright가 라이브 앱을 구동, 보이는 커서 → out/clips/*.webm
② 내레이션  장면별 VO 작성 → Kokoro TTS (로컬)            → narration/*.wav
③ 전사    Whisper 단어 수준 타임스탬프                  → *.transcript.json
④ 자막    구문 단위 그룹화 + 브랜드 오인 수정            → captions.js
⑤ 음악    ffmpeg 앰비언트 배경 (음성 아래로 낮게 믹스)   → music/bed.wav
⑥ 구성    HyperFrames HTML 단일 타임라인: 클립+음성+자막+음악 → MP4

녹화와 구성은 독립적입니다: 한 장면을 다시 녹화하거나 내레이션을 다시 실행해도 다른 단계에 영향을 주지 않습니다. 코드 생성 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에서 시작하여 (하나의 클립 + 자막 트랙 + 오디오), 타임라인을 확장한 다음, 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는 약 340MB(Kokoro)를 다운로드하고, 첫 전사는 약 466MB(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