스타일: 광고 (Estilo anúncio)
단 하나의 규칙: 상단 부분(또는 가슴 높이 영역)은 화자가 말하는 내용의 메커니즘을 보여줘야 합니다. 문장을 다시 적지 마세요. 자막이 이미 말해줍니다. 말한 각 아이디어는 단어가 바뀔 때 전환되는 다이어그램이 됩니다.
시작하기 전에 ../perfil-criadora.md를 읽고 루트에 있는 perfil.json을 로드(또는 생성)하세요. 또한, 한 번의 메시지로 누락된 정보를 물어보세요: 제품/오퍼 이름, 최종 콜투액션(CTA: "댓글에 X" 또는 "링크 클릭"), 그리고 그녀가 보여주고 싶은 실제 이미지(제품 표지, 결과 스크린샷(숫자 포함), 그녀의 다른 영상 프레임). 이미지는 프로젝트의 assets/img/에 저장하세요. 로고, 표지, 숫자, 가격 또는 결과를 절대 만들어내지 마세요.
src/index.template.html (template/index.template.html에서 복사)은 15개의 미리 준비된 다이어그램과 예시 시간이 포함된 카탈로그입니다. CSS와 헬퍼는 유지하고, 헤드라인을 다시 작성하며, 그녀의 발화에 맞게 다이어그램을 선택/시간을 조정하고, 사용하지 않을 블록은 삭제하세요. 텍스트만 있는 이전 모델은 src/classico.template.html에 있습니다 (그녀가 이 스타일을 요청할 때만 사용: index.template.html 위에 복사).
구조: 헤드라인 뒤에 다이어그램 (필수)
- 0 → ~5초: 헤드라인만 표시. 큰 제목 (흰색 줄 + 강조 색상 줄, ~90–125px, 키워드에 선택적 밑줄 효과). 다이어그램, 앱 화면, 이미지 없음.
- 헤드라인 이후: 말한 아이디어당 하나의 다이어그램, 단어가 바뀔 때 전환. 다이어그램 내 텍스트는 짧은 레이블(1–3단어: "전", "AI 사용", "당신의 비즈니스")만 사용.
- 제품이 프로세스를 판매할 때는 이전 방식의 복잡성과 새 방식의 단순성을 나란히 보여주세요 (빽빽한 타임라인 + 시계 + ✕ 대 주문 하나 + ✓).
카탈로그의 다이어그램 (재사용 및 시간 조정):
| 말한 아이디어 | 다이어그램 | 블록 |
|---|---|---|
| "X를 함 → Y를 거침 → Z가 됨" | 휴대폰 카드 (실제 프레임) → 점선 화살표 + 움직이는 점 → 둥근 노드 → 화살표 → 결과 카드 | B2 |
| 오류/일시 중지 제거 | 오디오 파형: 문제 부분이 파란색/빨간색 레이블로 표시되고 사라짐; 시계 감소 | B3 |
| 자동으로 발생 | 요소가 저절로 나타나는 휴대폰 + 카운터 "0 클릭" | B4 |
| 이전 방식 × 새 방식 | 두 개의 패널: 빽빽한 타임라인 + 시계 + ✕ 대 주문 하나 + ✓ | B5 |
| 반론 ("시간 없음", "몰라요") | 아니오 ✕ / 예 ✓: 문제 카드가 ✕로 이어짐 → 화살표 → ✓가 있는 솔루션 카드 | B6 |
| 의심 → 증거 | 의심 풍선 → ✓가 있는 테스트 카드 | B7 |
| "제대로 설명해야 함" | 일반 요청 → 회색 결과 ✕ 대 자세한 지침이 입력되는 중 ✓ | B8 |
| 제공 목록 | 말한 각 항목마다 실제 이미지나 아이콘으로 채워지는 점선 슬롯 | B9 |
| 강좌 / 제품 | 실제 표지 + 내부로 날아가는 칩 + 상승 그래프 | B10 |
| 사회적 증거 | 실제 스크린샷 (조회수 카운터가 올라가는, 스크린샷 자체에서 카운터를 잘라냄) | B11 |
| 스타일 복사 | 참조 → 노드 → 동일한 스타일을 받는 그녀의 프레임 + "= 동일한 스타일" | B12 |
| 오퍼 / 출시 | 태그 + 도장 → 게시물 (전송 막대 포함) → "✓ 게시됨" | B13 |
| 세 단계 ("녹화, 편집, 게시") | 각 단어에 하나씩 켜지는 세 개의 노드 | B14 |
| 댓글 CTA | 단어를 입력하는 댓글 상자 ("나 원해요") + 다이렉트 카드 | B15 |
| 링크 CTA | 흰색 막대 "자세히 알아보기 ›" (깜빡임) | B16 |
렌더링하기 전에 각 블록을 읽고 스스로에게 물어보세요: "이 영역이 아이디어를 보여주고 있나요, 아니면 단순히 자막을 반복하나요?"
숫자: B3, B5, B11의 카운터는 마커로 표시됩니다 (__B3_SEG_ANTES__, __B5_SEG_NOVO__, __VIEWS_PRINT_1__…). montar.mjs는 마커가 남아 있으면 오류와 함께 중지됩니다. 실제 숫자(그녀가 말했거나 스크린샷에서 읽은)로 바꾸거나 카운터를 삭제하세요.
이미지: bruto.jpg는 비디오에서 자동으로 추출됩니다 (novo-anuncio.mjs). 그 외 모든 것 (표지, 스크린샷, 다른 비디오 프레임, 참고 자료)은 크리에이터가 보낸 경우에만 사용하세요. 이미지가 없으면 해당 다이어그램을 삭제하거나 다시 디자인하세요 (SVG로 그린 아이콘, 텍스트 카드). 예시 빈칸을 절대 남기지 마세요. 이름/@와 아바타는 perfil.json에서 가져옵니다 (montar.mjs가 __USUARIO__, __NOME__을 바꾸고 아바타를 넣습니다; 사진이 없으면 이니셜이 있는 원).
안전 영역 (Meta Reels 광고 — 필수)
**상단 14%, 하단 35%, 좌우 각 6%**를 비워두세요. 1080×1920에서 안전 영역은 x 65–1015, y 270–1248입니다: 모든 단어, 숫자, 스탬프, CTA, 자막 및 다이어그램 레이블이 이 영역 안에 있어야 합니다 (애니메이션의 확대/회전 최고점에서도). 장식(어두운 띠, 패널 그림자)만 벗어날 수 있습니다. $K --em video-projects/<slug> node ../../$E/scripts/zonas-seguras.mjs renders/<파일>.mp4 assets/seguras.jpg t1 t2 … 명령어로 확인하세요 (각 프레임에 빨간색 상자 표시).
다이어그램 영역 (프로젝트 루트의 reel.json)
블록은 1080×340 영역에 그려지며 montar.mjs가 이 영역의 위치와 크기를 조정합니다.:
| 프레이밍 | reel.json |
|---|---|
| 머리가 낮아 위쪽 공간이 남음 (머리 꼭대기가 y ≈ 450 아래) | {"faixa":"topo","zonaTop":280,"zonaAltura":<머리 꼭대기 − 290>,"capTop":<턱 + 20, 최대 1165>} |
| 프레임 내 머리가 높음 (셀카, 차량 내 근접샷) | {"faixa":"peito","zonaTop":<턱 + 20>,"zonaAltura":<≈ 1150 − zonaTop>,"capTop":<zonaTop + zonaAltura + 10, 최대 1165>} |
peito 모드에서는 턱에서 안전 영역 끝까지 어두운 띠가 덮고, 다이어그램과 자막이 그 위에 표시됩니다. 자막(높이 80px)은 y 1248까지 끝나야 합니다.
시각 요소
| 요소 | 규칙 |
|---|---|
| 어두운 띠 | topo: 상단에서 시작하여 투명해지는 그라데이션 rgba(0,0,0,.66). peito: 턱에서 ~y 1300까지 이어지는 어두운 띠. |
| 다이어그램 키트 | 패널 rgba(16,16,19,.92) 반경 22, 1px 밝은 테두리; 휴대폰 카드 160×284 (9:16) 실제 프레임 포함; 강조 색상의 AI 둥근 노드 (cor_ia); 강조 색상으로 움직이는 점선 화살표; 단어에 맞춰 터지는 빨간색 ✕ (#ff453a)와 녹색 ✓ (#30d158) 원형 스탬프; 인터페이스 텍스트는 Inter 폰트. 반복 장식 (파형 막대, 타임라인 클립)은 템플릿의 시드로 rnd()를 사용 — 절대 Math.random 또는 GSAP의 from:"random"을 사용하지 마세요. |
| 타이포그래피 | 헤드라인, 레이블 및 자막에 제목용 폰트 (Archivo Black 또는 프로필의 fonte_titulo). 흰색; 강조는 cor_destaque 색상 (기본 노란색 #FFD21F). |
| 움직임 | 짧은 진입: 0.45–0.6초 동안 올라오며 나타남 (power3.out / expo.out); 스탬프는 back.out; 카운터는 빨리 감기; 막대는 채워짐; 화살표는 자람. 나가기는 0.28초. 다이어그램은 말하는 단어에 맞춰 전환. |
| 자막 | 한 번에 한 단어, 46px, 흰색에 부드러운 그림자 (절대 외곽선 아님), 턱 바로 아래 (reel.json의 capTop). |
| CTA | 단어를 입력하는 댓글 상자 + 다이렉트 카드, 또는 흰색 막대 "자세히 알아보기 ›". |
색상, 크기 및 금지 사항: template/DESIGN.md (각 프로젝트에 복사됨).
컷 편집 규칙
- 모든 일시 정지(−30 dB / 0.15s)와 모든 반복을 제거하세요. 가능하면 ≤ 90초. 두 번 말한 구절: 마지막 것(수정된 것)을 유지하세요. 강조 반복("됐다, 됐다")은 오류가 아닙니다.
- 광고는 J/L 컷 없이 잘라냅니다 (
cortar.mjs --no-jl): 영상이 발화를 정확히 따라갑니다. - 컷 후
clean.mp4를 다시 전사하고 이중 구절과 잘린 단어가 있는지 확인하세요. 전체 전사는 반복을 숨깁니다: 또한 비디오 전체를 짧은 창으로 스캔하세요. 한 번의 호출로,$K --em video-projects/<slug> node ../../$M/transcrever.mjs assets/clean.mp4 --janelas 1,3,5,7,…(끝까지 2초 간격), 그리고 비교하세요.
속도 규칙 (크리에이터의 PC가 느릴 수 있음 — 아래 단계보다 우선 적용)
novo-anuncio.mjs의 전사는 이미--rapido입니다 (컷 포인트 선택 전용).clean.mp4의 재전사 (자막용)는 정밀 모델을 사용합니다 — 컷 버전당 한 번.- 접합과 반복은
--janelas를 사용한 한 번의 호출로 확인하세요. 절대 창을 하나씩 확인하지 마세요. - 드래프트 전체를 렌더링하여 프레임을 보지 마세요.
$K --em video-projects/<slug> hyperframes snapshot --at t1,t2,… -o snapshots(다이어그램당 한 시간)을 사용하고 PNG를 확인하세요. 스냅샷이 올바를 때 한 번만 렌더링하세요. - raw.mp4 / clean.mp4의 인코더는 자동으로 선택됩니다. 변경하지 마세요.
- 각 느린 단계 전에, 무엇이 실행되고 있는지 포르투갈어로 한 줄로 알리세요 ("Renderizando o anúncio — pode levar uns minutos."). 그래야 대기 시간이 멈춤처럼 보이지 않습니다.
워크플로우 (모든 명령은 $K 런처를 통해)
E=.claude/skills/estilo-anuncio · M=.claude/skills/_motor · K = videos-opus 스킬의 런처: "<VO>\bin\node.exe" "<VO>\scripts\video.mjs" kit. 여기서 <VO>는 이 가이드를 읽도록 지시한 SKILL.md가 있는 videos-opus 스킬 폴더입니다. 이 런처는 휴대용 프로그램을 경로에 추가하고 키트의 작업 폴더에서 실행됩니다 ($K pasta는 현재 폴더를 표시합니다; 프로젝트는 <pasta>\video-projects\<slug>에 있습니다). $K --em <하위폴더> …는 해당 하위폴더 내에서 실행됩니다. npx, Python 또는 단독 node는 사용하지 마세요: 모든 것은 $K를 통해 실행됩니다.
- 프로젝트 + 빠른 전사:
$K node $E/scripts/novo-anuncio.mjs "<비디오>" <slug>→video-projects/<slug>/생성: raw.mp4, raw.json,assets/palavras.txt, 두 모델,assets/img/bruto.jpg,reel.json. - 프레이밍: 그리드가 있는 연락처 시트
(
$K --em video-projects/<slug> ffmpeg -i assets/raw.mp4 -vf "fps=1/5,drawbox=x=65:y=270:w=950:h=979:color=red:t=6,drawgrid=w=1080:h=100:[email protected]:t=2,scale=270:-1,tile=7x2" -frames:v 1 assets/contato.png) 그리고 확인: 100px마다 노란색 선, 빨간색 상자 = 안전 영역. 머리 꼭대기와 턱을 찾아reel.json을 작성하세요 (위 "다이어그램 영역" 표 참조). - 컷:
assets/palavras.txt를 읽고assets/keeps.json을 작성하세요;assets/내에서:$K --em video-projects/<slug>/assets node ../../../$M/cortar.mjs --no-jl. - 확인: 프로젝트 루트에서:
$K --em video-projects/<slug> node ../../$M/transcrever.mjs assets/clean.mp4 assets/transcript.json --nomes "<프로필 용어>"; 읽기;--janelas스캔 실행; 컷이 깔끔해질 때까지 조정; 잘못 들린 단어 →assets/caption-fixes.json. - 구성:
src/index.template.html재작성: 0–5초 헤드라인, 이후 말한 아이디어당 하나의 다이어그램;$K --em video-projects/<slug> node ../../$M/ancoras.mjs "구절" …시간 사용 (프로젝트 루트); 실제 이미지는assets/img/에. - 조립 + 검사:
$K --em video-projects/<slug> node ../../$E/scripts/montar.mjs(마커나 누락된 이미지가 있으면 오류와 함께 중지) →$K --em video-projects/<slug> hyperframes lint(0 오류) → 각 다이어그램에서$K --em video-projects/<slug> hyperframes snapshot --at …그리고 확인 (얼굴이 가려지지 않음, 레이블 읽기 가능, 숫자 정확함, 예시 데이터 없음) → 스냅샷/시간에 대해zonas-seguras.mjs실행 → 렌더링 및 전달 (런처를 통해, 키트 작업 폴더에서):$K node $M/renderizar.mjs <slug>— 잠금 확인, 백그라운드 렌더링, 검증 및prontos/로 자동 복사. 출력 3 = 아직 렌더링 중:$K node $M/renderizar.mjs <slug> --esperar를 실행하여 PRONTO가 나올 때까지 기다리세요. 절대$K --em video-projects/<slug> hyperframes render를 직접 실행하거나prontos.mjs를 수동으로 실행하지 마세요. 그런 다음 다이어그램 시간에zonas-seguras.mjs renders/<slug>-final.mp4 …를 실행하세요. - 전달: 포르투갈어로 간결하게 답변: 위치, 잘라낸 내용, 사용된 이미지, 의문점, 비디오가 Meta 안전 영역을 준수한다는 사실. 광고를 게시하거나 업로드하지 마세요.
광고 변형 (크리에이터가 "버전 여러 개"를 요청할 때)
동일한 컷, 다른 헤드라인 및/또는 다른 CTA: 프로젝트 복사 (video-projects/<slug>-v2), B1 블록과 CTA만 교체, 조립, 헤드라인 스냅샷 및 렌더링. 컷이나 전사를 다시 하지 마세요.
전달 후 조정
"가격 부분 빼줘" → keeps.json, 3-4단계, ancoras.mjs로 구간 이후 다이어그램 시간 재계산 및 6단계. "헤드라인 바꿔" → B1 및 6단계. "자막 더 위로" → reel.json의 capTop 및 6단계. 그녀가 변경을 요청하지 않은 것은 절대 처음부터 다시 하지 마세요.