사용 가이드로 건너뛰기
product-launch-video작성자 HeyGen

Product Launch Video 스킬.

모션 및 비디오를 위한 Claude Code 및 Codex 스킬입니다. 제품 URL, 스크립트 또는 브리프를 제품 출시 또는 홍보 비디오로 전환합니다.

  • Motion & Video
  • Video
heygen-com/hyperframes · skills/product-launch-video/SKILL.mdSKILL.md
--- name: product-launch-video description: Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Site tours / showcases of a website route here too — the brief carries the show-it-as-is intent. Unclear → /hyperframes. --- ## Step 0: Setup ## Step 1: Capture assets ## Step 2: Design System ## Step 3: Storyboard and Script ## Step 3.1: Audio ## Step 4: Frame Visual Design
2026-09-14에 업스트림 파일에서 읽은 앞부분 및 섹션 제목 · 전체 32,560자

01 기능

Claude Code와 Codex에서 product-launch-video 스킬이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

7단계 워크플로를 통해 제품 출시 및 프로모션 영상 제작을 조율합니다. 제품 URL, 붙여넣은 스크립트 또는 브리프를 받아 HyperFrames를 통해 MP4를 생성합니다.

실제 사이트에서 브랜드 자산을 캡처하고, 프레임 프리셋을 채택하여 브랜드 토큰에 맞게 리믹스하고, 보이스오버 속도에 맞춰 시간 코드가 지정된 샷 시퀀스로 스토리보드를 작성하고, 내레이션과 배경음악을 생성하고, 각 프레임을 HTML로 빌드하도록 병렬 서브 에이전트를 파견하고, lint/check/스냅샷 검증 후 렌더링합니다. SaaS 프로모션, 기능 공개, 앱 출시, 사이트 투어를 대상으로 합니다. HeyGen에 로그인한 상태 또는 로컬 TTS/BGM 엔진을 사용한 오프라인 상태 모두에서 작동합니다.

산출물

  • 명시된 재생 시간을 가진 renders/video.mp4의 최종 MP4 렌더링
  • 검증을 위한 프레임 중간점과 컷의 스냅샷 콘택트 시트
  • 시간 코드가 지정된 샷 시퀀스가 담긴 STORYBOARD.md와, 내레이션이 필요한 경우 SCRIPT.md
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    브리프 확인 및 프로젝트 초기화

    의도 계층이 이 워크플로가 시작되기 전에 브리프를 확정합니다.

  2. 02
    URL에서 자산 캡처

    제품 URL에서 hyperframes capture를 실행하여 스크린샷, DOM 구조, 브랜드 토큰(색상/글꼴), 표시된 텍스트, 자산 설명을 수집합니다.

  3. 03
    프레임 프리셋 채택 및 브랜드 리믹스

    브랜드에 맞는 이미지를 가진 출시된 프레임 프리셋 하나를 선택한 다음, build-frame.mjs를 실행하여 프리셋의 FRAME.md를 복사하고, 브랜드 색상/글꼴을 프리셋 구조에 다시 매핑하고, 캡션 스킨을 복사합니다.

  4. 04
    시간 코드가 지정된 샷 시퀀스로 스토리보드 작성

    스토리 스파인 원칙에 따라 STORYBOARD.md와 SCRIPT.md 초안을 작성합니다.

  5. 05
    백그라운드에서 오디오 생성

    스토리보드가 승인되면 선택된 제공업체와 음성으로 TTS 내레이션을 시작하고, HeyGen의 음악 라이브러리에서 분위기별로 배경음악을 가져오고, 단어 타이밍을 생성한 후 대기하지 않고 비주얼 디자인을 계속 진행합니다.

  6. 06
    프레임을 병렬로 빌드하도록 서브 에이전트 파견

    오디오가 완료될 때까지 대기한 후 재생 시간을 동기화하고, 프레임마다 경계가 지정된 패킷 하나를 빌드하여 각각에 서브 에이전트를 파견합니다.

02 적합성 확인

product-launch-video 스킬을 사용하는 경우

이러한 종류의 모션 및 비디오 작업일 때 Claude Code 또는 Codex에서 product-launch-video 스킬을 사용합니다. 아래의 적합성 및 제한 사항은 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

  • SaaS 프로모션, 기능 공개, 제품 데모, 앱 및 회사 출시
  • 캡처한 페이지를 그대로 보여주는 사이트 투어 또는 쇼케이스
  • 내레이션과 자산을 위해 캡처할 수 있는 URL이 있는 제품

한계 인지하기

  • URL 캡처가 실패한 후 합성 대체물을 만들어낼 수 없습니다
  • 캡처가 사용할 수 없는 경우 페이지를 임의로 만들거나 재구성하지 마십시오
  • 마케팅과 무관한 의도 또는 단순한 '영상 만들어줘' 요청은 먼저 /hyperframes를 거칩니다

제공할 사항

  • 붙여넣은 스크립트 또는 브리프user_script.txt로 그대로 저장됩니다. VO_MODE(축어적 또는 재구성)는 BRIEF.md에서 가져옵니다. 인텐트 레이어는 스크립트가 도착하면 한 번 질문합니다.
  • 음성 선호도요청에서 음성, 성별, 톤을 지정하면 일치하는 voice id를 선택하고 --voice와 함께 전달합니다.
  • 스타일 프리셋 선택BRIEF.md에 style_preset이 지정된 경우, 사용자가 인텐트 레이어에서 쇼케이스를 보고 직접 선택한 것입니다.
  • 음악 분위기 또는 없음BGM 분위기는 스토리보드의 music: 필드에서 가져옵니다. music: none은 BGM을 끕니다. 완전 무음 상태의 표준 표시는 music: none과 SCRIPT.md 없음의 조합입니다.

03 스킬 내부

product-launch-video Skill이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트를 위해 설정하는 7가지 구체적 지침, 기본값, 한도 — 결과를 바꾸는 파일의 부분

  1. 설정을 벗어나기 전 로그인 상태 표시

    hyperframes auth status를 실행하고 그 출력을 그대로 전달합니다. 이는 음성/BGM이 HeyGen 또는 로컬 엔진을 사용할지를 보여줍니다. 종료 코드 1은 실패가 아니라 정상적인 로그아웃 상태입니다.

  2. 지정된 룩을 디자인하기 전 카탈로그 검색

    브리프가 지정하는 각 룩(CRT 스캔라인, 글리치, 필름 그레인)에 대해, STORYBOARD.md에 작성하기 전에 hyperframes catalog --query를 실행합니다.

  3. 기간 동기화는 기계적으로 처리하며, 절대 수동으로 편집하지 않습니다

    실제 음성 길이가 우선합니다. 무음 프레임은 추정치를 유지합니다. 오디오 작업이 끝나면 audio.mjs sync-durations를 실행합니다. 스토리보드에서 동기화된 기간을 절대 수동으로 편집하지 마십시오.

  4. 작업자는 자신의 프레임 HTML만 작성합니다

    각 서브 에이전트는 자신의 패킷과 frame.md만 읽고, compositions/frames/NN-*.html만 작성하며, STORYBOARD.md는 절대 수정하지 않습니다.

  5. 풀블리드 배경은 클립 레이어에, 루트에는 두지 않습니다

    프레임의 배경(색상 필드, 그라디언트, 그리드)은 자체적인 전체 길이의 배경 클립입니다.

  6. 캡처 실패는 완전한 중단입니다

    0이 아닌 종료 코드, JSON ok: false, 또는 capture/BLOCKED.md는 캡처 경로를 중단시킵니다. 이유를 보고하고 부분 스크린샷, DOM, 또는 자산을 사용하지 마십시오.

  7. 렌더링 전 항상 검사를 통과시킵니다

    프레임 중간 지점과 모든 컷에서 lint, check, snapshot을 실행합니다. 레이아웃 오류와 팝을 점검합니다. 렌더링 전에 눈에 보이는 불연속성을 수정하십시오.

04 활용하기

Claude Code 또는 Codex에 product-launch-video 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용자의 에이전트에 product-launch-video 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill product-launch-video

skills/product-launch-video/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소에서 자체 경로를 문서화할 수도 있습니다.

스킬에 첫 번째 모션 및 비디오 작업 제공

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt
Create a product launch video for [our new SaaS platform at example.com]. Show the dashboard interface, key collaboration features, and real-time sync. Use a confident professional voice and keep it under 60 seconds with energetic background music.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • hyperframes lint를 실행하여 조립된 인덱스와 프레임을 검증
  • 렌더링 전 구조를 검증하기 위해 hyperframes check 실행
  • 프레임 중간 지점과 모든 컷에서 스냅샷을 찍고 이미지를 비교하여 팝 확인
  • 삽입된 전환이 올바른지 확인하기 위해 전환 검증
  • 캡처 JSON이 ok: true를 보고했고 BLOCKED.md가 존재하지 않는지 확인합니다
  • 지속 시간을 동기화하고 조립하기 전에 3.1단계 오디오가 끝날 때까지 대기합니다

OpenDesign에서 SKILL.md 링크를 통해 product-launch-video를 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author
HeyGen
Repository
github.com/heygen-com/hyperframes 브랜치 main
스킬 파일
skills/product-launch-video/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 558c11b
License
Apache-2.0 LICENSE에서 확인.
리포지토리 스타
49,761 이 카탈로그에 9개의 스킬을 포함하는 전체 heygen-com/hyperframes 저장소에 대해 2026-09-14에 촬영한 GitHub 스냅샷입니다. product-launch-video에 대한 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

  1. Product Launch to HyperFrames오케스트레이터의 역할과 URL에서 MP4까지 이어지는 7단계 워크플로 개요
  2. 0단계: 설정인텐트 레이어에서 브리프를 확인하고, HyperFrames 프로젝트를 초기화하며, 로그인 상태를 표시합니다
  3. 1단계: 에셋 캡처URL에 대해 hyperframes capture를 실행하거나 붙여넣은 스크립트로 캡처 없는 경로를 구성합니다
  4. 2단계: 디자인 시스템프레임 프리셋을 선택하고, 브랜드 토큰을 리믹스하여 적용하며, 캡션 스킨을 복사합니다
  5. 3단계: 스토리보드 및 스크립트STORYBOARD.md와 SCRIPT.md를 작성하고, 리뷰 루프를 실행하며, 계획 승인을 받습니다
  6. 3.1단계: 오디오TTS 내레이션과 단어 타이밍을 생성하고, 분위기에 맞는 BGM을 가져와 백그라운드에서 실행합니다
  7. 4단계: 프레임 시각 디자인협업 시에는 스케치 보드를 사용하고, 시간 코드가 있는 샷 시퀀스와 모션을 인라인으로 추가합니다
  8. 5단계: 프레임 빌드지속 시간을 동기화하고, SFX를 가져오며, 프레임별로 서브 에이전트를 배치하고, 인덱스와 캡션을 조립합니다
  9. 6단계: 마무리전환 효과를 삽입하고, lint/check/snapshot을 실행하며, 리뷰를 위해 일시 중지한 뒤 MP4를 렌더링합니다
  10. 빠른 참조형식, 백그라운드 스크립트, 단계별 문서 참조표
스킬 자체 설명
"제품 또는 마케팅 URL, 붙여넣은 스크립트 또는 브리프를 제품 출시/프로모션 비디오로 전환합니다 — SaaS 프로모션, 기능 공개, 제품 데모, 앱 및 회사 런칭. 사용자가 제품을 마케팅하거나, 출시하거나, 홍보하거나, 공개하려는 경우 사용합니다. 모든 상업 URL의 기본값입니다. 웹사이트의 사이트 투어/쇼케이스도 여기로 라우팅됩니다 — 브리프는 그대로 보여주기 의도를 담습니다. 불명확한 경우 → /hyperframes."

SKILL.md의 프론트 매터 설명입니다. 전체 파일은 약 32,560자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

product-launch-video 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

이 스킬을 사용하려면 HeyGen 계정이 필요합니까?

필수는 아닙니다. 워크플로는 설정 단계를 벗어나기 전에 로그인 상태를 표시하고, 음성 및 BGM이 HeyGen 또는 로컬 엔진을 사용할지 여부를 보고합니다. 로그아웃 상태에서는 사용 가능한 로컬 엔진(TTS용 Kokoro)을 통해 계속 진행됩니다. 로그인하면 HeyGen의 Starfish 음성과 음악 라이브러리를 사용할 수 있습니다.

이 도구는 어떤 비디오 형식과 길이를 제작합니까?

BRIEF.md의 destination 필드에서 파생된 가로 1920x1080, 세로 1080x1920, 또는 정사각형 1080x1080 중 하나입니다. 지속 시간은 브리프의 length 필드를 기준으로 대략적인 예상치로 설정되며, 조립 단계에서 최종 편집본이 그 기준에 얼마나 부합하는지 보고합니다. 최종 응답에는 MP4 경로와 실제 지속 시간이 명시됩니다.

Product Launch Video

실제 모션 및 비디오 작업에서 product-launch-video를 실행합니다.

OpenDesign를 다운로드하고, SKILL.md 링크에서 product-launch-video를 가져온 다음, 위 프롬프트를 붙여넣고 결과 전에 계획을 읽습니다.

터미널
npx skills add https://github.com/heygen-com/hyperframes --skill product-launch-video

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원