스킬 자체의 표현으로
HyperFrames 비디오를 위한 애니메이션 이외의 크리에이티브 디렉션으로, hyperframes-core의 기술 계약이 마련된 이후에 사용합니다. 디자인 스펙 파싱(브랜드 진실로서의 frontmatter가 포함된 frame.md / design.md), 팔레트, 타이포그래피, 내레이션, 비트 계획, 오디오 반응형 비주얼, 컴포지션 패턴, 브랜드 결정을 다룹니다.
중요한 작업에서는 두 개의 참고 문서가 일반적인 웹 감각을 대체합니다: house-style.md는 프롬프트를 해석하고 배경/전경 레이어 레시피로 실제 콘텐츠를 생성하는 방법을 설명하며, video-composition.md는 빈 웹페이지 레이아웃을 피하기 위해 비디오 매체의 스케일, 깊이, 전경 디테일을 정의합니다. 원자적 모션 패턴, 장면 블루프린트, 전환, CSS 마커 효과의 경우 hyperframes-animation을 대신 사용하십시오.
산출물
- 비디오 매체 스케일, 깊이 패턴, 브랜드에 맞는 색상 및 타이포그래피를 사용한 HTML 컴포지션
- 렌더링된 프레임의 접근성을 점검하는 contrast-report.mjs의 대비 보고서
- 오디오 반응형 컴포지션을 위한 extract-audio-data.py의 오디오 밴드 데이터 파일
작동 방식
- 01디자인 스펙을 먼저 읽으십시오
프로젝트에 frame.md, design.md, 또는 DESIGN.md가 있는 경우 먼저 읽고, frontmatter 토큰을 색상, 폰트, 여백, 톤, 제약 조건에 대한 브랜드 진실로 취급하십시오.
- 02비주얼 방향 경로 선택하기
디자인 스펙이 없는 경우, frame-presets/에서 완성된 프레임 프리셋을 채택하거나, visual-styles.md에서 명명된 스타일을 선택하거나, house-style.md의 빠른 기본값을 사용하거나, design-picker.md를 통해 대화형 선택을 실행합니다.
- 03HTML 작성 전 비트를 계획하십시오
멀티 씬 작업의 경우, HTML을 작성하기 전에 beat-direction.md를 참조하여 리듬과 타이밍을 계획하십시오. 씬 전환의 경우 hyperframes-animation/transitions/로 이동하십시오.
- 04모션 가드레일을 적용하십시오
모션이 많은 작업의 경우, 먼저 motion-principles.md에서 상위 수준의 가드레일을 읽은 다음 원자적 모션 규칙을 위해 hyperframes-animation으로 이동하십시오.