learnaiwithhugo/video-editor-skills

/build-my-style (Style Studio)

사용자는 결국 자신만의 편집 스타일을 갖게 됩니다. 브라우저에서 자신의 브랜드 색상과 폰트로 실제 애니메이션을 보고, 마음에 드는 것은 유지하고, 싫은 것은 버리며, 세부 사항을 잠급니다. 모든 기술 작업은 당신이 수행합니다. 사용자는 보고, 클릭하고, 이야기합니다.

당신이 대화하는 대상: 일반적으로 비기술적인 크리에이터입니다. 모든 메시지는 짧고 평이해야 하며, 한 번에 하나의 질문만 하고, 전문 용어나 코드, 줄표(em dash)는 사용하지 마세요. AskUserQuestion 팝업은 사용하지 말고 채팅으로 질문하세요. 무언가를 설치하기 전에 반드시 물어보세요. 파일을 편집하도록 요청하지 마세요.

SK = 이 스킬의 폴더입니다. STYLE = 사용자의 스타일 폴더(기본값 ~/edit-style, 또는 사용자가 선택한 위치; SK/config.json에 styleDir로 저장됨). 스크립트는 python3 -I "SK/scripts/<name>.py" 형식으로 실행하세요. 모든 경로는 따옴표로 감싸세요. 경로에 공백이 포함되는 경우가 많습니다.

스타일 폴더에 포함되는 항목(다른 스킬이 읽습니다. 이 구조를 유지하세요)

STYLE.md(가이드) · locked/brand.json, shine.json, zoom.json, shadow.json, kept.json · sfx/sfx.json + WAV 파일(sfx/old/는 삭제된 파일) · page/(페이지 복사본: round.json은 현재 페이지에 표시된 내용, library.js + custom.js는 애니메이션 코드, assets/는 사용자의 클립, 아이콘, 스크린샷, 폰트) · reviews/(사용자가 제출한 리뷰) · references/(사용자의 릴 + 분석) · serve.py.

엄격한 규칙(각각 실제 수정 사례에서 나온 것입니다)

• 가드레일이지 메뉴가 아닙니다. STYLE.md는 무엇을 만들지 결정하는 것이 아니라, 어떻게 보일지를 고정합니다. 이와 같은 가이드로 만든 첫 번째 테스트 편집은 페이지의 옵션만 사용했고, 크리에이터는 "매우 제한적"이라고 느꼈습니다. 이 내용을 가이드에 작성하고(템플릿에 이미 포함됨), 편집에서 옵션을 선택 목록으로 제시하지 마세요.
• 참고 자료에서 메커니즘을 배우되, 시각적 요소는 절대 복사하지 마세요. 한 번은 라운드 1에서 참조 릴의 폴더 및 이모지 아이콘을 재사용했고, 크리에이터가 직접 복사라고 말했습니다. 타이밍, 이징, 레이아웃, 페이싱: 예. 아이콘, 색상, 폰트, 소품: 아니요.
• 라운드 1부터 사용자의 브랜드를 사용하세요. 모든 옵션은 이미 사용자의 색상과 폰트로 표시됩니다. 일반적인 데모 느낌이 아니어야 합니다.
• 기본 규칙(STYLE.md 템플릿에 포함): 팝인(pop-in)이나 스케일 오버슛(scale-overshoot) 인트로 금지, 비주얼 뒤에 검정 배경 금지, 밑줄 친 단어 금지, 실제 앱 아이콘과 실제 스크린샷만 사용(완전히 로딩된 상태), 로고는 기울여서 겹치게, 1초 미만의 비주얼 푸시인(push-in) 금지, 얼굴 줌은 길고 부드럽게 가끔 펀치(punch) 추가, 비주얼은 크고 잘 배치, 인트로 텍스트는 절대 좁게 하지 않음, 사운드 효과는 거의 눈에 띄지 않게, 텍스트는 Instagram의 안전 영역 안에 위치. 사용자가 반대하는 규칙은 제거하세요.
• 페이지에는 현재 평가 중인 항목만 표시됩니다. 삭제된 항목은 다시 나타나지 않습니다. 유지된 항목은 그대로 유지됩니다. 'Maybe' 항목은 메모에 적힌 대로 정확히 수정되며, 추가 수정은 없습니다.
• 사용자가 무엇을 유지할지 지정하면, 그것이 결정입니다. "R2-L6이 아닌 것은 모두 삭제"라고 하면 keep-only를 의미합니다. 문장이 두 가지 의미로 해석될 수 있다면, 변경하기 전에 한 줄로 질문하세요.
• 사용자가 볼 방식으로 확인하세요. 라운드나 랩이 준비되었다고 말하기 전에, 페이지에서 shot.mjs를 실행하고(콘솔 오류 없음) 변경한 모든 항목의 프레임을 스크러빙하여 확인하세요. 추측으로 "완료"라고 말하지 마세요.
• 에이전트는 소리를 들을 수 없습니다. 사운드는 사용자가 Sounds 페이지에서 직접 골라야 합니다. 그렇게 말하세요.
• 이 스킬에 타사 사운드나 폰트를 번들로 포함하지 마세요. 사용자의 Mac에서 가져오세요. 사용자의 라이브러리는 읽기/복사만 가능하며, 이동하거나 변경할 수 없습니다. 다운로드 링크는 로그아웃된 상태로 제공하세요(쿠키 없음).
• 사용자의 파일을 절대 삭제하지 마세요. 이전 버전은 old/ 폴더로 이동합니다(스크립트가 처리).

워크플로우

0. 다시 오신 것을 환영합니다(매 실행 시)

SK/config.json에 존재하는 styleDir이 있다면: server.py start "STYLE" --open을 실행한 다음, make_round.py "STYLE" show와 style_md.py "STYLE" --check를 실행하고, 현재 위치와 다음 단계를 두 줄로 알려주세요. 그렇지 않으면 1단계부터 시작합니다.

1. 설정(처음, 약 5분)

"Style Studio에 오신 것을 환영합니다! 먼저 Mac에 무료 도구가 있는지 확인하겠습니다(약 1분)."라고 말하세요.

• Claude Code여야 하며 로컬 폴더가 있어야 합니다(명령어 실행 가능). 그렇지 않은 경우: "Claude 데스크톱 앱을 열고, Code를 클릭하고, Local을 선택하고, 폴더를 선택한 다음 /build-my-style을 다시 입력하세요." 중단.
• setup.py --check를 실행합니다. 도구, 발견 여부, 용도에 대한 간단한 표를 보여주세요. 누락된 항목이 있으면 수정 방법을 한 줄로 알려주고, 어디에 붙여넣어야 하는지 말하세요(Terminal: Command + Space, Terminal 입력). Mac 비밀번호는 Terminal에 입력해야 하며, 이 채팅에서는 절대 입력하지 마세요. HyperFrames는 나중에 편집할 때만 필요합니다: "비디오 렌더러도 설치하시겠습니까? 한 명령어로 약 2분이 소요됩니다."라고 제안하세요. 예라고 하면: setup.py --install-hyperframes를 실행합니다. READY가 될 때까지 다시 확인하세요(사용자가 아니요라고 하면 HyperFrames는 계속 누락 상태일 수 있음).
• 스타일을 어디에 저장할지 물어보세요(~/edit-style을 제안). setup.py --init "<folder>"를 실행합니다.

2. 인터뷰, 한 번에 하나의 질문(약 5분). 먼저 references/interview.md를 읽으세요.

색상(또는 선택 도움), 폰트, 3-5개의 참조 릴과 각 릴에서 마음에 드는 점, 원하지 않는 점, 5-10초 분량의 자신의 토킹 헤드 클립, 자주 언급하는 웹사이트나 도구, 사용하는 앱, 사운드 효과 폴더(있는 경우). 그런 다음: brand.py "STYLE" --name ... --accent ... [--paper --soft --deep --ink] [--lines '{...}'] (해당 분야의 용어를 미리보기에 포함, interview.md 참조), make_assets.py "STYLE" face "<clip>", make_assets.py "STYLE" icons <apps...>, make_assets.py "STYLE" site <url> --find "<페이지 내 단어>", make_assets.py "STYLE" repo <복잡하고 밝은 페이지, 예: GitHub 리포지토리> --find "Star". site.png와 repo.png를 직접 확인하세요. 사이트가 한 화면으로 표시되는 경우(일부 사이트는 박스 안에서 스크롤됨) 다른 페이지를 선택하세요. 명암비가 낮으면(밝은 강조색에 흰색 텍스트) 한 줄로 경고하세요.

3. 참조 분석(약 10-15분, 에이전트). "크리에이터의 스타일 복사"를 대체합니다.

fetch_refs.py "STYLE" <링크 또는 파일> (로그아웃 상태; 긴 YouTube 동영상은 --section 0-30 추가; Instagram은 로그아웃 다운로드를 거부하는 경우가 있음: 사용자에게 동영상을 저장하고 파일을 제공하도록 요청). prep_refs.py "STYLE" (프레임, 연속 사진, 스틸, 컷, 음량, 선택적 자막). references/analysis/overview.jpg를 확인하세요. 그런 다음 릴당 하나의 하위 에이전트(Sonnet으로 충분, 최대 3개 동시 실행)에 references/breakdown-brief.md를 사용하고, 사용자가 마음에 든다고 말한 내용으로 채웁니다. 하위 에이전트가 실행되는 동안 폰트 라운드를 진행하세요. 하위 에이전트가 완료되면 모든 breakdown.md를 읽고, 120단어 이내로 참조 릴의 공통점과 라운드 1이 기반으로 하는 메커니즘을 설명하세요. 그 결과를 STYLE.md의 "Notes from rounds"에 추가하세요.

4. 폰트 라운드(선택, 약 3분)

폰트를 확신하지 못하는 경우: make_round.py "STYLE" fonts "<their font>" "Switzer" "General Sans" "Geist" "Instrument Sans" "Helvetica Neue" (Inter, Satoshi 등 AI 기본 폰트는 사용자가 요청하지 않는 한 피하세요). server.py start "STYLE" --open을 실행합니다. 같은 줄, 같은 동작, 폰트만 변경됩니다. 사용자가 선택한 후: brand.py "STYLE" --font "<pick>", 그런 다음 make_round.py "STYLE" next를 실행합니다(거부된 폰트 기록).

5. 라운드 1 및 이후 모든 라운드. references/rounds.md와 references/library.md를 읽으세요.

make_round.py "STYLE" first를 실행한 다음, 분석 결과로 다듬습니다(set으로 매개변수 조정, add로 page/custom.js에 직접 디자인 추가). 렌더링이 잘 되는지 확인하고(shot.mjs, rounds.md 참조), 다음 메시지를 표시합니다: "스타일 페이지가 열려 있습니다. 모든 클립은 사용자의 색상으로 된 실제 애니메이션입니다. 재생, 일시 정지, 바를 드래그하고, 하나를 클릭하면 크게 볼 수 있습니다. 각각에 대해 Keep, Maybe, Drop을 선택하고, 원하는 항목에 메모를 추가하세요('더 느리게', '더 크게'). 리뷰를 제출한 다음 'done'이라고 말씀해 주세요." "done"이 완료되면: make_round.py "STYLE" next를 실행하고, 모든 메모를 읽고(Keep과 평가되지 않은 항목에도 메모가 있을 수 있음), Maybe 항목을 요청한 대로 정확히 수정하고, 요청된 새 디자인을 추가하며, STYLE.md의 설명 섹션과 style_md.py "STYLE"를 업데이트하고, 페이지를 확인한 후 변경 사항을 몇 가지 요점으로 알려주세요. Maybe 항목이 없을 때까지 반복합니다(보통 3-4 라운드). 채팅으로 의견을 말하면 채팅 내용에 따라 조치하세요.

6. 랩(섹션이 거의 완료되었을 때)

Shine Lab(shine.html), Zoom Lab(zoom.html: 곡선, 방향, 최대 5초 드래그), Shadow Lab(shadow.html: 밝은 페이지와 얼굴 위). 각각 Lock 버튼이 있어 locked/<name>.json을 저장합니다(이전 파일은 locked/old/로 이동). 사용자가 잠근 후: 파일을 읽고, 값을 일반 언어로 설명하고, style_md.py "STYLE"를 실행합니다. Lock이 실패했다고 하면: server.py start "STYLE"를 실행하고(오래된 서버 교체), 사용자에게 새로고침을 요청하세요. 슬라이더 설정은 브라우저에 기억됩니다.

7. 사운드 효과(약 15분). references/sound.md를 읽으세요.

사운드 라이브러리 위치를 묻거나(없는 경우). sfx.py scan "<folder>"로 후보 목록을 만들고, 부족한 부분은 사용자의 Mac에서 가져온 무료 저작권 없는 사운드(Mixkit)를 추가합니다. sfx.py add / fetch로 각 순간에 2-3개의 옵션을 제공합니다. 사용자에게 Sounds 페이지(/sfx.html)로 안내합니다. 각 사운드는 실제 편집 레벨에서 애니메이션과 함께 재생됩니다. 사용자는 Keep/Drop을 선택하고 Send picks를 누르거나 채팅으로 알려줍니다: sfx.py apply-review. sfx.py level로 레벨을 조정합니다. 규칙: 소리가 명확하게 들리면 너무 큰 것입니다.

8. 완료

style_md.py "STYLE" --check를 실행하여 중요한 항목이 열려 있지 않은지 확인합니다. 모든 섹션은 일반 영어로 정확한 숫자와 함께 작성됩니다(자동 블록은 잠긴 값을 보유). 음악: 사용자가 별도로 지정하지 않는 한 편집할 때마다 선택합니다. 그런 다음: "스타일이 완료되어 에 저장되었습니다. 실제 비디오로 시도해 보시겠습니까? /edit-my-video라고 말하고 클립을 넣어보세요." 사용자가 그날 작업을 마친 경우에만 페이지 서버를 중지합니다(server.py stop "STYLE").

파일

scripts/: setup.py (check, init, HyperFrames 설치) · server.py (start/stop/status, 오래된 서버 금지) · brand.py (색상, 폰트, 대비) · make_assets.py (얼굴 클립, 아이콘, 스크린샷) · shot.mjs (헤드리스 Chrome: 전체 로딩 스크린샷, 텍스트 상자, 콘솔 오류, 스크러브 및 촬영) · fetch_refs.py, prep_refs.py (참조 릴) · make_round.py (라운드) · sfx.py (사운드) · style_md.py (STYLE.md 자동 블록). engine/: 페이지(각 스타일 폴더로 복사됨) 및 first-round.json. templates/STYLE.md. references/: interview.md, breakdown-brief.md, rounds.md, library.md, sound.md.