claude-motion-design Skill 技能

<h2>技能简介</h2><p>claude-motion-design 是一个 Claude Code Skill，用纯代码制作动态设计视频：HTML + Playwright + ffmpeg，不依赖 After Effects、Remotion 授权或剪辑软件。每一帧都由时间计算得出，逐帧渲染后进行运动模糊混合，并跟着音乐节拍剪辑，每个音效都落在其测量得到的峰值上。</p><h2>核心能力</h2><ul><li>确定性渲染：整支影片就是一个 <code>seek(t)</code> 函数，同样的输入得到同样的帧，修改一个场景不影响其他部分。</li><li>零成本：只需 Chromium、ffmpeg、Python，无授权费、无订阅。</li><li>结构性对齐节拍：场景放在节拍图上，音乐 drop 对齐关键视觉时刻，音效按峰值放置。</li><li>对 AI 友好可迭代：「让转场更快」「换音乐」「在 drop 处加个 3D 立方体」都只是改代码。</li><li>内置渲染管线：Playwright 截图、每帧 N 个子帧用 tmix 混合、BT.709 TV-range 编码、单帧跳变检测。</li><li>音频处理：用频带能量找真实 drop（不信任自动节拍网格），两遍 loudnorm 归一化到 -14 LUFS。</li><li>片源素材只取免费来源：Mixkit 音乐/音效/视频、Pexels、Unsplash、svgl logo、simple-icons，并提供搜索下载脚本。</li><li>Remake 模式：对任意发布视频做逐帧锁定的 1:1 复刻，生成「原片 | 复刻」分屏对照。</li></ul><h2>安装配置</h2><ul><li>复制 skill 到 Claude Code：<code>mkdir -p ~/.claude/skills &amp;&amp; cp -r skill/motion-design ~/.claude/skills/</code>。</li><li>安装 Python 依赖：<code>pip install playwright imageio-ffmpeg numpy pillow</code>，再执行 <code>python -m playwright install chromium</code>。</li><li>在 Claude Code 中提出做视频的需求，或输入 <code>/motion-design</code> 触发。</li></ul><h2>使用步骤</h2><ol><li>进入示例目录 <code>examples/howseen-launch</code>。</li><li>运行 <code>python fetch_assets.py</code> 下载免费音乐、音效、logo 与字体。</li><li>用 <code>python -m http.server 8000</code> 起本地服务预览影片。</li><li>用 <code>python render.py probe 1 8 15 20</code> 快速出静帧检查，再用 <code>python render.py full</code> 全量渲染（24 秒、60fps、子帧运动模糊）。</li><li>运行 <code>python audio.py</code> 生成音乐与音效，再用 ffmpeg 合成为最终视频。</li></ol><h2>适用场景</h2><ul><li>产品发布片与品牌宣传短片。</li><li>需要节拍卡点的动态设计视频。</li><li>希望用代码而非剪辑软件反复迭代的创作流程。</li><li>对参考视频做逐帧 1:1 复刻的对照项目。</li></ul><h2>适用人群</h2><p>适合动效设计师、前端与创意开发者，以及希望用 AI + 代码取代传统剪辑软件工作流的团队。</p><h2>工作原理</h2><p>核心是把整支影片表达为一个 <code>seek(t)</code> 函数：由时间计算每一帧画面，再用 Playwright 逐帧截图，将 N 个子帧用 tmix 做运动模糊混合，最后以 BT.709 TV-range 编码输出；音频侧以频带能量定位真实 drop、按峰值安放音效，并两遍归一化到 -14 LUFS。整个流程透明、可复现，也便于 AI 直接修改。</p><h2>官方链接</h2><p>GitHub：<a href="https://github.com/howseen-ai/claude-motion-design">https://github.com/howseen-ai/claude-motion-design</a></p>