
이 Skill로 렌더링한 결과
프로그레스 스탯 카드 v1.0.0
큰 통계 숫자가 레이블 옆에서 올라가고, 가는 진행 바가 그 값까지 채워지며, 캡션이 서서히 나타납니다.
- 포맷
- 영상 · 16:9
- 길이
- 0:07
7초짜리 수치 강조 장면을 위한 무료 HyperFrames 블록입니다. 큰 숫자가 % 같은 접미사와 함께 목표 값까지 올라가고, 옆에는 레이블이, 아래에는 최댓값 대비 값만큼 채워지는 가는 강조색 트랙과 짧은 캡션이 들어갑니다. 값, 접미사, 최댓값, 레이블, 캡션, 색은 HTML 속 작은 설정에서 정하며 배경은 투명합니다.
2026년 11월 3일 업데이트
받게 되는 것
- 배경이 투명한 7초 길이 1920×1080 스탯
- 카운트업 숫자, 레이블, 진행 트랙, 캡션
- 값을 넣는 작은 설정 블록
잘 맞는 경우
- 설문과 리뷰 결과
- 마일스톤과 목표
- 숫자로 말하는 제품 강점
맞지 않는 경우
- 여러 숫자를 한 번에
- 맥락 없는 숫자
이 Skill에 대하여
/mk-progress-stat 프로그레스 스탯을 만들어 줘. 94% "Would wear it again", 캡션은 "Maison Vey Ambre Nuit, blind test of 200 people", 우리 향수 장면 위에 얹어 줘.
강한 숫자 하나가 광고 전체를 끌고 갈 수 있습니다. 프로그레스 스탯 카드는 그 숫자를 카운트업하고, 최댓값에 얼마나 가까운지 보여 주며, 레이블과 캡션을 붙입니다. 제품 장면 위에 얹어도 될 만큼 깔끔합니다.
작동 방식
- 요청: 숫자, 접미사와 최댓값, 짧은 레이블, 캡션을 에이전트에게 알려 줍니다.
- 채우기: 문구와 색을 블록 변수에 넣고, 텍스트는 레이아웃이 설계된 길이에 가깝게 맞춥니다.
- 렌더링:
npx hyperframes render로 초안을 렌더링해 몇 프레임을 확인한 뒤 최종 MP4를 렌더링합니다. - 재사용: 변수는 작은 JSON 파일 하나에 들어 있어, 다음 버전도 렌더링 한 번이면 됩니다.
팁
- '재구매 의향 94%'처럼 의미가 분명한 숫자를 고르세요.
- 레이블은 서너 단어로 쓰세요.
- 배경이 투명하므로 알파 채널로 렌더링해 내 영상, 사진 또는 단색 배경 위에 얹으세요. 두 가지 명령어는 SKILL.md에 있습니다.
- 근거를 댈 수 있는 실제 수치를 쓰세요.
오픈소스
HyperFrames 레지스트리 블록입니다. HeyGen과 HyperFrames 기여자들이 만들어(heygen-com/hyperframes) Apache License 2.0으로 공개했습니다. 다운로드에는 에셋이 포함된 블록과 Reelity가 작성한 SKILL.md가 들어 있어 에이전트가 바로 채우고 렌더링할 수 있으며, HyperFrames 자체는 npm에서 실행됩니다.
시작 전에 필요한 것
- 준비물
- 숫자, 최댓값, 짧은 레이블, 캡션.
- 의존성
- Node.js 22 이상 — 필수 · FFmpeg — 필수
- 외부 비용
- 없습니다. HyperFrames는 무료 오픈소스이며 내 컴퓨터에서 렌더링됩니다.
- 마지막 테스트
- v1.0.0 —
사용자 리뷰
아직 리뷰가 없습니다. Skill을 설치하고 첫 평가를 남겨 보세요.
자주 묻는 질문
퍼센트가 아닌 숫자도 되나요?
네. 접미사를 K, x로 바꾸거나 비우고, 최댓값을 그에 맞추면 됩니다.
단색 배경 위에도 쓸 수 있나요?
네. 보드나 영상에 맞춰 밝은 글자와 어두운 글자 스타일이 있습니다.
왜 무료인가요?
HeyGen과 HyperFrames 기여자들의 오픈소스 HyperFrames 블록입니다. 그대로 소개하며, 에이전트가 쓸 수 있도록 SKILL.md를 더하고 저희 하우스 브랜드 중 하나인 Maison Vey로 만든 샘플을 함께 올렸습니다.






