norahe0304-art/30x-video

Remotion 精美视频

创建看起来像专业代理机构花费 5 万美元制作的 40 秒产品发布视频。秘诀：构建动画化的产品 UI 模型——真实的仪表盘、对话界面、代码编辑器、数据可视化——全部用代码构建并采用弹簧动画。

何时使用

用户提到品牌名称或提供 URL，并希望获得产品发布 / 营销 / 演示视频。

不适用于（请改用其他技能，不要在此技能上硬撑）：从现有长视频中提取短片段（那是短片/重剪任务）；为已有的说话头视频添加字幕；对用户素材进行 NLE 风格编辑（变速/调色/重排）；为纯音乐轨道创建节拍同步的歌词视频。此技能用于从品牌的网络存在构建发布视频——代码构建的 UI 模型、真实抓取的资产、5 幕叙事。如果输入不是要展示的品牌/产品，则不应使用此技能。

技术栈

Remotion 4.x（脚手架固定版本 ≥4.0.484）+ React 19 + TypeScript + Zod + lucide-react + @remotion/transitions + @remotion/google-fonts + @remotion/paths + @remotion/light-leaks + @remotion/media + @remotion/effects（官方渐变/棋盘格/浮雕/网格线——优先于手写 CSS 等效方案）

系统前置条件 —— 自动处理

不要要求用户安装任何东西。不要手动运行 command -v 检查。 编排器（scripts/url-to-video.ts）内置了一个预检功能，会自动检测缺失的工具，打印缺失项，并通过 brew/apt/dnf/pacman/npm 安装它们——全部在第 1 步中完成。

必需工具（若缺失则自动安装）：

工具	原因
ffmpeg	音频修剪、响度归一化、视频修剪、音量检测健全性检查
yt-dlp	从 YouTube 抓取品牌演示视频 + 免版税背景音乐
aubiotrack	analyze-audiomap.py 的降级模式节拍回退 + 旧版 beat-sync.ts（通过 aubio 包）
playwright	无头渲染首页截图

预检标志（传递给 url-to-video.ts）：

• --yes —— 自动安装，无需提示（当以 Claude 身份运行时使用此选项，因为你没有 TTY）
• --no-install —— 跳过安装，以降级模式运行（节拍→回退方案，截图→仅拉取）

如果遇到自动安装失败的平台（锁定环境、无 sudo），编排器会打印每个工具的手动安装命令并继续以降级模式运行。永远不要放弃执行——降级输出仍然比什么都得不到好。

音乐映射分析器（scripts/analyze-audiomap.py，第 4 步）携带自身的预检：首次运行时通过 pip 安装 librosa/numpy/soundfile，如果安装失败（或传递了 --no-install），则降级为 aubiotrack——此时音频映射仅携带 bpm + beats_sec，其他所有字段为 null 且 rhythmic: false（后续网格不可信）。

BGM 生成器（scripts/generate-bgm.py，第 2 步层级 ②）携带相同的预检结构：通过 pip 安装 transformers/torch/soundfile/numpy（普通 → --break-system-packages → --user）；如果安装失败，则输出 yt-dlp 回退提示而非阻塞——BGM 源降级，但永不中止。生成的音轨像其他任何 BGM 一样流入 analyze-audiomap.py。

URL 到视频 V2 输出契约

优先路径：运行 V2 输入编排器，然后在 Remotion 中完善生成的项目。

node --experimental-strip-types <installed-skill-dir>/scripts/url-to-video.ts https://brand-site.com --out ./<brand-name>-launch-video

编排器必须输出：

• brand-report.json
• scene-constitution.json
• asset-manifest.json
• story.md
• review.md
• 一个完整的 Remotion 项目目录，包含 public/brand/*、可选的 public/brand/beat-map.json、src/theme.ts 以及供脚手架消费的生成输入数据

回归路径：

node --experimental-strip-types <installed-skill-dir>/scripts/benchmark-suite.ts --match stripe-fintech --offline --reuse-brand-dir ./public/brand --install --verify --render

基准测试运行器必须输出每个基准测试的 benchmark-result.json 文件和套件摘要，以便 V2 更改可以通过压力测试而非争论来验证。

此技能不优化一键最终渲染。它优化的是视频团队级初剪，Claude 或人类可以在 Remotion 中完成最后 10-20% 的打磨。

核心理念

1. 构建产品 UI 模型，而非抽象图形。 UI 本身就是动画。
2. 先抓取，后设计。 每种颜色、字体、Logo 都来自真实的品牌网站。
3. 节奏即奢侈。 40 秒让内容有呼吸空间。永远不要仓促展示功能。
4. 品味胜于模板。 如果看起来像“AI 做的”，重新设计。
5. 一种字体系列，权重层级。 仅使用 300-600 范围，永远不要加粗（700+）。

三层宪法

• 现象层： 收集官方网站证据。ScreenshotProof 是必需的。VideoProof 是首选。没有视觉证据，就没有可信视频。
• 本质层： 从证据推断 DesignArchetype。使用参考资料来锐化判断，切勿覆盖品牌自身。
• 哲学层： 在构建之前拒绝反射性默认值。品味胜过便利性。可信度胜过奇观。产品现实胜过模板能量。

此技能明确吸收自以下项目的理念：

• agent-browser 作为首选的现象层收集器（无头，不劫持屏幕）
• awesome-design-md 作为企业设计原型参考库
• taste-skill 作为执行纪律来源
• Impeccable 作为完成门和反单一文化词汇来源

以上均非硬性依赖。其价值已嵌入此技能的思维和质量控制门中。

规则

阅读各个规则文件以获取详细说明和代码示例：

设计系统

• rules/typography.md - 字体权重（最大 600）、字号层级（最小 24px）、文本安全
• rules/color.md - 品牌极性、中性色调、60-30-10 规则、强调色不透明度层级
• rules/layout.md - 网格系统、4px 间距尺度、安全区域、圆角层级、防重叠
• rules/composition.md - 定制构图法则：零真空氛围基底、全出血时刻、编辑型 200-320px 大字号、真实资产优先、构图多样性——外加构图 SLOP 黑名单（轮辐式药丸图、空心卡片三联画、居中物体虚空、永恒弹簧+微光开场）以及证据不足应对方案（得分 < 40 → 从 Logo 几何生长品牌世界，绝不使用空卡片）

视觉内容

• rules/ui-mockups.md - 产品 UI 构建、密度、标题栏、语法着色、光标模拟、巨型终端底部升起规范（经过验证的几何 + 内容契约 + 失败列表）
• rules/cards.md - 交错卡片网格、内部填充技术、动画卡片主体、无重复
• rules/data-viz.md - SVG 图表、动画指标、tabular-nums 数字、状态徽章、反英雄指标
• rules/artifact-catalog.md - 在开始设计任何幕之前阅读：15 个经过实战验证的定制制品家族（含来源指针）+ 脚手架清单 + 跨生产主角轮换日志（~/.media/hero-ledger.jsonl）——多样性是一个门槛，不是一个建议

动效与制作

• rules/motion.md - 弹簧动画、easeOutExpo、逐字符交错、时间标准、保持后快切、有机 AE 词汇（wiggle / overshoot / idle float / lookAt——来自同级 remotion-motion 技能）
• rules/transitions.md - TransitionSeries、光线泄漏、流动背景、噪点纹理、视差
• rules/cinematic.md - 胶片颗粒、暗角、闪烁扫光、色彩分级、玻璃态、渲染设置
• rules/beat-sync.md - 基于 audiomap.json 的 BGM 驱动计时：无条件信任一个分析器，当 rhythmic: true 时进行节拍网格对齐，否则使用能量相位/静默节奏，在能量峰值处保持后快切
• rules/narration-sync.md - 仅限画外音/字幕视频：将视觉效果锁定到单词时间戳、字幕/品牌词清理、句子边界剪切对齐

策略与质量

• rules/creative-moves.md - 从每个“惊艳”裁决中提炼的五个创意生成器——习语字面化、Logo 几何生长、约束炼金术、语义反转、领域原生证明
• rules/taste.md - AI 垃圾黑名单、设计原则、UX 法则、自审清单、节奏
• rules/narrative.md - 5 幕结构、标题/UI 节奏、故事弧线、Logo 星群
• rules/narrative-templates.md - 行业特定叙事模板（AI SaaS、金融科技、开发者工具、电子商务、医疗保健、网络安全、协作）
• rules/workflow.md - 品牌抓取、图标系统、资产策略、视频嵌入、文件组织、BGM 多样性强制要求（品牌衍生情绪 + 全局日志去重——绝不同一首音轨两次）
• rules/media-resolve.md - 资产解析级联（日志 → 采用 → 编程式 → 目录 → 网络）带 .media/manifest.jsonl 冻结日志；编程式优先：虚线图世界地图、simple-icons 标记、LobeHub AI 模型 Logo 作为内联可着色组件
• rules/archetypes.md - 从高质量设计参考中抽象的企业设计原型
• rules/finish-gate.md - Impeccable 风格完成协议、反单一文化检查、渲染阻塞标准
• rules/qc-gates.md - 四个基于证据的质量控制门：资产审计（第 2.5 步）、每幕帧证据（第 4 步）、批评家循环接线（第 7.5 步）、诚实披露（第 8 步）。仅基于证据——渲染像素 + 读取，无需 grep

参考文件（代码模式）

• references/animations.md - FadeIn、ScaleIn、SplitText、Typewriter、CountUp、AnimatedPath
• references/audio.md - 音频同步、节拍检测、画外音闪避、ElevenLabs TTS with-timestamps 语音合成管线（免费获取单词时间戳、受限密钥处理、基于 VO_CUES 的闪避）
• references/components.md - GradientMesh、GlassPanel、FilmGrain、ProductFrame、BrandIcon
• scaffold/src/components/Transitions.tsx - 7 种转场系列（whipPan/maskWipe/push/zoomPunch/blurDissolve/flashThrough/glitchCut）——可替代 fade()；全 fade 视频是违规
• scaffold/src/components/ShaderFX.tsx - GPU ShaderPlane（liquidWarp 可用于生产；silk/lens 正在开发中）——使用 --gl=angle 渲染（已内置到脚手架渲染脚本中）
• scaffold/src/components/Captions.tsx - 单词时间戳字幕，6 种样式（karaoke/scalePop/weightShift/neonGlow/kineticSlam/editorial）
• references/lottie.md - @remotion/lottie 集成，推荐来源
• references/visual-effects.md - 分层视觉效果库参考（lottie、运动模糊、五彩纸屑、flubber、three.js）

Remotion API 参考（已捆绑）

此技能捆绑了完整的 remotion-best-practices 参考，用于 Remotion API 模式。当您需要特定 Remotion API 知识时，加载这些文件：

• remotion-best-practices/rules/videos.md - 视频嵌入、修剪、音量、速度、循环
• remotion-best-practices/rules/audio.md - 音频导入、修剪、音量、速度、音调
• remotion-best-practices/rules/timing.md - 插值曲线、线性、缓动、弹簧
• remotion-best-practices/rules/transitions.md - 场景转场模式
• remotion-best-practices/rules/compositions.md - Compositions、stills、文件夹、默认 props
• remotion-best-practices/rules/sequencing.md - Sequence 延迟、修剪、时长限制
• remotion-best-practices/rules/fonts.md - Google Fonts 和本地字体加载
• remotion-best-practices/rules/images.md - Img 组件用法
• remotion-best-practices/rules/charts.md - 柱状图、饼图、折线图、股票图模式
• remotion-best-practices/rules/light-leaks.md - @remotion/light-leaks 叠加效果
• remotion-best-practices/rules/lottie.md - @remotion/lottie 集成
• remotion-best-practices/rules/text-animations.md - 排版动画模式
• remotion-best-practices/rules/calculate-metadata.md - 动态 composition 元数据
• remotion-best-practices/rules/voiceover.md - 使用 ElevenLabs TTS 的 AI 画外音
• remotion-best-practices/rules/parameters.md - Zod schema 参数化
• remotion-best-practices/rules/ffmpeg.md - 用于视频修剪的 FFmpeg 操作

工作流（8 步 + 4 个证据门）

此工作流内部运行四个基于证据的质量控制门——资产审计（第 2.5 步）、每幕帧证据（第 4 步）、批评家循环（第 7.5 步）和诚实披露（第 8 步）。