사용 가이드로 건너뛰기
faceless-explainer작성자 HeyGen

Faceless Explainer 스킬.

모션 및 비디오를 위한 Claude Code 및 Codex skill: 텍스트, 메모 또는 기사를 생성된 장면 비주얼이 포함된 faceless 설명 영상으로 변환합니다.

  • Motion & Video
  • Video
heygen-com/hyperframes · skills/faceless-explainer/SKILL.mdSKILL.md
--- name: faceless-explainer description: Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes. --- ## Step 0: Setup ## Step 1: Brief (no capture) ## Step 2: Design System ## Step 3: Storyboard and Script ## Step 3.1: Audio ## Step 4: Frame Visual Design
2026-09-14에 업스트림 파일에서 읽은 머리말 및 섹션 제목 · 전체 29,476자

01 기능

Claude Code와 Codex에서 faceless-explainer 스킬이 수행하는 작업

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

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

스킬 자체의 표현으로

임의의 텍스트—기사, 노트, 주제, 브리프—를 타이포그래피, 추상 그래픽, 다이어그램, 데이터 시각화 등 새로 만들어낸 장면 비주얼을 갖춘 얼굴 없는 설명 영상으로 변환합니다. 브리프 확인을 통한 설정, (웹사이트 없는) 합성 캡처 패키지, 선택적 브랜드 토큰 리믹싱이 포함된 제공된 프레임 프리셋에서의 디자인 시스템 선택, 내레이션 디자인으로 입력을 재구성하는 스토리보드 및 스크립트, TTS와 BGM을 활용한 오디오 생성, 새로 만든 요소로 시간 코드가 지정된 샷 시퀀스를 추가하는 비주얼 디자인, 하위 에이전트를 통한 병렬 프레임 제작, 최종 렌더링까지 7단계의 조율된 과정을 거쳐 작동합니다.

협업 모드에서 0단계, 3단계, 6단계에 사용자 승인 체크포인트가 있습니다. 얼굴 없는 방식이란 캡처 단계와 실제 자산 인벤토리가 없다는 의미이며, 모든 비주얼은 이후 단계에서 작업자가 새로 만들어냅니다.

산출물

  • 프레임별 교육 계획, 시간 코드가 지정된 샷 시퀀스, 그리고 고안된 초점/역할이 담긴 STORYBOARD.md
  • compositions/frames/NN-*.html — 서브 에이전트가 만든 프레임당 하나의 HTML 구성물
  • renders/video.mp4 — 가로 1920x1080, 세로 1080x1920, 정사각형 1080x1080 중 하나로 최종 렌더링된 영상
예시 프롬프트 보기 ↗

작동 방식

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

    BRIEF.md가 존재하며 모드를 결정합니다 — 이를 읽고 아무것도 묻지 마십시오. 없고 프로젝트가 새로 시작된 경우, 인텐트 레이어를 실행하여 브리프를 확정합니다.

  2. 02
    합성 캡처 패키지 생성

    사용자의 전체 입력을 원문 그대로 capture/extracted/visible-text.txt로 저장합니다(정보의 원천).

  3. 03
    프레임 프리셋 선택 및 frame.md 작성

    hyperframes-creative/frame-presets/에서 주제와 톤에 맞는 기본 제공 프리셋 하나를 선택합니다.

  4. 04
    내러티브 디자인으로 스토리보드 작성

    story-design.md 구조를 사용하여 텍스트를 프레임별 교육 계획으로 전환합니다.

  5. 05
    오디오 생성 및 비주얼 디자인 추가

    TTS, 단어 타이밍, HeyGen 라이브러리의 BGM을 위해 백그라운드에서 audio.mjs를 실행합니다.

  6. 06
    프레임 빌드 및 인덱스 조립

    지속 시간을 동기화하고 프레임별 패킷을 만들어 프레임당 하나의 서브 에이전트를 병렬로 배치합니다. 각 워커는 compositions/frames/NN-*.html을 작성합니다. 자막은 백그라운드에서 빌드합니다.

02 적합성 확인

faceless-explainer Skill 사용 시기

이러한 종류의 모션 및 비디오 작업이 필요한 경우 Claude Code 또는 Codex에서 faceless-explainer skill을 사용합니다. 적합성과 제한 사항은 skill 자체 파일에서 가져왔습니다.

적합한 경우

  • 주제 설명, 개념 분석, 하우투, 목록형 콘텐츠
  • 캡처할 제품이나 웹사이트 없이 텍스트로 주제를 설명하는 경우
  • 모든 비주얼을 새로 고안해야 할 때: 타이포그래피, 추상 그래픽, 다이어그램, 또는 데이터 시각화

한계 인지하기

  • 제품 홍보나 투어를 위해 웹사이트로부터 제작된 영상
  • 캡처 단계나 실제 에셋 인벤토리가 필요한 경우
  • 단순한 "영상을 만들어 줘" 요청이나 불확실한 경우 — 반드시 먼저 인텐트 레이어를 거쳐야 합니다

제공할 사항

  • 임의의 텍스트 소스기사, 노트, 주제, 또는 브리프 — 전체 입력을 원문 그대로 capture/extracted/visible-text.txt로 저장합니다.
  • 선택적 사용자 스크립트사용자가 스크립트를 붙여넣었거나 자신의 표현을 유지하고 싶다면 user_script.txt로 원문 그대로 저장합니다. VO_MODE(원문 그대로 또는 재구성)는 BRIEF.md에서 가져옵니다.
  • 선택적 브랜드 색상 또는 폰트사용자가 명시적으로 브랜드 색상이나 폰트를 제공하지 않았다면 tokens.json의 colors와 fonts는 비워 둡니다.
  • 선택적 음성 선호도요청에 특정 음성, 성별 또는 톤이 명시된 경우 일치하는 음성 id를 선택하고 --voice <id>를 전달합니다.
  • 선택적 실제 이미지사용자가 실제 이미지를 제공한 경우 public/<basename> 아래에 배치하고 3단계를 위해 이를 기록해 둡니다.

03 스킬 내부

faceless-explainer 스킬이 Claude Code와 Codex에 부여하는 규칙

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

  1. 브리프 처리를 위한 초기 규칙

    BRIEF.md가 존재하면 이를 읽고 아무것도 묻지 않습니다 — 브리프는 확정된 것입니다.

  2. 페이스리스 영상에는 캡처 단계가 없음

    npx hyperframes capture를 실행하지 않습니다 — URL이 없기 때문입니다. asset-descriptions.md를 생성하거나 capture/assets/를 채우지 않습니다. 페이스리스 비주얼은 캡처하는 것이 아니라 4-5단계에서 고안됩니다.

  3. 게이트를 두고 단계를 순서대로 진행

    0단계 설정, 1단계 브리프, 2단계 디자인 시스템, 3단계 스토리보드, 3.1단계 오디오, 4단계 비주얼 디자인, 5단계 프레임, 6단계 최종화 순으로 작업을 진행합니다.

  4. Asset_candidates는 기본적으로 비워둘 것

    페이스리스 영상의 프레임에는 자산 인벤토리가 없습니다. 사용자가 실제 public/<basename> 이미지를 제공하지 않은 경우 asset_candidates는 비워둡니다.

  5. 룩을 고안하기 전에 카탈로그를 검색할 것

    브리프에 명시된 모든 룩, 효과 또는 전환에 대해, 이를 STORYBOARD.md에 작성하기 전에 평이한 영어로 npx hyperframes catalog --query를 실행합니다.

  6. 클립 레이어의 풀블리드 배경

    프레임의 배경(색상 필드, 그라데이션, 그리드)은 class="clip"을 가진 전체 길이의 독립된 배경 클립입니다.

  7. 길이 동기화는 기계적으로 처리됩니다

    실제 음성 길이가 우선하며, 무음 프레임은 추정값을 유지합니다. 3.1단계가 끝난 후 audio.mjs sync-durations를 실행합니다. 동기화된 길이는 절대 수동으로 수정하지 않습니다.

04 활용하기

Claude Code 또는 Codex에 faceless-explainer 설치

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

Claude Code, Codex 또는 사용자의 Agent에 faceless-explainer 추가

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

Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill faceless-explainer

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

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

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

Starter prompt
Turn this article about compound interest into a 60-second explainer video for young adults. Use clean modern graphics with invented diagrams showing how money grows over time. Keep the tone approachable and use a female voice for narration. Format: [landscape/portrait/square]. Destination: [Instagram/YouTube/LinkedIn].

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

첫 번째 결과 확인

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

  • npx hyperframes lint를 실행하여 구조를 검증합니다
  • npx hyperframes check를 실행하여 텍스트 오버플로 및 레이아웃 문제를 찾아냅니다
  • 프레임 중간 지점에서 npx hyperframes snapshot을 실행하여 콘택트 시트를 만들고 명백한 깨짐이 있는지 훑어봅니다
  • 캡션 단어(#caption-word-*, .caption-line)의 1-4px text_box_overflow는 무시합니다 — 줄 간격이 촘촘하여 생기는 예상된 오탐입니다
  • text_box_overflow는 캡션 단어가 아닌 프레임 요소(#el-NN-*)를 지칭할 때만 조치합니다
  • 최종 렌더링 전에 transitions.mjs inject와 verify를 실행하여 전환 타이밍을 확인합니다

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

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

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

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

SKILL.md 내부

  1. 0단계: 설정브리프 확인, 프로젝트 초기화, BRIEF.md 작성, 선호도 기록, 로그인 상태 표시
  2. 1단계: 브리프(캡처 없음)입력을 visible-text.txt로 저장, 합성 tokens.json 생성, 웹사이트 캡처나 에셋 없음
  3. 2단계: 디자인 시스템제공된 프레임 프리셋 선택, build-frame.mjs를 실행하여 브랜드 토큰을 프리셋에 리믹스
  4. 3단계: 스토리보드와 스크립트내러티브 디자인이 담긴 프레임별 교습 계획 작성, 제안으로 제시, 승인될 때까지 반복
  5. 3.1단계: 오디오TTS로 내레이션 생성, 단어 타이밍, HeyGen 라이브러리의 배경음악, 오디오 메타데이터
  6. 4단계: 프레임 비주얼 디자인타임코드가 적용된 샷 시퀀스 추가, 고안된 초점/역할, 씬별 인라인 레이아웃과 모션
  7. 5단계: 프레임 빌드재생 시간 동기화, 패킷 빌드, 프레임별 서브 에이전트 디스패치, 인덱스 조립, 캡션 빌드
  8. 6단계: 마무리전환 삽입, lint/check/snapshot 실행, 검토를 위해 일시 정지, 최종 MP4 렌더링
  9. 빠른 참조형식, 캡처된 에셋 워크플로우와의 faceless 차이점, 백그라운드 스크립트, 참조 표
스킬 자체 설명
임의의 텍스트(기사, 노트, 주제, brief)를 얼굴 없는 설명 영상으로 변환합니다. 캡처할 사이트나 영상이 없으므로 비주얼은 장면마다 생성됩니다(타이포그래피, 추상 그래픽, 다이어그램, 데이터 시각화). 주제 설명, 개념 분석, 사용 방법, 목록형 콘텐츠에 사용합니다. 웹사이트에서 제작된 영상이 아닙니다(/product-launch-video — 프로모션 또는 둘러보기). 불명확한 경우 → /hyperframes.

SKILL.md의 전문 설명입니다. 전체 파일은 약 29,476자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

faceless-explainer 스킬에 관한 질문

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

협업 모드와 자율 모드 모두에서 작동합니까?

네. 협업 모드에서는 0, 3, 6단계에서 사용자 승인 게이트가 실행되며 4단계에서 스케치 검토가 있습니다. 자율 모드에서는 동일한 요약이 알림으로 게시되고 스케치는 빌드 과정에 통합되며, 6단계에서 하나의 미리보기 질문만 유지됩니다.

음성이나 음악용 HeyGen 계정이 없다면 어떻게 됩니까?

0단계에서는 진행하기 전에 로그인 상태를 표시합니다. 로그아웃 상태일 경우 오디오는 로컬 엔진(TTS용 Kokoro)으로 자동 전환됩니다. 로그인을 기다리는 협업 모드를 선택할 수도 있고, 사용 가능한 로컬 엔진으로 계속 진행하는 자율 모드를 선택할 수도 있습니다.

출력은 어떤 비디오 형식을 지원합니까?

가로 1920x1080, 세로 1080x1920, 또는 정사각형 1080x1080입니다. 형식은 BRIEF.md의 대상에서 도출되며 스토리보드 프론트매터에서 한 번 설정됩니다.

Faceless Explainer

실제 모션 및 비디오 작업에서 faceless-explainer를 실행합니다.

OpenDesign을 다운로드하고, SKILL.md 링크에서 faceless-explainer를 가져오고, 위의 프롬프트를 붙여넣고, 결과 전에 계획을 읽습니다.

터미널
npx skills add https://github.com/heygen-com/hyperframes --skill faceless-explainer

OpenDesign 데스크톱

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

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

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

macOS, Windows 지원