SaaS发布视频：创意总监
每个视频都应为其产品量身定制：自己的概念、结构、外观和转场。此技能是导演+工具包，而非模板。切勿退回到单一风格。
要求
Node 18+、在PATH中的FFmpeg、npx [email protected]。HyperFrames技能hyperframes-creative、hyperframes-animation和hyperframes-registry（安装：npx [email protected] init <任意目录>；刷新：npx [email protected] skills update）。仅对于音乐分析需要Python + pip install librosa。
参考视频？ 如果用户发送要复制的视频（"像这样"），请遵循references/REFERENCE.md：在第1步后立即运行scripts/analyze-reference.mjs并编写reference.md。它将影响提案、脚本、构建检查和音乐。
工作流程（4个检查点需要用户介入）
-
设置并了解产品。 运行
node <skill>/scripts/new-project.mjs <目录>。然后从最佳可用来源了解产品：- 代码： 读取组件、路由、主题和文案；编写
brand.json（references/BRAND.md）并运行scripts/brand.mjs。 - 链接：
node <skill>/scripts/from-link.mjs <URL> <目录>会写入brand.json和brand-kit.md；验证Logo和颜色。 - 截图： 要求提供Logo、颜色和关键屏幕。
列出实时功能、受众群体和语气。
- 代码： 读取组件、路由、主题和文案；编写
-
检查点：提案3个方向。 使用references/PITCH.md。结合references/DIRECTIONS.md的外观（4个系列 × 3种外观）与references/NARRATIVES.md的结构。三个方向必须不同（至少2个系列），每个方向都有一个渲染的关键帧。用户选择或混合；将决定保存到
direction.md。如果有参考视频，方向A是参考视频在指定保真度下的还原，每个静帧都显示在其对应的参考帧旁边。 -
检查点：脚本。 为所选方向编写节拍表（场景、屏幕内容、文案、动效、转场、音效），外加精确的UI操作。批准后，要求提供所需的应用内截屏（references/UI-REBUILD.md）。
-
检查点：图像（仅当方向需要时）。编写提示并等待文件；切勿自己生成或伪造图像（references/IMAGES.md）。
-
构建。
- 每个场景一个子合成。
- 对于每个场景，读取其HyperFrames蓝图并在手工构建前搜索注册表（
npx [email protected] catalog <词语> --json）。 - 产品场景从
reference/ui-rig.html开始。使用lib/fx.js处理动效，使用lib/three-stage.js处理3D。 - 循环执行代码检查 → 快照 → 修复，直到每个帧读起来良好，然后进行草稿渲染（references/WORKFLOW.md）。如果有参考视频，使用
analyze-reference.mjs --compare检查草稿。
-
检查点：音乐。 编写
music-plan.json，运行scripts/music-plan.mjs，并告诉用户在ElevenLabs中生成2-4段录音。使用analyze-track.py --drop对齐它们，使用mix-variations.mjs混合，让用户选择（references/MUSIC.md）。 -
交付。 挂载配乐，使用
-q delivery渲染，然后运行scripts/finalize.mjs（-14 LUFS母带处理 + 一个不超过100 MB的上传副本）。
规则
- 仅限真实功能、真实UI、演示数据。 切勿发明屏幕；要求提供它们。
- 每个视频一个标志性动作和2-3个转场（或参考视频自有的一套），始终一致使用。每个文本行停留时间应足够阅读。
- 场景中仅使用品牌变量（
var(--brand-primary)、var(--font-display)）；切勿硬编码品牌十六进制颜色或字体族。 - 参考是语法，不是内容。 复制其节奏、转场、文字和颜色角色；切勿使用其镜头、Logo、名称、文案或音乐。
- 无默认外观。 如果草稿开始趋向通用的"暗色渐变+倾斜窗口+类型卡片"，请停止并重新阅读
direction.md。 - 构建前阅读references/GOTCHAS.md。它列出了HyperFrames中会导致渲染失败的陷阱。
文件
| 路径 | 说明 |
|---|---|
toolkit/fx.js | 动效助手：打字、流式文本、甩动、遮罩揭示、光标、计数、路径绘制/跟随 |
toolkit/three-stage.js | 带有关键帧相机和屏幕切换的Three.js笔记本电脑/手机/浮动面板舞台 |
toolkit/ui-rig.html | UI重建工具（平面/倾斜/前置相机），在每个项目中复制到reference/ |
toolkit/skeleton/ | 空的根index.html（品牌标记、importmap、fx） |
examples/ | 技术演示，每个系列一个：new-project.mjs <目录> --examples 挂载它们。学习，切勿复制。 |
scripts/ | new-project、from-link、brand、analyze-reference、fetch-sfx、music-plan、analyze-track.py、mix-variations、finalize |