使用 Claude、Three.js 和 Remotion 创建竖屏动画故事短片

什么是 Claude Animated Shorts？

Claude Animated Shorts 是一项免费的 Claude 技能，其工作流程基于 如何使用 Claude 制作病毒式传播的动画短片（完整工作流程） 中演示的方案。它可以帮助你制作 55–70 秒的竖屏动画故事短片，而无需依赖 AI 视频生成器。

该项目将 2D 角色与多彩的 3D 环境相结合。其目标风格包括墨线轮廓、绘制风格的小镇、镜头模糊、平滑的镜头移动、进行曲风格的配乐以及同步音效。渲染在你自己的计算机上运行，使用 Remotion 中的 three.js。

该工作流程已通过 为一首歌倾倒的桥 得到验证。这是一部 67 秒的短片，讲述了 1831 年布劳顿桥的故事。

主要功能与仓库内容

该仓库包含制作技能、完整示例项目、音频资源、质量保证工具以及经过测量的视觉参考资料。

• SKILL.md：主要技能定义文件，包括完整流程、制作规则、修复方案以及最终视觉参数。
• templates/bridge/：桥梁短片的完整源代码，包括其世界、角色、墨线处理、镜头模糊、色彩分级、故事和镜头设计。
• templates/audio/：合成音效、进行曲音乐，以及经过闪避和响度处理的最终混音。
• templates/scripts/：用于生成静帧和并排画面表、合并镜头以及执行逐帧质量保证的辅助脚本。
• references/STYLE_BIBLE.md：根据 20 部参考短片测量得出的脚本和视觉公式。
• references/reports/：七份报告，涵盖运动、深度、纹理、角色、光照、轮廓和色彩分级。
• references/frames/：38 张完整尺寸的参考帧，分辨率为 540 × 960 像素。
• references/sheets/：20 张联系表，每部参考短片包含 60 帧，共计 1,200 帧。

前置要求

安装技能前，请准备好其渲染和音频工作流程所需的本地工具。

• Claude Code：用于调用技能并协调工作流程。
• Node：用于 JavaScript 和 Remotion 环境。
• Remotion 以及用于视频合成和 three.js 渲染的 @remotion/three。
• Python 3：用于随附的辅助脚本。
• ffmpeg：用于视频和音频处理。

设置 Remotion 及其 three.js 集成时，请参阅官方 Remotion 文档。你也可以确认支持所需的命令行工具是否可用：

node --version
python3 --version
ffmpeg -version

安装 Claude 技能

1. 克隆仓库或下载其 ZIP 压缩包。

2. 将完整项目文件夹放置在以下 Claude 技能路径中：

   ~/.claude/skills/cartoon-3d-short/

3. 确认 SKILL.md、templates/ 和 references/ 仍位于该目录中。请保留仓库结构，因为技能在工作流程和视觉对比中依赖这些资源。

4. 开始制作前，请确保 Remotion、@remotion/three、Node、Python 3 和 ffmpeg 已在你的计算机上可用。

配置 Remotion 临时存储

将 REMOTION_TMP 设置为一个所在磁盘具有充足可用空间的文件夹。每次 Remotion 打包都会将约 1.3 GB 的 public/ 目录复制到临时存储中。

在类 Unix shell 中，你可以使用以下命令为当前会话设置变量：

export REMOTION_TMP=/path/to/large-drive/remotion-tmp

请选择大容量磁盘上的位置，而不是空间较小的系统磁盘。持久化环境变量的配置方式取决于你的操作系统和 shell。

制作你的第一部动画短片

1. 选择主题

确定你想要讲解的历史事件、故事或主题。该项目围绕短篇叙事作品设计，因此，能够在大约一分钟内讲完的聚焦主题是最理想的起点。

2. 在 Claude Code 中调用技能

打开 Claude Code，直接请求使用该技能。将占位符替换为你的主题：

使用 cartoon short 技能制作一部关于[你的主题]的短片。

例如：

使用 cartoon short 技能制作一部关于布劳顿桥坍塌的短片。

3. 让技能遵循制作流程

Claude 会遵循 SKILL.md 中的说明。工作流程将经过以下主要阶段：

1. 主题与事实：确定主题和事实基础。
2. 脚本：将事实组织成简短的叙事。
3. 配音：为故事准备旁白。
4. 镜头计划：在 story.ts 中定义镜头顺序和摄影机方案。
5. 静帧：在进行最终渲染前生成具有代表性的画面。
6. 渲染：通过 Remotion 和 three.js 在本地生成动画镜头。
7. 质量检查：将画面与测量报告及提供的参考帧进行比较。
8. 最终输出：生成最终的 2K 渲染视频和声音混音。

了解视觉与音频工作流程

所提供的桥梁模板完整展示了项目如何组织一部制作完成的短片。请研究 templates/bridge/，了解环境、角色、分镜大纲、景深效果、调色、镜头运动和故事节奏如何协同工作。

关于声音，请查看 templates/audio/。其中演示了成熟制作中使用的合成音效、进行曲配乐、响度处理和闪避处理。闪避处理有助于在旁白或其他重要音频周围平衡配乐音轨。

项目还包含用于生成静帧、合并镜头、制作对比表以及逐帧检查的脚本。这些工具支持迭代式工作流程，让你能够在完整制作定稿前发现视觉问题。

正确使用参考资料

参考资料旨在指导视觉处理方式，而不是提供故事内容。

• 阅读 references/STYLE_BIBLE.md，了解经过测量的脚本和视觉公式。
• 调整运动、景深、纹理、角色处理、灯光、线稿或调色时，请参考相关报告。
• 将生成的静帧与 38 张全尺寸参考帧进行比较。
• 使用联系表评估完整序列中的节奏和视觉一致性。

故事、角色和声音始终应当由你原创。请使用附带的参考资料来借鉴视觉风格，而不是内容。

进阶技巧

完整渲染前先检查静帧

在花时间进行完整渲染前，先使用静帧生成和对比流程。代表性帧有助于你在制作早期评估构图、线稿、灯光、景深、模糊和调色。

将报告作为针对性检查清单

当镜头效果不对时，请查阅与问题对应的报告，不要一次性修改所有视觉设置。例如，遇到运动问题时检查运动报告；当墨线处理不符合预期风格时，查看线稿报告。

研究完整的桥梁模板

桥梁项目不只是视觉示例：它是一部完整制作的 67 秒短片的全部源代码。使用它来了解 story.ts、摄像机、角色、环境元素、后期处理和音频如何共同完成一部作品。

渲染前规划磁盘空间

由于每次 Remotion bundle 都会将约 1.3 GB 的公共资源复制到临时文件夹中，反复执行 bundle 可能会给有限的存储空间带来很大压力。在开始大量渲染前，请将 REMOTION_TMP 指向容量充足的驱动器。

保留原创创意元素

为每个项目创作新的故事、原创角色和属于你自己的声音处理方式。所提供的帧仅获准用于风格研究，即使仓库代码和文档以 MIT License 授权提供。

许可

项目代码和文档依据 MIT License 授权；详情请查阅仓库中的 LICENSE 文件。附带的参考帧用途更为有限，仅用于研究视觉风格。

结语

Claude Animated Shorts 提供了一套结构化的本地工作流程，可将主题转化为精致的竖屏动画故事。安装技能及其依赖后，你可以向 Claude Code 提供一个主题，并按照涵盖研究、脚本、配音、镜头规划、静帧审查、帧对比、渲染和声音混音的流程推进。附带的桥梁作品和经过测量的参考资料，为创作具有统一风格的原创短片提供了实用基础。