Amartileyton/autovideo

AI 비디오용 모션 그래픽

remotion-best-practices 및 cinematic-camera와 함께 사용하세요. 이 스킬은 인테이크, 리서치, 인증된 에셋, 레퍼런스 선택, 시각적 품질, 그리고 전달 승인을 담당합니다.

하드 실행 계약

모든 빌드는 scripts/promptible-gate.mjs를 통과해야 합니다.

일반적인 경로:

• Claude Code: .claude/skills/motion-graphics/scripts/promptible-gate.mjs
• 기타 에이전트: .agents/skills/motion-graphics/scripts/promptible-gate.mjs

BUILD AUTHORIZED가 출력될 때까지 컴포지션 코드를 작성하지 마십시오. DELIVERY AUTHORIZED가 출력될 때까지 렌더링을 전달하지 마십시오. 명령 실패는 즉시 중단입니다.

1단계 — 간결한 인테이크

누락된 선택 사항에 대해서만 질문하십시오:

1. 포맷: 4:3 하프 스크린 Instagram 삽입 (1440×1080) 또는 9:16 풀 스크린 Instagram (1080×1920). 명시적으로 요청된 경우에만 16:9를 사용하십시오.
2. 표면: 따뜻한 조명, 깔끔한 다크, 라이트 그리드, 또는 다크 그리드.
3. 정확한 스크립트 비트, 지속 시간, 명명된 제품, 확인된 주장 및 제공된 에셋.

절대 기본값으로 다크를 선택하지 마십시오. 사용자가 표면 선택을 위임하는 경우, 따뜻한 조명을 사용하십시오.

2단계 — 리서치 및 인증된 에셋

references/research-and-assets.md 및 references/logo-library.md를 읽으십시오.

컨셉 작업 전에 가장 작은 유용한 리서치 과정을 실행하십시오:

• 제공된 사용자 에셋은 권위가 있습니다. 정확히 사용하고, 절대 다시 그리거나 교체하지 마십시오.
• 일반적인 제품의 경우, assets/logos/에서 적합한 번들 로고를 프로젝트에 복사하고 출처를 유지하십시오.
• 누락된 경우, 1~3개의 권위 있는 페이지를 검사하십시오: 공식 브랜드 키트/홈페이지, 공식 문서/제품 페이지, 그 다음 평판 좋은 큐레이션 아이콘 소스.
• 투명 SVG를 선호하십시오. 로고의 스크린샷, 검색 결과 썸네일, 체크 무늬/회색 배경, 비공식 재현, 또는 원격 핫링크 에셋을 절대 사용하지 마십시오.
• 대시보드/제품 UI의 경우, 실제 제공된 스크린샷/녹화 또는 공식 공개 제품/문서 스크린샷을 확보하십시오. 없으면 요청하고, 대시보드를 임의로 만들지 마십시오.
• 가시적인 구조, 용어, 브랜드 색상, 그리고 비트와 관련된 정확한 동작/상태를 리서치하십시오. 지원되지 않는 메트릭스, 개인 정보 또는 주장을 복사하지 마십시오.
• 에셋과 노트를 .promptible/research/ 아래에 캐싱하십시오. 제품, 소스, 에셋 해시, 참조 메커니즘이 변경되지 않은 경우 캐시 히트를 재사용하십시오.

비트가 필요한 시각적 모드만 선택하십시오: logo-system, product-ui, terminal, editorial, 또는 abstract. 모든 그래픽에 뉴스레터, 대시보드, 터미널 또는 정교한 카메라 무브를 강제하지 마십시오.

다음 헤딩과 함께 .promptible/research-brief.md를 작성하십시오:

## 제품 또는 컨셉
## 권위 있는 소스
## 실제 시각적 언어
## 가장 가까운 승인된 메커니즘
## 모션 계획
## 금지 사항

그런 다음 실행하십시오:

node <skill-dir>/scripts/promptible-gate.mjs research \
  --project . \
  --research-mode authentic \
  --visual-mode product-ui \
  --product "Slack" \
  --reference kickbacks-same-run-editor \
  --brief .promptible/research-brief.md \
  --source https://slack.com/ \
  --logo public/research/slack.svg \
  --surface public/research/slack-dashboard.png

이름 없는 컨셉 작업의 경우 --research-mode abstract --visual-mode abstract를 사용하십시오; 브리핑과 승인된 참조 비교는 여전히 적용되지만, 불필요한 웹/로고 리서치는 수행되지 않습니다.

3단계 — 검증된 참조 사전 확인

references/approved-references.md를 읽으십시오. 색상이 아닌 스토리 메커니즘으로 선택하십시오. 요청에 더 특화된 경우 새 컨셉이 허용되지만, 가장 가까운 승인된 메커니즘에서 카메라 문법, 스케일, 절제, 인과적 모션을 명시적으로 상속해야 합니다. 최대 두 개의 메커니즘을 결합하십시오.

실행하십시오:

node <skill-dir>/scripts/promptible-gate.mjs init \
  --project . \
  --research .promptible/research-manifest.json \
  --format 9:16 \
  --background warm-light \
  --claim-source user \
  --beat "지원되는 정확한 시각적 아이디어" \
  --duration 6

init은 리서치/에셋을 재검증하고, 번들된 승인된 MP4/연락처 시트를 SHA-256으로 확인하며, .promptible/render-brief.json을 작성합니다.

실제 번들된 MP4/연락처 시트와 리서치된 제품 증거를 검사하십시오. 다음 내용으로 .promptible/reference-observations.md를 작성하십시오:

## 구성
## 카메라
## 정체성
## 리서치 일치
## 안티패턴

그런 다음 실행하십시오:

node <skill-dir>/scripts/promptible-gate.mjs inspect \
  --project . \
  --observations .promptible/reference-observations.md

BUILD AUTHORIZED만이 구현을 허용합니다.

4단계 — 빌드

리서치된 정체성과 선택된 참조의 인과적 메커니즘을 사용하십시오. 결과물은 첫 번째 패스에서 특정성을 느끼게 해야 하며, 수정 프롬프트를 기다리는 템플릿처럼 보여서는 안 됩니다.

하드 규칙:

• 네온, 글로우, 블룸, 발광 가장자리, 컬러 섀도우, 그라데이션 오브/워시, 시안-보라 그라데이션, 유리 모피즘, 사이버펑크 조명, 또는 바이브 코딩된 AI 스타일링을 금지합니다.
• 일반적인 영수증, 인보이스, 서류, 클립보드, 떠 있는 카드, 바코드, 고무 도장, 증명서, 가격 카드, 가짜 대시보드, 또는 연결되지 않은 카드 그리드 대체를 금지합니다.
• 현실적인 대시보드는 제공되거나 권위 있는 제품 증거에 기반한 경우에만 권장됩니다. 충실하게 가시적인 구조를 재현하고, 메트릭스, 주장, 컨트롤 또는 제품 상태를 절대 임의로 만들지 마십시오.
• 임의로 만든 UI, 로고, 가격, 순위, 참여, 시리얼 또는 증명을 금지합니다.
• 중복되는 내레이션 텍스트를 금지합니다. 실제 데이터, 제품 UI, 명령, 코드, 파일명 및 짧은 구조적 레이블은 허용됩니다.
• 모션은 인과성, 스케일, 교체, 탐색 또는 상태 변경을 드러내야 합니다. 로고 교체나 인증된 UI 동작이 비트를 명확하게 전달하는 경우 모션을 절제할 수 있습니다.
• 중앙에 정적 객체를 배치하고 행이 나타나며 느린 줌이 있는 것은 영화적 실행이 아닙니다.
• 더 적고 더 큰 초점 객체를 사용하십시오. 현재 동작을 중앙에 유지하고, 완전히 보이며, 대상 크기에서 읽을 수 있도록 하십시오.
• 다크 장면은 옵트인입니다. 다크는 평평한 악센트가 있는 중성 숯을 의미하며, 조명 패널이 없습니다.

컨셉 선택 전에 references/rejected-patterns.md를 읽으십시오.

5단계 — 후보 증거

후보를 렌더링하십시오. 세 프레임 연락처 시트와 ffprobe JSON을 생성하십시오. 6초의 예:

mkdir -p .promptible
ffmpeg -y -hide_banner -loglevel error -i out/candidate.mp4 \
  -vf "fps=3/6,scale=480:-1,tile=3x1:padding=12:margin=12:color=white" \
  -frames:v 1 .promptible/candidate-contact-sheet.jpg
ffprobe -v error -select_streams v:0 \
  -show_entries stream=width,height:format=duration -of json \
  out/candidate.mp4 > .promptible/candidate-probe.json

그런 다음 실행하십시오:

node <skill-dir>/scripts/promptible-gate.mjs candidate \
  --project . \
  --render out/candidate.mp4 \
  --contact-sheet .promptible/candidate-contact-sheet.jpg \
  --probe .promptible/candidate-probe.json

6단계 — 독립적인 시각 비평

빌더는 자신의 작업을 평가할 수 없습니다. 별도의 클린 비평가/서브 에이전트를 시작하십시오:

• references/visual-critic.md
• 리서치 브리프/매니페스트 및 인증된 에셋
• 선택된 승인된 MP4/연락처 시트
• 후보 MP4/연락처 시트
• .promptible/render-brief.json

비평가는 실제 미디어를 검사하고 templates/critic-output.example.json과 일치하는 JSON을 반환합니다. 독립적인 검토를 실행할 수 없으면 중단하고, 절대 자체 승인하지 마십시오.

7단계 — 전달 게이트

node <skill-dir>/scripts/promptible-gate.mjs qa \
  --project . \
  --critic .promptible/critic.json

게이트는 하드 실패, 8/10 미만의 모든 카테고리, 평균 8.5 미만, 수정/누락된 리서치 또는 증거, 또는 비독립적 검토를 거부합니다. DELIVERY AUTHORIZED가 출력될 때까지 수정하십시오.

기술 및 전달 규칙

• 모션을 useCurrentFrame(), spring(), interpolate()로 구동하십시오; CSS 애니메이션 사용 금지.
• 이동이 도움이 될 때 홀드 → 이동 → 홀드를 사용하십시오. 동작은 홀드 중에 완료됩니다.
• 안정적인 편집기 홀드로 종료하십시오.
• 타입체크 또는 가장 작은 의미 있는 빌드 유효성 검사를 실행하십시오.
• 승인 후에만 정확한 치수, 지속 시간, 렌더 명령 및 편집기 배치 노트와 함께 MP4를 전달하십시오.