brand-cut은(는) 무엇을 하나요?
회사 / URL / 저장소 -> 리서치 -> 브랜드 키트 -> 제품 순간 스크립트 -> 스토리보드 -> (VO) -> 아키타입 빌드 -> (믹스) -> QA -> 렌더 매트릭스 -> 전달
첫 번째 필름을 만들기 전에 LEARNINGS.md를 읽으십시오. 이 문서는 필름이 거부되거나 렌더가 실패한 모든 이유를 정리한 것입니다.
0. 규칙 (필수)
- 모든 장면은 실제 UI가 포함된 구체적인 제품 순간이어야 합니다. AI가 등장할 때는 실제 AI 응답이 화면에 표시되어야 합니다. 추상적인 슬로건은 사용할 수 없습니다.
- 마케팅보다 진실. 코드베이스, 문서 및 실제 앱 화면을 기반으로 구축하십시오. 웹사이트는 톤 파악에만 사용됩니다. 화면의 모든 주장은 출처를 추적할 수 있어야 합니다(
qa/claims.py). - 정확한 로고, 색상은 출처에서 가져오고 절대 근사치를 사용하지 마십시오.
- AI처럼 보이지 않아야 함. 모두 대문자 /
text-transform: uppercase, 이모지, 기울임꼴 디스플레이 세리프, 보라색 AI 그라데이션, 반짝임, 구체, 입자, 렌즈 플레어, 네온 윤곽선, 가짜 UI, 절차적 전화기 또는 집은 사용할 수 없습니다. - 플래시 안전. 약 8초당 최대 한 번의 전체 프레임 플래시, 1초에 3회 이상 플래시 불가.
qa/flashcheck.py가 최종 파일에서 통과해야 합니다. - 사운드. 모든 화면 UI 동작에 디자인된 SFX가 있어야 합니다. 음악은 SFX 및 VO 아래로 덕킹되어야 하며, 비트-펌핑은 허용되지 않습니다.
- 형식은 안전 영역 내의 네이티브 레이아웃이며, 절대 자르지 않습니다. 60fps; 1080p는 4K로 렌더링된 후 다운스케일됩니다.
- 절대 사용자의 허락 없이 게시, 업로드, 발행하거나 크레딧을 구매하지 마십시오.
1. 레이아웃
SKILL.md, LEARNINGS.md 이 파일, 함정들
research/RESEARCH.md 0단계: 회사명 / URL / 코드베이스 -> 브랜드 키트 + 진실 + 실제 UI 캡처
brand.schema.json 브랜드 키트 스키마
brands/demo/ "Tidewell", 가상 브랜드; 새 브랜드를 위해 복사
archetypes/ CONTRACT.md + 30개 장면 템플릿 (scene.html + README.md)
formats/ presets.json (크기, 안전 여백, 렌더 프리셋, 음량) + safe-*.png 오버레이
shared/ hf.js (런타임: 포맷, 선택, 시드 기반 난수), phone.js (포토리얼 폰), type.js, uikit/ (채팅, 알림,
캘린더, 영수증 컴포넌트)
audio/ vo.py (ElevenLabs + 예산 보호), mix.py, music.md, sfx/ (INDEX.md, INDEX.json, 파일들)
qa/ flashcheck.py, framecheck.py, safezone.py, claims.py, vo_diff.py, contact.py, run-all.sh
scripts/ new-film.sh, add-scene.py, set-format.py, set-brand.py, brand-css.py, render-matrix.sh,
save-ref.sh, index-refs.py, shazam.py, xcorr.py, beats.py, peaks.py
templates/ SPEC.md (필름 계약), index.html, project/, structures/
reference/ PATTERNS.md (아키타입 라이브러리 + 법칙), RESEARCH-digest.md, studies/ (18개 릴 분석 + INDEX.md)
examples/ 완성된 샘플 필름 (브랜드 키트, SPEC, 스틸 포함)
요구 사항: Node 18+ (npx hyperframes), Python 3.10+, ffmpeg, uv (uvx는 임시 환경에서 QA 및 오디오 스크립트 실행). 선택 사항: ELEVENLABS_API_KEY (음성 해설용, 없으면 audio/vo.py는 오픈소스 Kokoro TTS로 대체, audio/VOICE.md 참조), 음악 폴더 ($MOTION_LIBRARY/music).
모든 셸이 있는 에이전트에서 작동합니다. 이 파일에서 "서브 에이전트(subagents)"라고 언급된 경우, 에이전트에 해당 기능이 없으면 단계를 순차적으로 실행하십시오. "웹 가져오기(web fetch)"는 에이전트의 가져오기/브라우징 도구 또는 curl을 의미합니다.
2. 파이프라인
- 리서치 (
research/RESEARCH.md). 저장소가 있으면 코드베이스 모드(가장 정확함), 그렇지 않으면 웹사이트 모드, 둘 다 가능하면 둘 다 사용. 출력:brands/<id>/brand.json, 출처가 포함된truths,brands/<id>/assets/ui/의 실제 UI 캡처, 5-8개의 제품 순간. - 브리프. 대상, 형식, 길이, VO 또는 음악 전용 또는 무음, 시청자가 반드시 이해해야 할 한 가지.
- 브랜드 키트.
brands/demo/를 복사하고, 팔레트(9-스톱 glowRamp), 폰트(파일 포함), 로고, UI 캡처, 스토리, 진실, 음성을 채웁니다.brand.schema.json에 대해 검증합니다. - 스캐폴드.
scripts/new-film.sh <brand> <dir> <format> [format...] [--palette id]-> 브랜드 블록(폰트, CSS 변수,window.BRAND), film.json, SPEC.md, 오디오 스텁이 포함된 index.html 생성. 언제든지 재테마 가능:scripts/set-brand.py <dir> <brand> [palette]. 형식 전환:scripts/set-format.py <dir> <fmt>. - 스크립트. SPEC.md 섹션 2: 제품 순간당 한 행 (실제 UI, 화면 텍스트, VO 라인, 증거, 하드 크기 목표). 읽기 제한: 초당 <= 3단어, 줄당 <= 42자, 최대 2줄.
- 먼저 VO (VO 필름).
audio/vo/script.txt, VO 라인당 한 줄, 그 다음python3 audio/vo.py say <dir> --voice <id> --take <name>. 타임스탬프가 있는 한 번의 요청을 만들고, 정렬별로 분할하고, 필러를 자르고 일시 중지를 제한합니다.lines.json은 지속 시간을 제공합니다.qa/vo_diff.py <dir> <take>로 확인하십시오. 예산 보호 장치는 작업 한도를 초과하는 모든 호출을 거부합니다. - 스토리보드는 VO와 비트 그리드 위에 작성됩니다(
scripts/beats.py <wav> <dur>). SPEC.md 섹션 3: 아키타입, 인/아웃, 전환(비플래시 우선, PATTERNS 섹션 4), SFX 이벤트. - 음악. 비트 정렬 창에 맞게 잘린 세 가지 옵션(공개 시 블룸, 로고에서 해결); 선택한 것을 렌더링합니다.
audio/music.md참조. - 아키타입에서 빌드.
python3 scripts/add-scene.py <dir> <archetype> <scene-id> <start> <dur> [--vars JSON], 그 다음 커스터마이즈. 서브 에이전트 사용 시: 장면 그룹당 하나의 빌더, 각각 자신의 파일만 소유하고, 스냅샷에 대한 독립적인 비평가, 그 다음 수정. - 믹스.
audio/events.json(음악, VO 라인,audio/sfx/INDEX.md의 시간 정보가 있는 SFX, 덕킹) ->python3 audio/mix.py <dir>->audio/mix.wav(-14 LUFS / -1 dBTP). - QA. 오류 0개로
npx hyperframes check실행, 드래프트 렌더, 그 다음qa/run-all.sh <dir> <video> <fmt>(framecheck, flashcheck, safezone, claims, 음량, fps).qa/contact.py <video> 10 <prefix>시트를 섹션 0과 비교하여 검토합니다. - 렌더 매트릭스.
scripts/render-matrix.sh <dir> [--4k 16x9]: 형식별로 4K 캡처를 1080p로 다운스케일, 오디오 먹싱, QA 게이트 실행. 먼저 사용 가능한 디스크 공간을 확인하십시오. - 전달. 비디오,
index.html갤러리, 짧은 REPORT.md (내용, 사용된 크레딧, 음악 및 음성 대안, 부족했던 점)가 포함된 폴더. 사용자에게 엽니다.
3. 형식 (formats/presets.json)
| id | 캔버스 | 안전 여백 (상/하/좌/우) | 용도 |
|---|---|---|---|
| 16x9 | 1920x1080 | 108/108/192/192 | YouTube, LinkedIn, X, 사이트 |
| 9x16 | 1080x1920 | 270/680/70/140 | Reels, TikTok, Shorts |
| 1x1 | 1080x1080 | 86/86/135/135 | IG/LinkedIn 피드 |
| 4x5 | 1080x1350 | 108/108/86/86 | IG/FB 피드 |
| banner | 1920x600 | 60/60/96/96 | README / 사이트 헤더 스트립 (무음 루프) |
장면은 window.BRAND.format을 읽고 형식별로 레이아웃을 분기합니다([data-fmt="9x16"]). 짧은 쪽은 항상 1080px이므로 px 크기가 일관되게 유지됩니다. 세로 형식에서는 히어로를 확장합니다.
4. 아키타입 (자세한 내용은 reference/PATTERNS.md 참조)
glow-field (A01, 전체 필름 WebGL 라이트) | glass-slab (A02, 실제 스트리밍 응답이 있는 AI 패널) | glass-tile-click (A03) | word-blur-in (A04) | tracking-collapse (A05) | chip-marquee (A06) | status-stack (A07, 참조 구현) | wordmark-lockup (A08) | phone-tunnel (A09) | drum-wheel (A10) | card-carousel (A11) | network-lines (A12) | composer-send (A13) | card-burst (A14) | checklist-fix (A15) | orbit-chips (A16) | list-swap-toggle (A17) | object-launch (A18) | brutal-type (A19) | icon-ring (A20) | calendar-pick (A21) | product-hero (A22) | chat-thread (A23) | container-morph (A24) | notification-pile (A25) | docusign-sign (A26) | stripe-paid (A27) | logo-sting (A28) | branch-tree (A29) | counter-pill (A30) | logo-wheel (A31, 루핑 "작동 대상" 캐러셀).
필름 구조 S1-S8 (SaaS 설명, 13초 세로, 프리미엄 폴리시 체크리스트, 다크 시네마틱, Figma 쇼케이스, 그라데이션 오프너, 수제 스팅, 증명 플레이트)는 PATTERNS.md 섹션 5에 있습니다. 계약: archetypes/CONTRACT.md (브랜드 중립 CSS 변수, window.BRAND, 인스턴스별 변수, 형식 네이티브, 플래시 안전, README의 SFX 큐).
5. 새 레퍼런스 릴 연구
scripts/save-ref.sh <url>은 yt-dlp로 릴을 다운로드하고 2fps 개요 + 노래 ID를 만듭니다.scripts/index-refs.py는 인덱싱합니다.- 2초당 10fps 스트립과 주요 순간의 네이티브 fps 실행을 구축합니다. 프레임당 하나의 요소를 추적하여 이징을 명명합니다.
scripts/beats.py로 비트 그리드를 만듭니다. 팔레트 헥스 코드. 플래시 프로필을 위한 프레임당 휘도. reference/studies/<id>.md작성: 샷 목록, 요소별 구성, 카메라, 이징 숫자, 전환, 유형, 팔레트, 깊이, 사운드, 카피 구조, AI가 아닌 이유, AI로 만드는 요소, 아키타입. 기존 18개 연구가 작업 예시입니다.
6. 검증된 룩
- 글로우 (A01): 하나의 WebGL 셰이더; 스칼라 필드 -> 9-스톱 램프, 노이즈 워프, 디더; GSAP 프록시 트윈으로 구동되는 모노톤-허마이트 키프레임 테이블의 유니폼.
- 글래스:
backdrop-filter: blur(22px) saturate(1.5) brightness(1.15), 마스크-컴포지트를 통한 그라데이션 베벨, 내부 하이라이트 및 음영, 컨택트 섀도우, 모션 시 하나의 광택. - 타이포: 500 무게의 그로테스크, 단어당 블러 인 14 -> 0px, 스케일 1.06 -> 1, power3.out, 줄 재중앙 정렬, 연속 당김.
- 실제 UI: 제품의 컴포넌트를 소스 또는 캡처에서 HTML/CSS로 재현합니다(
shared/uikit/가 시작점).HF.phone은 화면을 포토리얼 폰에 매핑합니다.