用 Claude 把网站做成 60 秒产品视频

很多老板都知道应该在 TikTok、Instagram Reels 或小红书发视频，难的是做出来。录屏看起来很粗糙，找视频公司要一笔预算，剪辑软件又要花一个下午去学。

上面这支视频，以上都不用。我们填了一个表格，把结果贴进 Claude Code，Claude 就自己去看我们的网站，挑了补习中心的示例，写好分镜，把真实的画面做成动画，作了配乐，再渲染成 MP4。下面教你用自己的网站做一支。

为什么值得为网站做一支短视频

一支好的宣传视频需要的东西，你的网站早就有了：你卖什么、卖给谁、价格、产品画面和品牌颜色。视频做的，只是把这些送到那些不会主动打开你网站、正在刷手机的人面前。

普通的录屏在社交媒体上很少有效果：节奏慢，字在手机上太小，头两秒什么都没发生。这里的做法，是把你的网页拆成可以各自移动的元素，像产品发布会视频那样一个镜头一个镜头放大重点，再跟着音乐的节拍换场。以前要做这种效果，得请动态设计师。

开始前要准备什么

• 一个公开的网站。Claude 只能看到任何人都打得开的页面。想展示的部分要登录才看得到的话，可以给它 3 到 6 张截图（提示词会问你要）。
• 付费方案的 Claude Code。Claude Pro（每月 US$20，按年付每月 US$17）和 Max（每月 US$100 起）都包含 Claude Code，免费方案没有（Claude 价格）。可以用 Claude 桌面版的 Code 分页，也可以用终端。
• 足够的用量。Opus 开 max effort 用量消耗得很快，做一支视频又要跑很多步骤。用 Pro 的话，中途可能要等额度重置再让 Claude 继续。常做视频的话，Max 会比较顺。
• 时间。不是几分钟就好。Claude 会先渲染测试画面、修正，再渲染完整视频，中间你还要批准几次安装。

一步步来：从网站到 MP4

第一步：打开产品视频提示词

打开 Prompt Motion 的产品视频提示词。Prompt Motion 是一个免费网站，收集用 Claude 做的动态视频，每支都附上背后的提示词。这一条原本是 @justincooperman 的产品短片，Prompt Motion 把它改写成填空版。左边的栏位一改，提示词就跟着更新。

第二步：Product 填公司名和网站

填你的公司名加网址，例如 Transfomind, transfomind.com。网址很重要，Claude 就是从这里开始研究的。

第三步：Focus 写一个客户、一个重点

视频好不好看，关键就在这一栏。填 "the service provide to customer"（我们给客户的服务）也可以，但出来的会是什么都讲一点的导览。一个清楚的重点，才会变成一个故事。比较一下：

写清楚客户是谁、他们熟悉的痛点，以及你的产品解决它的两三件事。英文或中文都可以写。如果你卖好几种服务，就每种服务做一支，不要一支视频讲全部。

第四步：Brand 和 Ending

Brand 留空的话，Claude 会从你的网站拿颜色、字体和标志。想让最后一个画面写特定的话，就填 Ending，例如一句行动呼吁加网址：Book a free consult · transfomind.com。

第五步：Length 和 Tempo

Prompt Motion 建议 15 到 45 秒效果最好。我们做了 60 秒，因为想把整个系统讲完。如果是广告或第一支视频，控制在 45 秒以内。Tempo 是每个动作落点的节拍：100 BPM 比较从容，观众有时间看字；120 到 128 节奏更紧凑。

第六步：Size 选尺寸

第七步：复制提示词

第一支视频，Creativity、Pace、Polish 都保持中间的设定，然后点改良版提示词上的 Copy。

第八步：贴进 Claude Code，选 Opus 5.5、effort max

在一个空文件夹里打开 Claude Code。在模型菜单选 Opus 5.5（或输入 /model opus），用 /effort max 调高 effort，贴上提示词发送。max 只对当前会话有效，下次要重新设定（Claude Code 文档）。Prompt Motion 也建议用这个组合效果最好。

按下 Enter 之后，Claude 会做什么

提示词规定了 Claude 的工作顺序，而且它会先给你看计划，才开始做：

1. 研究。它会看你的网站：做什么、给谁用、真实的画面、标志和颜色。提示词明确要求它不能编造画面、功能或数字。
2. 贯穿全片的元素。它从你的产品里挑一个东西（一个按钮、鼠标光标、标志里的一个图形），让它在每一场换个形状，最后变成片尾的标志。视频看起来像设计过、而不是拼凑的，靠的就是这个。
3. 逐拍分镜。第一小节是开场钩子，中间三四个产品最强的时刻，最后是片尾卡，每一拍都排好时间。
4. 制作。它把你的网页重建成一个 HTML 文件里可以各自移动的图层，用代码写配乐（所以没有音乐版权的问题），再用 Playwright 和 ffmpeg 逐帧渲染，需要的话会自己安装。
5. 检查。完整渲染之前，它会每一拍渲染一帧来看，把太乱或看不清的地方修好，然后才交给你 MP4。

在我们的视频里可以看到成果：开场是 "Still chasing fees on WhatsApp"（还在 WhatsApp 上追学费？），接着家长在网上预约免费试听，当天就收到缺课通知，老板在同一个仪表板看到一切，AI 助手用英文、马来文或中文回答问题。全部取自我们的补习中心示例。

一句话修改视频

哪里不满意，就在同一个对话里直接说。Claude 会保留整个项目，只改你说的地方再重新渲染。这些说法都很好用：

具体的小要求比「做得更好看」有效。哪一场不对，就说画面上是什么（「仪表板那一场」）或时间点（「0:24 左右」）。

发布前要检查的地方

• 每个数字和画面。提示词严格要求只用你网站上有的内容，但发布的人是你。每一场暂停一下，对照你的网站，特别是价格。
• 示例数据要标明。视频里用的是示例数据的话，要在画面上写清楚。我们的视频每一场都有 "Sample data · Cerdik Tuition Centre is a fictional business"。不要用有真实客户名字或电话的截图，那是马来西亚 PDPA 下的个人资料。
• 手机上看得清楚。用自己的手机、正常大小看一遍。要眯着眼才看得到的话，就叫它把字放大，或每一场少放几个字。
• 头两秒。开场钩子在没有声音时也要看得懂，因为大部分人刷视频是静音的。
• 结尾。一个行动呼吁、一个网址就好，不要三个。

视频可以用在哪里

• TikTok、Reels、小红书和 Shorts：用 9:16，文案再重复一次开场钩子。
• 你的网站：放在那项服务页面的上方，用 16:9，访客按播放才有声音。
• WhatsApp：发成动态，或发给问过你做什么的熟人。
• Google 商家资料：别人在 Google 地图找到你时就会看到。
• 提案和销售会议：讲细节之前先放一分钟总结。

视频好不好，取决于它展示的内容。如果你的网站还没讲清楚你做什么、给谁用，先把这个改好，因为视频只会照着讲一遍。需要帮忙的话，我们的网站设计页面介绍了我们怎么为马来西亚商家做网站。

常见问题

参考资料

• Customize: product video prompt，Prompt Motion（2026）
• Prompt Motion：用 Claude 做的动态视频合集，附提示词
• Claude 方案与价格，Anthropic（2026年10月16日查阅）
• 模型设定与 effort 等级，Claude Code 文档