Communitygithub.com

ultimate-claude-render

애니메이션 HTML 장면(GSAP)을 프레임 단위로 렌더링하여 Reels, Shorts, TikTok, YouTube, 광고, 제품 데모 비디오를 제작합니다. 내레이션, 단어별 자막, 사진/비디오 삽입, 실제 앱 화면, 배경 음악, 효과, -14 LUFS 믹싱 및 자동 QA를 지원합니다.

ultimate-claude-render란 무엇인가요?

이 스킬은 Claude가 작성한 GSAP 애니메이션 HTML 페이지를 Chromium headless로 프레임별 캡처하고 ffmpeg로 합성하여 마치 '녹화'한 듯한 완성도 높은 비디오를 생성하는 전문 비디오 렌더링 엔진입니다. 모든 상태가 시간 `t`의 함수로 결정되므로 결과물이 완전히 예측 가능하고 재현 가능합니다. Linux, macOS, Windows에서 동작하며 `marca.json`을 통해 어떤 브랜드(색상, 폰트, 로고)에도 맞출 수 있습니다. '동영상 만들어 줘', '릴스', '광고', '데모', '렌더', '모션', '자막 동기화' 같은 요청이나 이전 영상이 '딱딱하다', '아마추어 같다', '동기화가 안 맞는다', '브랜드 느낌이 안 난다'는 피드백이 있을 때 이 스킬을 사용해야 합니다. 내레이션에 모든 키프레임이 '단어 단위'로 동기화되어 대본만 바꾸면 나머지 장면이 자동으로 조정됩니다. QA는 완성된 MP4의 크기, 색역(BT.709), 정지 프레임, 무음 구간, 음량(-14 LUFS), 피크, 안전 영역 밖 텍스트를 자동 검사합니다.

지원 대상✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/PedroHenrique0713/ultimate-claude-render/tree/HEAD/skills/ultimate-claude-render

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

ultimate claude render

비디오는 상태가 시간 t의 함수인 HTML 페이지입니다. Claude가 장면을 작성하고 엔진이 각 프레임(window.__seek(t))을 요청하여 Chromium headless에서 캡처한 후, ffmpeg이 음성, 배경 음악, 효과와 합칩니다. 아무것도 '녹화'되지 않습니다. 모든 것은 결정적이며 다시 만들 수 있습니다.

저장소는 엔진 + 오디오 스크립트 + 이 스킬로 구성됩니다. 각 사용자의 비디오는 저장소 외부의 프로젝트 폴더에 저장됩니다.

한 줄도 작성하기 전에

  1. ucr doctor를 실행하세요. ffmpeg, Python(numpy/scipy), Chromium이 없으면 정확한 설치 명령어를 알려줍니다.
  2. 저장소를 찾으세요. 스킬은 ucr instalar-skill 명령으로 설치되며 저장소는 클론된 위치에 있습니다(ucr이 PATH에 있거나 node <repo>/bin/ucr.mjs로 실행). 찾을 수 없으면 사용자에게 클론 위치를 물어보세요. 절대 엔진을 다시 구현하지 마세요.
  3. 제작 전에 계획을 세우세요 (비디오는 다시 만들기 비용이 큽니다): 전체 대본, 형식, 브랜드, 사용 가능한 미디어, 숫자 출처, 각 문장에 어떤 내용이 나오는지. 사용자는 각 단계를 승인합니다: 대본 → 스타일 프레임(ucr stills) → 미리보기 → 최종 렌더. 대본과 스타일 프레임이 승인되지 않으면 전체 비디오를 렌더링하지 마세요.
  4. 기존 브랜드부터 확인하세요. 사용자의 브랜드북, 웹사이트, 앱을 읽고 marca.json(색상, 폰트, 로고)을 작성하세요. 절대 아이덴티티를 임의로 만들거나 로고를 재디자인하지 마세요. 템플릿 같은 클라이언트 자료는 거부됩니다: 실제 사진, 색상, 로고를 사용해야 합니다.

워크플로우

ucr novo meu-video --marca <marca-폴더|_modelo|exemplo> --formato vertical
# narracao.txt, projeto.json, cena.html 편집
ucr tudo meu-video          # prep → midia → voz → tempos → batidas → sons → mix → render → QA

개별 단계: ucr prep|midia|voz|tempos|batidas|sons|mix|render|qa <폴더>. 저렴한 확인: ucr stills <폴더> 2,8.5,15 (비디오를 렌더링하지 않고 특정 시점의 PNG 생성). 실시간 미리보기: ucr preview <폴더> --audio.

프로젝트 폴더 구조:

파일설명
projeto.json형식, fps, 브랜드, 음성, 숨, 믹스, 렌더
narracao.txt말하는 대본; 음성, 자막, 장면 타이밍의 기반
cena.html장면 (사용자가 작성)
marca/ 또는 다른 경로의 marcamarca.json + 폰트 + 로고
midia/사진, 비디오, trilha.mp3, sfx/<타입>/
build/, .ucr/, saida/생성 파일; 버전 관리 제외

장면 작성

골격: 저장소의 exemplos/modelo-cena.html 참조. <script> 순서가 중요합니다 (GSAP → marca → projeto → tema → tempos → midia → batidas → motor). 전체 API는 references/motor-api.md에 있습니다. 요약:

  • M.fundo(), M.camera(), M.marca(), M.legendas(F, { chaves: [...] }), M.grande(texto, { t, fim })
  • M.celular(pai, {x,y,B}), M.janela(pai, {...}), M.terminal(pai, {linhas}), M.cursor/clicar/tocar
  • M.foto(pai, 'nome', {...}), M.video(pai, 'nome', { som: true }) (midia/에서, ucr midia 후에 사용)
  • M.T('palavras') = 해당 단어가 발화되는 시점. 모든 것을 음성에 기준으로 고정하고 고정된 초 단위를 사용하지 마세요: 대본의 한 문장을 바꿔도 나머지 장면이 밀리지 않습니다.
  • M.som(t, 'tipo')은 믹스에 효과를 표시합니다. M.batida(t)는 배경 음악의 비트에 맞춰 컷을 당깁니다.

장면의 황금 규칙:

  1. 모든 것은 t에만 의존합니다. 트윈(timeline M.tl), 카운터, 드로잉은 M.ATUALIZAR.push(t => ...)에 넣으세요. setInterval, Date.now(), play()가 있는 <video>, CSS 애니메이션은 사용하지 마세요.
  2. 플랫폼 안전 영역: QA가 안전 영역 밖의 텍스트를 검출합니다 (세로: 상단 14%, 하단 25%).
  3. 정적 장면은 드리프트를 유발합니다. 약 1.5초 이상 정지 상태를 유지하지 마세요 (QA가 측정하고 시청자가 건너뜁니다). M.camera()로 장면을 3D로 흔들 수 있습니다. 어두운 배경에 어두운 카드는 움직임이 없으면 눈에 띄지 않으므로 테두리와 광택을 추가하세요.
  4. 모든 문장마다 화면이 바뀝니다. 새로운 문장, 새로운 이미지 또는 새로운 움직임이 있어야 합니다.
  5. 렌더링 전에: 3~4개 시점에서 ucr stills를 실행하세요. 스크립트 오류(변수 중복, 내레이션에 없는 단어)는 페이지 오류 메시지와 함께 즉시 표시됩니다.

오디오

  • 음성: projeto.json → voz.provedor: edge (무료, 키 불필요, 테스트용, 상업용 아님), elevenlabs, fal, 또는 arquivo (직접 녹음, Deepgram nova-3로 타이밍 추출). 화면 텍스트 = narracao.txt의 내용, 타이밍은 음성에서 가져옵니다.
  • 숨: "respiros": {"2": 1.2} = 인덱스 2의 문장 뒤에 1.2초의 침묵 (이미지가 나타날 시간 확보).
  • 배경 음악: midia/trilha.mp3 (상업용 라이선스 필요!) 또는 "sintetica" (독창적, 라이선스 불필요). 음성 아래에서 자동으로 낮아집니다(ducking).
  • 효과: 합성(whoosh, impact, clique, brilho, subida, obturador, pop, tecla, grave, papel) 또는 midia/sfx/<타입>/의 파일.
  • 마스터: −14 LUFS 및 −1.5 dBTP (Reels/TikTok/Shorts), 최종 파일에서 측정.

세부 사항 및 함정: references/audio.md.

QA 및 전달

렌더는 자체적으로 QA를 실행합니다(saida/<이름> - QA.txt): 크기, 색상(BT.709 태그), 정지 프레임, 검은 구간, 라우드니스, 피크, 안전 영역 밖 텍스트. QA가 녹색이어도 승인된 것은 아닙니다: MP4를 열고 프레임을 보고 들어보세요. QA가 지적한 내용과 사용자가 본 내용을 보고하세요. 직접 확인하지 않고 '완료'라고 선언하지 마세요.

출력물: saida/<이름>.mp4 (전달용, 22 Mb/s) 및 saida/<이름> - leve.mp4 (30 fps, 메시지 전송용).

문제 발생 시

  • 장면이 준비되지 않음 (A cena não ficou pronta): 스크립트 오류 (페이지 오류 메시지가 즉시 표시됨) 또는 오류 없이 <script>/미디어 경로가 잘못된 경우 (90초 타임아웃까지 대기).
  • 렌더링 느림: references/armadilhas.md 참조 (filter blur, backdrop-filter, 전체 화면 blend, 페이지 내 <video>).
  • 특정 구간만 다시 렌더링: ucr render <폴더> --de 30 --ate 38 (매개변수가 동일하면 이전 렌더링 조각 재사용).
  • 긴 렌더링 전: df -h (45초 1080×1920 기준 약 250MB 조각 + 약 145MB 전달 파일).

참고 자료 (필요시 읽기)

  • references/motor-api.md: M.* 전체 API와 예제
  • references/marca.md: marca.json 필드별 설명, 형식, 영역
  • references/audio.md: 음성, 숨, 배경 음악, 효과, 믹스, 라이선스
  • references/receitas.md: 사진, 중간 비디오, 실제 화면, 터미널, 가로, 변형, 팔레트 변경
  • references/armadilhas.md: 지금까지 발생한 문제 (주제별)

관련 스킬