mcpField
Y
yuv-video-director

yuv-video-director

github.com/hoodini创意与媒体29143 次安装5 天前更新
代码仓库

关于 yuv-video-director

yuv-video-director 是为 YUV.AI 视频制作编排流程的技能，面向需要组合动画、图形和预渲染片段的视频创作者。它按镜头节拍分配引擎，整合为 HyperFrames 作品，并包含自检与 MP4 渲染步骤。

主要功能

  1. 01按镜头节拍选择制作引擎
  2. 02组合 GSAP、Lottie、Three.js 与 ManimCE
  3. 03应用 YUV.AI 品牌规范
  4. 04通过 lint、验证和抽帧检查
  5. 05渲染为 MP4

适用场景

  1. 01制作 YUV.AI 品牌宣传视频
  2. 02以动画片段解释数学或算法
  3. 03制作带动态字幕和转场的视频
  4. 04生成竖屏或横屏视频成片

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/hoodini/ai-agents-skills --skill yuv-video-director

安装后在 Claude Code 中输入/yuv-video-director确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

README.md
assets/
brain-fire.json
decode-beam.json
eye-read.json
FRAME.md
gen_content_lotties.py
ghost-line.json
lottie-burst-generator.py
manim-scene-template.py
neural-net-field.js
neural-pulse.json
orb-extract.json
phoenix-burst.json
wa-collapse.json
what_is_nn.py
assets/builders/
explainer-template.tpl
fetch_hebrew_fonts.py
gen_explainer.py
gen_music_bed.py
gen_music_teaser.py
gen_news.py
news-template-16x9.tpl
news-template-9x16.tpl
references/
brand-kit.md
cinematic.md
composition-pattern.md
editing.md
frame-md.md
gates.md
lottie.md

详细介绍

yuv-video-director

YUV.AI 视频的指挥者。你（Agent）决定每个节拍需要什么，将其路由到合适的引擎，把所有内容整合到一个 HyperFrames 合成中，套用 YUV.AI Neon Phoenix 品牌风格，自行验证，并渲染为 MP4。此技能是路由器和可用的参考实现；只有在使用相应引擎时才加载参考文件。

设计的唯一准则：yuv-design-system 技能（Neon 模式 — 粉色 #FF1464、青色 #00E5FF、纯黑／白色、Anton+Inter+JetBrains Mono、神经网络凤凰图案）。其视频形式是 frame.md——参见 references/frame-md.md。随附的模板：assets/FRAME.md。将其放入项目根目录；HyperFrames 会读取它。

唯一法则（决定一切）

HyperFrames 通过在无头 Chrome 中逐帧定位 → FFmpeg进行渲染（frameIndex = floor(t·fps)， 相同输入 → 相同输出）。因此，每种视觉效果都属于以下两类之一：

模式运行方式……引擎规则
实时可定位适配器在渲染期间运行，每帧由时间 t 驱动GSAP、Lottie（window.__hfLottie）、Three.js、由 GSAP 代理 onUpdate 驱动的 canvas必须由时钟驱动——不能使用 Date.now()、Math.random()（使用 mulberry32 作为随机种子）、setTimeout 或 .play()
预渲染资源离线运行，输出文件，再作为片段导入ManimCE（Python→MP4/alpha）、TTS 音频、背景移除先渲染，再作为 <video>／资源片段添加

如果可以定位，就用适配器；如果不行，就预渲染。 Manim 始终是预渲染片段——它有自己的渲染器并在 Python 中运行，绝不能作为实时适配器。

将每个节拍路由到相应引擎

"explain X as a TEASER/promo (FOMO, cliffhanger, fast)"              → references/teaser-explainer.md (the formula)
"explain a concept / math / neural network / algorithm / training"  → ManimCE   (pre-rendered clip — cut into BURSTS for teasers)
"branded motion: logo sting · stat reveal · icon pop · pulse"        → Lottie    (live, lottie-web)
"kinetic captions · titles · reveals · transitions · data callouts"  → GSAP      (live)  ← default
"3D / spatial"                                                       → Three.js  (live)   (Babylon NOT used)
speech → captions                                                    → transcribe + approve webapp (see video-edit skill)
no voiceover provided                                                → TTS (Kokoro: npx hyperframes tts)
brand colors / fonts / motifs                                        → frame.md  (picked up front)

GSAP 是处理文本和动态效果的可靠默认选择。制作设计感强的品牌图形时使用 Lottie，讲解概念时使用 Manim。

工作流

  1. 规划节拍。 叙事弧线，以及每个节拍需要使用的引擎。选择 16:9 和/或 9:16。
  2. 设定品牌风格。 确保项目根目录中有 FRAME.md（复制 assets/FRAME.md）。所有颜色、字体和图案都从中获取，不要自行编造。每条视频都必须包含以下三项品牌元素（参见 references/brand-kit.md + references/cinematic.md）：揭晓时和片尾卡上的真实凤凰徽标（assets/logo-phoenix.png）、真实的特色 Lottie（生成一个：assets/lottie-burst-generator.py），以及链接片尾卡（徽标 + "LET'S FLY HIGH" + 完整链接集 + CTA）。有关预告片/社交媒体节奏，请参见 references/editing.md；有关心理学/悬念/FOMO 剪辑，请参见 references/cinematic.md。
  3. 先预渲染素材节拍（让它们成为现成片段）：
    • Manim → references/manim.md + assets/manim-scene-template.py。运行 py -m manim render -qh --fps 30 scene.py SceneName 渲染，并将 MP4 复制到 assets/。
    • 字幕/TTS → 重用 video-edit 技能（转录 → 审核 Web 应用 → 同步）和 npx hyperframes tts。
  4. 搭建框架并合成。 运行 npx hyperframes init <slug> --non-interactive。编写 index.html（以 hyperframes 技能为准）。使用：
    • 可拖动定位的神经网络场背景 → assets/neural-net-field.js
    • 按品牌规范使用 Lottie → references/lottie.md + assets/neural-pulse.json
    • 将 Manim 渲染结果作为 <video class="clip" muted playsinline> 主体片段
    • 为每个场景添加 GSAP 入场效果，在每个边界添加霓虹闪光转场，仅在最后一个场景淡出
    • 有关预告片/社交媒体节奏（快速硬切、动感文字重击、引子蒙太奇、故障/色差闪切）→ references/editing.md——按制片人的方式剪辑，而不是做幻灯片
  5. 自行验证（关卡）。 参见 references/gates.md：运行 npx hyperframes lint（0 个错误）→ validate（0 个控制台错误，WCAG AA）→ 渲染 → 在时间线上抽查 5 帧。修复后重新运行。必须通过截图验证 Lottie（谨防 Skottie 与 lottie-web 的兼容性陷阱）。
  6. 渲染。 运行 npx hyperframes render --fps 30 --output renders/<name>_FINAL.mp4。竖屏视频请使用 1080×1920 布局创建副本（参见 video-edit）。

前置条件（先检查；无法满足时应妥善降级）

参见 references/prereqs.md。需要 Node 22+、FFmpeg、带 pip 的 Python 3.11+（用于 Manim/字幕）。在这台机器上：真正的 Python 是 py → C:\Python313（裸用的 python 是 Hermes 的 venv，没有 pip，勿用）。使用 py -m pip install manim 安装 ManimCE（如果使用 Text()/MarkupText 编写，而不是 Tex/MathTex，则不需要 LaTeX）。如果无法使用 Manim → 跳过数学节拍或提出安装建议；绝不要因此导致整条视频失败。

此技能打包的内容（可通过 lint 检查并渲染的参考实现）

文件内容
assets/FRAME.mdYUV.AI Neon Phoenix 视频帧规范（由 HeyGen 的 Coral pack 重新品牌化）
assets/neural-net-field.js确定性、可定位的神经网络凤凰画布背景
assets/neural-pulse.json手工编写的 Bodymovin Lottie（可在 lottie-web 中渲染，而不只是 Skottie）
assets/gen_content_lotties.py6 个生产级 CONTENT Lottie 的生成器（WhatsApp-collapse、decode-beam、eye-read、ghost-line hero、orb-extract、brain-fire）——透明、持久且连续，并已通过 lottie-web 验证
assets/{wa-collapse,decode-beam,eye-read,ghost-line,orb-extract,brain-fire}.json6 个生成的内容 Lottie，可直接使用
assets/manim-scene-template.pyManimCE 场景模板，霓虹品牌样式，仅使用文本（不使用 LaTeX）
assets/what_is_nn.py“什么是神经网络”ManimCE 场景（神经元 → 网络 → 训练，34.5 秒）
assets/Anton-Regular.woff2本地 Anton 字体（渲染器不会自动解析；请声明 @font-face）
references/composition-pattern.md完整的多引擎 index.html 模式（field + Lottie + Manim clip + GSAP + flash）
references/teaser-explainer.md电影感预告片讲解公式：冷开场重击 → Manim 爆发 → 正面对决 → FOMO 蒙太奇 → 悬念收尾；与内容同步的透明 Lottie 节拍；seek-modulo 修复；预告片音乐合成

配套技能

hyperframes（组合约定——创作时始终调用）、hyperframes-cli、lottie、video-edit（转录 + 审核 Web 应用）、yuv-design-system（品牌）。此技能负责协调它们。

评论

支持 Markdown