체인지로그 → 브랜드 영상
입력: 체인지로그 .md (테마 + 항목, 주간 HyperFrames 다이제스트 형식).
출력: 린트-클린, seam-gate-green HyperFrames 프로젝트 projects/active/weekly-changelog-<range>/ 디렉토리. 요청 시에만 렌더링.
필수 로드, 논의 불가: motion-doctrine (+ cut-the-curve,
oversized-cursor (커서가 나타나는 경우), seam-craft) 및 captions-overlay.
이 스킬은 체인지로그 관련 파이프라인을 제공합니다. doctrine은 모션 법칙을 제공합니다.
최우선 지침: 나열하지 말고 시각화하라
모든 테마는 실제 UI의 애니메이션 모의 또는 충실한 유사체로 설명되어야 하며, 경험의 변화를 표현해야 합니다. 텍스트 불릿은 절대 사용하지 마세요. 스크립트를 작성하기 전에 모든 테마/항목을 references/visualization-registry.md를 통해 라우팅하십시오. 레지스트리는 ui-recreate / ui-analog / terminal / checklist 중에서 결정합니다. 텍스트 체크리스트는 정말로 시각화할 수 없는 항목(신뢰성 수정 목록 등)을 위한 최후의 수단입니다.
파이프라인
0 · 이 스킬의 자산에서 프로젝트 부트스트랩 — 논의 불가
구성 HTML을 작성하기 전에 이 작업을 수행하십시오. 건너뛰면 항상 이 스킬의 브랜드가 아닌, 이전에 구축한 유사 프로젝트와 유사한 비디오가 생성됩니다. 이는 이 스킬이 브랜드에서 벗어나는 가장 흔한 원인입니다. 스킬의 자산, 폰트, 스캐폴드는 바로 스킬 그 자체입니다. SKILL.md 프롬프트는 라우터입니다.
mkdir -p project/assets/fonts
cp <SKILL_DIR>/assets/fonts/*.woff2 project/assets/fonts/
cp <SKILL_DIR>/assets/bgm.mp3 project/bgm.mp3
ffmpeg -y -stream_loop 15 -i <SKILL_DIR>/assets/bg-pattern.mp4 -t <TOTAL> \
-vf "scale=1080:1080,fps=30,eq=saturation=0.72,[email protected]:t=fill" \
-an -c:v libx264 -crf 20 -pix_fmt yuv420p project/assets/bg-pattern-<TOTAL>s.mp4
cp <SKILL_DIR>/examples/master-skeleton.html project/index.html
그런 다음 references/build-spec.md를 처음부터 끝까지 읽으십시오(훑어보지 마세요). 이 문서는 모든 장면이 스캐폴드에서 상속하는 브랜드 토큰(TT Norms Pro + ABC Solar Display + TT Norms Mono, 크림색 #f5f6f4, 할당된 녹색 #5ef17c, 녹색 테두리의 유리 카드, kicker/sec-chip 알약 모양, top: 990의 32px 캡션 레일)을 정의합니다.
그런 다음에만 아래 단계 1-6을 시작하십시오. 단계 1-4(파싱, 라우팅, 스크립트, VO)는 스캐폴드에 들어갈 내용을 계획합니다. 단계 5는 이미 복사된 project/index.html 내의 플레이스홀더(<RANGE>, <TOTAL>, <CUT_N>, <DUR_N>, 장면 본문)를 채웁니다. 스캐폴드의 크롬, 폰트, 팔레트 또는 레이아웃 셸을 다시 작성하지 않습니다.
만약 이전 비디오의 index.html을 위해 cp를 사용하려 하거나, 자신만의 @font-face 선언을 작성하거나, 인코딩된 bg-pattern MP4 대신 WebGL 셰이더 배경을 디자인하려고 한다면: 즉시 중단하십시오. 현재 index.html을 삭제하고 master-skeleton 스캐폴드의 cp부터 다시 시작하십시오. 올바른 스캐폴드에서 장면 콘텐츠를 재구축하는 것이 잘못된 스캐폴드에 브랜드를 개조하는 것보다 비용이 적게 듭니다.
1 · 파싱 + 편집 컷
- 추출: 주 범위, 헤드라인 통계(릴리스, 커밋), 테마, 항목.
- 예산: 총 45-60초. 제목 ≤2초, 아웃트로 ≤3.5초, 4개 테마 ≈ 각 9-12초.
- 테마당 하나의 주 시각화 + 최대 3개의 음성 항목만 유지하십시오. 다른 모든 것은 아웃트로의 "전체 다이제스트" 포인터로만 존재합니다. 자르는 것이 작업입니다: 30개 항목이 있는 체인지로그라도 ≤14개의 음성 비트만 생성됩니다.
- 스토리별 테마 순서 지정: 주요 기능 → 제품 표면 → 성능 → 안정성 (다이제스트는 보통 이 순서로 구성됩니다).
2 · 시각화 라우팅
각 테마에 대해 references/visualization-registry.md에서 표면을 선택하고 한 줄을 작성하십시오: theme → surface → 모의가 수행하는 2-4개의 순차적 액션, 각각 스크립트 구문과 연결됨. 레지스트리 표면이 맞지 않고 충실한 유사체도 없다면, 체크리스트 장면입니다. 정직하게 표현할 수 없는 항목을 위해 가짜 UI를 발명하지 마십시오.
3 · 2계층 스크립트 (음성 vs 표시)
references/script-voice.md에 따라 스크립트를 토큰 라인으로 작성하십시오: 대화체 레지스터, 모든 기술 용어는 references/lexicon.json에서 spoken 음성 형태를 가지며 display는 표준 철자를 유지합니다. 캡션은 display를 표시하고, VO는 spoken을 읽습니다. lexicon에 없는 용어는: 중단하고 사용자에게 발음을 물어본 후 lexicon에 추가하십시오. 프로젝트에 script-tokens.json으로 저장하십시오.
4 · VO — Annie (HeyGen, 고정)
# 음성 레이어 텍스트만; words JSON = 음성 텍스트의 기준 시간
# 저장소 기본 경로: changelog-video 스킬은 hyperframes 저장소 루트에서 실행되므로
# 추적된 hyperframes-media TTS 헬퍼를 직접 사용합니다(npx hyperframes
# skills 설치 단계 없음). 스킬을 다른 저장소로 복사한 경우,
# media-use / hyperframes-media heygen-tts.mjs에 대한 자신의 경로로 바꾸십시오.
node skills/hyperframes-media/scripts/heygen-tts.mjs ./vo-spoken.txt \
-o voiceover.mp3 --words vo-words.json \
--voice 330290724a1b470fb63153f34d4c0183 # Annie — 실제 같은 음성 (대체 불가)
heygen CLI ≥0.3.0이 인증되어 있어야 합니다(heygen auth login --oauth).
그런 다음 음성 타임스탬프를 표시 토큰에 다시 정렬하십시오:
node <SKILL_DIR>/scripts/align-captions.mjs \
--tokens script-tokens.json --words vo-words.json --out captions.json
captions.json은 캡션 레일 입력입니다(표시 철자, 음성 타이밍).
정렬 도구는 MISMATCH 경고를 출력합니다. 빌드 전에 모든 경고를 해결하십시오(일반적으로 TTS가 여러 단어로 렌더링하는 철자 문제). 오디오가 시계입니다: 모든 비트 시간은 vo-words.json에서 비롯됩니다. VO 재생성은 모든 seam을 다시 엽니다.
단어 타이밍은 엄격한 게이트입니다. 단계 5로 이동하기 전에 vo-words.json이 비어 있지 않고 각 단어에 start/end가 있는 words: [...] 배열이 있는지 확인하십시오. 만약 비어 있거나(0바이트) 배열이 없는 경우 — TTS 제공자가 오디오는 반환하지만 타임스탬프 페이로드는 반환하지 않는 알려진 실패 모드 — 이것들 없이 진행하지 마십시오. 대체 방법: 로컬 whisper를 사용하여 생성된 오디오를 표시 스크립트에 대해 강제 정렬하십시오:
uvx --from openai-whisper whisper voiceover.mp3 \
--model base.en --language en --word_timestamps True \
--output_format json --output_dir .
# 그런 다음 --words voiceover.json (동일한 형태)으로 align-captions.mjs를 실행하십시오
Whisper는 TTS 렌더링을 잘못 인식할 수 있습니다("gee-sap" → "gsap", "heyjen" → "hey Jen" 등). 캡션은 여전히 script-tokens.json의 display 철자를 사용합니다. whisper는 타임스탬프만 제공합니다. align-captions.mjs가 조인을 처리합니다. 이 대체 방법은 캡션이 있는 빌드와 조용히 캡션이 없는 빌드의 차이를 만듭니다.
5 · 빌드
references/build-spec.md를 정확히 따르십시오: 브랜드 토큰 + 폰트(<SKILL_DIR>/assets/에 번들됨), 애니메이션 배경 인코딩, 장면 스캐폴드, 크롬, 캡션 레일, 장면당 하나의 할당된 녹색 순간. 그런 다음 doctrine 순서: ledger.json (모든 일반 seam cut-the-curve LEFT) → seam-stamp → VO 단어의 내부 비트 → seam-gate 확인.
캡션은 선택 사항이 아닙니다. master-skeleton은 LINES 배열을 읽는 caption-rail IIFE를 제공합니다. 해당 배열을 비워 두는 것은 스타일 선택이 아닌 배송 버그입니다. 단계 6으로 진행하기 전에 captions.json에서 채우십시오:
// caption-rail IIFE에서 "const LINES = /* … */ []"를 다음으로 대체:
const LINES = /* captions.json의 내용 */ [
{ id: 0, end: 2.74, w: [["This", 0.0], ["week,", 0.30], …] },
…
];
align-captions.mjs를 건너뛰었거나 LINES가 []인 경우, 단계 6의 프레임 검사가 실패합니다. 스캐폴드에서 #cap-line을 제거하여 무시하지 마십시오.
6 · 게이트 (제시 전에 모두 통과)
node packages/cli/bin/hyperframes.mjs check --caption-zone "x0=0;y0=.90;x1=1;y1=1;severity=error;seek=.02,.06,.10,.14,.18,.22,.26,.30,.34,.38,.42,.46,.50,.54,.58,.62,.66,.70,.74,.78,.82,.86,.90,.94,.98"(또는 저장소 로컬skills/hyperframes-cli/스킬의 설치된hyperframesCLI) — 0 오류 (대비: 희미한 텍스트 ≥ .66 알파; 장면 콘텐츠는 캡션 레일 위에 유지).npx hyperframes@latest를 사용하지 마십시오. 추적된 저장소 로컬 CLI가 이 스킬이 생성하는 구성 계약의 진실 공급원입니다.seam-gate.mjs verify— 0 실패.- 미리보기 서버를 다시 시작하고(번들 캐싱), 원본 comp 페이지에서
__player.seek를 통해 3-4 비트를 점검하십시오. - 사용자가 요청하지 않으면 렌더링하지 마십시오. 요청된 렌더링 후, MP4에서 프레임을 확인하십시오(
ffmpeg -ss <t> … -frames:v 1): 캡션 존재, 배경 비디오 검지 않음, 작거나 멈춘 프레임 없음. - 캡션 존재 게이트 — 하드 실패. VO의 음성 창 전반에 걸쳐 3-4 프레임을 샘플링하고(예: 48초 VO의 경우
t=3,t=15,t=30,t=42) 각 프레임에서top: 990의 캡션 레일이 보이는 텍스트를 렌더링하는지 확인하십시오. 음성 구간의 프레임에서 캡션이 누락된 경우, 빌드는 캡션 없이 배송됩니다. 이를 빨간 게이트로 처리하고 단계 5의LINES채우기를 다시 확인하십시오. 이것이 Jul 13-20 v4 빌드에서 정확히 실패한 부분입니다.
프로젝트 레이아웃
projects/active/weekly-changelog-<range>/
├── index.html # 단일 문서 마스터 (슬라이드로 장면, 스탬프된 seam)
├── ledger.json # 벡터 원장 (seam-stamp 입력)
├── script-tokens.json # 2계층 스크립트 (VO + 캡션의 진실 공급원)
├── vo-spoken.txt # 생성됨: 음성 레이어, 한 줄
├── voiceover.mp3 + vo-words.json + captions.json
├── bgm.mp3 # 사용자가 제공하지 않는 한 <SKILL_DIR>/assets/bgm.mp3 (하우스 트랙)에서 복사
└── assets/fonts/ + assets/bg-pattern-<dur>s.mp4
안티 패턴
| 하지 말 것 | 대신 |
|---|---|
| UI 변경 사항에 대한 불릿 포인트 슬라이드 | 변경 사항을 표현하는 표면 모의 |
| 표현할 수 없는 항목에 대한 가짜 UI | 정직한 체크리스트 장면 |
| TTS 텍스트에서 일반 "JSON"/"CLI" 사용 | Lexicon 음성 형태 사용; 표시는 표준 유지 |
| 캡션에서 음성 철자 사용 | 캡션은 항상 표시 레이어를 렌더링 |
| 알 수 없는 용어 발음 추측 | 물어보고 lexicon에 추가 |
| 모든 체인지로그 항목을 말하기 | 테마당 ≤3개; 나머지는 다이제스트 링크가 처리 |
| 모든 곳에 녹색 악센트 사용 | 장면당 하나의 녹색 순간 (#5ef17c) |
| 이전 비디오의 index.html에서 시작 | 단계 0 — 이 스킬의 examples/master-skeleton.html을 project/index.html에 항상 복사 |
수동 @font-face / WebGL 셰이더 / 사용자 정의 BGM | 단계 0 — 이 스킬의 assets/를 있는 그대로 복사; 스킬의 자산이 곧 브랜드 |
| CloudFront 무효화 없이 배송 | S3 교체 후 배포 E2BSLVSZ7FG3U0에 대해 정확한 경로로 aws cloudfront create-invalidation 실행 — 그렇지 않으면 CDN이 이전 파일을 캐시함 |
스캐폴드에서 LINES 배열을 비워 두고 배송 | 단계 4는 채워진 captions.json을 생성해야 함; 단계 5는 IIFE에 붙여넣어야 함; 단계 6 게이트 5는 렌더링된 프레임에서 캡션을 확인해야 함. 빈 LINES = 캡션 없는 배송 = 재실행 |
vo-words.json 없음 → 캡션 건너뛰고 배송 | 생성된 오디오에 대해 whisper 강제 정렬로 대체; 캡션은 선택 사항이 아님 |