Claude Code 能帮你写代码出片了：纯 HTML + Playwright 做动效视频，零剪辑工具

做视频动画，你还在盯着时间轴拖关键帧？OUT 了。

有个叫 claude-motion-design 的 Claude Code Skill，让 AI 直接帮你写代码出片——不需要 After Effects，不需要 Remotion 许可证，也不需要任何剪辑软件。整个流程：Claude 写代码 → Playwright 截图渲染 → ffmpeg 输出 MP4，纯代码、纯 deterministic。

它是怎么工作的？

核心思路很有意思：整个视频就是一个 seek(t) 函数。给定时间 t，返回那一帧长什么样。没有 CSS 动画，没有计时器，每一个像素都是从时间推导出来的。

流程是这样的：

• 输入：你的想法（文字描述一个视频场景）
• 节拍对齐：自动分析音乐节拍，把视觉高潮点对到最强拍子上
• 生成静帧：Claude 根据描述生成 4 张静帧供你确认
• 代码渲染：Playwright 逐帧截图，混合帧间模糊
• 音频处理：SFX 对齐到音频峰值，双通道 loudnorm 压到 -14 LUFS
• 输出：final.mp4，广播级质量

为什么说它是设计工作流的下一个台阶？

传统动效制作依赖 Timeline 和手动调参，改一个过渡效果要从十几层图层里翻找。而这个 Skill 的迭代方式就是”对话”——”让转场更快点”、”把 3D 立方体加到高潮点”、”换个音乐”。LLM 理解了需求，直接改代码，重新渲染，结果立等可取。

更夸张的是 Remake 模式：你扔给它一个别人做的 launch video，它能自动拆解每一帧、检测镜头切换、写成分镜规格，然后用 4 个子 Agent 并行重建——输出「原版 | AI 重制」的 Split Screen 对比图。法律上也有底线：不会复用原版音乐、人像照片，所有示例数据都标注了”Example data”。

技术栈和门槛

• 需要 Claude Code
• Python 依赖：playwright、imageio-ffmpeg、numpy、pillow
• 免费素材：Mixkit（音乐/SFX/视频）、Pexels、Unsplash、svgl 矢量图标
• 全流程跑通需要 Chromium + ffmpeg，无任何商业许可证费用

Stars 只有 53 个（GitHub 链接在下方），目前还算早期，但跑通之后的质感相当能打——它给 Howseen 做的 launch video 就是用 Claude Opus 5.5 跑了 5 轮迭代出来的。

如果你在创意团队负责视频资产，或者经常要给产品做宣发短片，这个 Skill 值得放进工作流试试。

https://github.com/howseen-ai/claude-motion-design

GitHub: https://github.com/howseen-ai/claude-motion-design