网站启动视频
用用户的语言回复。除非另有要求,视频文案使用英语。
输出:工作目录下的 <brand>_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。 - Logo:header
<img>(例如/logo.png)或/android-chrome-512x512.png//apple-touch-icon.png。合作伙伴 Logo 作为 SVG →convert -background none -density 1200 x.svg -resize 400x400 x.png。
第 2 步 - 设计令牌
将网站映射到模板令牌:BG, INK(标题), MUTED(正文灰色), BRAND(强调色), BRAND_SOFT(用于标签的强调色调), PANEL(灰色卡片底色), WHITE(卡片)。深色网站 → 深色 BG,浅色 INK,无软阴影。镜像网站的模式:如果网站这样做,则使用两行标题,第二行使用强调色;眉毛线/标签标签;带箭头的药丸按钮;带白色卡片的灰色面板。
第 3 步 - 字体
来自 fontsource 的每个字重的静态 TTF(任何 Google 字体):
curl -sf -o font-800.ttf https://cdn.jsdelivr.net/fontsource/fonts/<font-slug>@latest/latin-800-normal.ttf (slug = 小写,空格→短横,例如 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 步 - 编写视频脚本
在 Higgsedit 工作之前,每个会话加载一次 Higgsfield video-editing 工作流(get_workflow_instructions {workflow:"video-editing"})。
从 reference/template.jsx 开始。默认结构,约 25 秒:
| # | 场景 | 时间 | 内容 |
|---|---|---|---|
| 1 | 吸引 | 0-3.3 | 两行痛点,眉毛线 "面向<受众>" |
| 2 | 认识 | 3.3-7 | Logo + 品牌,网站 H1,副标题,CTA 按钮弹出 |
| 3-6 | 功能 | 各约 3.7 秒 | 眉毛线 = 网站章节标签,标题 = 网站自身的功能标题,一个原生 UI 模拟(带计数器的统计卡片、带标签的行、热力图网格、队列列表、评论卡片、日期药丸…) |
| 7 | CTA | 最后约 4.3 秒 | Logo + 域名,价格/优惠卡片,优惠券药丸 + 按钮,保证行 |
规则:
- 使用网站的真实文案和真实示例数字。告知用户哪些演示值是说明性的。永远不要编造用户计数或推荐。
- 原生重建 UI(框架/文本/图标)。不要使用低分辨率的网站截图或 AI 生成的 UI。
- 保留场景开始时间——音乐需要它们(
cuts= 场景 2..7 的开始时间)。
第 5 步 - 沙箱构建与预览
沙箱注意事项:文件在重置时会消失(如果 cd 失败则重新下载资源);单个命令 ≤ 16,000 字符(将上传 URL 写入文件,与长 cat > edit.jsx heredoc 分开调用);长时间的渲染 → 使用 background:true 然后轮询。
- 预先
media_upload输出(预览sheet.png和最终的.mp4),并将每个 upload_url 保存到沙箱中的一个.txt文件中。预签名 URL 是一次性的:第二次 PUT 返回 412——请请求一个新的。 - 在一个调用中构建 + 联系表 + 上传:
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};仅对左对齐的 "打字" 文本使用标记 motion。 - 时间线
target必须是直接命名的子帧,而不是自身——使用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 友好)。每个曲目:每次切换前一个嗖声,CTA 处一个冲击声,1.6 秒淡出。
选择风格——绝不重复最后两次:
- 读取此技能文件夹中的
music-history.log文件(如果缺失则创建)。 - 匹配氛围:开发/AI/技术 → synthwave 或 house;创作者/写作/生产力 → lofi 或 marimba;大型/高级发布 → cinematic;消费者/娱乐 → pop。除非用户要求,否则跳过最后 2 条记录中使用的风格。
- 随机
--seed→ 随机调和进行,因此即使相同的风格听起来也不同。 - 将
YYYY-MM-DD <site> <style> seed=<n>追加到music-history.log。
将 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 <style> --duration <video secs> --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 → 在本地将其下载为 <brand>_launch.mp4 → 将文件交给用户。报告:与网站匹配的内容(背景/颜色/字体/Logo)、场景列表、音乐风格、哪些值是说明性的。提供 9:16 版本或不同的音乐风格。
9:16 变体
size: "1080x1920",W=1080 / H=1920,垂直堆叠行(卡片排成一列),标题大小 ×0.75,相同的时间安排和音乐。