stageshow로 Claude Code가 휴대폰에서도 읽히는 히어로 데모를 짜게 하는 법
- 휴대폰 390px720px 창을 절반 아래로 줄임358×300 레이아웃을 따로 짬
- 휴대폰 글자 중간값4.7~5.5px10.2~11px
- 창 배치사방 여백 안에 통째로창 아래를 잘라 냄
- 글자가 든 목록 행5행3행, 나머지는 회색 막대
- 스스로 한 확인스크린샷 스크립트film.mjs --gate
- 비용(API 환산)$0.89~1.06$2.89~3.48
휴대폰 레이아웃을 따로 짠다
stageshow를 깔고 맡긴 세 번은 모두 휴대폰 화면에서 쓸 358×300 레이아웃을 따로 짰습니다. 사이드바를 빼고 금액을 거래처 이름 아래로 내려, 휴대폰에서도 글자가 10px 안팎으로 남았습니다.
가짜 제품 화면은 실제 앱을 띄워 찍지 않고 코드로 그린 화면입니다. stageshow는 이런 화면을 React로 짜게 하는 스킬입니다. 프로젝트 폴더에서 아래 첫 줄을 치면 .claude/skills/stageshow에 복사됩니다. 둘째 줄은 촬영 검사가 쓰는 playwright-core를 깝니다.
npx skills add benjitaylor/skills --skill stageshow -a claude-code -ynpm i -D playwright-coreClaude Code를 새로 열어 아래 요청을 보냅니다. 스킬 이름을 붙이지 않았는데도 세 번 모두 첫 동작으로 stageshow를 불렀습니다.
랜딩 페이지 히어로에 넣을 제품 데모를 만들어 줘. 제품은 프리랜서가 거래처에 청구서를 보내는 웹앱 '청구서함'이야. 실제 화면 캡처 대신 코드로 그린 제품 화면에서, 커서가 청구서 목록의 한 건을 골라 '보내기'를 누르면 상태가 '보냄'으로 바뀌는 10초 남짓의 반복 애니메이션이면 돼. 히어로 카피 옆에 들어가니 크기는 720×340. React로 src/HeroDemo.tsx 에 만들고 src/App.tsx 에서 띄워 줘.데모를 배포하거나 프로젝트에 넣기 전에
stageshow는 MIT 라이선스(Copyright 2026 Benji Taylor)입니다. 예제에 든 실제 앱 아이콘과 kit/brands의 로고는 stageshow 라이선스에 들지 않아, NOTICE.md에 적힌 출처마다의 라이선스와 상표 조건을 따릅니다.
설치 명령은 skills-lock.json도 만듭니다. Claude Code는 스킬에 든 React 부품 모음인 kit으로 데모를 짭니다. kit은 React 18 이상과 lucide-react가 있어야 돌아갑니다. Claude Code가 kit 폴더를 src/kit으로, 촬영 스크립트를 scripts/로 복사하는 cp -R 명령은 권한 확인을 띄우니 승인합니다. 촬영 사진 폴더와 켜 둔 개발 서버가 남을 수 있습니다.
촬영 검사는 설치된 Chrome을 씁니다. 다른 곳에 깐 Chrome이나 Chromium은 CHROME_PATH로 지정합니다. playwright-core가 없으면 검사는 설치 명령만 알리고 멈춥니다.
촬영 검사가 세로로 길쭉한 창을 잡는다
촬영 검사는 film.mjs가 데모를 헤드리스 Chrome에서 일정 간격으로 찍어 프레임마다 구도와 여백의 결함을 찾는 단계입니다. --gate를 붙이면 고쳐야만 하는 결함이 0줄일 때만 rehearsal passed로 끝납니다. 세 번 모두 첫 390px 촬영에서 창이 세로로 길쭉하다는 framing 줄에 걸렸습니다.
휴대폰 폭 첫 촬영은 세 번 모두 세로로 길쭉한 창에 걸려 레이아웃부터 다시 짰다
Claude는 휴대폰 레이아웃 높이를 380~400에서 300으로 낮춰 창 아래를 잘라 내고 다시 찍었습니다.
1회차를 첫 휴대폰 촬영 직전으로 되돌려 다시 찍으면 framing 1줄과 여백 2줄로 실패합니다. 상태 배지 여백까지 고친 최종본은 rehearsal passed로 끝납니다.
검사는 여백과 잘림 같은 실수만 셉니다. 3회차는 요청에 없던 '실행 취소' 토스트를 루프 끝에 넣었고, 검사는 그 자리만 고치게 했습니다. 이 토스트는 Claude의 마지막 답과 REHEARSAL.md에 적혀 있었으니, 요청 밖 박자는 거기서 보고 뺄지 정합니다.
촬영 검사를 다시 돌려 보려면
개발 서버를 띄운 채 프로젝트 폴더에서 돌립니다. 주소는 개발 서버가 알려 준 것으로 바꿉니다. --width를 빼면 1280px 화면에서 찍습니다.
node .claude/skills/stageshow/scripts/film.mjs http://localhost:5173/ --width 390 --gate고친 뒤에도 남은 lopsided·jump 줄과 재현한 첫 촬영의 handoff shift 줄은 사람이 보고 판단할 후보라 gate가 세지 않습니다. --reduced를 붙이면 동작 줄이기 설정에서 보이는 한 장을 찍습니다. 프레임 간격이 한 번이라도 평소의 1.6배를 넘거나 페이지에 404 같은 오류가 나면 inconclusive가 붙습니다. 이 시험의 루프 촬영은 모두 그랬습니다. 판정하지 못한 움직임이 있다는 뜻이고, gate 결과는 따로 나옵니다.
색과 글꼴은 요청에 적는다
색과 글꼴을 정하지 않은 요청이라 세 번 모두 파란 강조색과 기기에 깔린 한글 글꼴로 그렸습니다. 구도도 회색 바탕 위에 창 아래를 잘라 낸 같은 모양이었습니다. 세 회차 모두 스킬이 품질 기준으로 넣어 둔 기준 예제 hero-demo를 복사해서 시작했기 때문입니다.
제품의 색과 글꼴이 정해져 있으면 그 값이 든 파일을 요청에 적습니다. stageshow는 제품 코드의 색과 간격 값을 옮겨 오는 단계를 거칩니다.
색과 글꼴은 src/styles/tokens.css 의 값을 그대로 써 줘.