Communitygithub.com

데모 비디오 스튜디오

실행 중인 웹 앱에서 실제 조작 + 로컬 TTS 내레이션 + 단어 동기 자막 + 배경 음악이 포함된 시네마틱 데모/제품 비디오를 완전 자동으로 제작합니다. Cap CLI, VHS, Playwright 세 가지 녹화 엔진을 지원합니다.

데모 비디오 스튜디오란 무엇인가요?

이 스킬은 실행 중인 웹 앱이나 로컬 개발 서버를 활용하여 실제 상호작용이 담긴 고품질 데모 비디오를 자동 생성합니다. 사용자는 '내 앱 녹화해서 내레이션과 자막으로 데모 영상 만들기', 'Screen Studio 스타일 자동 편집 녹화', '제품 워크스루 영상', '해커톤 발표 영상' 등의 요청을 할 수 있습니다. 파이프라인은 녹화(①) → 내레이션(②) → 전사(③) → 자막(④) → 배경 음악(⑤) → MP4 합성(⑥)의 6단계로 구성되며, 각 단계는 독립적으로 재실행 가능합니다. 세 가지 녹화 엔진(Cap CLI: macOS Screen Studio 스타일, VHS: CLI 도구 데모, Playwright: 헤드리스/CI/Linux용 합성 커서)을 제공하며, 로컬 Kokoro TTS로 내레이션을 생성하고 Whisper로 단어 수준 타임스탬프를 추출합니다. HyperFrames HTML 컴포지션 엔진을 통해 클립, 음성, 자막, 배경 음악을 하나의 MP4로 결정론적으로 합성합니다. 핵심 원칙은 '실제 조작이 슬라이드보다 낫다', '1:1 해상도 유지(4K 업스케일 금지)', '동영상이 내레이션보다 길어야 한다(자막이 음성보다 먼저 끝나지 않도록)', '내레이션은 README를 읽는 것이 아니라 시청자에게 말하는 음성'입니다.

지원 대상~Claude Code~Codex CLI✓Cursor
npx skills add Fldicoahkiin/demo-video-skill
원본 보기→모든 스킬 둘러보기

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

데모 비디오 스튜디오은(는) 무엇을 하나요?

실행 중인 웹 앱을 정교한 데모 영상으로 변환합니다: 실제 녹화된 상호작용(슬라이드쇼나 모의 데이터 아님) + 로컬 TTS 내레이션 + 단어 동기 자막 + 조용한 배경 음악, HyperFrames로 결정론적으로 합성합니다.

사용 시기

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

파이프라인

① 녹화    세 가지 엔진 중 하나 (아래 참조)                    → out/*.mp4|webm
② 내레이션  장면별 음성 대본 작성 → Kokoro TTS (로컬)         → narration/*.wav
③ 전사   Whisper 단어 수준 타임스탬프                      → *.transcript.json
④ 자막   구로 그룹화 + 브랜드 오인 수정                    → captions.js
⑤ 음악   ffmpeg 배경 음악 (음성 아래 낮은 볼륨으로 믹스)   → music/bed.wav
⑥ 합성   HyperFrames HTML 단일 타임라인: 클립+음성+자막+음악 → MP4

① 세 가지 엔진 — 대상에 따라 선택 (참고자료/screen-studio-look.md):

대상엔진스타일
웹/데스크탑 앱, macOSCap CLI — scripts/record-cap.mjsScreen Studio 네이티브: 실제 클릭에서 자동 줌, 스프링 커서 + 모션 블러, 배경화면/모서리 둥글림/그림자, GPU 렌더링
CLI 도구VHS 테이프 → mp4스타일링된 터미널 (패딩, 여백 채움, 테두리 반경, 윈도우 바), 결정론적
헤드리스 / CI / LinuxPlaywright — scripts/record.mjs합성 커서 + 리플; <scene>.events.json 기록 (타임스탬프 + 좌표) — 추후 줌 합성용

어떤 엔진으로 녹화하든, 출력은 단지 ②~⑥ 단계에 공급될 클립입니다. 녹화와 합성은 독립적이므로, 한 장면을 다시 녹화하거나 내레이션을 다시 실행해도 다른 단계에 영향을 주지 않습니다. 코드로 생성된 GIF 트랙 (HTML 장면을 녹화 없이 MP4로 직접 렌더링)은 문서 페이지용 선택적 부가 경로입니다.

워크플로우

  1. 사용자와 함께 엔진을 선택하세요 — 절대 혼자 결정하지 마세요. 실제 프로젝트(웹 앱? CLI? 데스크탑? 이 머신에 GUI 세션이 있나요? CI에서 실행해야 하나요?)를 살펴본 후, 이 특정 프로젝트에 대한 장단점과 함께 엔진 옵션을 제시하고 사용자가 선택하게 하세요. 예: Mac의 웹 앱이라면 "Cap CLI는 Screen Studio 스타일을 네이티브로 제공하지만 화면 녹화 권한과 첫 실행 캘리브레이션이 필요합니다. Playwright는 어디서나 실행 가능하고 단일 장면을 빠르게 재녹화할 수 있지만 자동 줌이 없습니다. VHS는 여기 해당되지 않습니다." 엔진 세부 정보: 참고자료/screen-studio-look.md.
  2. 먼저 제품을 이해하세요. README / 데모 문서를 읽으세요. 도구를 다루기 전에 데모 플로우를 작성하세요: 문제 → 제품 워크스루 → 증거 → 결론. 권장 클릭 경로와 각 장면이 보여줄 가시적 결과를 결정하세요. 참고자료/templates.md 참조.
  3. 녹화하세요. scripts/record.mjs를 복사하고 APP과 SIZE를 설정한 후, scenes를 나만의 동작(글라이드 → 멈춤 → 액션 → 대기)으로 교체하세요. 1:1 디바이스 스케일로 녹화하세요. node scripts/record.mjs [scene]. 엔진 + 작업 예제: 참고자료/recording.md.
  4. 내레이션 → 자막. 장면별로 assets/narration/NN-*.txt 파일을 음성 대본 스타일로 작성하세요 (시청자에게 말하는 것이지 README를 읽는 것이 아닙니다 — 이는 마케팅 카피와 다른 기술입니다; 마케팅 스킬이 주제/훅/스토리보드를 제공하고, 이 스킬이 말로 할 내용을 작성합니다). 그런 다음: bash scripts/tts.sh && bash scripts/transcribe.sh && node scripts/build-captions.mjs를 실행하세요. 브랜드 이름에 맞게 build-captions.mjs의 PHRASE_FIX를 편집하세요. 음성은 계약에 따라 교체 가능합니다: 내레이션은 장면별로 하나의 wav 파일 (narration/NN-*.wav)입니다 — 어떤 wav든 사람 목소리, 剪映 더빙, 다른 TTS로 교체한 후 전사+자막을 재실행하고 재합성하면 됩니다; 다른 것은 바뀌지 않습니다. Kokoro (로컬, Apache-2.0)가 기본이며 중국어 음성을 지원합니다; edge-tts는 무료 온라인 대안입니다. 가이드: 참고자료/narration-and-captions.md.
  5. 합성 및 렌더링. 참고자료/composition-skeleton.html (하나의 클립 + 자막 트랙 + 오디오)에서 시작해 타임라인을 확장한 후 npx hyperframes render . --resolution landscape --fps 30 --crf 17 --quality high를 실행하세요. 1:1로 렌더링하세요 (1080p 제작 → 1080p 출력) — 절대 4K로 업스케일하지 마세요. UI가 흐려집니다. 참고자료/composition.md.
  6. 배포 전 QC. ffprobe로 길이/오디오 확인, 1~2프레임 샘플링 (검정색이나 빈 프레임 없음), 자막이 프레임 내에 있는지, 내레이션이 잘리지 않았는지, 핵심 결과 페이지가 실제로 보이는지 확인하세요. 흐름/타이밍을 수정한 후 재렌더링하세요.

빠른 시작

# 시스템 종속성
brew install node ffmpeg
npx playwright install chromium

# 로컬 TTS + 전사를 위한 Python 가상환경 (한 번만)
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는 프레임을 찾아 이동하므로 모션이 재현 가능해야 합니다.
  • 가시적 커서 + 결과물에서 대기 — 의도적으로 글라이드하고, 결과물에서 멈추세요.
  • 음성 대본, 문서가 아님 — 내레이션은 화면을 따라갑니다. README를 그대로 읽는 것이 아닙니다.
  • 동영상이 내레이션보다 길어야 함 — 클립 시간을 여유 있게 확보하여 시각이 음성보다 먼저 끝나지 않도록 하세요.

종속성

Node 22+, FFmpeg, Playwright (Chromium), HyperFrames CLI (npx hyperframes, 스킬 설치는 npx skills add heygen-com/hyperframes). 로컬 TTS/Whisper는 Python + kokoro-onnx가 필요합니다. 엔진별 (선택 사항): Cap 경로는 cap (curl -fsSL https://cap.so/install-cli.sh | sh) + cliclick (brew install cliclick) + 화면 녹화 권한이 필요합니다; 터미널 경로는 vhs (brew install vhs)가 필요합니다. 모두 무료입니다 — 라이선스 표는 참고자료/screen-studio-look.md를 참조하세요. HyperFrames 설정은 참고자료/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