aakashmehra/superbrag

/superbrag

웹사이트 URL을 입력하면 완성된 프로모션 비디오가 출력됩니다. 사이트에 대한 짧고 세련된 비디오로, 음성 해설, 단어 동기화 애니메이션, 그리고 사이트 자체에서 가져온 디자인 언어를 사용합니다. 색상, 글꼴, 카드, 배경 및 아바타는 홍보 대상 사이트에서 가져옵니다. 모든 이미지와 주장은 사이트에서 비롯됩니다. '스크린'은 AI가 생성한 픽셀이 아니라 Remotion으로 렌더링된 UI 목업입니다.

<skill-dir> = 이 파일이 포함된 폴더. <ws> = 사용자의 현재 프로젝트 폴더. 일회성 설정 (<skill-dir>/.venv 및 <skill-dir>/template/node_modules가 이미 존재하면 건너뜁니다): Node.js 22+, FFmpeg, Python 3 및 espeak-ng가 필요하며, bash <skill-dir>/scripts/setup.sh를 실행하세요. Remotion과 Playwright, Kokoro(무료 로컬 음성)와 faster-whisper(단어 타이밍)를 포함하는 Python 환경을 설치하고, 해당 경로를 <skill-dir>/.env에 기록합니다.

호출

/superbrag https://example.com
/superbrag https://example.com --focus "restaurants"        # 어떤 고객/서비스에 대해 이야기할지
/superbrag https://example.com --voice minimax|elevenlabs|kokoro --voice-id <id>

기본값: 음성은 Kokoro af_heart(무료, 로컬)입니다. <skill-dir>/.env에 MINIMAX_API_KEY 또는 ELEVENLABS_API_KEY가 설정되어 있으면 대신 해당 제공자가 사용됩니다. 출력은 <ws>/superbrag-output/<domain-slug>/에 저장되며, 폴더가 이미 존재하면 -2, -3 접미사가 추가됩니다.

1단계: 사이트 캡처

export PATH="/opt/homebrew/bin:$PATH"   # macOS Homebrew; 다른 곳에서는 무해함
node <skill-dir>/scripts/capture.mjs <url> <run>

이 명령은 <run>/site.json(제목, 메타, 제목, CTA, 전체 텍스트, 글꼴, Google Fonts 링크, 색상, CSS 변수, 대체 텍스트 및 주변 컨텍스트가 포함된 이미지 목록)과 <run>/public/site/*(모든 이미지 및 screenshot-hero.png, screenshot-full.png)를 생성합니다.

그런 다음 이미지를 살펴보십시오 (읽으십시오). 스크린샷 내부에 인쇄된 세부 정보(평점, 위치, 배달 시간)는 최고의 증거 중 일부이므로 HTML뿐만 아니라 이를 읽으십시오. 홈페이지에 사람 사진이나 제품 스크린샷이 없는 경우, 링크된 페이지 1~2개(정보, 프로젝트)를 동일한 실행 폴더로 캡처하십시오.

게이트: 사람이나 비즈니스 이름, 위치, 2~4가지 서비스, 최고의 증거(평점, 고객, 숫자), 제안 또는 보증, CTA 텍스트, URL, 그리고 어떤 이미지가 사람 사진인지, 아바타 또는 로고인지, 제품 스크린샷인지, 증거 이미지인지 식별할 수 있어야 합니다.

2단계: 스토리 작성 (<run>/story.json)

하나의 고객 유형과 하나의 구체적인 시나리오를 선택하십시오. 하나의 명확한 이야기가 세 개의 반쪽짜리 이야기보다 낫습니다. 따라서 다른 서비스는 제외하십시오. --focus가 달리 명시하지 않는 한, 가장 강력한 비주얼과 증거가 있는 서비스를 선택하십시오. 그런 다음 9비트 공식을 채우십시오. 비트당 하나의 짧은 음성 문장으로, 총 약 75~85단어이며 약 30초가 소요됩니다.

#	유형	작업	예시 문장 (posflexgrowth.com)
1	search	훅: 지금 검색하는 고객	"당신의 다음 환자가 지금 검색하고 있습니다."
2	results	문제: 당신은 보이지 않음 (어두움)	"하지만 다른 병원이 먼저 나타납니다."
3	cost (enter: slide)	문제의 비용 (어두운 영수증, 막대가 줄어듦)	"그리고 모든 놓친 전화는 다음에 응답하는 사람에게 갑니다."
4	meet	사람 또는 브랜드: 사진 + 아바타, 이름, 역할, 장소 칩, 태그라인	"뉴질랜드에 있는 PosFlex 창립자 Sajal Kumar를 만나보세요."
5	browser	실제 제품 보여주기 (사이트 스크린샷) + 작업 패널	"모든 놓친 전화에 문자로 답장하고 예약이 잡힙니다. 하나도 놓치지 않습니다."
6	answer (enter: blur)	증거: #1 순위 + AI 응답 추천	"Google Maps에서 상위 3위, 그리고 사람들이 AI에게 물을 때 추천됩니다."
7	quote	종이에 적힌 제안 또는 보증, 도장 및 서명	"그리고 저희의 무위험 약속, 서면으로, 12주 목표와 함께."
8	payoff	태그라인 + 강조된 단어; 시작 검색이 결과로 전환	"세 가지 작업: 발견되기, 추천받기, 예약되기."
9	end	이름 + CTA 버튼 클릭 + URL	"PosFlex Growth에서 무료 성장 플랜을 받으세요."

규칙:

• 카피는 사이트에서 가져옵니다. 사이트 자체의 문구(메타 설명, 서비스 라인, 작동 방식, FAQ)를 재사용하십시오. 구체적으로 만드는 시나리오 세부 정보(검색어, 요리 및 가격, 예약 시간)만 고안하십시오. 고안된 세부 정보는 해당 장소에 그럴듯하게 유지하십시오: 현지 통화, 현지 이름.
• 검색어를 반복하십시오. 동일한 검색어가 비트 1, 2, 6, 8에 나타납니다. 이야기는 자기 자신으로 되돌아오며, 이것이 설계된 느낌을 줍니다.
• 큐 단어를 말하십시오. reveals는 해당 단어가 말해질 때 활성화되므로, place, name/role/tagline의 첫 번째 단어, 각 chips 항목, highlight.cue, price 및 highlight(결말)는 해당 장면의 say에 반드시 포함되어야 합니다.
• 디자인 언어는 사이트에서 가져옵니다. 다른 브랜드의 모양을 재사용하지 마십시오: 모든 비디오는 입력된 사이트처럼 보여야 합니다. site.json → design(페이지 색상, 카드 반경, 테두리 및 그림자, 버튼, h1 글꼴, 크기, 두께 및 자간, 제목 강조 색상, 마커)을 읽고 public/site/section-*.png 스크린샷을 읽은 다음 다음을 설정하십시오:
  • primary = 주요 브랜드 색상 (버튼 및 링크); ink = 사이트의 텍스트 색상; paper = design.pageBackground; dark = 사이트의 가장 어두운 톤 (문제 장면의 경우 잉크 또는 다크 모드 배경).
  • highlight = 사이트가 실제로 사용하는 파스텔 색상 (마커 색상 또는 --bg: #DFFAAA와 같은 CSS 변수); accent = 칩 및 숫자에 사용되는 두 번째 브랜드 색상.
  • style: radius = 가장 일반적인 카드 반경 (px); border = 카드 테두리 색상 (카드에 테두리가 없으면 생략); shadow = flat (없음), soft (희미한 색조) 또는 lifted (깊음); tracking = h1 자간 ¼ 폰트 크기 (예: -1.2px/60px = -0.02); headWeight = h1 두께; emphasis = design.headlineEmphasisColors[0].
  • 글꼴: head = h1 글꼴, ui = 본문 글꼴, script = 사이트의 필기체 글꼴 또는 Caveat. 모두 Google Fonts여야 합니다.
  • 사이트가 제목을 두 가지 톤으로 작성하는 경우(예: "Fill your calendar"), title, headline 및 name에서 동일한 단어를 *별표*로 표시하십시오 (예: 로고 점의 경우 "PosFlex*.*"). 강조 색상으로 렌더링됩니다.
• background: light (사이트의 페이지 색상, 평면)는 대부분의 사이트를 포함하는 밝은 사이트용입니다. sky (평면 브랜드 색상 위에 떠 있는 만화 구름)는 사이트 자체에 하늘 또는 구름 모티프가 있는 경우에만 사용하십시오. soft (흰색 텍스트가 있는 평면 브랜드 색상)는 대담하고 채도가 높은 브랜드용입니다. 어디에도 그라데이션 없음: 평면 색상만 사용하십시오.
• 아바타: build.py는 캡처된 경우 자동으로 사이트의 Apple Touch 아이콘을 Meet 배지 및 종료 카드에 사용합니다. 사이트에 아바타가 없거나 해당 장면이 다른 사람에 관한 것인 경우(예: 제작자로 끝나는 사례 연구)에만 avatar를 직접 설정하십시오. 그런 다음 "keepAvatar": true를 추가하십시오.
• 사진: meet의 경우 실제 사람(창립자 또는 소유자)을 사용하십시오. 홈페이지에 없으면 정보 또는 팀 페이지에서 가져오고 (해당 페이지를 스크래치 폴더에 캡처하고 이미지를 복사하십시오) 이미지에 인쇄된 이름이나 캡션을 잘라내십시오 (ffmpeg -vf crop=...).
• 사람이 아닌 경우? meet에서는 로고나 매장 전면을 photo로 사용하고 마스코트나 로고를 avatar로 사용하며, kicker: "Meet" 및 브랜드 이름을 사용하십시오.
• 다른 비즈니스에 적용: 무역 사이트는 search "emergency plumber near me" → results 경쟁업체/광고 → cost "이번 주 놓친 전화" → browser 견적 양식 + 클릭 투 콜 → answer → quote "고정 가격" → payoff "작업 예약됨"이 될 수 있습니다. SaaS: 검색은 해야 할 작업이 되고, 비용은 손실된 시간이 되며, 브라우저는 앱을 보여줍니다.
• 발음: 브랜드 및 사람 이름을 확인하십시오. 후보 철자당 TTS 한 줄을 생성하고, 각각을 $WHISPER_PYTHON으로 전사한 다음, 실제 이름으로 반환되는 철자를 유지하십시오. PosFlex의 경우 "Pos Flex"는 "Poe's Flex"로, "Poss Flex"는 "POSFLEX"로 인식되었습니다. 승자를 voice.pronounce에 넣으십시오 (예: {"PosFlex": "Poss Flex"}). 화면상 텍스트는 올바르게 유지됩니다.

스키마: <skill-dir>/examples/posflexgrowth.story.json (전체 style 토큰이 있는 밝은 사이트) 또는 snapshare.story.json (앱, 하늘 테마, 전화 장면 포함)을 복사하여 값을 변경하십시오. 다음 props는 장면 유형별로 존재합니다 (모두 선택 사항이지만 * 표시는 필수):

• search: query*, title, suggestions[]
• results: query*, results[{title, sub}], title, pill
• cost: title*, label, items[{name, price}], totalLabel, total*, keep*, cut*, cutCue (막대 축소를 시작하는 단어, 기본값 "commission")
• meet: photo*, avatar, kicker, name*, role, place, tagline
• browser: screenshot*, tab, panel{title*, items[{name, price}], chips[], extra{image, title, sub}, highlight{label, value, cue}, button}
• answer: query*, result{image*, rank, name*, meta, rating, ratingLabel}, below, aiLabel, answer, source{icon, label}
• quote: title*, forLabel, checks[], priceLabel, price, stamp, signature, signNote, signCue (기본값 "writing")
• payoff: headline*, highlight, query*, toast{title*, sub, meta}*
• end: name*, button*, avatar, url
• phone (앱 및 모바일 제품): phone* (투명 배경의 프레임이 있는 휴대폰 PNG, 예: 사이트 또는 App Store 스크린샷에서), title*, kicker, big (큰 통계, 예: "*0*"), points[] (첫 번째 단어가 말해질 때 팝업되는 칩), icon (앱 아이콘), side (left | right), bg (brand | paper | dark). 앱 광고의 경우 비트 46을 각각 하나의 기능을 가진 35개의 전화 장면으로 대체하십시오. examples/snapshare.story.json을 참조하십시오.

모든 장면은 say, enter (cut | slide | blur, 기본값 cut) 및 hold (추가 초)를 사용할 수 있습니다. 이미지 경로는 <run>/public (site/...)을 기준으로 합니다.

게이트: story.json은 이 순서대로 9개의 비트를 가지고 있습니다. 모든 큐 단어는 say에 나타납니다. 모든 카피는 시나리오 세부 정보를 제외하고 site.json 또는 이미지로 추적 가능합니다.

3단계: 음성 + 타임라인 구축

python3 <skill-dir>/scripts/build.py <run>

이 명령은 각 라인에 대해 TTS를 실행하고(텍스트별로 캐시됨), 무음을 자르고, 각 라인을 장면 컷 후 0.18초에 배치하고, faster-whisper로 단어 타이밍을 가져오고, <run>/props.json 및 <run>/public/voice.wav를 작성합니다. 타임라인을 출력하며, 총 28~34초여야 합니다. 길면 라인을 줄이십시오. 음성을 빠르게 하지 마십시오. 스토리를 편집한 후에 다시 실행하십시오. 시각적 편집만 있는 경우 TTS를 다시 호출하지 않습니다.

4단계: 미리보기, 그런 다음 렌더링

bash <skill-dir>/scripts/render.sh <run> stills "40,120,200,300,450,560,680,780,880"   # 빌드 출력에서 각 장면 내부의 프레임 선택
bash <skill-dir>/scripts/render.sh <run>                                                # 전체 렌더링, 약 30초

전체 렌더링 전에 stills/sheet.jpg를 읽으십시오. 텍스트가 카드에서 넘치지 않는지, 긴 이름이 맞는지(글꼴 크기를 줄이는 대신 카피를 줄이십시오), 이미지가 올바른 대상을 보여주는지, 색상이 배경에서 읽을 수 있는지 확인하십시오. 전체 렌더링 후 qa-sheet.jpg(초당 한 프레임)를 읽으십시오.

게이트: <run>/superbrag.mp4가 약 -14 LUFS(출력됨)로 존재합니다. QA 시트는 9개의 비트 모두를 잘리지 않고 보여줍니다.

5단계: 전달

사용자에게 superbrag.mp4의 경로, 길이, 선택한 고객 스토리 및 이유, 고안된 세부 정보(검색어, 가격)를 알려주십시오. Kokoro 읽기가 평평하게 들리는 경우 음성 교체(MiniMax 또는 ElevenLabs)를 제안하십시오. 게시 시 크레딧: "Music: Sascha Ende, ende.app (CC BY 4.0)".

참고 사항

• Remotion은 개인 및 최대 3명의 회사에 무료입니다. 더 큰 회사는 라이선스(remotion.dev/license)가 필요합니다.
• 모든 비디오의 모양을 변경하려면 template/src/scenes.tsx(레이아웃) 및 template/src/ui.tsx(모션, 배경, 글꼴)를 편집하십시오. cd template && npx remotion studio src/index.ts --props=<run>/props.json --public-dir=<run>/public으로 미리보기하십시오.
• 현재는 가로 1920x1080만 지원합니다. 세로는 scenes.tsx에 자체 레이아웃이 필요합니다.