HyperFrames Creative
브랜드, 페이싱, 스타일, 나레이션 및 컴포지션 방향. 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기술 규칙을 재정의하지 마십시오.- 최소 기술 컴포지션에 디자인 시스템을 요구하지 마십시오.
- 추가 씬, 나레이션, 음악, 자막 또는 전환을 추가하지 마십시오. 요청에 명시되거나 먼저 확장을 제안하지 않는 한.
- 레시피 참조는 작업별로 유지하십시오. 간단한 편집을 위해 모든 참조를 읽지 마십시오.