/superbrag
WebサイトURLを入力 → 完成したプロモーションビデオを出力：サイトに関する短く洗練された動画で、ナレーション、ワード同期アニメーション、サイト自体から抽出されたデザイン言語を備えています。色、フォント、カード、背景、アバターはすべて宣伝対象のサイトから取得されます。 すべての画像と主張はサイトから来ています。「画面」は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 <url> <run>
これにより <run>/site.json（タイトル、メタデータ、見出し、CTA、全文、フォント、Google Fontsリンク、色、CSS変数、画像リストと代替テキストおよび周辺コンテキスト）と <run>/public/site/*（すべての画像と screenshot-hero.png および screenshot-full.png）が書き込まれます。
次に画像を見てください（読み取ってください）。スクリーンショット内の詳細（評価、場所、配達時間）は最良の証拠の一部なので、HTMLだけでなくそれらも読んでください。ホームページに人物写真や製品スクリーンショットがない場合は、リンクされた1～2ページ（about、projects）を同じ run にキャプチャしてください。
ゲート: 人物または事業の名前、場所、2～4のサービス、最良の証拠（評価、クライアント、数字）、オファーまたは保証、CTAテキスト、URL、人物写真、アバターまたはロゴ、製品スクリーンショット、証拠画像のうち、どれがどれであるかを説明できること。
ステップ 2: ストーリーを書く（<run>/story.json）
1つの顧客タイプと1つの具体的なシナリオを選んでください。1つの明確なストーリーが2つ半端なストーリーに勝るため、他のサービスは除外します。--focus で別途指定がない限り、最も強いビジュアルと証拠があるサービスを選んでください。次に、9ビートのフォーマットを埋めてください。各ビートに短文の台詞1つずつ、合計約75～85語、約30秒になります。
| # | タイプ | 役割 | 例文（posflexgrowth.com） |
|---|---|---|---|
| 1 | search | フック：今まさに検索している顧客 | 「あなたの次の患者が今まさに検索しています。」 |
| 2 | results | 問題：あなたは見えない（暗い） | 「しかし別のクリニックが最初に表示されます。」 |
| 3 | cost（enter: slide） | 問題のコスト（暗い領収書、棒が縮む） | 「そして逃した電話はすべて、次に出た人が取ります。」 |
| 4 | meet | 人物またはブランド：写真＋アバター、名前、役割、場所ピル、タグライン | 「Sajal Kumarをご紹介します。ニュージーランドのPosFlex創業者です。」 |
| 5 | browser | 実際の製品を表示（サイトスクリーンショット）＋パネルが仕事をしている様子 | 「逃した電話はすべてテキストで返信され、予約されます。どれも逃しません。」 |
| 6 | answer（enter: blur） | 証明：#1にランク＋AI回答が推奨 | 「Googleマップでトップ3、そして人々がAIに尋ねたときに名前が挙がります。」 |
| 7 | quote | オファーまたは保証が紙に書かれ、スタンプとサイン付き | 「そして当社のゼロリスク保証、書面で、12週間の目標付き。」 |
| 8 | payoff | タグライン＋強調ワード；冒頭の検索が結果に変わる | 「3つの仕事：見つけてもらい、推薦され、予約される。」 |
| 9 | end | 名前＋CTAボタンがクリックされる＋URL | 「PosFlex Growthから無料成長プランを入手してください。」 |
ルール:
- コピーはサイトから取得。 サイト自身のフレーズ（メタディスクリプション、サービスライン、使い方の説明、FAQ）を再利用してください。シナリオの詳細（検索クエリ、料理と価格、予約時間）だけを創作します。創作した詳細はその場所にふさわしいものにしてください：現地通貨、現地の名前。
- クエリを繰り返す。 同じ検索クエリがビート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= サイトの最も暗いトーン（インクまたはダークモード背景）を問題シーンに使用。highlight= サイトが実際に使用しているパステル（マーカー色やCSS変数例--bg: #DFFAAA）；accent= ピルや数字に使用する第2ブランド色。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であること。 - サイトが見出しを2トーンで書いている場合（「予定表を埋める」）、
title、headline、nameで同じ単語を*星*でマークします（例：ロゴのドットに対してPosFlex*.*）。強調色でレンダリングされます。
background：light（サイトのページ色、フラット）を明るいサイトに。ほとんどのサイトが該当します。sky（フラットなブランド色の上に漂う漫画の雲）は、サイト自体に空や雲のモチーフがある場合のみ。soft（白いテキスト付きフラットブランド色）は大胆で彩度の高いブランドに。グラデーションはどこにも使用しないでください： フラット色のみ。- アバター：
build.pyは、サイトのApple touchアイコンがキャプチャされた場合、自動的にそれをMeetバッジとエンドカードに使用します。サイトにアバターがない場合、またはそのシーンが別の人物についての場合（例：ケーススタディが制作者で終わる場合）のみ、自分でavatarを設定してください。その場合は"keepAvatar": trueを追加します。 - 写真：
meetには実在の人物を使用してください：創業者または所有者。ホームページにない場合はaboutページやチームページから（そのページをスクラッチフォルダにキャプチャして画像をコピーします）。画像に印刷された名前やキャプションは切り取ってください（ffmpeg -vf crop=...）。 - 人物ではない場合？
meetでは、ロゴや店舗正面をphotoに、マスコットまたはロゴをavatarに使用し、kicker: "紹介"とブランド名を設定します。 - 他のビジネスへの適応： 職人系サイトでは、
searchに「近所の緊急配管工」→results競合他社/広告 →cost「今週の逃した電話」→browser見積フォーム＋クリックトゥコール →answer→quote「固定価格」→payoff「仕事が予約されました」。SaaSの場合、検索は「やるべき仕事」になり、コストは失われた時間、ブラウザはアプリを表示します。 - 発音： ブランド名と人物名を確認してください。TTSで候補となる綴りを1行ずつ生成し、それぞれを
$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*（透明背景のフレーム付き電話PNG、例：サイトまたはApp Storeスクリーンショットから）、title*、kicker、big（"*0*"のような大きな統計値）、points[]（最初の単語が話されたときにポップするチップ）、icon（アプリアイコン）、side（left|right）、bg（brand|paper|dark）。アプリ広告の場合、ビート4～6を各フィーチャー1つずつ、3～5つの電話シーンに置き換えます。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（毎秒1フレーム）を読んでください。
ゲート： <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でプレビューできます。 - 現在は横向き1920×1080のみ。縦向きは
scenes.tsxに独自のレイアウトが必要です。