kaventro/motion-designer

这是什么？

核心功能

• 01用 HTML 重建应用真实界面，放入设备外框或窗口中使用。
• 02动作对齐音乐节拍，并按小节精确剪辑。
• 03渲染前检查代码中的计时器、随机数和循环错误。
• 04通过无头 Chrome 和 ffmpeg 输出 H.264 视频，并可生成无声循环版和封面。
• 05支持 Chatterbox、Kokoro 等本地语音模型配音，人声与压低后的背景音乐按 -16 LUFS 混音。

适用场景

• 为 iOS 或桌面应用的官网制作 30 秒发布宣传片。
• 制作带角色和注册按钮的短篇故事广告。
• 让产品关键画面与音乐的高潮同步，制作宣传视频。
• 用代码而非视频编辑软件制作数据或讲解类视频。

快速上手

1. 1

   为 Claude Code 安装该技能

   npx skills add kaventro/motion-designer
2. 2

   检查本机已有哪些工具

   bash skills/motion-designer/scripts/doctor.sh
3. 3

   在你的应用仓库中运行该技能

   /motion-designer

使用前须知

• !渲染影片前需要先安装 Node 22+、Chrome、ffmpeg 和 Python 3。
• !可选的原创音乐模型（约 11 GB）和配音模型（约 4 GB 或更多）体积较大。

标签

常见问题

motion-designer 是什么？

面向 Claude Code 和 Codex 的智能体技能，用你应用的真实界面制作发布宣传片和短视频，按音乐节拍剪辑并在本机渲染。 motion-designer 是一个面向 Claude Code 和 Codex 的智能体技能，用代码制作发布宣传片、标题动画、讲解视频、数据视频和音乐驱动的图形。它会用 HTML 重建应用的真实界面，放进 iPhone 外框或笔记本窗口中，让每个动作对齐音乐节拍，逐帧检查后用无头 Chrome 和 ffmpeg 渲染成视频。

motion-designer 可以免费使用吗？用的什么许可证？

motion-designer 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

motion-designer 还在维护吗？

活跃维护中。motion-designer 最近一次提交是在 2026年10月1日。

motion-designer 适合用来做什么？

为 iOS 或桌面应用的官网制作 30 秒发布宣传片。 制作带角色和注册按钮的短篇故事广告。 让产品关键画面与音乐的高潮同步，制作宣传视频。 用代码而非视频编辑软件制作数据或讲解类视频。

motion-designer 怎么安装和运行？

为 Claude Code 安装该技能: npx skills add kaventro/motion-designer 检查本机已有哪些工具: bash skills/motion-designer/scripts/doctor.sh 在你的应用仓库中运行该技能: /motion-designer

在哪里获取 motion-designer？

源代码和安装说明在 GitHub 上：https://github.com/kaventro/motion-designer