haidrrrry/claude-remotion-skill

Claude Remotion Skill – 快速概览

它是什么 – 一个用于 Anthropic Claude (Claude Code, Claude Desktop 等) 的开源 代理技能 (agent skill)。安装此技能后，您可以用简单的英文要求 Claude 制作或编辑视频。Claude 会编写一个 Remotion 项目 (用于视频的 React + TypeScript 代码)、进行渲染、使用 ffmpeg 提取帧、检查帧、修复任何问题，最后返回一个精致的动态图形短片。

为什么它很重要 – 它将 AI 驱动的视频创作从文字转视频模型生成的“平淡淡入淡出”转变为遵循专业设计规则（弹簧效果、交错进场、色彩分级、颗粒感、Ken Burns 效果等）的 确定性、基于代码的动态图形。输出结果如同任何其他代码项目一样，完全可重新渲染且可编辑。

关键组件

• remotion-motion-graphics/ – Claude 读取的技能文件夹。
• SKILL.md – 工作流程描述与十条不可妥协的动态规则。
• references/ – 现成的动态模式片段与设计指南。
• assets/theme.ts – 定义颜色、缓动与弹簧预设值的单一主题文件。
• examples/ 中的示例 Remotion 项目，展示可直接执行的合成效果。

如何开始

1. Clone 此仓库。
2. 将 remotion-motion-graphics 文件夹复制到 ~/.claude/skills (用户层级) 或 项目中的 .claude/skills (项目层级)。
3. 在 Claude Desktop 中上传生成的 .skill 文件，或直接使用会自动检测该文件夹的 Claude Code。
4. 向 Claude 下指令，例如 “make a 3‑second logo sting” – Claude 会读取该技能、编写 Remotion 代码、执行 npm run render、提取帧、检查并返回最终的 MP4。

您可以要求 Claude 做什么

• 制作 Logo 片头、垂直 TikTok/Reel 片头、动态文字字幕、下三分之一标题、产品说明视频等。
• 新增或修复动态设计细节（交错、缓动、颗粒感、Ken Burns 效果）。
• 将字幕与语音同步，或将动画与节拍同步。

设计理念（“10 条规则”） – 不使用线性插值，始终使用弹簧/贝兹曲线；同时动画化 2-3 个属性；交错每个元素；提供快速退出效果；图层顺序为背景网格 → 资产 → 图形 → 调色 → 颗粒/晕影；对静态图像应用 Ken Burns 效果；增加细微的呼吸动态；基于 FPS 设定时间；将所有样式保留在单一 theme.ts 中；始终遵循渲染 → 检查 → 修复 → 重新渲染的流程。

演示与示例 – README 中的 GIF/MP4 演示展示了一个简短的动态图形短片。examples/ 文件夹包含四个完整的合成项目（个人资料宣传、Focus Cat 应用程序宣传、自我修复演示以及节拍同步代码编辑），可通过 npm install 与提供的脚本在本地渲染。

授权与社区 – MIT 授权，可免费使用与 fork。欢迎通过 pull requests 贡献（新的动态模式、调色盘、错误修复）。给予 Star 有助于项目被更多人发现。

---

给非专家的懒人包

安装此技能，与 Claude 对话，Claude 就会为您编写并渲染出专业的动画视频——无需 After Effects，只需您可以永久保留与调整的代码。