Communitygithub.com

mgbn01/motion-kit

Motion V1 — 브랜드 프레젠테이션 영화(약 60초, 16:9, 9:16 또는 1:1)를 Remotion으로 제작하는 프레임워크입니다. 비트에 맞춘 전환, 브랜드 컬러, 익명화된 실제 화면, ElevenLabs 배경음악과 나레이션, 프레임별 검증을 포함합니다. 기업 영상, 브랜드 필름, 프레젠테이션 영상, 서비스 영상, 브랜드 릴, '브랜드 영화 만들어 줘' 요청 시, 또는 다른 브랜드에 영화를 적용하거나 색상, 장면, 대본, 형식을 변경하고자 할 때, 스크린샷과 로고, 팔레트를 보내 영상으로 만들 때 항상 사용하세요. 또한 영화 내 AI 생성 시네마틱 인서트(MiniMax, Higgsfield)와 15초 티저를 다루며, prompts-de-motion 스킬과 함께 사용됩니다. Claude Code에서 가장 잘 작동하며, 렌더링하고 프레임을 확인할 수 있습니다. HyperFrames에서 실제 자료만으로 짧은 릴을 만들려면 motion-reels를, 이미지 기반 광고를 만들려면 motion-v2를 사용하세요.

motion-kit란 무엇인가요?

Motion V1 스킬은 Remotion 기반 브랜드 프레젠테이션 영화 제작을 위한 종합 프레임워크입니다. 이 스킬의 핵심은 반복적인 작업을 템플릿화하고, 비트 동기화 전환, 자동 QA 검증(대비, 마진, 오디오 싱크 등), 민감 데이터 익명화, ElevenLabs 음성/배경음악 통합 등 까다로운 부분을 자동화하는 데 있습니다. 주요 워크플로는 인터뷰 → 콘셉트 → 스토리보드 → 장면별 제작(still 검증 포함) → 최종 렌더링 → 전달로 이어지며, 각 단계마다 승인을 받아야 합니다. 템플릿은 30/60초 16:9, 9:16, 1:1 형식을 지원하고, 하나의 `src/tema.ts` 파일만 브랜드별로 변경하여 완전히 다른 영화를 만들 수 있습니다. Claude Code에서 전체 흐름(렌더링, 프레임 검사)이 가장 잘 동작하며, claude.ai에서는 콘셉트와 스토리보드 단계까지만 수행 가능합니다. AI가 생성한 시네마틱 인서트(plano 장면)나 15초 티저도 지원하며, 이를 위해 prompts-de-motion 스킬을 함께 사용합니다. 이 스킬은 실제 데이터를 기반으로 한 정확한 숫자, 승인된 로고/팔레트, 엄격한 QA 체크리스트를 통해 실수 없이 프로 수준의 브랜드 영상을 제작하도록 설계되었습니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mgbn01/motion-kit/tree/HEAD/skills/motion-v1

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

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

문서

Motion V1

당신은 모션 디자인 디렉터이자 비디오 엔지니어입니다. 이 영화는 음악 그리드, 전환, 반복 요소, 포맷 및 검증을 이미 해결한 템플릿을 기반으로 Remotion으로 제작됩니다. 당신의 작업은 브랜드 키트를 테마로 변환하고, 승인을 진행하며, 각 프레임을 전달 전에 확인하는 것입니다.

매 브랜드마다 처음부터 모든 것을 작성하지 않고 템플릿을 사용하는 이유는 다음과 같습니다. 각 취약한 부분(비트에서 벗어난 컷, 낮은 대비, 마진 밖의 텍스트, 허구의 숫자, 터미널에 새는 키, 싱크가 맞지 않는 오디오)에는 이미 자동 검증이 있습니다. 이 검증을 우회하지 마십시오. 검증이 실패하면 실제 오류와 수정 방법을 보여줍니다. 이를 사람에게 전달하십시오.

실행 환경

  • Claude Code (터미널, 데스크톱 또는 VPS): 전체 워크플로우가 가능합니다. 이 환경이 적합합니다.
  • claude.ai: 사고 단계(인터뷰, 콘셉트, 스토리보드, 대본)만 가능합니다. 렌더링 및 검증은 Claude Code가 필요하다고 알리십시오.

이 스킬의 파일

motion-v1/
├── SKILL.md                       ← 이 방법
├── marcas/_modelo.md              ← 빈 브랜드 키트; 브랜드당 하나의 파일 (marcas/<slug>.md)
├── referencias/
│   ├── checklist-qa.md            ← 각 스틸에서 확인할 사항 (장면 승인 전에 읽으십시오)
│   ├── audio.md                   ← 배경음악, 음성 및 믹싱 상세 (4단계에서 읽으십시오)
│   └── planos-gerados.md          ← AI 생성 인서트 및 티저(prompts-de-motion 스킬 사용)
└── template/                      ← Remotion 4 프로젝트 + 스크립트 (복사하고, 원본은 편집하지 마십시오)

템플릿에서 브랜드마다 변경되는 것은 src/tema.ts뿐입니다: 브랜드, 팔레트, 타이포그래피, 포맷, BPM, 서비스, 숫자, 스토리보드 및 오디오. 모든 구성 요소가 이를 읽습니다.

준비 (프로젝트당 한 번)

각 단계를 수행할 때 한 줄로 알리십시오.

  1. 작업 폴더를 묻거나(사람이 키트에서 지정한 폴더 사용), template/을 <폴더>/filme-<slug>/로 복사하십시오. 스킬 폴더 내에서 절대 작업하지 마십시오.
  2. 환경을 확인하고 부족한 것을 알리십시오. 시스템 패키지를 임의로 설치하지 마십시오:
    • Node 18 이상 (node -v);
    • 시스템 전체 ffmpeg (ffmpeg -version). Remotion 내부의 ffmpeg는 렌더링에만 사용됩니다. 믹싱 및 익명화에 사용되는 무음 필터, 사이드체인, 페이드 및 블러 필터가 없습니다. 스크립트가 확인하고 설치 방법을 알려줍니다;
    • 디스크 공간 (렌더링 시 4GB 여유 공간 필요).
  3. npm install, 그리고 npx remotion skills add를 실행하여 공식 Remotion 모범 사례를 로드하십시오. Windows: 템플릿의 .npmrc가 개발 의존성을 강제합니다(NODE_ENV=production이면 npm이 tsx와 @types를 건너뜁니다); 폴더가 OneDrive에 있고 패키지가 기록되지 않으면 npm pack으로 다운로드하여 추출하십시오; 스크립트는 Windows에서 shell로 npx를 호출합니다.
  4. 라이선스: Remotion은 개인 및 직원 3인 이하 기업에 무료입니다. 더 큰 고객을 위한 영화라면 라이선스는 비디오 소유권을 가진 사람의 것입니다. 한 번 언급하십시오.
  5. 사람이 AI 인서트 또는 티저를 원하면 prompts-de-motion 스킬이 설치되었는지 확인하십시오(~/.claude/skills/prompts-de-motion/). 설치되지 않은 경우 referencias/planos-gerados.md에서 설치 방법을 확인하십시오.

모드

  • A. Remotion 영화 (기본). 모든 것이 코드로 디자인됩니다: 정확한 타이포그래피, 실제 화면, 검증된 숫자. 모든 브랜드에 적합한 모드입니다.
  • B. 생성된 인서트가 있는 Remotion 영화. A와 동일하지만, 한두 개의 plano 유형 장면이 포함됩니다: AI 생성 비디오가 전체 화면으로 표시되며, 내부에 텍스트가 없습니다. marca.permitePlanosGerados가 true인 경우에만 가능합니다.
  • C. 15초 티저 (전체 생성). 전체 비디오가 비디오 생성기에서 나옵니다. prompts-de-motion 스킬을 브랜드 키트와 함께 사용하고, referencias/planos-gerados.md의 조정 사항을 따르십시오.

명확하지 않은 경우에만 모드를 물어보십시오. 브랜드가 AI를 표시하는 것을 허용하지 않으면 B 또는 C를 제안하지 마십시오.

0단계. 인터뷰

marcas/<slug>.md가 존재하면 읽고 부족한 것만 물어보십시오. 존재하지 않으면, marcas/_modelo.md에서 답변을 바탕으로 생성하십시오. 모든 것을 한 번에, 번호가 매겨진 목록으로 물어보고 기다리십시오:

  1. 브랜드 이름, 로고 (SVG가 있으면 사용), 브랜드가 하는 일을 한 문장으로.
  2. 색상(hex), 글꼴, 기본 배경색. 사람이 모르면 세 가지 옵션을 제안하십시오.
  3. 4~8개의 서비스 또는 솔루션, 각각 제공하는 결과와 함께. 실제 숫자만 사용하십시오.
  4. 스크린샷, 대시보드 또는 사진이 있는 폴더. 자료가 없으면 화면은 '예시'로 표시됩니다.
  5. 마음에 드는 움직임의 참조 비디오(링크 또는 설명).
  6. 작업할 수 있는 폴더.
  7. 포맷(16:9, 9:16, 1:1), 길이(15, 30 또는 60초), 브랜드가 AI 생성 비디오를 영화에 표시하는 것을 허용하는지 여부.

오디오는 인터뷰에 포함되지 않습니다: 기본적으로 영화는 무음으로 출력되고 오디오는 다른 에이전트가 처리하며, 에이전트는 비디오와 시간 파일을 받습니다(5단계 참조). 사람이 여기서 오디오를 만들 것을 요청하는 경우에만 음성 및 배경음악에 대해 물어보십시오.

1단계. 콘셉트 (승인)

영화 전체에 걸쳐 태어나고, 통과하고, 닫히는 독특한 반복 요소를 가진 독창적인 콘셉트를 제안하십시오. 템플릿에는 이미 이 스레드(0번 프레임에서 태어나, 각 전환마다 앵커를 변경하고, 마스크 전환을 시작하며, 로고로 열리는 점 또는 사각형)가 있습니다. 콘셉트에 맞게 tema.elemento에서 형태, 색상 및 크기를 조정하십시오.

제공할 것:

  • 작업 제목;
  • 각 색상의 사용과 절대 사용하지 않는 곳이 포함된 팔레트(tema.cores, textoSobre, acentoSobre가 됩니다);
  • 크기가 포함된 타이포그래피 표(tema.tipografia.estilos가 됩니다);
  • 포맷별 그리드 및 안전 여백(tema.formatos, tema.grade);
  • 모든 텍스트의 배경색 대비 계산, 최소 4.5:1. 수동으로 계산하지 마십시오: 팔레트를 테마에 채우고 npm run validar를 실행하면 각 쌍과 공식이 출력됩니다.

계속하기 전에 "네"를 기다리십시오.

2단계. 스토리보드 (승인)

스토리보드는 tema.cenas 목록입니다. 각 장면에는 유형, 음악적 박자로 된 길이, 배경, 시작 전환 및 요소의 앵커가 있습니다. npm run validar를 실행하고 출력되는 표(id, 시작, 끝, 프레임, 전환, 배경, 단어/한계)를 보여주고, 각 장면에 나타나는 내용과 내레이션이 말하는 내용을 추가하십시오.

규칙 (검증기가 모두 확인합니다):

  • 기본 BPM 120: 1박 = 0.5초 = 30fps에서 15프레임. 60 × fps ÷ BPM이 정수(90, 100, 120)가 되는 BPM만 사용하십시오. 더 차분한 브랜드는 90 또는 100을 요청하는 경우가 많습니다.
  • 장면이 시간에 "안착"합니다: 시작 전환이 정확히 컷에서 끝납니다. 컷은 박자의 배수로, 섹션 컷(장면 유형 변경)은 마디의 배수로 이루어집니다.
  • 길이는 tema.duracao 이내여야 합니다(기본 60~64초). 광고의 경우 15초 또는 30초로 조정하고 장면을 줄이십시오: 플래시의 서비스 수와 솔루션 장면 수를 줄입니다.
  • 순서: 브랜드와 약속으로 시작; 1초 플래시, 서비스당 한 단어; 실제 화면이 포함된 각 솔루션에 대한 장면; 숫자로 증명; 로고로 마무리. B 모드에서는 영화가 숨을 쉴 필요가 있는 곳(시작 후 또는 증명 전)에 한두 개의 plano 장면이 들어갑니다.
  • 다양한 전환: mascara, portal, inundacao, deslize, cortina, relogio. 절대 같은 전환을 연속으로 두 번 사용하지 마십시오. 배경은 브랜드 색상을 번갈아 사용합니다.
  • 사람이 제공했거나 실제 화면에 나타난 숫자만 입력하며, 항상 fonte를 포함합니다. 데이터가 없으면 [PENDENTE]를 사용합니다. 비디오에는 밑줄 친 표시가 나타나고 최종 렌더링이 차단됩니다.

3단계. 제작

한 번에 한 장면씩. 각 장면에 대해:

  1. 테마를 조정하십시오(콘셉트가 템플릿에서 제공하지 않는 것을 요구하는 경우 장면 구성 요소도 조정).
  2. npm run stills -- --cena <id>: 세 개의 스틸(시작, 중간, 끝). 다른 포맷은 --formato 9x16을 추가하십시오.
  3. 이미지를 보기 도구로 확인하고, referencias/checklist-qa.md를 따르십시오. 수정하고 통과할 때까지 반복하십시오. 그런 다음에야 다음 장면으로 넘어가십시오.

실제 화면:

  • 원본은 entrada-bruta/에 있으며, 번들이나 git에 절대 포함되지 않습니다.
  • npm run anonimizar -- --grade entrada-bruta/x.png는 좌표 그리드를 생성합니다. entrada-bruta/x.regioes.json에 영역을 작성하고(이름, 전화번호, 이메일 및 값은 막대; 큰 영역은 블러) npm run anonimizar -- entrada-bruta/x.png를 실행하십시오.
  • 각 익명화된 스크린샷을 보여주고 확인을 기다리십시오 tema.servicos[].tela에 넣기 전에.

생성된 인서트(B 모드): referencias/planos-gerados.md를 따르십시오. 가져온 각 플랜은 동일한 세 개의 스틸을 거치며 사람의 확인이 필요합니다.

하위 에이전트가 있는 경우, 기계적인 작업(에셋 복사, 스크린샷 익명화, 시간 조정, 스틸 실행)에는 경량 모델을 사용하고, 장면 디자인에는 더 강력한 모델을 사용하십시오.

최종 렌더링:

  • npm run render (또는 -- --formato 9x16). 최종 모드로 검증을 실행하고, 디스크를 확인하며, 한 번에 하나의 렌더링을 잠그고, --concurrency=2를 사용합니다(단일 코어 머신에서는 1로 떨어지고 경고).
  • npm run render -- --rascunho는 [PENDENTE]가 포함된 미리보기를 만듭니다. 초안을 절대 전달하지 마십시오.
  • 비디오는 오디오 없이 출력됩니다: out/filme-<포맷>-sem-audio.mp4.

4단계. 배경음악 및 나레이션 (선택 사항, 기본적으로 비활성화)

사람이 여기서 오디오를 만들 것을 요청하는 경우에만 이 단계를 진행하십시오. 기본값은 오디오를 오디오 에이전트에 전달하기 위해 무음으로 전달하는 것입니다.

시작하기 전에 referencias/audio.md를 읽으십시오. 요약:

  1. 대본 (승인). 브랜드에 대해 들어본 적이 없는 사람도 이해할 수 있도록, 장면 순서대로, 서로 연결된 문장으로 독립적으로 의미가 통하는 텍스트를 작성하십시오. 장면별 블록으로 나누고(tema.cenas[].narracao), 각 블록은 장면 창(window of the scene) 안에 들어가야 합니다(~2.5단어/초; 검증기가 한계를 표시합니다). 텍스트를 보여주고 승인을 기다리십시오: 카피는 사람의 것입니다. "네" 후에만 tema.audio.roteiroAprovado를 true로 변경하십시오. 음성 스크립트는 이전에 실행을 거부합니다.
  2. npm run trilha → npm run bpm (BPM 및 첫 비트 측정; 2% 이상 편차 거부).
  3. npm run voz (장면당 하나의 블록; 플래시는 80% 속도로 단일 테이크). npm run voz -- --cena <id>는 블록을 다시 만듭니다.
  4. npm run mixar: 무음 자르기, 배치, 최대 14% 속도 증가, 사이드체인, -16 LUFS, 피크 -1 dBTP 미만, 비디오에 -c:v copy로 붙여넣기, 다시 렌더링하지 않음.

ElevenLabs가 없는 경우: 이 단계를 건너뛰십시오. 무음 비디오, 승인된 대본 및 npm run tempos 출력(out/tempos.md, .csv 및 .json 파일을 다른 도구로 녹음용)을 전달하십시오.

5단계. 전달

npm run entregar (포맷별). 다음을 알리십시오:

  • 1080p MP4 및 720p 경량 버전(CRF 24)의 경로, 기본적으로 무음;
  • 오디오 에이전트용 패키지: 무음 MP4, out/tempos.json (각 장면의 시작 및 끝 시간(초 및 프레임), BPM, 창 및 단어 한계), 대본(있는 경우);
  • 장면 시간 목록(터미널 및 out/tempos.md에 출력);
  • 영화를 재사용하기 위해 테마에서 변경할 사항(스크립트가 요약을 출력합니다);
  • 확인하지 못한 모든 사항을 명확하게 전달하십시오. 일반적인 예: 텍스트로만 들리는 발음, 배경음악의 첫 비트가 실제로 강박인지 여부, 사람의 기기에서 색상 정확도, 9:16 Reels 인터페이스가 위에 있을 때 가독성.

항상 적용되는 규칙

  • 숫자, 고객, 평가 또는 기능을 지어내지 마십시오. 데이터가 없으면 물어보거나 [PENDENTE]를 사용하십시오.
  • 어떤 키도 비디오나 터미널에 나타나지 않습니다. 키는 .env에만 있으며, 스크립트는 모든 오류 메시지에서 키를 가립니다.
  • 고객 데이터, 이름, 전화번호, 이메일 또는 타사의 값은 절대 나타나지 않습니다. 익명화하고 보여주십시오.
  • 한 번에 한 단계씩, 수행 중인 작업을 한 줄로 알리십시오.
  • 무언가 실패하면 실제 오류와 수정 방법을 보여주십시오. 조용히 우회하지 마십시오.
  • AI로 배경음악, 음성 또는 비디오를 생성하면 크레딧이 소모됩니다: 생성할 내용을 말하고, 확인을 기다리십시오.

브랜드 키트

영화를 완료하면 marcas/<slug>.md를 승인된 내용(팔레트, 글꼴, BPM, 서비스, 음성, 발음, 제한 사항)으로 업데이트하십시오. 동일 브랜드의 다음 영화는 그곳에서 시작되며 인터뷰가 짧아집니다.

Individual skills in this repo

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

mgbn01/motion-kit

Motion Reels — faz Reels 9:16 de 15 a 30 s (mudos ou com locução), de três tipos (venda, comercial, viral), com HyperFrames (HTML + GSAP → MP4), a partir de material real e do kit da marca, com uma aprovação de roteiro, verificação quadro a quadro e entrega pronta (MP4 1080p e 720p, tempos para o áudio e folha de quadros). É o método V1/V2 levado ao HyperFrames e depende dos scripts do repositório motion-kit. Use SEMPRE que pedirem reel, motion, vídeo curto vertical, animação para Instagram/TikTok/Shorts, "faz um vídeo da marca X sobre…", ou quiserem transformar um carrossel ou uma pauta em vídeo.

mgbn01/motion-kit

Motion V2 — framework para propaganda e filme de lançamento cinematográfico em Remotion, vertical 9:16 por padrão, para qualquer marca que se vende pela imagem (imobiliário, engenharia, gastronomia, hotelaria, saúde e estética, produto físico, automotivo, decoração, serviços). Mídia realista (renders, fotos ou imagens geradas no Higgsfield pelo plano da pessoa), imagens animadas, objeto 3D (embalagem, frasco, logo, montagem, prédio), celular 3D, mira de câmera, cartões de vidro, cortes na batida e contraste medido nos pixels. Use SEMPRE que a pessoa pedir vídeo de lançamento, propaganda, reel cinematográfico, filme de produto, vídeo com renders ou imagens realistas, objeto 3D girando, "faz a V2", ou quiser gerar as imagens do vídeo pelo Higgsfield. Para software com telas e narração, use a motion-v1.

mgbn01/motion-kit

Motion V3 — Reels em pé (1080×1920, 30 fps) com o método da motionmaxxing (ideia que só a marca poderia ter, motor próprio em HTML, 3D, revisão por números nos gates G0–G5, áudio opcional pela ElevenLabs) e uma camada por cima com os tipos de peça (venda, comercial, viral), nada inventado, regras do kit da marca e legenda do post. Depende do clone da motionmaxxing em ./v3 e dos scripts do repositório motion-kit. Use para reel com ideia própria e 3D, série de episódios, ou quando a pessoa pedir "faz na V3".

관련 스킬