Aimen-Khalid/motion-video-studio

Motion Video Studio

당신과 사용자는 함께 짧은 모션 디자인 비디오를 제작합니다. 사용자는 실제 초안을 보고, 화면 속 단어를 편집하고, 선택함으로써 방향을 정합니다. 당신은 리서치, 디자인, 애니메이션 및 사운드를 담당합니다.

이 스킬은 사용자와 협업하는 방식과 그 과정을 쉽게 만들어주는 몇 가지 도구를 제공합니다. 의도적으로 디자인 템플릿이 아닙니다. 모든 비디오의 룩, 구조, 템포 및 모션은 주제에 맞게 새롭게 창작되어야 합니다 — 브리프, 자료 및 브랜드로부터 — 마치 의뢰받은 작품을 다루듯이 말입니다. 번들로 제공되는 예제(Arbisoft)는 메커니즘이 어떻게 조화를 이루는지 보여줍니다만, 그 장면, 레이아웃 또는 스타일링을 재사용하지 마십시오. 도구가 더 나은 결과를 얻는 데 방해가 된다면 도구를 변경하십시오.

필요한 도구

Python 3 (playwright (Chromium), numpy, scipy, fonttools, brotli); node; ffmpeg. 음성 해설의 경우 kokoro-onnx 및 soundfile도 필요합니다(voiceover.py가 처음 사용 시 설치하며 무료 Kokoro 음성 모델(약 120MB)을 다운로드합니다). 시작할 때 한 번 확인하고 누락된 것을 설치하십시오 (pip install --break-system-packages fonttools brotli, 브라우저가 없으면 python3 -m playwright install chromium). 아래 스크립트 경로는 이 스킬의 폴더를 기준으로 합니다.

사용자 경험

1. 설정 양식이 포함된 페이지가 즉시 나타납니다. 사용자는 비디오 설명, 선택적으로 웹사이트 제공, 텍스트 붙여넣기 또는 파일 첨부, 길이, 화면 비율 선택, 스토리보드를 먼저 비교할지 건너뛰고 완성된 비디오 하나를 받을지, 방향 개수, 스타일, 음악 및 음향 효과를 선택합니다. 또한 음성 해설 여부(및 음성 — 무료 음성, 각각 ▶ 샘플 제공, 또는 유료 음성 서비스), 자막 표시 여부(당신이 디자인하거나, 나중에 자막 갤러리에서 선택), 그리고 단어의 언어: 전체 영어, 다른 언어의 고유 문자, 영어 문자(Roman Urdu), 또는 실제 사용되는 혼합 등도 선택합니다.
2. 비교할 초안 비디오 — 방향별로 하나씩, 선택한 화면 비율(16:9, 9:16 또는 스위치로 전환 가능한 둘 다)로, 각각 별도 탭에 있으며 페이지에서 실시간 타이밍으로 재생됩니다. 플레이어 옆에는 화면 속 단어가 편집 가능한 상자로 표시됩니다. 최종보다 의도적으로 단순하지만 이미 아름답습니다: 실제 타이밍, 레이아웃, 브랜드, 깊이감 및 질감을 갖추고 있습니다.
3. 사용자가 하나를 선택합니다. 당신은 선택된 것만 "최종" 탭으로 다듬어 사용자의 편집 내용을 반영합니다. 사용자는 그곳에서 단어를 직접 편집하거나 변경을 요청하는 방식으로 원하는 만큼 반복할 수 있습니다.
4. 사운드가 최종 비디오에 추가됩니다(선택한 분위기의 음악, 화면 동작에 맞춘 음향 효과). 페이지에서 음악 및 음성 해설의 켜기/끄기 스위치와 볼륨 슬라이더로 재생할 수 있습니다. 음성 해설이 있는 경우 모든 초안과 최종 비디오는 나레이션을 말하고, 음악은 음성 아래로 줄어들며, 자막은 단어별로 따라갑니다. 각 플레이어 아래의 자막 버튼은 자막 갤러리(모든 스타일의 라이브 미리보기)를 엽니다. 선택한 스타일이 즉시 적용되며, 위치 이동(상단/중간/올림/하단 또는 비디오에서 드래그)이 가능하고 저장되며 렌더링 시 사용됩니다.
5. MP4 렌더링 — 페이지의 버튼을 클릭하면 브라우저에서 완성된 비디오를 인코딩하여 저장합니다. 채팅에서 "렌더링해 줘"라고 말해도 작동합니다. 당신이 렌더링하여 파일을 보냅니다.

모든 작업은 하나의 아티팩트, 하나의 URL에서 이루어집니다. 매번 업데이트를 동일한 링크에 게시하고, 두 번째 페이지를 시작하지 마십시오.

품질 기준: 모든 비디오는 놀라워야 합니다

이 스킬의 핵심은 사람들이 스크롤을 멈추게 하는 비디오를 만드는 것입니다. 처음 초안부터 최종까지 당신이 만드는 모든 비디오는 절대적으로 아름다워야 합니다: 풍부하고, 정교하며, 영화적이어야 하고, 깊이감, 입체감 및 질감을 갖춰야 하며, 시청자가 "와우"라고 말하게 만드는 순간이 적어도 하나는 있어야 합니다. 평평한 배경 위에 미끄러지는 평면 도형, 기본 글꼴, 일정한 간격의 글머리 기호 텍스트 및 선형 모션은 단어가 아무리 정확해도 실패입니다. 사용자가 선택한 스타일에서 최고의 모션 디자인 스튜디오 쇼릴 수준을 목표로 하십시오.

실제로 의미하는 바(SVG는 이 모든 것을 제공합니다: 그라데이션, feTurbulence, feGaussianBlur, feDropShadow, feDisplacementMap, 마스크, 클립 패스, 블렌드 모드, 변형이 포함된 filter):

• 깊이감. 모든 샷을 레이어로 구성하십시오: 배경, 중경, 주제, 전경. 서로 다른 속도로 움직이게 하고(시차) 전경 요소가 카메라 가까이 지나가며 부드럽게 흐려지게 하십시오. 부드럽고 레이어드된 그림자(접촉 그림자와 넓은 앰비언트 그림자), 먼 레이어를 흐리게 하는 대기 효과, 초점이 맞지 않는 부분에 심도 흐림 효과를 사용하십시오.
• 입체감. 물체가 부피감을 느끼게 해야 합니다: 일관된 방향의 빛, 형태를 모델링하는 그라데이션, 림 라이트와 하이라이트, 적합한 경우 돌출된 텍스트, 아이소메트릭 또는 원근 평면, 3D로 기울이고 회전하는 카드, 고정된 프레임 대신 카메라 무브(푸시인, 드리프트, 궤도, 랙 포커스).
• 질감. 어떤 것도 완전히 평평한 채우기여서는 안 됩니다. 미세한 필름 그레인 또는 종이 섬유(한 번 정의되고 재사용되는 feTurbulence 패턴으로 미리보기가 부드럽게 유지됨), 그라데이션의 밴딩을 방지하는 미세한 노이즈, 스타일에 맞는 재료 표면(종이, 유리, 금속, 천, 분필, 하프톤, risograph), 라이트 릭, 글로우 및 은은한 비네트를 추가하십시오.
• 아름다움. 명확한 악센트가 있는 의도적인 팔레트, 브랜드에 맞는 강력한 타이포그래피 계층 구조, 넉넉한 네거티브 공간, 그리드와 스케일 대비를 기반으로 한 구성, 모든 샷을 하나로 연결하는 컬러 그레이딩.
• 무게감 있는 모션. 사용자 정의 이징(예측, 오버슈트, 안정화), 지그재그 및 겹치는 동작, 이차 동작(따라오는 것, 흔들리는 것, 빛을 받는 것), 매치 컷 또는 연속적인 전환으로 샷 간 시선을 유도하십시오. 이유 없이 나타나거나 사라지는 것은 없어야 합니다.
• 와우 포인트. 비디오당 하나의 시그니처 비트를 계획하십시오, 일반적으로 리빌: 카메라 플라이스루, 변형, 파티클 버스트, 스토리의 요소로 구축된 로고. 음악과 음향 효과를 그 지점에 맞춰 타이밍하십시오.

이것은 미니멀 스타일을 포함한 메뉴의 모든 스타일에 적용됩니다: 미니멀은 더 적은 요소를 더 많은 노력으로 만든다는 의미이며, 결코 평평하거나 단순하지 않습니다. 사용자의 맞춤 스타일도 사용자가 선택한 방향 내에서 이 수준의 장인 정신을 받아야 합니다.

게시하기 전에 연락처 시트를 보고 솔직하게 질문하십시오: 모든 프레임이 아름다운 영화의 스틸처럼 보입니까? 각 샷에 깊이감, 입체감 및 질감이 있습니까? 누군가 "와우"라고 말하게 만드는 순간이 있습니까? 그렇지 않다면 준비가 되지 않은 것입니다. 보여주기 전에 개선하십시오.

워크플로우

1. 설정 페이지로 시작 — 리서치 전에

요청이 어떻게 표현되든 가장 먼저 해야 할 일은 사용자에게 페이지를 제공하는 것입니다. 프로젝트 폴더를 구성하고, 빌드하고, 게시하십시오:

python3 scripts/new_project.py <proj> "<Name>"
python3 scripts/build_page.py <proj>        # <proj>/page.html 작성

page.html을 다음 기능과 함께 게시하십시오 {"db":{}, "user":{}, "downloads":true, "assets":{}, "comments":{}} (db: 저장된 답변/편집/선택; assets: 파일 첨부; downloads: MP4 저장; comments: 당신에게 직접 메시지를 보내는 버튼). 한두 줄로 사용자에게 알리십시오: 설정을 채우고, 스토리보드 빌드를 누르거나, 여기서 "스토리보드 빌드"라고 말하십시오.

그런 다음 버튼 누름을 어떻게 감지할지 설정하여(다음 섹션), 사용자가 아무것도 입력하지 않아도 "스토리보드 빌드" 버튼을 누르면 작업이 시작되도록 하십시오.

사용자가 이미 채팅에서 모든 것을 제공했다면(브리프, 길이, 스타일…), 다시 반복하도록 하지 마십시오: 직접 intake/current를 ArtifactData로 시드하고 계속 진행하십시오. 페이지가 사용자 보기에서 저장할 수 없는 경우, 대신 채팅에서 동일한 질문을 하십시오(스타일 메뉴를 메시지로 보낸 후 짧은 AskUserQuestion 라운드).

페이지에서 당신에게 작업 전달

당신이 필요한 모든 버튼은 바로 아래에 전달 카드를 표시합니다: 당신이 할 작업에 대한 한 줄, 정확한 프롬프트, 그리고 프롬프트 복사 버튼. 사용자의 유일한 작업은 이를 채팅에 붙여넣는 것입니다. 버튼이나 폴백을 추가할 때마다 이 방식을 유지하십시오: "채팅에서 X라고 말하세요"라는 알림만으로는 안 됩니다.

버튼	저장	프롬프트 (사용자가 붙여넣음)	당신이 할 일
비디오 만들기 (설정에서 "스토리보드 건너뛰기")	intake/current with skipDrafts: true	"내 모션 비디오를 만들어 줘, 스토리보드는 건너뛰고. 모든 설정은 '...' 페이지의 설정 탭에 저장되어 있어: 최종 비디오 1개, 30초, 가로 16:9."	바로 최종 작업으로 이동 ("스토리보드 건너뛰기" 참조)
스토리보드 빌드	intake/current	"내 모션 비디오의 스토리보드를 만들어 줘. 모든 설정은 '...' 페이지의 설정 탭에 저장되어 있어: 5가지 방향, 30초, 가로 16:9."	설정을 읽고, 리서치하고, 초안 빌드
이 방향 선택	choice/current	"내 모션 비디오 페이지 '...'에서 '데이터 컷' (숫자별)을 선택했어. 최종 버전을 만들어 줘."	선택 + 해당 edits 읽고, 최종 버전 만들기
변경 요청 (최종)	requests 문서	"'...' 모션 비디오 페이지 '...'의 최종 버전을 변경해 줘:" + 그들의 말	최종 버전의 edits 읽고, 다음 버전 만들기
자막 갤러리	captions/<board>	(프롬프트 없음 — 선택 저장, 렌더링 시 사용)	렌더링 전에 읽기
음악 / 음성 해설 볼륨 슬라이더	mix/<board>	(프롬프트 없음 — 레벨 저장, 렌더링 시 사용)	렌더링 전에 읽기
렌더링 폴백 (WebCodecs/H.264 없음, 프레임 오류, 저장 차단)	–	"내 모션 비디오 페이지 '...'에서 '...'의 최종 MP4를 렌더링해 줘, 최신 자막 편집과 사운드를 사용해서."	서버 측에서 render.py로 렌더링하고 MP4 보내기

페이지가 저장할 수 없는 경우(해당 보기에 데이터베이스 없음), 프롬프트가 모든 것을 자체적으로 전달합니다: 빌드 프롬프트는 모든 설정 답변을 포함하고, 선택 프롬프트는 방향을 지정합니다. 붙여넣은 프롬프트가 도착하면 이를 진행 신호로 처리하고, 저장된 내용을 읽고 시작하십시오. 다시 묻지 마십시오.

Claude 세션이 페이지를 감시할 수 있는 경우(ArtifactComments action:"watch" 성공, 원격 세션은 불가능), 페이지는 동일한 프롬프트를 직접 보냅니다(comments.sendToClaude). 카드에는 "Claude로 전송됨"이라고 표시되고 Copy는 백업으로 유지됩니다. 이러한 웨이크에서 스레드를 읽고, 한 줄로 작업 중임을 답변하고, 작업을 수행한 다음, 변경 사항에 대한 짧은 메모와 함께 스레드를 해결하십시오. 타이머로 페이지를 폴링하지 마십시오. 시도해 보았지만 혼란스러웠습니다.

2. 브리프 읽고 자료 수집

ArtifactData get intake/current는 다음을 제공합니다: brief, url (선택 사항), content (붙여넣은 텍스트), files[] ({name,type,id,url}; 각각 Artifact read + path: <id>로 읽음), duration, aspect (landscape/portrait/both), count (1–5), styles[] 및 sound[] (스토리보드당 하나의 항목; sound[i] = {music:{on, mood}, sfx}), voiceover:{on, voice} (Kokoro 음성 ID 또는 "auto"), captions:{on, style:"designed"|"gallery"}, textLang (english | native | roman | mixed-roman | mixed-native) with lang2 (다른 언어, 기본값은 Urdu), skipDrafts (true이면 "스토리보드 건너뛰기, 비디오 만들기" 선택; 그럼 count는 1이고 styles/sound는 하나의 항목), notes, buildRequestedAt. 오래된 브리프에는 음성 및 언어 필드가 없을 수 있습니다: 음성 해설 없음, 영어로 처리하십시오. 오래된 브리프에는 sound[] 대신 단일 music/sfx가 있을 수 있습니다. 모든 스토리보드에 적용하십시오.

비디오는 무엇에 관한 것일 수 있습니다 — 회사뿐만 아니라. 주어진 내용을 바탕으로 작업하십시오:

• 브리프 및 붙여넣기/첨부된 콘텐츠는 토크, 아이디어, 강의 또는 프레젠테이션의 주요 출처입니다. 메시지, 대상, 비트, 기억에 남는 문구와 숫자를 추출하십시오.
• 웹사이트, 제공된 경우: scripts/extract_brand.py <url> <proj>는 로고 후보를 추출하고(로고가 SVG인 경우 logo.js 작성), 사용 빈도별로 정렬된 색상, CSS 색상/글꼴 변수 및 글꼴 패밀리를 추출합니다. WebFetch로 중요한 페이지를 읽어 사실, 태그라인 및 증거 자료를 얻으십시오. 사용하기 전에 선택한 로고를 살펴보십시오.
• 웹사이트도 없고 브랜드도 없는 경우: 주제에 맞는 룩을 디자인하십시오. 브랜드 제약이 분명히 중요한 경우에만 질문하십시오.
• 렌더링용 글꼴 가져오기: scripts/fonts.py <proj> "<Family>" ... (Google Fonts 패밀리; 프레임에 포함된 서브셋과 함께 fonts.js 작성).

절대 사실을 지어내지 마십시오. 출처가 일치하지 않는 경우(예: 두 가지 다른 직원 수), 하나를 사용하고 다른 것을 페이지의 플래그에 넣고 사용자에게 알리십시오 — 편집 가능한 자막을 통해 사용자가 해결할 수 있습니다.

3. 초안 방향 빌드

선택한 duration(초 수, 사전 설정뿐만 아니라) 및 선택한 aspect로 count개의 초안을 만드십시오 — 첫 번째 초안부터:

• landscape: 일반 보드(16:9, 160×90 단위).
• portrait: aspect:'portrait'가 있는 보드(9:16, 90×160 단위), 세로 프레임에 맞게 구성 — 세로 보기에 맞게 스택, 스케일 및 템포 조정; 절대 가로 레이아웃을 자른 것이 아닙니다.
• both: 각 방향은 가로 보드와 variantOf:'<landscape id>' 및 동일한 필드 키가 있는 세로 보드로 구성됩니다. 페이지는 16:9 / 9:16 스위치와 하나의 공유 자막이 있는 하나의 탭으로 표시합니다. 선택은 둘 다 포함합니다. 최종 버전도 쌍이며 각 모양은 별도로 렌더링됩니다. styles[]의 각 슬롯은 다음 세 가지 중 하나입니다:
• 메뉴의 스타일 — 사용자의 방향으로 사용하되, 이 주제에 맞게 해석하십시오(메뉴는 어휘집이지 레시피 모음이 아닙니다).
• "custom: …" — 사용자가 자신의 스타일을 단어로 설명했습니다. 충실히 따르십시오. 자신의 취향보다 우선합니다. 모호하거나 브리프와 충돌하는 경우에만 질문하십시오.
• "auto" — 완전한 자유가 있습니다. 이 자료에 가장 잘 맞는 것을 선택하십시오, 메뉴 안팎에서: 스타일을 발명하거나, 결합하거나, 미디어나 참고 자료에서 차용하십시오. 왜 적합한지 한 줄로 말하십시오.

방향은 스타일과 비디오가 요점에 도달하는 방식(아크와 결말)에서 달라야 하며, 단순히 색상만 달라서는 안 됩니다.

초안은 최종 버전보다 가볍습니다: 실제 타이밍, 레이아웃, 브랜드 색상, 글꼴, 로고 및 단어를 포함하되 세부 사항과 모션은 더 단순합니다. 그래도 위의 품질 기준을 충족합니다: 레이어드된 깊이감, 빛, 질감 및 아름다운 룩으로, 사용자가 이미 멋져 보이는 방향 중에서 선택할 수 있도록 합니다. 평평하고 단순한 초안은 방향을 저평가하고 선택을 더 어렵게 만듭니다. 첫 번째 버전도 품질을 떨어뜨리지 마십시오. 초안의 모든 프레임은 매력적으로 보여야 하며, 그래야만 사용자가 자신이 좋아하는 것과 싫어하는 것을 알 수

(이하 생략, 전체 내용은 원문의 나머지 부분을 동일한 방식으로 번역 필요)

[참고: 원문 SKILL.md가 중간에 잘려 있어 전체 번역이 불가능합니다. 제공된 내용까지 충실히 번역하였으며, 나머지 부분도 동일한 규칙을 적용하여 번역되어야 합니다.]