HyperFrames 디자인
브랜드, 페이싱, 스타일 및 구성 방향. /hyperframes/core의 기술 계약이 마련된 후에 사용합니다.
모션 패턴, 씬 블루프린트, 전환 및 CSS 마커 효과는 hyperframes-motion을 사용하세요. 이 스킬은 의도적으로 애니메이션을 다루지 않습니다.
중요하지 않은 구성의 경우 이 두 가지를 먼저 읽으세요. 웹 직관을 대체합니다:
references/house-style.md— "프롬프트를 해석하고 실제 콘텐츠 생성", 게으른 기본값 목록, 배경/전경 레이어 레시피. 문자 그대로의 재스타일을 _개념_으로 바꾸는 요소입니다.references/video-composition.md— 비디오 매체 밀도, 스케일, 전경 메타데이터 (데이터 바, 등록 마크, 고정폭 읽기 값, 씬당 8-10개 요소 등 '제작된, 생성되지 않은' 세부 사항).이 두 가지를 건너뛰는 것은 일반적이고 웹 페이지처럼 보이는 결과물의 가장 큰 원인입니다. 아래 라우팅 테이블에서 선택적 행이 아닙니다. 한 줄 편집을 넘어서는 작업이라면, 색상을 고르거나 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
- 기성 프레임 프리셋 (선택 사항) →
- 여러 씬 작업의 경우, HTML을 작성하기 전에 비트와 리듬을 계획하세요 →
references/beat-direction.md. 씬 전환의 경우,hyperframes-motion/transitions/로 이동하세요. - 모션 작업이 많은 경우,
references/motion-principles.md(상위 수준 가드레일)를 읽은 후 원자적 규칙을 위해hyperframes-motion으로 이동하세요.
라우팅
| 주제 | 읽을 파일 |
|---|---|
기성 프레임 프리셋을 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 |
스크립트
scripts/contrast-report.mjs— 렌더링된 프레임의 대비 경고를 검사합니다.scripts/package-loader.mjs— 번들 크리에이티브 도구를 위한 지원 스크립트.
리포지토리 루트에서 명시적 경로로 실행하세요.
애니메이션 분석(animation-map.mjs)은 hyperframes-motion/scripts/에 있습니다.
경계
/hyperframes/core기술 규칙을 재정의하지 마세요.- 최소한의 기술 구성을 위해 디자인 시스템을 요구하지 마세요.
- 요청이 명시적으로 추가를 요구하거나 먼저 확장을 제안하지 않는 한, 추가 씬, 캡션 또는 전환을 추가하지 마세요.
- 레시피 참조를 작업별로 유지하세요. 간단한 편집을 위해 모든 참조 파일을 읽지 마세요.