HyperFrames 크리에이티브은(는) 무엇을 하나요?
브랜드, 페이싱, 스타일, 내레이션 및 구성 방향을 담당합니다. hyperframes-core에서 기술적 계약이 완료된 후 사용하세요.
모션 패턴, 장면 청사진, 전환 효과 및 CSS 마커 효과는 hyperframes-animation을 사용하세요. 이 스킬은 의도적으로 애니메이션을 포함하지 않습니다.
중요한 구성을 하기 전에 다음 두 문서를 먼저 읽으세요. 웹 인스턴스를 대체합니다:
references/house-style.md— "프롬프트를 해석하고 실제 콘텐츠를 생성"하는 방법, 게으른 기본 목록, 배경/전경 레이어 레시피를 설명합니다. 이 문서가 단순한 문양 변경을 _콘셉트_로 바꿔줍니다.references/video-composition.md— 비디오 미디어의 규모, 깊이, 전경 세부 사항을 다룹니다. 보편적인 요소 개수를 강요하지 않으면서 빈 웹페이지 레이아웃을 피하는 방법을 설명합니다.이 두 문서를 건너뛰는 것은 일반적이고 웹페이지처럼 보이는 출력을 만드는 가장 큰 원인입니다. 아래 라우팅 표에서 선택 사항이 아닙니다. 한 줄 편집 이상의 작업이라면 색상을 선택하거나 HTML을 작성하기 전에 두 문서를 모두 열어야 합니다.
워크플로우
- 프로젝트에 디자인 스펙이 있다면 먼저 읽고 프론트매터 토큰을 브랜드 진리(색상, 글꼴, 간격, 톤, 제약 조건)로 취급합니다. 읽을 파일(우선 순위
frame.md→design.md→DESIGN.md)과 파싱 방법(프론트매터 = 규범, 본문 = 맥락)은references/design-spec.md에 정의되어 있습니다. 해당 문서에 따라 해결하고 로드하세요. - 디자인 스펙이 없고 사용자가 시각적 방향을 요청한다면 다음 경로 중 하나를 선택하세요.
- 기성 프레임-프리셋(선택 사항) →
frame-presets/(FRAME.md를frame.md로 채택,references/design-spec.md참조) - 명명된 스타일 또는 분위기 →
references/visual-styles.md - 빠른 기본값 →
references/house-style.md - 대화형 선택 →
references/design-picker.md
- 기성 프레임-프리셋(선택 사항) →
- 다중 장면 작업의 경우 HTML을 작성하기 전에 비트와 리듬을 계획하세요 →
references/beat-direction.md. 장면 전환의 경우hyperframes-animation/transitions/로 이동하세요. - 모션 중심 작업의 경우
references/motion-principles.md(상위 수준 가드레일)를 읽은 후 세부 규칙은hyperframes-animation으로 이동하세요.
라우팅
| 주제 | 읽을 문서 |
|---|---|
기성 프레임-프리셋을 frame.md로 채택(선택 사항) | frame-presets/ · references/design-spec.md |
| 기본 팔레트, 모션, 타이포그래피, 의심스러운 경우 게으른 기본값 | references/house-style.md |
| 명명된 스타일 프리셋, 분위기-스타일 라우팅 | references/visual-styles.md |
| 팔레트별 색상 토큰 | palettes/*.md |
| 구성 패턴 — PiP, 텍스트-뒤-대상, 제목 카드, 슬라이드 쇼 | references/composition-patterns.md |
| 통계/인포그래픽 프레젠테이션 | references/data-in-motion.md |
| 개방형 프롬프트의 구조적 확장 | references/prompt-expansion.md |
| 비디오 미디어 밀도, 스케일, 색상, 프레임 구성 | references/video-composition.md |
| 비트별 방향, 리듬 계획, 전환 타이밍 | references/beat-direction.md |
| 작성 후 스펙 검증(색상, 글꼴, 모서리, 간격, 깊이) | references/design-adherence.md |
| 상위 수준 모션 가드레일 및 GSAP 품질 규칙 | references/motion-principles.md |
| 글꼴 선택, 페어링, 렌더링된 비디오 글꼴 가드레일 | references/typography.md |
| 스토리 독트린 — 후크 언어, 증거보다 가치, 청사진으로서의 스토리보드, 출처 추적 가능한 시각 자료 | references/story-spine.md |
| 스크립트 페이싱, 톤, 오프닝, 숫자 발음 | references/narration.md |
| 모션에 매핑된 미리 계산된 오디오 밴드 | references/audio-reactive.md |
스크립트
scripts/contrast-report.mjs— 렌더링된 프레임의 대비 경고를 검사합니다.scripts/extract-audio-data.py— 오디오 반응형 구성을 위해 오디오 밴드를 미리 추출합니다.scripts/package-loader.mjs— 번들 크리에이티브 도구를 위한 지원 스크립트.
contrast-report.mjs는 먼저 현재 프로젝트에서 도우미 패키지를 확인한 다음, 번들된 HyperFrames 패키지 버전을 부트스트랩할 수 있습니다. 번들 CLI/스킬 설치 외부에서 스킬을 실행하고 해당 부트스트랩 버전을 명시적으로 고정해야 하는 경우에만 HYPERFRAMES_SKILL_PKG_VERSION=<version>을 설정하세요.
리포지토리 루트에서 명시적 경로로 실행하세요. 예:
python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>
애니메이션 분석(animation-map.mjs)은 hyperframes-animation/scripts/ 에 있습니다.
경계
hyperframes-core기술 규칙을 재정의하지 마세요.- 최소 기술 구성을 위해 디자인 시스템을 요구하지 마세요.
- 요청에 명시되지 않았거나 먼저 확장을 제안하지 않는 한 추가 장면, 내레이션, 음악, 자막 또는 전환을 추가하지 마세요.
- 레시피 참조를 작업별로 유지하고, 간단한 편집을 위해 모든 참조를 읽지 마세요.