归藏 product video skill：复用真实产品组件和设计语言，用代码制作软件更新宣传片。包含分镜文案、原创配乐、动作音效与视频渲染，支持 Claude Code 和 Codex。

归藏 product video skill – AI 보조 홍보 영상 제작

개요 – Claude Code 또는 Codex와 같은 AI 코딩 어시스턴트를 위한 '스킬'(플러그인)로, 소프트웨어 저장소(또는 최근 변경 로그)를 짧은 홍보 영상으로 변환합니다. AI는 구조화된 워크플로우를 따라 가장 흥미로운 변경 사항을 추출하고, 제품 자체의 UI 구성 요소를 재사용하며, 카피를 작성하고, 음악을 작곡하거나 합성하고, 효과음을 추가하고, GSAP/Three.js로 모든 것을 애니메이션화하여 최종적으로 MP4와 완전히 편집 가능한 비디오 프로젝트를 내보냅니다.

대상 사용자

사용자	도움되는 이유
제품 개발자: 새 버전을 막 출시하여 소셜 미디어, 뉴스레터 또는 랜딩 페이지용으로 빠르고 브랜드에 맞는 데모 영상이 필요한 경우.
마케팅 팀: 디자이너나 영상 편집 스튜디오를 고용하지 않고도 제품과 똑같이 보이는 영상을 만들고 싶은 경우.
AI 코딩 도구 사용자 (Claude Code, Codex, Vercel Skills): 어시스턴트에 구체적이고 수익을 창출할 수 있는 기능을 확장하고 싶은 경우.

핵심 기능 (README 설명 기준)

변경 로그 마이닝 – 최근 커밋/릴리스 노트를 스캔하여 사용자 중심의 개선 사항을 선택하고 이해하기 쉬운 셀링 포인트로 재작성합니다.
구성 요소 재사용 – 대상 저장소의 실제 UI 구성 요소를 마운트하여 색상, 폰트, 모서리 반경, 레이아웃 등을 유지함으로써 영상이 네이티브하게 느껴지도록 합니다.
스타일 모드 – 세 가지 프리셋:
- repo – 제품의 시각적 언어를 완전히 상속.
- default – 내장된 CodePilot '웜 화이트/차콜' 스타일 사용.
- hybrid – 실제 UI와 사용자 정의 외부 래퍼를 혼합.
스토리보드 생성 – AI가 샷 시퀀스(제목, 기능 클로즈업, 전체 작업 공간, 상세 컷)를 제안하고 누락된 세부 정보를 질문합니다.
애니메이션 엔진 – GSAP가 타임라인을 구동하고, Three.js / canvas가 배경 효과를 제공하며, Playwright가 정적 프레임과 최종 영상을 렌더링합니다.
오디오 파이프라인 –
- 짧은 음악 트랙 생성(사용자 제공 파일, 로컬 음악 생성 모델 또는 저장소에 포함된 코드 합성 예제 사용).
- 동작별 효과음(클릭, 알림, '딩' 신호)을 추가하고 필요 시 음악 볼륨을 자동으로 조절(ducking).
내보내기 – 다음을 생성:
- 업로드 가능한 MP4.
- 전체 비디오 프로젝트 폴더(편집 가능한 소스, 타임라인, 에셋).
- 썸네일 또는 커버 아트를 위한 주요 정적 프레임.
- 구성 요소 소스, 오디오 라이선스 및 모든 폴백 렌더링 요소의 매니페스트.

실행 방법

Skills CLI를 통한 설치 (권장):

npx skills add https://github.com/op7418/guizang-product-video-skill --skill guizang-product-video-skill

또는 수동 복제: Codex (~/.agents/skills) 또는 Claude Code (~/.claude/skills)의 해당 디렉토리에 복제합니다.
최초 실행 시 다음을 확인합니다:
- Node ≥ 22 + npm
- Python ≥ 3.9
- FFmpeg/ffprobe
- Playwright Chromium (누락 시 자동 설치)
설치 후 AI 어시스턴트에서 스킬을 호출합니다. 예:

“用 guizang-product-video-skill，把这个项目最近三周的主要更新做成一支宣传片，横版 45-60 秒，中文。”
어시스턴트가 필요한 매개변수(대상 버전 범위, 대상, 플랫폼, 가로세로 비율, 언어, 스타일)를 안내하고 자동화 파이프라인을 진행합니다.

저장소 내용

LICENSE                – AGPL-3.0 (메인 코드 및 문서)
COMMERCIAL_LICENSING.md – 선택적 상업용 라이선스 문의
SKILL.md               – AI 도구를 위한 스킬의 공식 정의
agents/                – Codex 표시용 메타데이터
references/            – 디자인 어휘, 스토리보드 템플릿, 오디오 라이선스
scripts/               – 환경 확인, 오디오 합성, 믹싱, 검증
assets/
  starter/             – 최소한의 React + esbuild + Playwright 프로젝트 ('엔진')
  fx-lab/              – 재사용 가능한 시각 효과 샘플 (입자, 흐름 등)
  fallback/            – 기본 CodePilot UI 구성 요소 (BSL 라이선스)
  audio/               – 두 개의 음악 트랙 예제 + 11개의 합성 효과음
  readme/              – 이 README에 사용된 이미지
tests/                 – 파이프라인의 단위 및 통합 테스트

저장소는 핵심 워크플로우에 대해 GNU AGPL-3.0 라이선스를 제공하며, 기본 CodePilot UI 에셋에 대해서는 별도의 Business Source License를 적용합니다.

제한 사항 및 실무 참고 사항

이 스킬은 원클릭 영상 생성기가 아닙니다 – AI가 실제 구성 요소를 렌더링하려면 대상 저장소, 종속성 및 실행 가능한 빌드에 접근할 수 있어야 합니다.
React 기반 프론트엔드에서 가장 잘 작동합니다. 다른 프레임워크는 integration.config.mjs 매핑을 통해 통합할 수 있지만 추가적인 글루 코드가 필요할 수 있습니다.
기본 CodePilot 스타일의 상업적 사용은 BSL을 준수해야 합니다. 자체 브랜딩으로 교체하면 이 제한을 피할 수 있습니다.
로컬 음악 생성 모델이 없는 경우, 오디오 생성은 미리 빌드된 소규모 합성 WAV 파일 세트로 폴백됩니다.
출력된 프로젝트는 완전히 편집 가능하므로 타이밍을 미세 조정하거나, 에셋을 교체하거나, 코드 변경 후 다시 렌더링할 수 있습니다.

결론

guizang-product-video-skill은 제품별 홍보 영상 제작을 엔드투엔드로 자동화하는 실제 오픈 소스 AI 에이전트 스킬입니다. 코드 기반 UI 렌더링, AI 작성 카피, 프로그래밍 방식의 오디오 합성을 결합하여 Claude Code나 Codex와 같은 AI 코딩 어시스턴트에서 사용하도록 설계되었습니다. 최근 소프트웨어 릴리스를 위한 빠르고 브랜드에 맞는 데모 영상이 필요하다면, 이 스킬은 정적 템플릿이 아닌 재현 가능하고 편집 가능한 파이프라인을 제공합니다.

저장소 최종 업데이트: 2026년, AGPL-3.0 라이선스(상업용 라이선스 옵션 포함).

op7418/guizang-product-video-skill