십데모은(는) 무엇을 하나요?
scripts/demo는 웹 앱을 촬영하고 해당 코퍼스를 ~/demo-reels-out/<workspace>/에 기록합니다 (DEMO_OUT_ROOT는 상위 디렉토리를 이동시키고, DEMO_OUT은 한 번의 실행 디렉토리 이름을 지정합니다): 장면별로 음성 해설이 포함된 mp4, 포스터, 레티나 스틸 이미지, 그리고 full-tour.mp4, manifest.json, index.html이 포함됩니다. 모두 로컬에서 처리됩니다. 엔진은 이 스킬에서 실행되며, 촬영 중인 앱에는 아무것도 설치되지 않습니다.
절대 양보할 수 없는 사항
각 항목은 한 번의 실행 또는 사용자의 인내심을 요구합니다.
- 고정된 빌드, 절대 개발 서버가 아님. 개발 서버의 모듈 그래프는 소스 코드를 편집하는 사람의 소유입니다. 이를 개인적인 위치에 복사하고 번들을 읽어 API 베이스를 확인하세요. 저장소가 없는 URL은
site모드입니다. localhost의 URL은 개발 서버이며 절대 촬영하지 않습니다. build모드에서는 모든 요청을 프로세스 내에서 모킹하고 시계를 고정합니다. 코퍼스가 게시되고, 실제 계정이 실제 사람들의 주소를 게시합니다.site모드는 두 가지 모두 의도적으로 포기합니다: 공개 페이지 전용입니다.- 자신의 포트와 출력 디렉토리를 소유하세요. 스튜디오는 자신이 시작하지 않은 서버를 채택하지 않습니다. 절대 패턴으로
pkill하지 마세요. - 1080p60 비디오, 2배 스틸 이미지. 이들은 별도의 설정입니다. 4K 비디오는 처리량이 초당 고정 픽셀 예산이기 때문에 떨림이 발생합니다.
- 동작을 수행한 후, 결과에 집중하여 내레이션하세요. 한 줄에 하나의 주제. 주제가 존재하기 전에는 절대 내레이션하지 마세요. 앱에 자체 타이머(실행 취소 창, 토스트)가 있는 경우 동작은 그 안에, 단어는 그 후에 배치하세요. 그렇지 않으면 영화는 작동하지 않는 기능을 보여줍니다.
- 한 장면을 촬영한 후 멈추고 질문하세요(8단계). 이 방법은 26개 이상의 장면을 촬영하기 전에 네 가지 결함을 발견했습니다.
- 매번 PNG를 읽으세요. 잘못된 대상을 프레이밍하면서 통과하는 장면은 실패이며, 오직 스틸 이미지를 눈으로 확인해야 잡을 수 있습니다.
- 그들이 말할 때까지 아무것도 최종이 아닙니다. 단어, 프레이밍, 속도, 다루는 내용 또는 음성에 관한 모든 노트는 재촬영 대상이며 협상 대상이 아닙니다: 변경하고 다시 촬영하세요. 그들은 당신이 볼 수 있는 것을 볼 수 없으므로, "너무 길다", "더 확대해", "확대를 너무 많이 하지 마"는 모두 완전한 지침이며, 장면은 두 번 촬영하는 것이 저렴합니다.
워크플로우
- 주어진 내용에서 모드를 선택하세요. 묻지 마세요. 공개 호스트의 http(s) URL은
site모드이며, 작업 공간은~/.shipdemo/<host>/입니다. localhost 또는 개인 주소의 URL은 개발 서버입니다: 그 뒤에 있는 저장소를 찾아 요청을 해당 저장소로 처리하세요. URL이 없으면 현재 있는 저장소를 의미하므로, 상위 디렉토리로 이동하여 웹 앱(Vite, React Router, Next, Astro, SvelteKit 또는 Remix 설정 옆에 빌드 스크립트가 있는package.json)을 찾으세요. 정확히 하나면build이고, 여러 개면 어떤 것인지 묻고, 없으면 URL 또는 경로를 요청하세요..origin이 이미 이 저장소를 가리키는 작업 공간은 재사용되며 다시 스캐폴딩되지 않습니다. 모드와 작업 공간 경로를 한 줄로 말하고 계속 진행하세요. scripts/doctor.sh를 실행한 후, 사용자에게 다른 것을 요청하기 전에 먼저 설정하세요. 그들은 스킬을 설치했을 뿐, 세 가지 스크립트를 실행하기로 한 것이 아닙니다. 누락된 것을 한 줄로 말하고, 설치할 것을 제안하며 대략적인 크기를 말하고, 동의하면 실행하세요.scripts/install.sh는 엔진과 Chromium(약 250MB)을 다루고 가능한 경우 ffmpeg도 설치합니다.scripts/install-voice.sh는 음성(약 350MB)을 설치하며, 사용자가 원하지 않으면 무음 촬영도 괜찮습니다. 묻지 않고 절대 설치하지 말고, 의사가 해석할 보고서를 건네지 마세요. 두 가지는 하지 않습니다: Node 업그레이드는 어떤 도구가 소유하는지 사용자가 알아야 하므로,sudo실행은 아무도 보고 있지 않은 스크립트에서 비밀번호 프롬프트가 멈추기 때문입니다. 두 경우 모두 스크립트는 하나의 명령을 출력하고 이를 전달합니다.- 아무것도 기록하지 않고 발견하세요.
site: URL을 열고 페이지의 목적, 보여줄 가치가 있는 세 가지, 안정적으로 가리킬 수 있는 것을 읽으세요. 로그인 페이지로 이동하면 중단하세요: 로그인된 앱은 해당 저장소에서 촬영되므로, 저장소 또는 공개 URL을 요청하세요.build:package.json에서 그대로 복사한 빌드 명령; 프레임워크 설정의 출력 디렉토리;.env*의 절대 API 호스트(build.forbid에 들어감); 테마 부트 스크립트가 읽는 키; 기존 fixture API 또는 MSW 핸들러;data-testid밀도; 자격 증명이 없는 라우트. scripts/scaffold.mjs <appRoot>또는scripts/scaffold.mjs --site <url>을 실행하세요. 앱에 아무것도 기록하지 않습니다.- 작업 공간의
demo.config.ts를 채우세요. 아직 알 수 없는 필수 필드는 발견이 완료되지 않았음을 의미합니다. config.md build전용:mock.ts와seed/를 작성하세요. 저장소에 자체 데이터 fixture가 있으면 재사용하되,@playwright/test를 가져오는 파일은 절대 사용하지 마세요: 하나의 실행에 두 개의 복사본이 있으면 Playwright가 거부하는 오류가 발생하고, 그 장면 하나가 아니라 전체 코퍼스가 실패합니다. 그런 다음DEMO_VOICE=0 scripts/demo --grep smoke를 실행하세요. 저장소에 fixture API가 있으면 재사용하세요(mocking.md). 스틸 이미지를 읽으세요: 로그인 상태, 시드된 데이터, 올바른 테마, 로그인 페이지 없음. 캡처 라인을 읽으세요. 둘 다 맞을 때까지 수정한 후, smoke 실행에서 입증된 것만으로demo/ui.ts를 작성하세요.- 먼저 스크립트를 작성하세요. 작업 공간의
profile.json을 채우세요(template/profile.json을 복사; 제품, 대상, 마무리 대사, 금지 단어). 그런 다음 script.md에 따라 모든 줄을 작성하세요: 훅, 단계, 페이오프, 마무리. 훅은 변형을 위해hooks.json에도 들어갑니다. 요청한 대로, 요청한 범위에서 촬영하세요. 명명된 기능은 한 장면입니다: 작성하고, 촬영하고, 전달하세요. "홈 페이지에서 검색 기록" 요청에 10개 장면 제안으로 답하지 말고, 제품에 더 많은 내용이 있다고 조용히 범위를 넓히지 마세요. 요청이 전체 제품일 때만 6~10개 장면을 제안하세요. 각 장면은 제목과 투어 순서의 한 줄 요약이며, 먼저 촬영할 장면을 묻습니다. - 멈추세요. 음성으로 그 장면을 촬영하세요. 음성 호출 수가
say호출과 일치하는지, 오버런이 없는지, 속도가 유지되었는지 확인하세요. 모든 스틸 이미지를 읽으세요. 사용자에게 mp4 경로를 제공하고 글의 레지스터, 확대 배율, 페이싱 및 음성에 대해 질문하세요. 그들이 답할 때까지 아무것도 작성하지 마세요. - 그런 다음
--grep을 사용하여 3~4개씩 배치로 촬영하세요. 매니페스트는 병합됩니다. 각 배치 후 스틸 이미지를 읽으세요.DEMO_BUILD=0 scripts/demo는 장면을 반복하는 동안 재빌드를 건너뜁니다 — 4분 대신 20초; 코퍼스를 생성하는 실행에서는 이를 제거하세요. DEMO_CAPTIONS=1 DEMO_TRACE_FRAMES=1로 전체 실행한 후scripts/check.mjs <out>를 실행하고<out>/index.html을 여세요. 캡처 테이블, 느린 클립 및 검사에서 발생한 모든 플래그를 보고하세요.- 변형. 사용자가 명시하지 않는 한 어떤 변형을 원하는지 물으세요:
reel,wide-phone,wide-laptop,wide-laptop-zoom,web또는all(scripts/variants.mjs --list가 각각 설명). 그런 다음scripts/variants.mjs <out> --only <list>를 실행하세요. 전화 사전 설정은 세로 녹화를, 노트북 사전 설정은 가로 녹화를 사용하므로, 두 가지를 모두 원할 때는 두 크기를 모두 촬영하세요. 전달하기 전에 변형당 하나의 포스터를 읽으세요.
장면
scene('tasks', { title: 'Your to-dos, beside your calendar', blurb: '...' },
async ({ actor, page, shot }) => {
await actor.click(page.getByRole('radio', { name: 'Today' }));
await actor.settle();
await actor.spotlight(
row('Send Sam the feedback'),
'And this one is from yesterday that I never got to, so it is flagged.',
{ scale: 1.8, stay: true }
);
await shot('overdue');
await actor.unfocus();
});
spotlight는 내레이션 마크를 취한 후, 카메라와 커서를 해당 줄의 시작 단어 위로 이동합니다. 주제에 따라 배율 조정: 패널 ~1.4, 행 ~1.7, 단일 컨트롤 ~2. 전체 화면에 대한 줄은 일반 say를 사용하고 줌은 없습니다. unfocus는 움직임보다는 힌트입니다: 카메라는 넓게 필요할 때만 나오므로, 같은 영역에 대한 연속적인 비트는 튀지 않고 미끄러지듯 움직입니다.
scenes.md · narration.md
절대 하지 않는 것
클라우드 TTS (영화는 개인 데이터에 대한 것). Playwright의 recordVideo (속도, 크기 또는 시작 제어 불가; 레코더가 대체). 기본값으로 4K. 음악, 인트로 카드 또는 크로스페이드. 라우트 크롤링에서 생성된 장면: 장면은 목적이 있는 안무입니다. 재시도: 재시도된 장면은 다른 영화입니다.
캡션, 검사 및 변형
게시할 목적의 모든 것에는 캡션이 켜집니다 (DEMO_CAPTIONS=1): .srt, .vtt, .lines.json 및 .captioned.mp4가 스크립트 자체에서 잘라져 나와 음성과 단어 대 단어로 일치합니다. 태운 캡션은 하단에 위치하며 플레이어 컨트롤 위로 올려집니다 (DEMO_CAPTION_MARGIN으로 재정의 가능; 절대 상단에 두지 않음).
scripts/check.mjs는 세 가지 검사를 실행합니다: 음성 (각 줄이 전사되어 스크립트와 비교), 화면 (매 0.5초마다 프로필의 neverOnScreen 단어를 읽고, 빨간색으로 그려진 모든 것을 확인), 프레임 (느린 간격). 누락된 도구는 설치 명령과 함께 건너뜁니다 (scripts/install-checks.sh). 연체 배지처럼 거기에 있어야 하는 빨간색도 나열됩니다: 목록을 읽고, 계산하지 마세요.
scripts/variants.mjs는 variants/presets.json을 읽습니다. 새로운 변형은 거기에 새 항목입니다: 캔버스, 앱이 위치한 곳, 훅과 캡션이 가는 곳, 하이라이트에 밀어 넣어야 하는 경우 zoom. 아무것도 다시 촬영되지 않습니다. 원본은 절대 건드리지 않습니다.
또한
DEMO_VOICE_VARIANTS=am_michael,bf_emma는 동일한 테이크를 더 많은 음성으로 혼합하여 (<scene>.<voice>.mp4), 다시 촬영하지 않고 음성을 오디션할 수 있습니다.
캡처 번호를 변경하기 전에 capture.md를 참조하세요.
빌드, 격리 및 매니페스트에 대해서는 runs.md를 참조하세요.
실행이 중단되거나 샷이 잘못 보일 때는 troubleshooting.md를 참조하세요.
엔진은 이 스킬에서 실행되므로, engine/의 수정 사항은 기계의 모든 프로젝트에 동시에 도달합니다: 거기서 편집하면 전파할 필요가 없습니다.