🔖 HyperFrames frame.md
https://t.co/uu03XL0wAy

= 쉽게 얘기하면 design.md를 영상 프레임에 맞춰주는 번역 레이어

HeyGen에서 이걸 새롭게 소개했네요!

design.md는 브랜드 아이덴티티를 웹과 스크린에서 일관되게 유지해주지만..

영상으로 가져가면 에이전트들이 웹페이지나 프레젠테이션처럼 번역해버리는 경우가 많았죠..ㅠ

frame.md는 그 design.md를 16:9 영상 프레임에 맞춰 pacing, scale, dwell, motion까지 고려해서 다시 써주는 스펙이에요 ㄷㄷㄷ

사이트에서 design.md를 업로드하면 바로 변환된 frame.md를 받을 수 있고, 그걸 HyperFrames 프로젝트에 넣으면 영상 제작이 훨씬 자연스러워지네요.

↓

이전 HyperFrames와의 연결!!

기존에 Claude Design + HyperFrames 조합으로 모션 그래픽을 프롬프트 두 줄로 만들 수 있었는데.. 이번 업데이트로 브랜딩 레이어가 더 단단해진 느낌이에요.

HTML + CSS + GSAP 기반의 애니메이션 컴포지션을 MP4로 렌더링해주는 CLI와 에이전트 스킬 세트는 그대로고, 거기에 design.md → frame.md 변환 기능이 추가된 거죠.

npx skills add heygen-com/hyperframes

이걸로 스킬을 설치하면, Claude Code나 다른 에이전트가 frame.md를 이해하고 활용할 수 있게 됩니다요!

"이 브랜드의 design.md로 15초 제품 런치 영상 만들어줘요" 라고 하면, frame.md를 생성하고, HTML 컴포지션까지 자동으로 작성한 뒤 렌더링까지 해주는 흐름이죠.

사이트에서 미리 템플릿을 골라서 테스트해보는 것도 좋고, GitHub에서 직접 스킬 파일을 받아 Claude Design에 드롭하는 방법도 그대로 유효합니다.

이제 design.md 하나로 웹, 앱, 영상까지 브랜드 표현이 일관되게 확장될 수 있겠어요.

AI 에이전트들이 더 많이 브랜드 가이드를 영상 제작에 바로 적용할 수 있게 됨!