Code Video

Code Video은(는) 무엇을 하나요?

<skill>은 이 SKILL.md가 포함된 폴더입니다. 엔진은 <skill>/template/에 있습니다:

• kit.js: 손그림 선, 텍스트 및 키네틱 타입, 카메라, 전환, 픽셀 스프라이트, 미니, 이미지 픽셀화, 비디오 클립, 전화 및 커서 소품, 모션 블러, useFonts
• 크레딧이 있는 룩과 포맷을 위한 스타일 모듈: handdrawn.js, motion.js, sand.js, lyric.js, beat.js (각각 해당 원본의 시그니처 요소를 그립니다)
• 룩 모듈 arcade.js, terminal.js, thermal.js, transit.js, blueprint.js: 하나의 공유 scene API와 각 룩의 시그니처 포맷 장면 (references/looks.md)
• minis-ai.js: AI 관련 주제(Claude, Codex, Gemini, DeepSeek, Grok, Qwen)를 위한 즉시 사용 가능한 미니
• render.mjs: 헤드리스 Chrome으로 병렬 렌더링; audio.wav가 있을 경우 함께 먹싱합니다
• main.js: 장면 스켈레톤

<skill>/scripts/audio.py는 음악과 음향 효과를 합성하고, <skill>/scripts/beats.py는 노래의 비트 그리드를 찾으며, <skill>/scripts/reference_sheet.py는 크레딧이 있는 원본의 프레임을 여러분의 프레임 위에 놓습니다.

필요 도구: node/npm, libx264로 빌드된 ffmpeg, Google Chrome, uv. 누락된 것이 있으면 중단하고 어떤 것이 누락되었는지 알려주세요.

for c in node npm ffmpeg uv; do command -v $c >/dev/null || echo "missing: $c"; done; ffmpeg -hide_banner -encoders | grep -q libx264 || echo "missing: libx264"

0. 룩과 포맷을 묻고, 그 다음 설정을 묻습니다

룩은 단지 그리기 스타일이고, 포맷은 이야기의 구조입니다. 어떤 룩이든 어떤 포맷과도 작동하지만, lyric과 beat 포맷은 사용자가 다른 것을 요청하지 않는 한 자체 룩을 가져옵니다. 먼저 두 가지를 하나의 짧은 메시지로 두 개의 번호 목록(한 질문이 담을 수 있는 것보다 더 많은 옵션)과 함께 물어보세요. 사용자가 이미 언급한 것은 건너뛰고, 주제에서 포맷을 제안하세요 (비교는 대결을, 라인업은 경로 맵을 제안하는 식으로).

룩:

룩	느낌	기본 사운드	가이드	크레딧
1. 손그림 + 8비트 미니 (기본)	장난기, 스케치북	없음	styles/handdrawn.md	@nahiddotai
2. 브랜드 모션 그래픽	깔끔, 공식	없음	styles/motion.md	@digitalstrategyai
3. 샌드아트	따뜻, 이야기 같음	음악과 효과	styles/sand.md	@Michaelzsguo
4. 16비트 아케이드	게임, 에너제틱	칩튠 스타일 음악과 히트	looks.md	오리지널
5. CRT 터미널	개발자, 레트로	키 클릭, 부드러운 패드	looks.md	오리지널
6. 서멀 영수증	인쇄, 촉각	프린터 찍찍, 스탬프	looks.md	오리지널
7. 지하철 노선도	다이어그램, 질서 정돈	차임, 기차	looks.md	오리지널
8. 청사진	기술적, 정밀	제도 사운드	looks.md	오리지널

포맷 (자세한 내용은 references/formats.md 참조):

포맷	구조	크레딧
1. 표준 프로모션 (기본)	훅 → 제목 → 단계 → 큰 숫자 → 엔딩	오리지널
2. 대결	두 옵션 간의 라운드, 그 다음 집계	오리지널
3. 세션	사용 방법을 보여주는 명령어와 출력	오리지널
4. 영수증	항목별 목록, 합계, 스탬프	오리지널
5. 경로 맵	선, 역, 환승역	오리지널
6. 스펙 시트	부품, 각각 하나의 스펙	오리지널
7. 가사 뮤직비디오 (자체 룩)	오리지널 노래, 각 라인당 하나의 사실과 하나의 다이어그램	@goodside
8. 비트 동기화 영상 (자체 룩)	노래의 비트에 맞춰 자른 실제 클립: 벽, 회전목마, 전화	@twoclipping

룩과 포맷을 나열할 때, 각 크레딧이 있는 원본 출처를 링크와 함께 이름을 밝히세요.

그런 다음 한 번의 AskUserQuestion 호출로 설정을 물어보세요. 사용자가 이미 말한 것은 건너뛰고, 권장 옵션을 먼저 두세요.

• 길이: 30초 / 15초 / 45초 / 60초
• 프레임: 16:9 1920×1080 / 9:16 1080×1920 / 1:1 1080×1080 / 16:9 2560×1440
• 캐릭터: 로고 마스코트 + 주제 미니 / 사용자 지정 미니 / 로고 마스코트만 / 없음
• 화면 언어: 이 대화의 언어 / 영어 / 둘 다

캐릭터는 룩의 형태를 취합니다: 8비트 스프라이트, 모래 실루엣, 픽셀 히어로 또는 플랫 아이콘. 미니는 주제에 맞는 조연 캐릭터입니다. 사용자가 캐스트를 지정하면 그것을 사용하세요. 그렇지 않으면 리서치에서 캐스트를 골라 계획에서 제안하세요 ("미니" 참조: references/storyboard.md).

묻지 않은 것에 대해서는 다음 기본값을 사용하고 계획에 명시하세요:

• 30fps (비트 포맷의 경우 모션 블러와 함께 60fps), H.264 MP4, 30초당 최대 10MB (사운드가 있을 때는 약간 더 많음)
• 룩에 나열된 사운드; lyric과 beat 포맷에는 항상 음악이 있습니다. 노래 보컬은 없습니다.

모든 룩과 포맷에 대한 규칙

• 크레딧이 있는 룩은 원본을 재현합니다. 계획하기 전에 가이드를 열고 Read 도구로 <skill>/docs/styles/<key>.jpg의 레퍼런스 프레임을 살펴보세요. 가이드의 시그니처 테이블에 있는 모든 항목이 화면에 나타나야 합니다; 테이블은 메뉴가 아니라 요구사항입니다. 추가 사항은 시그니처 이후에, 절대 대신해서는 안 됩니다.
• 언어: 화면의 모든 텍스트는 레이블, HUD, 가사, 영수증, 터미널 출력 및 엔드 카드를 포함하여 화면 언어 설정을 따릅니다.
• 리서치에서 테마: 팔레트는 브랜드의 실제 색상(CI 페이지, 사이트 CSS 또는 로고 픽셀)에서, 폰트는 가능하면 브랜드에서 가져옵니다. 계획에서 팔레트를 출처와 함께 16진수 값으로 보여주세요. 고정된 재질이나 필드(모래, 어두운 모션 필드, 터미널 그린, 서멀 용지, 청사진 블루)가 있는 룩은 그것을 유지하고 로고, 하나의 악센트 및 엔드 카드에 브랜드를 담습니다.
• 숫자: 모든 숫자에는 출처가 있습니다. 설립일로부터 연령과 "N년"을 계산하고 사이트에서 오래된 "N년" 줄을 복사하지 마세요. UI 판독값이나 예시 통계를 만들지 말고 실제 값을 사용하거나 생략하세요.
• 크레딧: 크레딧이 있는 룩과 포맷은 그 아이디어를 차용한 창작자의 이름을 밝힙니다. 가이드를 변경할 때도 그 크레딧을 유지하세요.
• 자신의 작업을 기다리세요. 긴 Bash 타임아웃(최대 600000ms)으로 렌더를 포그라운드에서 실행하세요. 백그라운드에서 에이전트나 명령을 시작할 때는, 당신의 턴을 끝내기 전에 결과를 기다리세요: 비대화형 실행에서는 아무것도 당신을 다시 깨우지 않습니다.

1. 리서치

references/research.md를 따르세요.

• 비례를 유지하세요: 1분 미만의 비디오의 경우 약 10개의 출처가 있는 사실과 브랜드 자산이면 충분합니다. 읽기 전용 에이전트에게 하나의 좁은 브리프(질문, 사이트, 약 15회 패치 제한)를 주고 독립적인 검색을 병렬로 실행하세요.
• 헤드라인 숫자는 직접 원본 문장과 확인하세요.
• 출처가 숫자에 대해 의견이 다르면 사용자에게 어느 것을 사용할지 물어보세요.

2. 계획 승인

작업 폴더를 만들기 전에 다음을 보여주고 승인을 받으세요:

• 출처 링크가 있는 리서치 요약
• 룩과 포맷, 그리고 그 가이드의 패턴과 타이밍을 사용한 장면 타임라인
• 크레딧이 있는 룩 또는 포맷의 경우: 각 항목을 보여주는 장면과 함께 시그니처 테이블
• 팔레트(16진수 값과 각 값의 출처) 및 폰트
• 룩 또는 포맷에 사운드가 있을 때의 사운드 계획: 템포, 섹션 및 큐
• 사용된 숫자와 버려진 숫자, 자산 목록(로고 URL, 폰트, 캐릭터, 클립, 노래 라이선스), 작업 폴더 위치

사용자가 장면이나 강조점을 변경하면 수정된 흐름을 한 번 다시 설명한 다음 진행하세요.

3. 빌드

cp -R <skill>/template <work-folder>/<name>-video && cd <work-folder>/<name>-video
chmod -R u+w .   # 설치된 스킬이 읽기 전용일 수 있으며, cp는 그 모드를 유지합니다
npm i
bash <skill>/scripts/fetch_fonts.sh assets/fonts
curl -fsSL -o assets/logo_src.png '<공식 로고 URL>'
uv run --with pillow python <skill>/scripts/clean_logo.py assets/logo_src.png assets/logo.png

• index.html: window.VIDEO에서 크기, fps 및 길이를 설정하세요; 가이드가 명명한 폰트를 @font-face로 선언하세요 (그리고 그 폰트들만); 크레딧이 있는 룩 또는 포맷의 경우 스타일 모듈(handdrawn.js, motion.js, sand.js, lyric.js, beat.js)을 로드하거나, 룩 4-8의 경우 하나의 룩 모듈을 로드하세요 (해당 폰트는 useFonts(LOOK.fonts)를 통해 로드됩니다).
• 룩 모듈을 사용하는 경우, scene API와 포맷의 시그니처 장면(references/looks.md 참조)에서 장면을 빌드하세요; LOOK.colors에 브랜드 색상을 설정하세요.
• main.js: THEME, 장면 함수 및 boot(). API는 references/kit-api.md에 있습니다.
• 실제 로고와 워드마크 파일을 사용하세요.
• drawPixels 스프라이트로 로고 마스코트를 그리세요 (또는 샌드 룩의 경우 실루엣으로).
• 미니를 MINIS에 등록하고 drawMini로 그리세요. AI 관련 주제의 경우 minis-ai.js를 로드하고 누락된 캐릭터만 그리세요.
• 초기에 캐릭터 라인업의 정지 프레임 하나를 사용자에게 보여주고 확인을 받으세요.
• 카피와 숫자는 main.js 상단에 상수로 유지하세요. 두 버전(보류 중인 숫자, 두 언어)의 경우 하나의 URL 매개변수로 분기하고 QUERY=lang=ko node render.mjs video …로 각각을 렌더링하세요.
• 사운드: main.js와 동일한 장면 시간으로 audio.json을 작성한 다음, uv run --with numpy --with scipy python <skill>/scripts/audio.py audio.json audio.wav를 실행하세요. 비트 포맷의 경우 먼저 노래에 대해 beats.py를 실행하고 그 그리드에 맞춰 자르세요.

4. QA

references/qa-checklist.md를 따르세요.

1. node render.mjs stills <중간 장면 시간 및 각 전환 직전과 직후 시간>으로 정지 프레임을 렌더링하세요.
2. uv run --with pillow python <skill>/scripts/contact_sheet.py stills <temp-folder>로 리뷰 시트를 만들고 살펴보세요.
3. 발견한 문제를 수정하세요.
4. CRF=25 node render.mjs video <Name>.mp4로 비디오를 한 번 렌더링하고, 전환 프레임과 2초마다 한 프레임을 추출한 다음 파일 크기를 확인하세요. 사운드가 있으면 오디오 스트림, 음량 및 큐 타이밍을 확인하세요.
5. 크레딧이 있는 룩 또는 포맷의 경우, uv run --with pillow python <skill>/scripts/reference_sheet.py <key> <Name>.mp4 <temp-folder>/ref.jpg를 실행하고 살펴본 다음 모든 시그니처 항목을 체크하세요. 누락된 항목을 수정하고 다시 렌더링하세요.

5. 전달

• QA 렌더링이 전달 파일입니다. 수정 후에만 다시 렌더링하세요; 크기 목표를 초과하면 CRF를 27로 올리거나 boot({ noise })를 낮추세요.
• stills/ 및 로그와 같은 중간 파일을 삭제하세요.
• SendUserFile(display render)로 MP4를 보내고 다음을 보고하세요:
  • 스펙: 룩, 포맷, 길이, 해상도, fps, 파일 크기, 사운드
  • 크레딧이 있는 룩 또는 포맷의 원본 출처(링크 포함) 및 시그니처 체크리스트 결과
  • 장면 목록
  • 사용된 사실(출처 링크 포함)
  • 버려진 숫자와 이유, 확인이 필요한 항목
  • 재렌더링 명령어(작업 폴더 내에서 실행해야 한다고 명시)