Communitygithub.com

duytienitptit/edit-hyperframe

임의의 텍스트(기사, 메모, 주제, 요약)를 페이스리스 설명 동영상으로 변환합니다. 웹사이트나 실제 영상을 캡처하지 않고, 각 장면에 맞는 타이포그래피, 추상 그래픽, 다이어그램, 데이터 시각화 등 시각 자료를 생성합니다. 주제 설명, 개념 해설, 사용 방법, 리스트 형식 동영상에 적합합니다.

edit-hyperframe란 무엇인가요?

이 스킬은 주어진 텍스트를 '페이스리스(faceless)' 설명 동영상으로 만드는 전문 AI 에이전트 워크플로우입니다. '페이스리스'란 실제 웹사이트나 영상을 캡처하는 대신, 각 장면의 시각적 요소를 타이포그래피, 추상 그래픽, 다이어그램, 데이터 시각화 등으로 창조적으로 구성한다는 의미입니다. 이 스킬은 HyperFrames 프레임워크 위에서 동작하며, 주로 Claude Code, Cursor, Codex 같은 AI 코딩 도구에서 사용되도록 설계되었습니다. 사용자가 텍스트(기사, 메모, 주제 등)를 제공하면, 에이전트가 디자인 시스템 선택, 교육적 스토리 기획, 장면별 스토리보드 및 스크립트 작성, 오디오 생성, 최종 렌더링까지 전 과정을 단계적으로 수행합니다. 각 단계는 명확한 게이트(gate) 조건을 가지고 있어, 사용자 승인이 필요한 단계(0, 3, 6)에서는 중간 점검을 통해 품질을 보장합니다. 이 스킬은 제품 출시나 웹사이트 투어 동영상과 달리, 순수하게 텍스트 기반 설명에 특화되어 있으며, '/media-use' 스킬을 활용해 배경 음악, 음성 해설, 이미지 등을 HeyGen 등의 공식 소스에서 가져옵니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/duytienitptit/edit-hyperframe/tree/HEAD/.claude/skills/faceless-explainer

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

플러그인 설치: 설정 또는 새로 고침 명령 전, 이 스킬이 HyperFrames 플러그인 내에 있을 경우 플러그인 실행 규칙을 따르세요. 독립 설치의 경우 아래 업데이트 지침을 유지합니다.

첫째, 이 스킬을 최신 상태로 유지하세요. 사용자 확인 후 실행: npx hyperframes skills update faceless-explainer. 모든 것이 최신 상태이면 빠르게 아무 작업도 하지 않으며, 그렇지 않으면 이 스킬과 이에 의존하는 핵심 도메인 스킬을 업데이트합니다.

media-use: 오디오/이미지/로고를 소싱하기 전에 /media-use를 호출하여 HeyGen 카탈로그의 BGM/SFX/이미지와 브랜드 로고의 공식 소스를 찾으세요. 기존 에셋을 등록하려면 먼저 --adopt를 실행하세요. /media-use 스킬을 참조하세요. 호스트 앱에서 자체 음악 또는 사운드 효과 도구를 제공하는 경우, 음악 및 사운드 효과에 해당 도구를 사용하세요.

페이스리스 설명 동영상 → 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(프레임당 하나의 하위 에이전트를 파견)를 제외하고 모든 단계를 직접 수행하세요. 디자인 또는 모션 규칙을 여기에 작성하지 마세요. 해당 규칙은 프레임 워커 하위 에이전트, 이 스킬의 로컬 ../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이 없는 경우에만 초기화합니다. 주제에서 케밥-케이스로 <프로젝트> 이름을 지정합니다(예: 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을 사용할지 로컬 엔진을 사용할지, 로그아웃된 경우 로그인 방법을 보고합니다. 하나의 분기를 적용하세요:

  • 협업: 사용자가 로그인하거나 명시적으로 offline / go를 선택할 때까지 기다립니다.
  • 자율: 상태를 알리고 사용 가능한 로컬 엔진을 통해 계속 진행합니다.

오프라인 공급자가 없는 경우 필요한 기능을 조용히 생략하지 말고, 차단 항목을 표면화하세요. 이 결정을 다른 질문에 접거나 키를 저장소별 .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에 복사하고 자체 검증(매핑이 깨지면 exit 1)합니다. 종료 코드 0이 되는 즉시 진행하세요. 사양을 수동 편집하지 마세요.

페이스리스 설명 동영상은 일반적으로 브랜드 색상/글꼴이 없습니다 (tokens.json의 colors/fonts가 비어 있음) → 스크립트는 프리셋 자체 팔레트인 완전한 배송 가능 디자인을 유지합니다. 사용자가 브랜드 색상/글꼴을 명명한 경우에만 실행 전에 tokens.json에 추가하고, 정말 필요한 경우에만 수동으로 frame.md를 조정하세요.

게이트: build-frame.mjs가 0으로 종료되었습니다. frame.md가 명명된 프리셋에서 존재합니다. (프리셋이 제공하는 경우) .hyperframes/caption-skin.html이 캡션 스킨 소스로 존재합니다. 선택한 프리셋이 기본 설정으로 기록되었습니다(--key style_preset --workflow <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에서 설정합니다. 대략적인 예상이며, 어셈블리가 실제 길이를 보고합니다.

설명 동영상 구조(개념 / 방법 / 리스트 / 스토리)에는 story-design.md를, 훅 전략, 명확성 기법, 감정적 비트, 유형-열거형 매핑, 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(여성) (HeyGen) / am_michael (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 오디오 API를 사용하며, TTS와 동일한 ~/.heygen 자격 증명을 사용합니다. 공급자 세부 정보는 ../media-use/audio/references/tts.md를 읽으세요. 호스트 앱의 자체 도구가 음악 또는 사운드 효과를 만드는 경우, 파일을 assets/ 아래에 두고 audio_meta.json 파일에 "source": "host"로 표시하여 나열하세요. 음악은 bgm { "path": "assets/…", "source": "host" }로, 스토리보드에 music: none으로 표시합니다. 사운드는 sfx 항목 { "frame": <n>, "file": "assets/…", "offset_s": 0, "duration_s": <길이>, "source": "host" }로 표시합니다. 모든 오디오 패스는 이를 유지하며, 호스트 사운드가 있는 프레임은 조회된 큐가 없습니다.

내레이션이 없고 SCRIPT.md도 없으면 음성 생성을 건너뜁니다. 스토리보드에 음악 분위기가 있으면 BGM은 여전히 실행될 수 있습니다.

정식 완전 무음 마커(이 오디오 모델을 재사용하는 워크플로우 간 공유): STORYBOARD.md 상단 YAML 블록의 music: none, SCRIPT.md 없음, 그리고 sfx: 큐 또는 호스트 오디오 없음. 이 조합은 프로젝트를 무음으로 표시합니다.

관련 스킬