demo-video-master은(는) 무엇을 하나요?
기능 설명 + URL을 하나의 명령으로 시네마틱 제품 데모 비디오로 만듭니다.
네 가지 도구를 하나의 자동화 파이프라인으로 결합합니다:
| 단계 | 도구 | 기능 |
|---|---|---|
| 캡처 | agent-browser | 실시간 URL의 스크린샷 + 스크롤 녹화 |
| 디자인 | video-shotcraft | 5~7개의 시네마틱 샷, PageCam 키, 자막, SFX |
| 렌더링 | Remotion | React → mp4 |
| 음성 | ElevenLabs | 장면별 VO 내레이션 |
| 병합 | ffmpeg | VO + 비디오 → final.mp4 |
트리거
다음 중 하나로 이 스킬을 활성화합니다:
demo-video: <기능 설명> <url>
make a demo video for <url> — <기능 설명>
전체 파이프라인 (시작하기 전에 읽기)
전체 단계별 에이전트 지침은 pipeline.md를 참조하세요.
간략 요약:
- 캡처 —
scripts/capture.mjs <url> <slug>실행 → PNG 파일이public/textures/<slug>/에 저장됨 - 디자인 — 캡처 이미지와 함께
video-shotcraft자율 모드 호출;shotlist.json+ 장면 TSX 파일 출력 - 병렬:
- 3a VO —
scripts/elevenlabs-vo.mjs <slug>를 백그라운드에서 실행 - 3b 렌더링 —
npx remotion render src/Root.tsx <CompositionId> out/<slug>.mp4
- 3a VO —
- 병합 —
scripts/merge.sh <slug>— ffmpeg가 렌더링된 비디오에 VO를 입힘 - 커밋 + 미리보기 —
examples/<slug>/에 커밋하고 QuickLook 열기
설정 (최초 한 번)
# 1. 이 스킬 설치
git clone https://github.com/yash0208/demo-video-master ~/.claude/skills/demo-video-master
# 2. agent-browser 설치 (vercel-labs/agent-browser)
npm install -g agent-browser
agent-browser install # Chrome 다운로드 (최초 한 번)
# 3. 필수 스킬 설치
git clone https://github.com/vincentwei1021/video-shotcraft ~/.claude/skills/video-shotcraft
git clone https://github.com/yash0208/remotion-best-practices ~/.claude/skills/remotion-best-practices
# 4. ffmpeg 설치
brew install ffmpeg # macOS; Linux는 apt install ffmpeg
# 5. env 템플릿을 비디오 프로젝트로 복사
cp ~/.claude/skills/demo-video-master/.env.example _video/.env.local
# ELEVENLABS_API_KEY와 ELEVEN_VOICE_ID 입력
규칙 (항상 적용)
- 스크린샷만 사용 — agent-browser를 통해 실제 페이지 캡처 사용; UI를 합성하지 않음
- PII 마스킹 — 실제 사용자 데이터를 렌더링에 포함시키기 전에 대체
- 결정적 렌더링 — Remotion 장면에서
Math.random()/Date.now()사용 금지; 모든 무작위성은 인덱스로 시드 지정 - VO + 렌더링 병렬 실행 — 항상 ElevenLabs와 Remotion을 동시에 실행하여 시간 절약
- 외부 인포그래픽만 허용 — 애니메이션 요소는 스크린샷 위에 배치; translateZ 카드 리프트 금지, 스크린샷에 테두리 링 그리기 금지
환경 변수
ELEVENLABS_API_KEY=your_key_here
ELEVEN_VOICE_ID=your_voice_id_here # 기본값: Adam (pNInz6obpgDQGcFmaJgB)