/superbrag
輸入網站網址 → 輸出完成的宣傳影片：一個簡短、精緻的網站介紹影片，配有語音旁白、文字同步動畫，以及從網站本身擷取的設計語言。顏色、字型、卡片、背景和頭像都來自被宣傳的網站。每一張圖片和每一句陳述都來自該網站。這些「畫面」是使用 Remotion 渲染的 UI 模型，非 AI 生成的像素。
<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 "餐廳" # 告訴故事是關於哪個客戶/服務
/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/<網域縮寫>/，如果資料夾已存在，則會加上 -2、-3 等後綴。
步驟 1：擷取網站
export PATH="/opt/homebrew/bin:$PATH" # macOS Homebrew；在其他系統上無害
node <skill-dir>/scripts/capture.mjs <網址> <run>
這會寫入 <run>/site.json（標題、meta、標題、CTA、全文、字型、Google Fonts 連結、顏色、CSS 變數，以及包含替代文字和周圍上下文的圖片列表）和 <run>/public/site/*（每一張圖片加上 screenshot-hero.png 和 screenshot-full.png）。
然後查看圖片（閱讀它們）。螢幕截圖內印出的詳細資訊（評分、地點、送達時間）是最好的證明，所以請閱讀它們，而不僅僅是 HTML。如果首頁缺乏人物照片或產品螢幕截圖，請將一兩個連結到的頁面（關於、作品集）擷取到同一個 run 中。
閘門： 你必須能說出人物或企業名稱、他們的位置、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） | 證明：排名第一 + AI 答案推薦它 | 「Google 地圖上前三名，並且在人們詢問 AI 時被點名。」 |
| 7 | quote | 紙本上的優惠或保證，蓋章簽名 | 「以及我們的零風險承諾，白紙黑字，目標 12 週。」 |
| 8 | payoff | 標語 + 重點詞；開場的搜尋變成了結果 | 「三項任務：被找到、被推薦、被預約。」 |
| 9 | end | 姓名 + 點擊的 CTA 按鈕 + URL | 「立即取得您的免費成長方案，來自 PosFlex Growth。」 |
規則：
- 文案來自網站。 重複使用網站本身的詞語（meta 描述、服務項目、運作方式、常見問題）。僅編造使情境具體化的細節：搜尋查詢、菜餚與價格、預約時間。保持編造的細節對該地點合理：當地貨幣、當地姓名。
- 重複查詢。 同一個搜尋查詢出現在節拍 1、2、6 和 8。故事會自我循環，這正是它讓人覺得經過設計的原因。
- 說出提示詞。 動畫會在聽到特定詞語時觸發，所以
place、name/role/tagline的第一個詞、每個chips條目、highlight.cue、price和highlight（回報）必須出現在該場景的say中。 - 設計語言來自網站。 絕不重用其他品牌的樣貌：每個影片都必須看起來像輸入的網站。閱讀
site.json → design（頁面顏色、卡片圓角、邊框與陰影、按鈕、h1 字型、大小、粗細與字距、標題強調色、標記符號），並閱讀public/site/section-*.png螢幕截圖，然後設定：primary= 主要品牌色（按鈕與連結）；ink= 網站文字顏色；paper=design.pageBackground；dark= 網站最深色調（其 ink 或深色模式背景），用於問題場景。highlight= 網站實際使用的柔和色調（標記顏色或 CSS 變數，例如--bg: #DFFAAA）；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。 - 如果網站以雙色調撰寫標題（「填滿你的行事曆」），請在
title、headline和name中用*星號*標記相同詞（例如 logo 點用"PosFlex*.*"）。它們會以強調色渲染。
background：light（網站的頁面顏色，平面）用於淺色網站，這涵蓋大多數情況。僅當網站本身有天空或雲朵主題時，才使用sky（在平面品牌色上的卡通雲朵）。soft（平面品牌色搭配白色文字）用於大膽、飽和的品牌。任何地方都不要使用漸層：只用平面顏色。- 頭像：
build.py在有擷取到網站 Apple 觸控圖示時，會自動將其用於「認識」徽章和結束卡片。僅在網站沒有頭像，或該場景是關於其他人時（例如，以創作者作為結尾的案例研究），才自行設定avatar：此時需添加"keepAvatar": true。 - 照片： 對於
meet，使用真實人物：創辦人或擁有者，如果首頁沒有，則從關於或團隊頁面取得（將該頁面擷取到暫存資料夾並複製圖片）。使用ffmpeg -vf crop=...裁切掉圖片上列印的姓名或說明文字。 - 不是人物？ 在
meet中，使用標誌或店面作為photo，使用吉祥物或標誌作為avatar，搭配kicker: "Meet"和品牌名稱。 - 適用於其他企業： 行業網站可能是
search「附近的水電工」→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（一個應用程式，天空主題，帶有手機場景）並更改其值。每個場景類型都有下列屬性（除非標記為必要，否則皆為選填）：
search：query*、title、suggestions[]results：query*、results[{title, sub}]、title、pillcost：title*、label、items[{name, price}]、totalLabel、total*、keep*、cut*、cutCue（開始縮小長條的詞，預設為「commission」）meet：photo*、avatar、kicker、name*、role、place、taglinebrowser：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、urlphone（應用程式和行動產品）：phone*（一個帶有透明背景的 iPhone PNG 框架，例如來自網站或 App Store 螢幕截圖）、title*、kicker、big（一個大型統計數字，例如"*0*"）、points[]（當它們的第一個詞被說出時會彈出的藥丸標籤）、icon（應用程式圖示）、side（left|right）、bg（brand|paper|dark）。對於應用程式廣告，用 3-5 個手機場景替換節拍 4-6，每個場景介紹一個功能。請參閱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中有自己的版面配置。