Communitygithub.com

JaviMaligno/agilabs-video-studio

게시된 블로그 글을 AGILabs 브랜드의 짧은 내레이션 애니메이션 수직 설명 동영상(30-60초, 1080x1920)으로 변환하고 Remotion으로 로컬에서 렌더링합니다. 기사나 블로그 게시물로 동영상, 릴, 쇼츠 또는 설명 동영상을 만들거나 이 플러그인으로 만든 동영상을 다시 렌더링할 때 사용합니다.

agilabs-video-studio란 무엇인가요?

이 스킬은 블로그 글로부터 완성된 MP4 동영상까지 전체 파이프라인을 조율합니다. 기사 선택, 스크립트 작성, 타임라인 제작, 사실 확인, TTS 내레이션, 렌더링 및 전달을 일관된 워크플로우로 관리합니다. 주요 기능으로는 사실 확인 테이블(factcheck.md)을 통한 모든 숫자 및 주장의 기사 출처 추적, 원문 스타일을 유지한 1인칭 내레이션, AGILabs 브랜딩 준수, 각 단계에서의 승인 게이트, 그리고 Remotion을 사용한 로컬 렌더링이 있습니다. Claude Code 플러그인으로 설치되며, expliner-script, expliner-animation, narration의 세 가지 하위 스킬에 의존합니다. 기존 동영상을 다시 렌더링할 때는 소스 파일만 수정하고 node_modules나 출력 파일은 건드리지 않으며, TTS는 변경된 대사만 다시 생성하여 효율적입니다. lint, 테스트, 오디오 QA, 스틸 이미지 검토를 통해 품질을 보장합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/JaviMaligno/agilabs-video-studio/tree/HEAD/skills/article-video

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

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

문서

기사 동영상

기사로부터 완성된 MP4까지 전체 경로를 조율합니다. 다른 스킬들은 세부 내용을 담고 있으며, 필요한 단계에서 로드하세요:

  • explainer-script: 스크립트 작성 및 각 장면에 맞는 시각 자료 선택.
  • explainer-animation: 컴포넌트 카탈로그, 타임라인, 맞춤형 컴포넌트, 스틸 이미지.
  • narration: TTS (Cartesia, Kokoro 대체), 발음, 오디오 QA.

Remotion 프로젝트는 플러그인의 template/ 폴더에 있습니다 (플러그인으로 설치된 경우 ${CLAUDE_PLUGIN_ROOT}/template, 플러그인 저장소에서는 skills/ 옆에 위치).

필수 사항

  • 사실 확인. 화면에 표시되거나 음성으로 언급되는 모든 숫자와 주장은 기사의 한 문장에 근거해야 합니다. factcheck.md에 테이블(주장, 등장 위치, 인용된 기사 문장)을 유지하세요. 숫자는 기사가 작성한 그대로 표시합니다: 동일한 반올림, 동일한 단위, "70%" 대신 "14/20". 불일치가 있을 경우 기사가 아닌 타임라인에서 수정합니다. 사실 확인은 내레이션과 화면에 표시된 숫자 및 주장만 다루며, 그 외는 다루지 않습니다. 시각 자료는 말 그대로의 실험 재현이 아닌 임팩트를 위해 선택됩니다: 설명적인 장면(실제 데이터를 자유롭게 재현, 명확성을 위해 마커 배치, 양식화된 메커니즘)은 엄격함이 기사와 그 저장소에 있기 때문에 괜찮습니다.
  • 음성. 내레이션은 기사가 작성된 대로 말합니다: 1인칭("나는 실행했습니다...", "나는 발견했습니다..."), 주장은 기사보다 강하지 않게. 기사가 조건을 붙인다면("이 설정에서", "이 20번의 실행에서") 스크립트도 조건을 붙입니다. 원본보다 더 강력한 표현은 없습니다.
  • 브랜딩. AGILabs만: AGILabs 배지와 javieraguilar.ai. 개인 이름은 카드, 포스터, 캡션 또는 파일 메타데이터 어디에도 없습니다.
  • 승인 게이트. 스크립트가 승인되기 전에는 아무것도 빌드되지 않습니다.

워크플로우

  1. 기사 선택. 지정된 기사를 사용하세요. 지정된 기사가 없으면 게시된 기사를 읽고 각각 제목, 후크 라인, 핵심 숫자(인용), 시각적 아이디어와 함께 2-3개의 후보를 제안하세요. 실험, 명확한 숫자 및 그릴 수 있는 메커니즘이 있는 기사를 선호하세요. 선택하도록 하세요.

  2. 스크립트 작성 explainer-script를 사용하여: 내레이션 라인(영어, 선택적으로 스페인어), 라이브러리 컴포넌트에 매핑되거나 "bespoke"로 표시된 장면별 시각적 아이디어, 모든 숫자에 대한 출처 문장.

  3. 승인을 위해 STOP. 스크립트를 보여주고 기다리세요. 요청 시 수정 사항을 적용하고 다시 보여주세요.

  4. 동영상 폴더 생성. 생성된 파일 없이 템플릿을 복사하세요:

    • 플러그인 저장소 내: examples/<article-slug>/;
    • 다른 저장소에서: ./video/<article-slug>/.
    rsync -a --exclude node_modules --exclude out --exclude public/audio --exclude public/music \
      --exclude .env "${CLAUDE_PLUGIN_ROOT}/template/" "video/<article-slug>/"
    cd "video/<article-slug>" && npm ci
    

    승인된 스크립트를 해당 폴더에 script.md로 저장하세요.

  5. 타임라인 구축 explainer-animation으로: src/settings.ts(articleTitle, voices, subtitles, targetSeconds, poster)를 설정하고 스크립트를 바탕으로 src/timeline.ts를 작성하세요. 스크립트에 표시된 경우 각각의 frameState 테스트와 함께 맞춤형 컴포넌트를 추가하세요.

  6. 린트: npm run lint. 모든 발견 사항(길이, 캡션 속도, 알 수 없는 컴포넌트)을 수정하세요. 컴포넌트가 추가되거나 변경된 경우 npm test도 실행하세요.

  7. 사실 확인 기사와 대조하고 factcheck.md를 작성하세요 (위 참조).

  8. 내레이션: npm run tts, 그 다음 npm run audio-qa (narration 참조). 플래그가 지정된 항목을 들어보세요. npm run lint를 다시 실행하세요: 실제 라인 길이가 추정치를 대체합니다.

  9. 스틸 이미지, 그리고 살펴보기. 장면당 하나의 스틸 이미지와 약 3초마다 하나씩 렌더링하고 모든 PNG를 읽으세요. 브랜드, 안전 영역, 넘치는 항목 없음, 숫자가 기사와 일치하는지, 캡션이 화면의 비트와 일치하는지 확인하세요. 깨끗한 빌드가 프레임이 올바르게 보인다는 증거는 아닙니다.

  10. 렌더링: npm run render (세로 영어). 스페인어 버전은 -- --es, 1920x1080은 -- --landscape. 그런 다음 npm run audio-qa를 다시 실행하여 믹스를 측정하세요(-16 LUFS 통합).

  11. 전달: npm run deliver는 포스터 PNG, SRT 및 out/manifest.json을 작성합니다. 포스터를 확인하세요. MP4 경로와 포스터를 전달하세요; 게시는 별도 단계입니다.

기존 동영상 다시 렌더링

폴더를 열고 node_modules가 없으면 npm ci를 실행한 후 src/timeline.ts 또는 설정을 변경한 다음 6단계부터 반복하세요. TTS는 텍스트가 변경된 라인만 다시 음성으로 변환합니다.

파일 위치

  • 소스(타임라인, 설정, 맞춤형 컴포넌트, script.md, factcheck.md)는 커밋됩니다.
  • out/, public/audio/, public/music/, node_modules/ 및 모든 .mp4/.wav는 커밋되지 않습니다.
  • .env는 TTS 키를 보유하며 커밋되거나 출력되지 않습니다.

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

관련 스킬