Product Launch Motion – Claude Code 技能

它是什么 一个 Claude Code 技能，将网站 URL 转换为简短、高质量的产品发布视频。Claude 读取网站，编写故事，指导场景，并渲染 60 fps 的 MP4，包含音乐、音效和运动模糊——全部来自纯 HTML/CSS/JS，无需 After Effects 或 AI 视频模型。

如何使用

# 安装技能（一次）
npx skills add AbubakrChan/product-launch-motion
# 然后，在 Claude Code 中，询问：
为 https://your-website.com 制作一个发布视频

Claude 将输出一系列 DECISION: 行（导演的选择），最终视频在本地生成。

关键理念

• 单一形状，永不剪切 – 一个 UI 元素在所有 UI 状态中变形（按钮 → 加载器 → 勾选 → … → 提示 → 按钮），创造无缝的视觉流动。
• 闭式弹簧 – 确定性的阻尼弹簧数学驱动每个过渡，提供微妙的过冲，而不会产生弹跳缓动。
• 音乐优先的时间控制 – 使用 NumPy 分析约 120 BPM 的免版税曲目；每个 UI 声音都落在节拍峰值上。
• 光标驱动的操作 – 点击、拖动和按压由虚拟光标动画化，可选地替换为产品特定的“代理”光标。
• 纯函数渲染 – 每个像素都是 f(t)，因此任何帧都可以确定性重新生成。
• 渲染管线：HTML → Playwright 子帧 → FFmpeg tmix 用于运动模糊 → 60 fps H.264 MP4。

仓库内容

路径	描述
SKILL.md	Claude 遵循的提示和工作流程。
references/prompts.md	原始提示和审查笔记（复制粘贴以用于其他产品）。
references/technique.md	关于弹簧、相机装备、里程表动画、音频合成、渲染的技术笔记。
legacy/	v1 技能（语音驱动，GSAP + HyperFrames）。
examples/	示例视频和预览图像。

要求

• Claude Code (Opus 5.5) – 运行该技能的 AI。
• Node ≥ 20 + Playwright – 用于无头 HTML 渲染。
• FFmpeg – 运动模糊合成和编码。
• Python 3 + NumPy – 节拍网格分析和音效合成。
• 可选的免版税音乐（约 120 BPM）用于配乐。

为什么有趣

• 展示了大语言模型如何充当导演，将简报转化为完全动画的视频，而无需任何外部视频生成模型。
• 使用确定性、数学驱动的动画（弹簧、seek(t)）使渲染可并行化和可复现。
• 展示了一种新颖的“单一形状，永不剪切”的视觉隐喻，保持生产成本低廉，同时看起来昂贵。

许可证 技能代码和参考材料采用 MIT 许可证。示例影片归 Cheerful.ai 所有（见 NOTICE）。

---

如果您使用此技能制作发布视频，请在 X 上标记 @Muhamma77800831 以获得推荐。