想把一句话变成一条能播放的动效短片，很多人会先去找视频模型。社区里叫「Claude Motion」的玩法走的是另一条路：让 Claude Opus 5.5 写一段网页代码，由浏览器把动画画出来，你再把画面录成视频。
这不是几分钟必成的魔法，也不要求你会写代码。 本文全程使用网页和控制台这类图形界面。每一步都会先说明你会看到什么，再说明点什么、贴什么，最后给出一句验收标准。
开始之前，先确认一下预期：
- 目标：做出第一条能在浏览器里自动播放的动效，并把它录成一段视频。
- 耗时：第一次大概需要半小时到一小时。时间主要花在拿密钥、接上模型和第一轮修改上。
- 要先准备：一台能上网的电脑、一个浏览器、一个能填写自定义密钥的聊天客户端，以及一个能调用 Opus 5.5 的密钥。Opus 5.5 已经可以在 API易 apiyi.com 上通过 claude-opus-5-5 这个模型 ID 调用。
- 难度：入门。会复制粘贴、会新建文件、会改文件名就够了。
核心价值：读完本文，你能照着步骤做出第一条动效，知道哪些提示词可以直接套用，也知道之后去哪里长期使用 Opus 5.5。
Claude Motion 核心要点
- 它是什么：「Claude Motion」是社区里的叫法，不是 Anthropic 官方单独发布的视频产品。具体做法是让 Opus 5.5 用代码画动画。
- 和视频模型的区别：它不生成画面像素，所以改字、改数字很方便，但做不出真人脸和实拍画面。
- 仓库给的用法只有三步：复制提示词，贴给 Opus 5.5，让它渲染成 HTML。需要视频的话，再把页面录下来。
- 现成素材：awesome-opus5-5-videos 仓库收录了 703 条作品，其中中文提示词约 115 条。
- 第一条练手作：melvynx 的「15 秒作品集」句式，把尖括号里的内容换成你自己的网址或产品名就能用。
- 去哪里用：在 APIYI 调用 claude-opus-5-5，一个密钥即可使用，按 token 计费。
本文的事实只来自三类来源：仓库原文（README 与 data/videos.json，数据截至 2026-10-20，不是本文实测）、截图上看得见的数字、APIYI 文档写明的价格。三类来源里都没有的数字，本文不写。
什么是 Claude Motion：Opus 5.5 写代码，浏览器画动画
「Claude Motion」是社区口语，指让 Claude Opus 5.5 用 HTML、Canvas、SVG、Three.js 等代码把动画画出来，再录成视频。收录这类作品的仓库在 README 里写得很直接：“Every video here was made by asking Claude Opus 5.5 to write the animation as code （HTML， Canvas， SVG， Three.js and friends）.”
因此，它和 Sora、Veo、Seedance 这类视频模型不是一回事。视频模型直接生成画面像素，Claude Motion 生成的是一个「会动的网页」。画面里的每个字、每个数字都写在代码里，想改哪里，就让模型改哪里。
| 对比项 | Claude Motion（代码动效） | 视频模型（Sora、Veo、Seedance 这类） |
|---|---|---|
| 画面怎么来 | Opus 5.5 写代码，浏览器实时绘制 | 模型直接生成画面像素 |
| 擅长内容 | 文字、图表、图形、产品介绍、知识解说 | 真人、实拍质感、电影镜头 |
| 改一个字 | 让它改代码里的那一句，其余部分不变 | 往往需要重新生成，画面也会跟着变 |
| 直接得到 | 一个 HTML 文件，录屏后才是视频 | 视频文件 |
| 需要的模型 | 会写代码的大模型，比如 claude-opus-5-5 | 专门的视频生成模型 |
| 做不到的事 | 真人脸、实拍街景、电影镜头 | 字字精确、需要反复修改的文案和图表 |
什么时候用 Claude Motion，什么时候换视频模型
先看你要什么样的画面。要真人出镜、街上实拍、电影那种镜头，Claude Motion 做不出来，换专门生成视频画面的模型。只是改画面上的一句话、一个数字，或者做一条产品介绍、把一个知识讲清楚，就用 Claude Motion。
所以做这件事，你需要的是 Opus 5.5 这种会写代码的模型，不需要再去找一个视频模型。API易 apiyi.com 上已经可以直接调用 claude-opus-5-5，用一个密钥就能接入，按实际消耗的 token 计费。
Claude Motion 仓库里有多少现成提示词
截至 2026-10-20，仓库的 data/videos.json 共收录 703 条：动效（motion）369 条、解说（explainer）116 条、3D 117 条、交互（interactive）101 条。README 写明 2026-10-12 又补充了一批，以解说和 3D 为主。其中 418 条在 Skillry 上有可对照的重做版，207 条提示词被标为不完整，使用前要先看清文件里的说明。
技术标签中，Canvas 出现 267 次，SVG 183 次，Three.js 131 次，shader 92 次，GSAP 86 次，CSS 57 次，audio 39 次。这些只是标签计数，说明模型常用这些工具，不代表你必须会。仓库里的中文提示词约有 115 条，用中文写提示词完全可以。每条视频和提示词都归原作者所有。
开始前：在 APIYI 控制台核对 Opus 5.5 的 6 项设置
这一节只做一件事：拿到一把能调用 Opus 5.5 的钥匙，并确认几项关键信息没有填错。整个过程不需要安装任何软件。
- 你会看到：注册 API易 apiyi.com 账号后进入控制台，入口是 api.apiyi.com。控制台是网页，可以在里面创建令牌，也可以查看每次调用的日志。
- 点什么：找到创建令牌的位置，新建一个令牌。分组选择文档写明可用的 default、svip 或 ClaudeCode 之一，然后复制完整密钥，先保存在记事本里。
- 验收标准：令牌列表里能看到这把新钥匙，记事本里保存着一串完整的密钥。
| 核对项 | 应该看到什么 | 为什么要核对 |
|---|---|---|
| 令牌 | 列表里有一个新建的令牌，可以复制出完整密钥 | 后面的聊天客户端需要填写它 |
| 分组 | default、svip、ClaudeCode 其中之一 | 文档写明这三个分组可以使用 Opus 5.5 |
| 模型 ID | claude-opus-5-5（另有 claude-opus-5-5-thinking） | 名字差一个字符就调用不到 |
| 接口类型 | OpenAI 兼容和 Anthropic 原生两种都有 | 根据你的客户端支持哪种来选择 |
| 价格 | 每 100 万 tokens：输入 4 美元，输出 20 美元，缓存读取 0.20 美元 | 文档写明与上游一致 |
| 使用日志 | 做完后能看到这一次扣了多少 | 单条成本以日志为准，不靠估算 |
价格来自 API易 apiyi.com 文档站 2026-09-23 的动态，页面标题是 Claude Opus 5.5 Is Live，Priced Below Opus 5。Anthropic 于 2026 年 9 月 22 日发布，这则动态的时间是 2026/9/23 13:27（UTC+8）。同一文档里 Opus 5 是输入 5 美元、输出 25 美元、缓存读取 0.5 美元，所以 Opus 5.5 比它便宜。一条花多少，做完看控制台日志。
用 Opus 5.5 做出第一条 Claude Motion 动效：5 步走完
第 1 步：在聊天窗口里接上 Opus 5.5
- 你会看到：大多数支持自定义密钥的聊天客户端，设置页里都有「API 密钥」「API 地址」「模型」三项需要填写。
- 点什么 / 贴什么：密钥填刚才复制的那串。地址按 APIYI 文档里对应接口类型给出的地址填写。模型填 claude-opus-5-5。如果客户端里有「关闭思考」的开关，不要打开它。
- 验收标准：发一句「你好」能收到正常回复，回到控制台日志能看到一条 claude-opus-5-5 的调用记录。
第 2 步：贴入第一条 Claude Motion 提示词
- 你会看到：一个空白的对话框。
- 贴什么：先贴 melvynx 的原句。原句如下，尖括号要换成你自己的网址或产品名：
make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are for
在同一条消息末尾，再补上本文建议的一句话。如果模型打不开你的网站，就再加两三句产品介绍：
请把结果写成一个完整的 HTML 文件，所有代码放在一起，用浏览器打开就自动播放，画面比例 16:9，不需要解释。
- 验收标准：回复的主体是一大段代码，通常以
<!DOCTYPE html>开头、以</html>结尾。你不需要看懂这些代码。
第 3 步：把代码存成网页，用浏览器打开
- 你会看到：代码块右上角通常有一个「复制」按钮。
- 点什么：点击复制，新建一个文本文件，粘贴进去，然后保存为 motion.html。Windows 用户保存时要把类型选为「所有文件」，否则文件可能变成 motion.html.txt。Mac 用户用「文本编辑」时，要先点「格式」菜单里的「制作纯文本」。保存后双击这个文件，用浏览器打开。
- 验收标准：浏览器打开后，画面会自己动起来，而不是显示一整页文字代码。
第 4 步：看完一遍，只改一处
- 你会看到：第一版通常能正常播放，但配色可能比较普通，节奏可能偏平，个别文字也可能超出画面。
- 贴什么：一次只提一个修改要求，比如：
把第 3 秒出现的那行标题改成「……」，其余部分保持不变，重新给出完整的 HTML 文件。
- 验收标准：用新代码覆盖原文件并刷新浏览器后，只有你要求修改的地方发生了变化。
第 5 步：把动效录成视频
- 你会看到：浏览器正在播放你的动效。
- 点什么：先按 F11 进入全屏，Mac 用 Ctrl+Cmd+F。Windows 可以用 Win+G 打开系统自带的录制工具，Mac 用 Shift+Cmd+5 录屏。先开始录制，再刷新页面，让动画从头开始播放。
- 验收标准：录下来的视频能在播放器里从头播放到结尾，时长接近你要求的 15 秒。
做完一步怎么算过，4 种常见问题怎么排
| 步骤 | 怎么算过 | 没过时常见的样子 | 怎么办 |
|---|---|---|---|
| 第 1 步 接上 Opus 5.5 | 能收到回复，日志里有 claude-opus-5-5 的记录 | 模型报 400 | 不要把思考（thinking）设成关闭，也不要把工具调用设成「必须调用」。这两种设置在 Opus 5.5 上都会返回 400。 |
| 第 2 步 贴提示词 | 回复主体是一整份 HTML 代码 | 生成的不是视频，而是一大段解释 | 追加一句「只输出一个完整的 HTML 文件，不要解释」，然后重新发送。 |
| 第 3 步 存成网页 | 浏览器里画面会自己动 | 打开后一片空白 | 确认文件扩展名是 .html，结尾有 </html>。代码被截断就让它「接着写完」，用了外部库的话要联网后再打开。 |
| 第 4 步 只改一处 | 只有要改的地方发生变化 | 文字超出画面 | 告诉它「所有文字留出安全边距，画面固定为 16:9，并随窗口等比缩放」。 |
| 第 5 步 录成视频 | 视频能从头播放到尾 | 录到的开头已经播到一半 | 先开始录制，再刷新页面。 |
🚀 快速开始建议：第一次练手可以先在 API易 apiyi.com 申请 claude-opus-5-5 的试用额度，具体流程见文末延伸阅读。跑完一条后，到控制台日志看看这次扣了多少，再决定后面怎么用。
可选：已经在用 Claude Code 的人
这一小节可以完全跳过，跳过也能做完本文。如果你本来就在用 Claude Code，它的好处是能直接把 HTML 文件写到你的电脑上，省去复制粘贴和修改扩展名的步骤。
按照 APIYI 文档的写法，密钥放在 ANTHROPIC_AUTH_TOKEN 里。地址使用前面控制台那个域名，前面加上 https://，末尾不要加 /v1。模型选择 claude-opus-5-5。另外要注意，Opus 5.5 的默认 effort 从 high 改成了 medium，写动画这类代码时最好明确指定。如果你同时在用好几个 Agent，可以看延伸阅读里 magpie 那篇，让所有 Agent 共用同一把钥匙。
4 个 Claude Motion 案例：照着 Opus 5.5 提示词改
下面 4 条提示词都来自仓库原文，效果图是清单方托管的短片截帧。它们使用的都是同一个 claude-opus-5-5，在 API易 apiyi.com 用一把钥匙就能逐条试，不需要为不同风格切换模型。
| 作者 | 仓库分类 | 技术标签 | 适合做什么 | 怎么改成你自己的 |
|---|---|---|---|---|
| melvynx | motion | Canvas / SVG / GSAP | 15 秒作品集 | 把尖括号换成网址或产品名 |
| ezshine | motion | Canvas / SVG / GSAP | 横屏产品介绍（中文提示词） | 补充你的产品特性清单 |
| songkeys | motion | Canvas | 讲故事，文字少 | 换掉主题，保留风格词 |
| Ror_Fly | explainer | Canvas | 30 秒步骤解说 | 把鸡尾酒换成你的操作流程 |
案例 1：melvynx 的 15 秒作品集
这就是第 2 步用过的那句，短，只规定时长和用途，适合第一次练手。
上图是 melvynx 的作品截帧，对应提示词「make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are for
案例 2：ezshine 的中文产品宣传片
如果你有一个产品，想做一条横屏介绍视频，可以直接用这条中文提示词：
设计个动画，介绍本项目的各项特性，像是专业的产品介绍宣传片，最后要生成 16:9 的mp4 视频
「本项目」默认模型能看到项目。普通聊天窗口看不到，要在后面补三到五个特性。窗口交不出 mp4，拿到的仍是 HTML，按第 5 步录屏。
上图是 ezshine 的作品截帧，对应中文提示词「设计个动画，介绍本项目的各项特性，像是专业的产品介绍宣传片，最后要生成 16:9 的mp4 视频」。
案例 3：songkeys 的折纸涂鸦叙事
适合讲故事，不适合列功能。长处是风格写得具体：折纸、涂鸦、可爱、温暖、文字少。
Create a short origami / doodle-style animation showing humanity’s development， progress， and civilization from birth to the present， and ultimately the hatching of AI. AI then gradually develops and advances， eventually hatching today’s Opus 5.5 （you）. Style: doodly， cute， warm， strongly narrative， no spoken language （simple text is OK， but don’t use too much explanatory/narrative text， because I want different civilizations to be able to understand it）， poetic， moving， high quality.
上图是 songkeys 的作品截帧，对应提示词「Create a short origami / doodle-style animation showing humanity’s development…」。
案例 4：Ror_Fly 的鸡尾酒步骤解说
从空杯到做完一杯，30 秒，依次出现配料和用量。仓库原文的拼写错误 ingreidents 保留原样。
We’re going to try a little test. Do you think you could render a recipe motion graphic animation using javascript or html （w/e you think will produce the best） to show the full recipe from start to finish （empty glass to completed cocktail） – Explainer video style – Showing the recipe ingreidents + measurements as they’re going into the cup. Should be a 30s video.
上图是 Ror_Fly 的作品截帧，对应提示词「We’re going to try a little test. Do you think you could render a recipe motion graphic animation…」。
Claude Motion 片子发出去之后：截图上能核对的数字
仓库 Motion graphics 第一格，标签 Canvas · AI image。提示词很长，大意是沿用 Claude Pop 这首歌的同一条音轨，重做一版画面。
上图是 anabology 的作品截帧，对应仓库记录的那条提示词：沿用 Claude Pop 这首歌的同一条音轨，重新做一版画面。
下面三张截图，是大家在各大平台上获得的流量，可见 Claude Motion 的流量还是很多的
抖音 @悲伤喜羊羊这条，文案写明用了 Claude Opus 5.5。点赞 30.3 万，评论 2498，收藏 2.2 万，分享 11.2 万
X @anabology 这条是 2026 年 9 月 26 日的帖子，达到了恐怖的 20.1M 次浏览量
抖音 @电子智人这条是 9 月 28 日的《信息论 / 惊奇之学》。点赞 86.7 万，评论 8107，收藏 21.3 万，分享 19.5 万
这一条只能说明同一类动效解说有互动，不能说明用的是哪个模型。
anabology 主帖大意是：给 Opus 5.5 加上 donald 的 Midjourney 提示词和一个情绪板，12 小时后看到结果。被引用的 donald（@donaldjewkes）只显示 Sep 24，大意是对着电脑说了 5 分钟，Claude 工作了 12 小时。
Claude Motion 常见问题
Q1：不会写代码，能做 Claude Motion 吗？
可以。代码由 Opus 5.5 来写，你只需要复制、粘贴、保存成 .html，再用浏览器打开。整个过程中唯一需要「懂技术」的地方是获取密钥，在 API易 apiyi.com 注册并创建令牌，也是在网页上点几下就能完成。
Q2：Claude Motion 和 Seedance 怎么选？
真人脸、实拍质感、电影镜头，选 Seedance 这类视频模型。文字、数字、图表、产品介绍、知识解说，选 Opus 5.5。有人把单条成本写进视频标题，那是标题文案，不是实测，也不是官方价格。
Q3：为什么第一版 Claude Motion 动效很丑？
第一版通常只是能动。常见原因：没写风格、一次要求太多、默认 effort 是 medium。照 songkeys 把风格词写具体；客户端有思考强度就调高；之后每轮只改一处。
Q4：能不能直接下载 MP4？
本文拿到的是 HTML。最稳是按第 5 步用系统录屏。第一版不要指望直接下到 MP4。
总结
Claude Motion 不是一款视频软件，而是社区里的一种做法：让 Opus 5.5 写代码，让浏览器把动画画出来，再录成视频。你不需要会写代码。
第一次按这 5 步走：在 API易 apiyi.com 拿到 claude-opus-5-5 的密钥，贴一句提示词，存成 HTML，只改一处，最后录屏。一条片子花多少钱，做完看控制台日志，不要看别人视频标题里的数字。
要真人出镜、街上实拍、电影镜头，别用 Claude Motion，换专门生成视频画面的模型。要改一句话、改一个数字，或者做产品介绍和知识讲解，用 Claude Motion。
延伸阅读
- 📘 Claude Opus 5.5 如何用代码写视频？一文看懂 SVG 素材、配音、动画、字幕 4 大环节：读完本文想看渲染、配音、字幕怎么拆，去这篇。本文不重复讲原理。
- 📘 claude-opus-5-5 怎么免费试用？5 步申请流程、额度与限制说明：还没充值、想先拿额度试一条。
- 📘 claude-sonnet-5-5 对比 claude-opus-5-5:Opus 更快、Sonnet 只剩便宜？6 组数据讲清企业长上下文 Agent 的最佳搭配：拿不准这件事该不该用 Opus 5.5。
- 📘 手把手教程：一个 Key 接上所有 Agent，用开源 magpie 统一接入 API 网关（以 Claude Code、Codex、Pi、Hermes 为例）：已经有好几个 Agent，想用同一把钥匙。例子不是能力上限，所有 Agent 都能接。
- 📘 带人脸视频生成/编辑 SeeDance2.5 实战：3 步完成真人素材入库与合规调用：要真人、实拍感的画面时，不要硬用代码动效，改走视频模型。
参考资料
- 作品与提示词清单：github.com/yihui-dev/awesome-opus5-5-videos（README 与 data/videos.json，数据截至 2026-10-20，不是本文实测）
- 并排观看页：skillry.dev/ai-videos/opus-5-5
- 案例原帖：x.com/melvynx/status/2103714680577638493、x.com/ezshine/status/2103501705698750731、x.com/songkeys/status/2102743212922384673、x.com/Ror_Fly/status/2102853258582880547、x.com/anabology/status/2103534482930491441
- 价格：APIYI 文档站 2026-09-23 动态，页面标题 Claude Opus 5.5 Is Live，Priced Below Opus 5。输入 4 美元、输出 20 美元、缓存读取 0.20 美元，每 100 万 tokens，文档写明与上游一致。
