用 Claude Code 一键将产品网址转为动效宣传视频
作者开发了一个 Claude Code 技能，输入产品网址即可自动截图、规划文案并用 Framer Motion 制作成 1080x1920 的 MP4 宣传视频。整个过程无需 After Effects、API 密钥或手动模板，实现了单条提示词生成动效短片。
Reddit r/ClaudeCode/u/CautiousMiddle1880
Claude CodeHeadless ChromeFramer Motionffmpeg
收录于 2026-10-31 · 原文发布于 2026-10-29
操作步骤
- 1准备好已安装 Claude Code、本地 Chrome 浏览器和 npm 安装的 ffmpeg 的环境。
- 2运行命令 /hype-reel [https://your-product.com]，让 Claude 在无头 Chrome 中打开网站并截取桌面端、移动端及全网页面的真实截图。
- 3让 AI 梳理出产品故事：核心承诺、3个值得展示的亮点以及一个真实数据。
- 4由 Claude 编写故事板并使用 Framer Motion 进行动效设计（包括3D设备飞入、镜头缩放、UI拆分为浮动图层、屏幕隧道穿梭等12种场景类型）。
- 5渲染并导出帧精准的 1080x1920 MP4 视频，并支持配音。
- 6检查截图并对生成结果进行反馈调整。
中文平台玩法
可以将此方法迁移到小红书或抖音的运营中，输入竞品或自家产品的落地页网址，自动批量生成产品功能宣传的竖屏动效短片，提升短视频内容产出效率。
可复制提示词
请为产品网站 [https://your-product.com] 制作一个动效宣传视频。请通过无头 Chrome 截取该网站的真实屏幕截图（桌面端、移动端、全网页面），梳理出产品承诺、3个值得展示的亮点和1个真实数据，编写故事板并使用 Framer Motion 制作动效，最后渲染导出为帧精准的 1080x1920 MP4 视频。
#Claude Code#视频制作#自动化#Framer Motion
相关用例
内容由 AI 依据原文翻译整理，细节以原帖为准；版权归原作者。