웹사이트 런칭 비디오
사용자의 언어로 응답하세요. 비디오 카피는 별도 요청이 없는 한 영어로 작성됩니다.
출력: <브랜드>_launch.mp4 파일이 작업 디렉토리에 생성됩니다 (1920x1080, 30fps, H.264 + AAC).
비용: 생성 크레딧이 필요하지 않습니다. 이 워크플로우에서는 generate_video/generate_audio를 절대 호출하지 마세요. 모든 것은 Higgsfield 샌드박스에서 코드로 렌더링됩니다.
요구 사항
- Higgsfield MCP 커넥터 (
sandbox_exec,media_upload,media_confirm,get_workflow_instructions제공) - 브라우저 도구 (내장 브라우저 또는 Chrome의 Claude)로 사이트 읽기
입력 (누락된 경우에만 질문)
- 웹사이트 URL (필수)
- 선택 사항: 쿠폰/할인 정보, 사용자 본인의 제품인지 유료 프로모션인지 여부 (프로모션의 경우 게시 시
#ad추가 알림), 음악 스타일, 9:16 세로 버전 여부
1단계 - 사이트 읽기
- URL로 이동한 후 JS
document.body.innerText실행 (SPA는 ~2초 대기). H1, 부제목, 4-6개의 기능 제목, 가격, 제안/쿠폰 텍스트, 보증/신뢰 문구, CTA 레이블 수집. - 스크린샷을 찍고 2-3번 스크롤하여 시각적 스타일(카드, 파일, 눈썹, 버튼, 강조 단어 색상) 확인.
- 계산된 스타일 수집: body/h1/h2/button의
fontFamily, color, backgroundColor, letterSpacing, fontWeight, 모든 배경색과 텍스트 색상의 빈도 수. - 페이지가 스타일 없이 렌더링되면(CSS 차단), 샌드박스에서 CSS 가져오기:
curl -sL -A "Mozilla/5.0" URL -o index.html; grep -o '/_next/static/[^"]*\.css' index.html(또는<link rel=stylesheet>), curl로all.css에 저장,grep -oE -- '--(background|foreground|brand|primary|accent|muted|border|card|surface|ink)[a-z-]*:[^;}]*' all.css | sort -u및grep -o 'font-family:[^;}]*' all.css | sort -u. - 로고: 헤더
<img>(예:/logo.png) 또는/android-chrome-512x512.png//apple-touch-icon.png. 파트너 로고 SVG →convert -background none -density 1200 x.svg -resize 400x400 x.png.
2단계 - 디자인 토큰
사이트를 템플릿 토큰에 매핑: BG, INK (제목), MUTED (본문 회색), BRAND (강조), BRAND_SOFT (칩용 강조 색조), PANEL (회색 카드 배경), WHITE (카드). 다크 사이트 → 어두운 BG, 밝은 INK, 부드러운 그림자 없음. 사이트 패턴 반영: 사이트가 그렇게 한다면 2줄 제목(2번째 줄 강조), 눈썹/레이블 칩, 화살표가 있는 알약 버튼, 흰색 카드가 있는 회색 패널.
3단계 - 글꼴
fontsource에서 무게별 정적 TTF (모든 Google 글꼴 가능):
curl -sf -o font-800.ttf https://cdn.jsdelivr.net/fontsource/fonts/<글꼴-슬러그>@latest/latin-800-normal.ttf (슬러그 = 소문자, 공백→대시, 예: bricolage-grotesque, urbanist). await p.add("font-800.ttf") 후 typography={{fontAssetId: handle.id}}로 사용. 라틴 서브셋에는 → ✓ ★ 글리프가 없음 - icon("arrow-right") 등 사용. 내장 패밀리(Inter, DM Sans, Montserrat…)는 higgsedit fonts add . Inter:400 Inter:700 + fontFamily 사용 가능.
4단계 - 비디오 스크립트
Higgsfield video-editing 워크플로우를 세션당 한 번 로드 (get_workflow_instructions {workflow:"video-editing"}) 후 Higgsedit 작업 시작.
reference/template.jsx에서 시작. 기본 구조, ~25초:
| # | 장면 | 시간 | 내용 |
|---|---|---|---|
| 1 | 후크 | 0-3.3 | 문제점 2줄, 눈썹 "<대상>을 위한" |
| 2 | 소개 | 3.3-7 | 로고 + 브랜드, 사이트 H1, 부제목, CTA 버튼 팝 |
| 3-6 | 기능 | ~3.7초 각 | 눈썹 = 사이트 섹션 레이블, 제목 = 사이트 자체 기능 제목, 네이티브 UI 모형 1개 (카운터가 있는 통계 카드, 태그가 있는 행, 히트맵 그리드, 대기열 목록, 리뷰 카드, 데이 파일…) |
| 7 | CTA | 마지막 ~4.3초 | 로고 + 도메인, 가격/제안 카드, 쿠폰 파일 + 버튼, 보증 문구 |
규칙:
- 사이트의 실제 카피와 실제 예시 숫자를 사용하세요. 어떤 데모 값이 예시인지 사용자에게 알리세요. 사용자 수나 사용 후기를 절대 지어내지 마세요.
- UI를 네이티브로 재현하세요 (프레임/텍스트/아이콘). 저해상도 사이트 스크린샷이나 AI 생성 UI를 사용하지 마세요.
- 장면 시작 시간을 유지하세요 - 음악에 필요합니다 (
cuts= 장면 2..7의 시작 시간).
5단계 - 샌드박스 빌드 및 미리보기
샌드박스 사실: 파일은 재설정 시 사라짐 (cd 실패 시 에셋 재다운로드); 단일 명령어는 16,000자 이하 (긴 cat > edit.jsx heredoc과 별도 호출로 업로드 URL을 파일에 저장); 긴 렌더링 → background:true 후 폴링.
media_upload로 출력물(미리보기sheet.png및 최종.mp4)을 미리 업로드하고 각upload_url을 샌드박스 내.txt파일에 저장. 사전 서명된 URL은 단일 사용: 두 번째 PUT은 412 반환 - 새 URL 요청.- 빌드 + 연락처 시트 + 업로드를 한 번에:
higgsedit build edit.jsx 2>&1 | grep -iE "error|missing"; higgsedit sheet . --times <각 장면 중간 + CTA 종료 시간> --cols 3 --out renders/sheet.png; curl -s -o /dev/null -w "%{http_code}" -X PUT -H "Content-Type: image/png" --upload-file renders/sheet.png "$(cat sheet_url.txt)" media_confirm, 반환된 공개 URL을 로컬에 다운로드하여 확인. 최종 렌더링 전 레이아웃 문제 수정.
Higgsedit 주의사항:
padding은 숫자 또는{left,right,top,bottom}이며, 배열이 될 수 없습니다.- 가운데 정렬 텍스트의 토큰
motion={{by:"word"|"character"}}는 리플로우 발생 (텍스트가 왼쪽에서 점프). 가운데 정렬 텍스트에는animate={pop}사용; 토큰 모션은 왼쪽 정렬 "타이핑" 텍스트에만 사용. - 타임라인
target은 직접적인 명명된 자식 프레임이어야 하며, self가 아님 - self는animate키프레임(delayPop)으로 애니메이션. - 카운터: 고정 크기
layout="none"프레임에 하나의 정적 텍스트; 천 단위 구분 기호 없음. animate는 항상 배열; 프레임motion은 객체.
6단계 - 렌더링
higgsedit render . --out renders/promo.mp4 --quality final (25초 기준 약 1분).
7단계 - 음악 (매번 다름)
scripts/music.py = numpy 절차적 음악, 로열티 프리. 스타일: pop (120bpm 밝은), lofi (82bpm 차분한 재즈), synthwave (105bpm 레트로), house (124bpm 오프비트), cinematic (90bpm 장엄한), marimba (110bpm 친근한). 모든 트랙: 각 컷 전 whoosh, CTA에 임팩트, 1.6초 페이드아웃.
스타일 선택 - 지난 두 개 반복하지 않음:
- 이 스킬 폴더에서
music-history.log읽기 (없으면 생성). - 분위기 매칭: 개발/AI/기술 → synthwave 또는 house; 크리에이터/글쓰기/생산성 → lofi 또는 marimba; 대규모/프리미엄 런칭 → cinematic; 소비자/재미 → pop. 사용자가 요청하지 않는 한 지난 2개 항목에 사용된 스타일 건너뛰기.
- 무작위
--seed→ 무작위 키와 진행, 동일한 스타일도 다르게 들림. music-history.log에YYYY-MM-DD <사이트> <스타일> seed=<n>추가.
music.py를 샌드박스로 가져오기 (첫 실행): media_upload (파일명 music.py) → 로컬 머신에서 curl -X PUT -H "Content-Type: application/octet-stream" --data-binary @scripts/music.py '<upload_url>' → media_confirm type:file → 반환된 공개 URL을 이 스킬 폴더의 music_url.txt에 저장. 이후 실행: 샌드박스 내에서 curl -sf -o music.py "$(cat music_url.txt)" (404 또는 music.py 변경 시 재업로드).
먹싱:
python3 music.py --style <스타일> --duration <비디오 초> --cuts <c2,c3,...,c7> --seed <n> --out music.wav
ffmpeg -y -v error -i renders/promo.mp4 -i music.wav -filter:a "loudnorm=I=-15:TP=-1.5:LRA=11" -c:v copy -c:a aac -b:a 192k -map 0:v -map 1:a -shortest final.mp4
지속 시간: ffprobe -v error -show_entries format=duration -of csv=p=0 renders/promo.mp4.
8단계 - 전달
final.mp4 업로드 (새 URL) → media_confirm type:video → 로컬에 <브랜드>_launch.mp4로 다운로드 → 파일을 사용자에게 전달. 보고: 사이트와 일치하는 항목 (배경/색상/글꼴/로고), 장면 목록, 음악 스타일, 예시 값인 항목. 9:16 버전 또는 다른 음악 스타일 제안.
9:16 변형
size: "1080x1920", W=1080 / H=1920, 행을 세로로 쌓음 (카드는 열), 제목 크기 ×0.75, 동일한 타이밍 및 음악.