Communitygithub.com

masskx/douyin-remotion-video

使用 Remotion、Codex 和阿里云 DashScope CosyVoice TTS 构建抖音/ TikTok 风格的英语词汇短视频。仅用于英语单词学习类视频,如词根、前缀、后缀、相关词群、易混词、发音、含义对比以及采用高对比度黑/黄视觉风格、字幕条和音频驱动时间线的词汇记忆卡。

douyin-remotion-video 是什么?

该技能用于将英语词汇素材自动转化为节奏明快、视觉冲击力强的抖音风格单词学习短视频。它基于 Remotion 框架,结合银弹 TTS (DashScope CosyVoice) 生成语音,并通过 `ffprobe` 提取音频时长来驱动精确的字幕、场景切换和动画时间线。技能支持词根/词缀、词族、易混词、发音对比等多种词汇教学内容,强制使用黑底黄字的高对比度卡片视觉风格,并内置了开场3秒强钩子设计、动物图标情绪反应、背景音乐自动闪避、封面图与文案自动生成等完整制作流程。输出产物包括可运行的 Remotion 项目、TTS 音频段、合并音轨、时间线数据以及最终 MP4 视频和抖音封面与文案。所有数据(语音脚本、词汇、配置、计时线)均保持数据驱动,便于修改与复用。

兼容平台~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/masskx/GYEVideo/tree/main/remotion-template/skills/douyin-remotion-video

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Douyin Remotion Video

当用户希望将英语词汇素材制作成一条精彩紧凑的抖音风格单词学习短视频时使用此技能,特别适用于:

  • 一个词根、前缀、后缀、词族、易混词对或词汇表需要转化为短视频。
  • 一个英语学习 Remotion 项目需要黑/黄高对比度词汇卡片风格。
  • 阿里云百炼 / DashScope CosyVoice 配音需要驱动字幕和计时。
  • 现有 Remotion 场景需要检查风格、节奏、字幕、配音或最终导出。

不要使用此技能来处理纯文字说明、代码模块解释、架构图、通用知识视频或即插即用模块项目。这些内容属于其他独立的技能或项目。

此行已冻结:不再制作新的词根类剧集。 新的词汇剧集使用模板技能之一(skills/vocab-dossier、skills/vocab-game-show、skills/vocab-whiteboard;通过 npm run plan 选择,规则见 skills/_shared/HOUSE_RULES.md)。此技能仅保留用于重新渲染现有的黑/黄词根剧集(001–059)。

输入

典型输入:

  • 词汇内容:目标词根/词缀、单词列表、释义、音标、示例记忆角度,或关于英语学习剧集的简要构思。
  • 剧集简要:主题、受众、目标、平台、时长、前三秒钩子、关键词。
  • 来自 public/bgm/、shared-assets/bgm/ 和 src/data/bgmRegistry.ts 的 BGM 资产和注册项。
  • 来自 public/assets/icons/animals/、shared-assets/icons/animals/ 和 src/data/animalIconRegistry.ts 的本地动物图标资产。
  • 数据文件:src/data/words.ts、src/data/voiceScript.ts、src/data/episodeConfig.ts,可选的 src/data/subtitles.ts。
  • 使用 React + TypeScript 的现有 Remotion 项目。
  • 可选的英语词汇视觉风格参考视频或截图。

输出

预期输出:

  • 一个可运行的英语词汇 Remotion 剧集。
  • 数据驱动的词汇文件。
  • 位于 public/audio/segments/ 的 TTS 音频段。
  • 位于 public/audio/main-voice.mp3 的合并配音。
  • 位于 src/data/generatedVoiceTimeline.ts 的音频衍生时间线。
  • 最终 MP4,通常为 out/root-word-template.mp4 或剧集特定的输出路径。
  • 每集随剧集交付件一起导出的抖音封面图。
  • 每集包含内置 # 标签、大约 150 个汉字的抖音文案。

核心工作流程

  1. 阅读词汇主题并撰写简短的剧集概要。
  2. 在撰写课程正文之前设计前三秒钩子。选择一个 hookType、钩子文案、闪词、词根文本、语气、音效时刻,以及可选的单个动物反应。
  3. 创建或更新数据文件,特别是 voiceScript.ts 和词汇数据如 words.ts。
  4. 配置 episodeConfig.ts,包括 hook、bgmId、bgmVolume、voiceVolume 和 sfxVolume。
  5. 从 bgmRegistry 中选择合适的 BGM,配置默认的 bgmVolume: 0.32,并计划混音检查。
  6. 仅在它们支持钩子、误解、词根揭示或总结节拍时,才从 animalIconRegistry 中选择 2-4 个动物图标时刻。
  7. 根据数据构建 Remotion 场景。保持内容、时间、音频混音设置、图标时刻和视觉状态分离。
  8. 使用 DashScope CosyVoice 生成 TTS 配音。切勿硬编码 API 密钥。
  9. 使用 ffprobe 时长生成 generatedVoiceTimeline.ts。
  10. 根据 generatedVoiceTimeline 驱动字幕、活动场景、活动关键词、钩子闪词、冲突文案和冲击变焦。
  11. 在关键节拍处渲染静态帧,特别是 0-3 秒内的帧以及真实 TTS 后任何拉伸的钩子节拍,然后检查是否存在空白帧、重叠和对比度不足。
  12. 为剧集生成抖音封面。每集必须附带封面图,没有例外。
  13. 生成大约 150 个汉字、带有内置 # 标签的抖音文案,并与发布文件一起导出。
  14. 渲染最终 MP4 并验证钩子打断效果、音视频同步、BGM 闪避、BGM 音量、动物图标放置、最终淡出、封面可读性和文案质量。

按需加载的文件

  • 视觉风格:references/visual_rules.md
  • 前三秒钩子:references/hook_rules.md
  • 时间和节奏:references/rhythm_rules.md
  • DashScope 配音:references/voice_rules.md
  • BGM 和音频混音:references/audio_rules.md
  • 动物图标使用:references/icon_rules.md
  • 字幕设计和同步:references/subtitle_rules.md
  • 导出 QA 检查清单:references/quality_rules.md
  • 端到端流程:workflow.md
  • 当前示例:examples/ject_episode_example.md

优选项目模式

保持以下文件为数据驱动:

  • src/data/voiceScript.ts:词汇剧集的规范旁白和字幕来源。
  • src/data/generatedVoiceTimeline.ts:根据真实音频时长生成。
  • src/data/bgmRegistry.ts:根据 public/bgm/ 生成的本地 BGM 注册表。
  • src/data/animalIconRegistry.ts:根据 public/assets/icons/animals/ 生成的本地动物图标注册表。
  • src/data/episodeConfig.ts:每集的 hook、bgmId、bgmVolume、voiceVolume 和 sfxVolume。
  • src/scenes/HookScene.tsx:抖音打断系统,包含硬切、文字闪烁、冲突文案、回报、可选的本地音效,以及最多一个动物反应。它必须在 TTS 之后使用由 generatedVoiceTimeline 衍生的时间,以使拉伸的钩子旁白不会留下空白帧。
  • src/timeline.ts:从 generatedVoiceTimeline 推导场景时间。
  • src/components/BackgroundMusic.tsx:循环播放 BGM,在配音下闪避,并在结尾淡出。
  • src/components/AnimatedAnimalIcon.tsx:为选定的情绪节拍提供简短的本地动物图标反应。
  • src/CoverThumbnail.tsx:规范化的统一抖音封面模板。它应保持黑/黄外观,显示创作者品牌 小猪盖被,并在适当时使用本地动物图标。
  • scripts/generate-release-copy.ts:用于生成剧集文案和发布备注的规范化发布文案生成器。
  • src/utils/audioMixing.ts:共享的 BGM 音量、闪避和淡出辅助函数。
  • src/utils/motion.ts:共享的动作辅助函数,如 slamIn、punchZoom、shake、flashOpacity。
  • public/audio/main-voice.mp3:仅 Remotion 应使用 <Audio> 播放的生成产物。
  • public/bgm/:Remotion 使用的本地 BGM;渲染期间不要从网络加载 BGM。
  • public/assets/icons/animals/:Remotion 使用的本地动物图标;渲染期间不要从远程 URL 加载图标。

安全规则

  • 切勿将 API 密钥写入源文件、模板、示例、日志或文档中。
  • 从环境变量中使用 DASHSCOPE_API_KEY。
  • 将生成的音频和时间线视为可替换的产物。
  • 一旦生成了配音时间线,不要依赖硬编码的秒数标记。
  • 每集必须随视频交付件一起导出抖音封面图。
  • 每集必须随视频交付件一起导出抖音文案。
  • 封面必须保持统一的品牌风格:黑色背景、黄色强调、创作者名称 小猪盖被,以及一个易读的基于词根的记忆角度。
  • 文案应大约 150 个汉字,可读作一条抖音帖子正文,并包含类似 #英语学习 的标签。
  • 不要以普通标题页面开始剧集。前 0.5-1 秒必须用大字或硬视觉效果打断滚动。
  • 在 TTS 之后,不要让钩子视觉效果在固定的 3 秒标记处结束。如果真实配音时间线拉伸了开场段落,则让匹配的闪词和冲突视觉效果持续显示在屏幕上,直到词根或模式揭示开始。
  • 钩子轨道/气泡词闪必须由真实的 flash-words 配音段控制节奏。不要为每个词使用固定的 8-10 帧插槽。将气泡显示时机分布在整个口语段中,使每个词在听到时出现,并且之前的词保持可见。
  • 保持轨道旋转克制。046 风格的开场应让人感觉单词围绕一个词族聚集,而不是在屏幕上飞转。跨段的三分之一圈通常就足够了。
  • 网格/结构场景必须基于实际单词数量使用动态对称布局。当剧集有 6 或 7 个单词时,不要硬编码 8 插槽布局;居中不完整行并验证没有单词丢失。
  • 网格连接线应从词根/卡片边缘连接并保持在模块后面。不要画线穿过词文本或覆盖卡片内容。
  • 如果 DashScope instruction 对系统语音失败,则在保留 rate、voice、model 和脚本结构的同时,不带 instruction 重试。
  • 在 Remotion 预览或渲染期间,不要从远程 URL 加载 BGM。
  • 在 Remotion 预览或渲染期间,不要从远程 URL 加载动物图标。
  • 如果 BGM 许可不明确,将 license_check_required 添加到剧集的 notes.md 中。
  • 除非有记录的原因更改,否则使用当前的音频默认值:bgmVolume: 0.32、语音闪避因子 0.65、BGM 安全上限 0.32。

有用的命令

npm run voice
npm run preview -- --port=3000
npm run render
npx tsc --noEmit

npm run render 应被视为每集的默认发布命令,因为它会同时导出最终视频和抖音封面图。 npm run copy 可用于只为当前剧集回填或刷新抖音文案和发布备注。

用于关键帧检查:

npx remotion still src/index.ts RootWordTemplate out/check.png --frame=150 --scale=0.5

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

相关技能