SaaS 론치 비디오: 크리에이티브 디렉터
모든 비디오는 제품에 맞게 제작되어야 합니다: 고유한 컨셉, 구조, 디자인 및 전환. 이 스킬은 디렉터 + 툴킷이며, 템플릿이 아닙니다. 하나의 고정된 스타일로 절대 대체하지 마십시오.
요구 사항
Node 18+, PATH에 FFmpeg, npx [email protected]. HyperFrames 스킬 hyperframes-creative, hyperframes-animation 및 hyperframes-registry (설치: npx [email protected] init <any-dir>; 새로고침: npx [email protected] skills update). Python + pip install librosa (음악 분석용).
참조 비디오? 사용자가 복제할 비디오를 보낸 경우("이거처럼"), references/REFERENCE.md를 따르세요: 1단계 직후 scripts/analyze-reference.mjs를 실행하고 reference.md를 작성하세요. 그런 다음 이 참조가 피치, 스크립트, 빌드 검사 및 음악을 구성합니다.
워크플로 (4개의 체크포인트에 사용자 승인 필요)
-
설정 및 제품 파악.
node <skill>/scripts/new-project.mjs <dir>를 실행합니다. 그런 다음 사용 가능한 최상의 소스에서 제품을 파악합니다:- 코드: 컴포넌트, 라우트, 테마 및 카피를 읽고;
brand.json(references/BRAND.md)을 작성하고scripts/brand.mjs를 실행합니다. - 링크:
node <skill>/scripts/from-link.mjs <url> <dir>는brand.json과brand-kit.md를 작성합니다; 로고와 색상을 확인합니다. - 스크린샷: 로고, 색상 및 주요 화면을 요청합니다.
라이브 기능, 대상 사용자 및 톤을 나열합니다.
- 코드: 컴포넌트, 라우트, 테마 및 카피를 읽고;
-
체크포인트: 3가지 방향 피칭. references/PITCH.md를 사용합니다. references/DIRECTIONS.md(4개 패밀리 × 3개 룩)의 룩과 references/NARRATIVES.md의 내러티브 모양을 결합합니다. 세 가지 방향은 서로 달라야 하며(최소 2개 패밀리) 각각 렌더링된 키 프레임이 제공됩니다. 사용자가 선택하거나 혼합합니다; 결정을
direction.md에 저장합니다. 참조가 있는 경우 방향 A는 요청된 충실도의 참조이며, 각 스틸은 응답하는 참조 프레임 옆에 표시됩니다. -
체크포인트: 스크립트. 선택한 방향에 대한 비트 테이블(장면, 화면 콘텐츠, 카피, 모션, 전환, 사운드) 및 정확한 UI 액션. 승인 후 필요한 앱 내 화면을 요청합니다(references/UI-REBUILD.md).
-
체크포인트: 이미지 (방향에 필요한 경우에만). 프롬프트를 작성하고 파일을 기다립니다; 직접 생성하거나 가짜로 만들지 마십시오(references/IMAGES.md).
-
빌드.
- 장면당 하나의 서브 컴포지션.
- 각 장면에 대해 HyperFrames 청사진을 읽고 수동 빌드 전에 레지스트리를 검색합니다(
npx [email protected] catalog <words> --json). - 제품 장면은
reference/ui-rig.html에서 시작합니다. 모션에는lib/fx.js를, 3D에는lib/three-stage.js를 사용합니다. - 모든 프레임이 잘 읽힐 때까지 lint → snapshot → fix를 반복한 다음 드래프트 렌더를 만듭니다(references/WORKFLOW.md). 참조가 있는 경우
analyze-reference.mjs --compare로 드래프트를 확인합니다.
-
체크포인트: 음악.
music-plan.json을 작성하고,scripts/music-plan.mjs를 실행하고, 사용자에게 ElevenLabs에서 2-4개의 테이크를 생성하도록 요청합니다.analyze-track.py --drop으로 정렬하고,mix-variations.mjs로 믹싱한 후 사용자가 선택하도록 합니다(references/MUSIC.md). -
전달. 트랙을 마운트하고
-q delivery로 렌더링한 다음scripts/finalize.mjs를 실행합니다(−14 LUFS 마스터 + 100MB 미만 업로드 복사본).
규칙
- 실제 기능, 실제 UI, 데모 데이터만. 화면을 직접 만들지 말고 요청하세요.
- 비디오당 하나의 시그니처 동작과 2-3개의 전환(또는 참조 자체 세트)을 일관되게 사용합니다. 모든 텍스트 줄을 읽을 수 있을 만큼 충분히 유지합니다.
- 장면에는 브랜드 변수만 사용합니다(
var(--brand-primary),var(--font-display)); 브랜드 헥스 또는 폰트 패밀리를 하드 코딩하지 마십시오. - 참조는 문법이지 콘텐츠가 아닙니다. 리듬, 전환, 타이포그래피 및 색상 역할을 복사하되 푸티지, 로고, 이름, 카피 또는 음악은 절대 복사하지 마십시오.
- 기본 룩 없음. 드래프트가 일반적인 "어두운 그라데이션 + 기울어진 창 + 타입 카드"로 흘러가기 시작하면 멈추고
direction.md를 다시 읽으십시오. - 빌드 전에 references/GOTCHAS.md를 읽으십시오. 렌더를 낭비하게 만드는 HyperFrames 함정이 나열되어 있습니다.
파일
| 경로 | 설명 |
|---|---|
toolkit/fx.js | 모션 도우미: 타이핑, 스트리밍 텍스트, 휩, 마스크 리빌, 커서, 카운트업, 패스 드로우/팔로우 |
toolkit/three-stage.js | Three.js 노트북/폰/플로팅 패널 스테이지, 키프레임 카메라 및 화면 전환 포함 |
toolkit/ui-rig.html | UI 재구축 장치(평면/기울임/전면 카메라), 모든 프로젝트의 reference/로 복사됨 |
toolkit/skeleton/ | 비어 있는 루트 index.html (브랜드 마커, importmap, fx) |
examples/ | 패밀리당 하나씩 기술 데모: new-project.mjs <dir> --examples로 마운트합니다. 연구하고 절대 복사하지 마십시오. |
scripts/ | new-project, from-link, brand, analyze-reference, fetch-sfx, music-plan, analyze-track.py, mix-variations, finalize |