/superbrag
输入网站 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 "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。如果首页缺少人物照片或产品截图，请将一两个链接页面（关于我们、项目）捕获到同一 run 中。
关口： 你必须能够说出人物或企业名称、所在地点、2-4 项服务、最佳证明（评分、客户、数据）、优惠或保证、CTA 文本、URL，以及哪张图片是人物照片、头像或徽标、产品截图和证明图片。
步骤 2：编写故事（<run>/story.json）
选择一种客户类型和一个具体场景。一个清晰的故事胜过三个半吊子的故事，因此请忽略其他服务。除非 --focus 另有说明，否则选择视觉效果和证明最强的服务。然后填充 9 节拍公式。每节拍一句简短的口语句子，总计约 75-85 个词，大约持续 30 秒。
| # | 类型 | 任务 | 示例（posflexgrowth.com） |
|---|---|---|---|
| 1 | search | 钩子：正在搜索的客户 | “你的下一位患者正在搜索。” |
| 2 | results | 问题：你不可见（暗色） | “但另一家诊所排在了前面。” |
| 3 | cost（进入：滑动） | 问题的代价（暗色收据，条形缩小） | “而每个未接电话都转给了下一个接电话的人。” |
| 4 | meet | 人物或品牌：照片+头像、姓名、角色、地点标签、标语 | “认识一下 PosFlex 创始人 Sajal Kumar，位于新西兰。” |
| 5 | browser | 展示真实产品（网站截图）以及执行任务的界面 | “每个未接来电都会被短信回复并预约。一个都不漏。” |
| 6 | answer（进入：模糊） | 证明：排名第一 + AI 答案推荐 | “在 Google 地图上位列前三，并且当人们询问 AI 时被提及。” |
| 7 | quote | 纸上优惠或保证，盖章并签名 | “以及我们的零风险承诺，白纸黑字，设定 12 周目标。” |
| 8 | payoff | 标语 + 高亮词；开始的搜索变成了结果 | “三项工作：被发现、被推荐、被预约。” |
| 9 | end | 名称 + 点击的 CTA 按钮 + URL | “从 PosFlex Growth 获取您的免费增长计划。” |
规则：
- 文案来自网站。 重用其自身的短语（元描述、服务线、运作方式、常见问题）。仅编造使其具体的场景细节：搜索查询、菜肴和价格、预订时间。保持编造细节在场景中合理：当地货币、当地人名。
- 重复查询。 相同的搜索查询出现在节拍 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= 第二种品牌颜色，用于药丸形状和数字。style：radius= 最常见的卡片圆角像素值；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中使用*星号*标记相同的词（例如"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*（一个带透明背景的带框手机 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中。