Gravar site (사이트 녹화)
이 스크립트는 보이지 않는 브라우저에서 사이트를 열고, 프레임 단위로 진행하며 절대 끊기지 않는 MP4를 생성합니다. 무거운 애니메이션도 문제없습니다. 녹화는 스크립트가 직접 수행하며, AI는 모드만 선택하고 명령어를 실행하고 마지막에 이미지를 확인합니다. 따라서 이 스킬은 가장 저렴한 모델로 실행하세요:
- Claude Code: Haiku (
/model haiku) 또는 낮은 노력의 Sonnet. Opus는 낭비입니다. - Codex / ChatGPT: mini 모델 또는 낮은 노력 모델.
- 기타 에이전트 (Gemini CLI, Antigravity, Cursor): 빠른 모델 (Flash 또는 이에 준하는 모델).
서브 에이전트를 열거나 다른 에이전트에 위임하지 마세요: 작업을 설명하는 비용이 명령어를 실행하는 비용보다 큽니다.
실행
node "${CLAUDE_SKILL_DIR}/scripts/gravar.mjs" --url https://site.com --saida "C:/caminho/entregas/site-pc.mp4"
해당 머신에서 처음 실행 시: cd "${CLAUDE_SKILL_DIR}/scripts" && npm install. 스크립트가 Playwright의 Chromium과 ffmpeg를 자동으로 찾습니다.
없으면 오류 메시지에 설치 방법이 표시됩니다. 소요 시간은 1~3분입니다.
출력: MP4 파일과 RESULTADO {...} 한 줄 (ok, 길이, 크기, 검증 결과, folha_de_contato 포함).
두 가지 모드
- 자동 (기본, 스크립트 없음): 페이지 상단을 보여주고 메뉴 버튼에 마우스를 올립니다. 섹션별로 아래로 스크롤하며 각 섹션에서 탭을 열고, 질문과 답변을 열고, 폼 옵션을 클릭하고, 이름("Maria")과 짧은 메시지를 입력하고, 버튼과 링크에 마우스를 올립니다. 그런 다음 상단으로 돌아갑니다. 최대 75초 (
--max 60으로 단축 가능). 대부분의 사이트에 적합하며, 두 가지 다른 구조에서 테스트되었습니다. - 스크립트 (
--roteiro roteiro.json): 운영자가 정확한 순서를 원하거나 자동 모드가 실패한 경우 사용합니다. 형식과 액션은 referencia/roteiro-exemplo.json을 참조하세요. 선택자는 Playwright 형식 (#id,.classe,text=Agendar,role=button[name="X"]).
옵션: --viewport 1440x900, --fps 30, --bloquear dominio.com (차단 추가), --sem-folha.
스크립트가 이미 준수하는 규칙
- 폼을 절대 제출하지 않으며 WhatsApp, Instagram 또는 다른 사이트를 절대 열지 않습니다: 링크는 마우스 오버만 받습니다.
- 모든 네트워크를 허용합니다. 지도, 폰트 및 임베디드 비디오는 이렇게 해야만 로드됩니다. 사이트 도메인만 허용하고 나머지를 모두 차단하면 지도가 깨지고 브랜드 폰트가 변경됩니다.
- 녹화 전에 지도와 iframe이 실시간으로 로드될 때까지 기다립니다.
- 스크롤이 끊기거나, 폼이 제출되거나, 창이 열리거나, 사이트를 벗어나면 실패(
ok: false)를 반환합니다.
전달 전 확인 (필수)
folha_de_contato이미지(전체 비디오의 12개 프레임)를 읽습니다. 다음 항목을 확인합니다: 흰 화면, 누락된 이미지, 잘못된 폰트, 오류가 있는 지도, 테스트 텍스트(XXXXXX, "lorem", CRP 또는 임시 전화번호), 커서 위치 이상.- 문제가 있으면 사이트를 수정하거나 스크립트를 사용합니다. 수정 사항 없이 전달하지 마세요.
- 접점 시트를 삭제하고 (
rm명령어로folha_de_contato경로의 파일 제거), 운영자에게 MP4 경로, 길이 및 크기를 알려줍니다.
비디오는 클라이언트의 entregas/ 폴더에 저장됩니다. 전달 여부는 운영자가 결정합니다.
제한 사항
- 가로 방향만 지원합니다. 세로 비디오의 경우
--viewport 390x844로 크기를 변경할 수 있지만 터치를 시뮬레이션하지는 않습니다: 향후 확장으로 간주하고 약속하지 마세요. - 로그인이 필요하거나 실제 데이터로만 열리는 사이트: 스크립트와 미리보기 URL을 사용하세요.
- 사이트를 수정한 후 다시 녹화하려면 먼저 변경 사항을 게시하세요 (스크립트는 공개 주소 또는 서버가 실행 중인
http://localhost:porta를 녹화합니다).