플러그인 설치: 설정 또는 업데이트 명령을 실행하기 전에 이 기술이 HyperFrames 플러그인 내에 있을 경우 플러그인 설치 규칙을 따르세요. 독립 실행형 설치는 아래 업데이트 지침을 유지합니다.
먼저, 이 기술을 최신 상태로 유지하세요 — 실행 전 사용자에게 확인:
npx hyperframes skills update faceless-explainer. 모든 것이 최신 상태이면 빠르게 아무 작업도 하지 않습니다. 그렇지 않으면 이 기술과 이 기술이 의존하는 핵심 도메인 기술을 사용하기 전에 업데이트합니다.
media-use: 오디오/이미지/로고를 가져오기 전에
/media-use를 호출하여 HeyGen 카탈로그의 BGM/SFX/이미지와 공식 출처의 브랜드 로고를 확인하세요. 기존 자산을 등록하려면 먼저--adopt를 실행하세요./media-use기술을 참조하세요. 호스트 앱이 자체 음악 또는 사운드 이펙트 도구를 제공하는 경우 음악 및 사운드 이펙트에 해당 도구를 사용하세요.
Faceless Explainer to HyperFrames
이 기술을 사용하여 텍스트 본문을 설명 동영상으로 변환하세요: 디자인 시스템을 선택하고, 교육 스토리를 계획하고, HyperFrames에서 프레임별로 구축합니다. Faceless는 모든 시각 요소가 다운스트림에서 생성된다는 것을 의미합니다 — 캡처 단계나 실제 자산 인벤토리가 없습니다.
진입점은
/hyperframes입니다. 당신은 오케스트레이터입니다. 각 단계를 실행하고, 게이트를 확인한 다음에만 계속 진행하세요. 이 기술은 제품이나 캡처할 웹사이트 없이 텍스트로 주제를 설명하기 위한 것입니다. 다른 의도, 단순히 "동영상 만들어줘", 또는 불확실한 경우 → 먼저/hyperframes를 읽으세요 — 의도 레이어가 모든 경로 결정을 소유하며,BRIEF.md없이 여기에 도착한 새로운 생성 요청은 어차피 해당 레이어를 거치게 됩니다(설정의 시작 규칙).
당신은 오케스트레이터입니다. videos/<project>/ 디렉토리에서 작업하세요. 단계를 순서대로 실행하고 각 게이트를 통과한 후에만 계속 진행하세요. 사용자 게이트 단계는 Step 0, Step 3, Step 6입니다. Step 0 전에 ../hyperframes/references/brief-contract.md를 읽으세요 — 게이트 유형과 BRIEF.md의 flow/storyboard가 Step 3/4/6 게이트를 관장하는 모드를 도출하는 방법을 정의합니다. Step 5를 제외한 모든 단계를 직접 수행하세요. Step 5에서는 프레임당 하나의 하위 에이전트를 파견합니다. 디자인 또는 모션 규칙을 여기에 넣지 마세요. 해당 규칙은 프레임 워커 하위 에이전트, 이 기술의 로컬 ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/, 그리고 hyperframes-creative에 있습니다.
워크플로우: Step 0 설정 → hyperframes.json; Step 1 브리프 → capture/extracted/; Step 2 디자인 시스템 → frame.md; Step 3 스토리보드/스크립트 → STORYBOARD.md 및 SCRIPT.md; Step 3.1 오디오 → audio_meta.json; Step 4 시각 디자인 → 강화된 STORYBOARD.md; Step 5 프레임 → compositions/frames/NN-*.html 및 index.html; Step 6 최종 렌더링 → renders/video.mp4.
Step 0: 설정
목표: 확인된 브리프를 가지고 시작하고, HyperFrames 프로젝트를 생성하며, 브리프를 영구적으로 만듭니다.
브리프는 여기서 질문하는 것이 아니라 의도 레이어에 의해 확인됩니다. 시작 규칙, 순서대로: (1) BRIEF.md가 존재함 → 읽고 아무것도 묻지 마세요 — 브리프는 확정되었으며, 그 flow/storyboard가 모드를 도출합니다(브리프 계약 § 1). (2) BRIEF.md는 없지만 프로젝트가 존재함(디스크에 hyperframes.json / STORYBOARD.md) → 스토리보드의 프론트매터와 기록된 기본 설정에서 재개하세요. 절반만 구축된 프로젝트를 다시 질문하지 마세요. (3) 둘 다 없음 — 여기에 직접 도착한 새로운 생성 요청 → /hyperframes를 읽고 의도 레이어(references/intent-interview.md)를 실행하세요. 레시피와 기억된 기본값을 확인하고, 이 경로의 질문(../hyperframes/references/routes/faceless-explainer.md)을 수행하며, 잠긴 브리프를 반환합니다. 편집 요청은 이 모든 것을 건너뜁니다 — 편집을 수행하세요.
hyperframes.json이 없는 경우에만 초기화하세요. <project> 이름은 주제에서 케밥-케이스로 지정하세요(예: compound-interest-explained). 작업공간 이름이나 타임스탬프는 절대 사용하지 마세요.
npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=faceless-explainer — init은 설치된 기술을 GitHub의 최신 버전과 비교하고, 오래된 것이 있으면 전역 세트를 업데이트합니다.
초기화 후, <PROJECT_ROOT>를 videos/<project>로 설정하고, 이후의 모든 상대 경로 명령을 해당 디렉토리를 작업 디렉토리로 하여 실행하세요. 아래 명령에서 .는 <PROJECT_ROOT>를 의미합니다. 호출자 디렉토리에 .media, capture 또는 출력 파일을 절대 쓰지 마세요.
초기화 직후 BRIEF.md를 작성하세요(절대 초기화 전에 작성하지 마세요 — init은 비어 있지 않은 디렉토리를 거부합니다): 의도 레이어의 잠긴 브리프, 형태는 ../hyperframes/references/brief-format.md를 따릅니다. <MEDIA_DIR>을 설치된 /media-use 기술 디렉토리로 확인하세요. 그런 다음 각 기본 설정 기반 답변을 node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes .로 기록하세요(brief-format.md가 하위 집합을 명명합니다). 의도 레이어가 레시피를 채택한 경우 node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <name>을 실행하세요. 레시피는 frame.md를 프로젝트로 복사하고(Step 2는 건너뜀) Step 3 초안을 작성할 스켈레톤을 반환합니다. 레시피는 답변을 채우지만 승인은 채우지 않습니다. 검토 게이트는 여전히 실행됩니다.
설정을 넘어 진행하기 전에 로그인 상태를 표시하세요 — npx hyperframes auth status를 실행하고 그 출력을 있는 그대로 전달하세요. 음성/BGM이 HeyGen 또는 로컬 엔진을 사용할지 여부와 로그아웃된 경우 로그인 방법을 보고합니다. 다음 분기 중 하나를 적용하세요:
- 협업: 사용자가 로그인하거나 명시적으로
오프라인/계속을 선택할 때까지 기다리세요. - 자동: 상태를 알리고 사용 가능한 로컬 엔진을 통해 계속 진행하세요.
오프라인 제공자가 없을 때 필요한 기능을 조용히 생략하지 마세요. 장애물을 표면화하세요. 이 결정을 다른 질문에 포함시키거나 저장소별 .env에 키를 쓰지 마세요. 인증 소유권 및 오프라인 폴백: /media-use references/setup-providers.md § 제공자.
게이트: hyperframes.json 및 BRIEF.md가 존재합니다. 기본 설정 기반 답변이 기록되었습니다(브리프 계약 § 2). 로그인 상태가 표시되었습니다(로그인됨, 또는 오프라인으로 계속).
Step 1: 브리프(캡처 없음)
목표: 사용자의 텍스트를 정보 소스로 프로젝트에 통합합니다. 웹사이트 캡처나 실제 자산이 없습니다 — 이것은 얼굴 없는 설명 동영상입니다.
사용자의 전체 입력을 있는 그대로 저장한 다음, 수동으로 합성 캡처 패키지를 생성하세요:
capture/extracted/visible-text.txt— 전체 기사/노트/주제/브리프를 있는 그대로. 이것은 정보의 소스이지 스토리 템플릿이 아닙니다(Step 3에서 재구성함).capture/extracted/tokens.json—{ "title": "", "description": "", "colors": [], "fonts": [] }. 브리프에서title/description을 채우세요. 사용자가 명시적으로 브랜드 색상이나 글꼴을 제공하지 않는 한colors/fonts는 비워두세요 — 제공한 경우 추가하세요(디자인 사전 설정은 관계없이 완전한 팔레트를 제공합니다).
사용자가 스크립트를 붙여넣었거나 자신의 문구를 유지하기를 원하는 경우 user_script.txt로 있는 그대로 저장하세요. VO_MODE(그대로 또는 재구성)는 BRIEF.md에서 가져옵니다 — 스크립트가 도착할 때 의도 레이어가 묻습니다. 브리프에 어떻게든 없는 경우에만 여기서 한 번 묻고 Step 3을 위해 답변을 저장하세요.
npx hyperframes capture를 실행하지 마세요(URL이 없습니다). asset-descriptions.md를 생성하거나 capture/assets/를 채우지 마세요 — 얼굴 없는 시각 요소는 Step 4-5에서 생성되며 캡처되지 않습니다. 유일한 예외는 사용자가 실제 이미지를 제공한 경우입니다. 해당 이미지를 public/<basename>에 배치하고 Step 3을 위해 기록해 두세요.
게이트: capture/extracted/visible-text.txt 및 capture/extracted/tokens.json이 존재합니다. 설명 동영상의 주제와 대상을 하나의 명확한 문장으로 말할 수 있습니다.
Step 2: 디자인 시스템
목표: 제공된 프레임 사전 설정 중 하나를 선택합니다. 스크립트가 이 동영상의 frame.md + 캡션 스킨으로 변환합니다.
BRIEF.md가 style_preset을 명명한 경우(사용자가 의도 레이어의 쇼케이스에서 눈으로 선택함) 그것을 사용하세요. 브리프가 침묵하는 경우에만 판단은 당신의 몫입니다. 그런 다음 한 가지 호출을 합니다 — 어떤 사전 설정: ../hyperframes-creative/references/design-spec.md를 읽고 ../hyperframes-creative/frame-presets/를 탐색하세요. 주제, 톤, 대상에 가장 잘 맞는 외관의 사전 설정을 선택하세요. 그런 다음 실행하세요:
node <SKILL_DIR>/scripts/build-frame.mjs --preset <name> --hyperframes .
스크립트는 나머지를 결정론적으로 수행합니다: 사전 설정의 FRAME.md를 frame.md로 복사하고 capture/extracted/tokens.json의 모든 브랜드 토큰에 리믹스합니다(브랜드 색상을 역할별로 사전 설정의 색상 키에 매핑하고, 사전 설정의 표시 + 본문 글꼴을 브랜드의 것으로 교체). 사전 설정의 캡션 스킨을 .hyperframes/caption-skin.html으로 복사하고 자체 검증합니다(깨진 매핑 시 종료 코드 1). 종료 코드 0이 되는 즉시 진행하세요 — 사양을 수동 편집하지 마세요.
얼굴 없는 설명 동영상은 일반적으로 브랜드 색상/글꼴이 없습니다(tokens.json colors/fonts 비어 있음) → 스크립트는 사전 설정 자체의 팔레트를 유지하며, 이는 완전한 제공 가능한 디자인입니다. 사용자가 브랜드 색상/글꼴을 명명한 경우에만 실행 전에 tokens.json에 추가하고, 매핑이 정말로 필요한 경우에만 이후에 frame.md를 수동으로 조정하세요.
게이트: build-frame.mjs가 종료 코드 0으로 종료되었습니다 — frame.md가 명명된 사전 설정에서 존재합니다. (사전 설정이 제공하는 경우) .hyperframes/caption-skin.html이 캡션 스킨 소스로 존재합니다. 선택한 사전 설정이 기본 설정으로 기록되었습니다(--key style_preset --workflow <이 워크플로우>, 브리프 계약 § 2).
Step 3: 스토리보드 및 스크립트
목표: 텍스트를 승인된 프레임별 교육 계획으로 변환합니다.
../hyperframes-creative/references/story-spine.md(훅 언어, 가치-전-증거, 제안으로서의 스토리보드, 소스 추적 가능한 시각 자료), references/story-design.md, ../hyperframes-animation/blueprints-index.md, ../hyperframes/references/storyboard-format.md, ../hyperframes/references/script-format.md를 읽으세요. 이를 사용하여 STORYBOARD.md를 작성하고, 내레이션이 필요한 경우 SCRIPT.md를 작성하세요. 프론트매터 duration:을 브리프의 length에서 설정하세요 — 대략적인 기대치입니다. 어셈블리는 컷이 그 기대치에 어디에 해당하는지 보고합니다.
설명 구조(개념 / 사용법 / 목록 / 스토리), 훅 전략, 명확성 기법, 감정적 비트, 유형-열거 매핑 및 VO_MODE에 대해 story-design.md를 사용하세요. 동영상의 순서는 입력 텍스트의 단락 순서가 아닌 내러티브 디자인에서 비롯됩니다 — 재정렬, 병합, 생략, 압축하세요. 소프트 가이드로 ../hyperframes-animation/blueprints-index.md의 역할→블루프린트 메뉴를 참고하세요. 각 비트에 대해, 해당 후보 블루프린트가 암시하는 형태로 음성 해설을 작성하고, 하나가 맞을 때 해당 후보 blueprint: ID를 태그하세요. 교육적 진실은 여전히 어떤 비트가 존재하는지를 결정합니다 — 절대 비트를 블루프린트에 맞추기 위해 강요하지 말고, 입증된 형태를 사용할 수 있다고 해서 비트를 발명하지 마세요. 얼굴 없는 시각 요소는 다운스트림에서 생성되므로 프레임은 자산 인벤토리를 전달하지 않습니다: 사용자가 실제 public/<basename> 이미지를 제공하지 않는 한 asset_candidates를 비워두세요. 스토리보드 및 스크립트 참조의 정확한 필수 필드를 사용하세요.
초안 작성 후, 리뷰 루프의 계획 패스를 실행하세요 — ../hyperframes/references/review-loop.md § 1: 계획을 제안으로 제시하고 두 가지 질문을 하세요 — 승인 또는 변경, 그리고 스케치 먼저(권장) 또는 건너뛰기. 피드백은 채팅 응답으로 도착합니다. 승인될 때까지 루프를 반복하세요. 이것은 체크포인트 게이트입니다(브리프 계약 § 1): 자동 모드에서는 물어볼 것이 없습니다 — 동일한 요약을 사전 알림으로 게시하고 진행하세요. 스케치는 빌드에 통합되며, 하나의 질문이 있는 최종 미리보기는 Step 6에 옵니다.
게이트: STORYBOARD.md가 존재합니다. 모든 프레임에 필수 내러티브 필드가 있습니다. 내레이션이 필요한 경우 SCRIPT.md가 존재합니다. 사용자가 프레임별 계획을 승인했습니다(자동: 요약이 사전 알림으로 게시됨).
Step 3.1: 오디오
목표: 승인된 스크립트에서 내레이션, 단어 타이밍, 음악 및 오디오 메타데이터를 생성합니다.
Step 3 승인 후 오디오를 시작하세요. 백그라운드에서 실행한 다음 Step 4로 계속 진행하세요. (로그인 상태는 Step 0에서 이미 표시되었습니다. 엔진은 자동으로 폴백됩니다.)
호출 전에 사용자의 요청에서 내레이션 음성을 선택하세요. 요청이 음성, 성별 또는 톤을 명명한 경우 일치하는 음성 ID를 선택하고 --voice <id>로 전달하세요. 그렇지 않은 경우 파이프라인 기본값은 여성(Marcia) on HeyGen / am_michael on Kokoro입니다. 따라서 "남성 음성"과 같은 요청은 플래그를 전달하지 않으면 자동으로 무시됩니다. 음성 ID는 제공자별로 다릅니다. Step 0의 로그인 상태가 선택한 제공자에 대해 확인하세요: HeyGen(로그인됨)은 node <MEDIA_DIR>/audio/scripts/heygen-tts.mjs --list(또는 GET /v3/voices?engine=starfish)를 통해; Kokoro(오프라인)은 <MEDIA_DIR>/audio/references/tts.md의 음성 테이블(접두사 am_/bm_ 남성, af_/bf_ 여성)을 통해. 사용자가 선호도를 표현하지 않은 경우, 파이프라인 기본값보다 먼저 기억된 음성(브리프 계약 § 2)으로 폴백하고 사용한 음성을 알리세요. 둘 다 명명하지 않은 경우에만 --voice를 생략하세요. 사용자가 이 실행에서 명시적으로 음성을 선택한 경우 기록하세요(prefs.mjs record --key voice).
node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --voice <voice-id> &
오디오 스크립트는 내레이션, 단어 타이밍, HeyGen의 음악 라이브러리에서 BGM 조회 및 타이밍 메타데이터를 처리합니다. BGM 분위기는 스토리보드의 music: 필드에서 비롯됩니다. 이는 HeyGen Audio API를 생성이 아닌 검색에 사용하며, TTS와 동일한 ~/.heygen 자격 증명을 사용합니다. 제공자 세부 정보는 ../media-use/audio/references/tts.md를 읽으세요. 호스트 앱의 자체 도구가 음악 또는 사운드 효과를 만드는 경우, 파일을 assets/ 아래에 넣고 "source": "host"로 표시된 audio_meta.json 파일에 나열하세요: 음악은 music: none이 스토리보드에 있을 때 bgm { "path": "assets/…", "source": "host" }로; 사운드는 sfx 항목 { "frame": <n>, "file": "assets/…", "offset_s": 0, "duration_s": <길이>, "source": "host" }로. 모든 오디오 패스는 이것들을 유지하며, 호스트 사운드가 있는 프레임은 조회된 큐가 없습니다.
내레이션이 없고 SCRIPT.md도 없는 경우 음성 생성을 건너뛰세요. 스토리보드에 음악 분위기가 있으면 BGM은 여전히 실행될 수 있습니다.
표준 완전 무음 표시자(이 오디오 모델을 재사용하는 워크플로우 전체에서 공유됨): STORYBOARD.md 최상위 YAML 블록의 music: none, SCRIPT.md 없음, 그리고 sfx: 큐 또는 호스트 오디오 없음. 이 조합은 프로젝트를 무음으로 표시합니다.