1. 当模型开始画视频一个反直觉的实测发现第一次看到Claude Opus 5.5 直出视频这个说法我的反应和大多数人一样——不信。大语言模型输出的是文本 token视频是像素帧序列这两者之间隔着一整套渲染管线怎么可能直出但把提示词丢进去跑了一遍之后我盯着屏幕上那个会动的画面愣了几秒它确实没有生成 mp4 文件但它用 HTML、CSS 和 JavaScript 在浏览器里演出了一段动画视觉上就是一段可以播放的视频。这件事的价值不在于AI 能生成视频了这种标题党式的结论而在于它揭示了一个被很多人忽略的事实当模型的代码能力足够强时视频可以退化成一种用代码描述的时间序列。你不需要视频生成模型不需要显卡渲染农场只需要一段能被浏览器解析的 HTML 文件就能得到一段可交互、可循环、可嵌入网页的动态画面。这篇文章适合三类人看一是想搞清楚直出视频到底是怎么回事的技术好奇者二是手里有 Claude Code 或类似工具、想把它用出花来的开发者三是做前端、做内容、做演示需要快速产出动态视觉素材的人。我会把提示词怎么写、代码为什么这么组织、实测中哪些地方会翻车、怎么调参让动画更顺全部拆开讲清楚。核心关键词围绕Claude Opus、Claude Code、提示词、HTML、CSS展开但重点永远落在你拿到手能怎么用。先说结论免得你带着错误预期往下读所谓直出视频本质是模型生成一段自包含的 HTML 文件用 CSS 动画和 JS 时间轴驱动画面变化浏览器负责逐帧渲染。它不是视频编码是代码即动画。理解这一点后面所有的技巧才有落脚点。2. 直出视频的真相代码即动画的底层逻辑2.1 为什么是 HTML 而不是 mp4视频文件本质上是一帧一帧的图片 时间戳 编码压缩。要让模型直接产出 mp4它得输出二进制流或者 base64 编码的庞大数据块这对 token 输出是灾难——一段 5 秒的视频轻松几十兆模型根本吐不出来。但如果换成 HTML模型只需要输出几百行结构化的文本浏览器拿到之后自己去做渲染循环每一帧都是实时算出来的。打个比方mp4 像是把一整部电影刻成光盘寄给你而 HTML 动画像是给你一份菜谱加一口锅你自己现炒。前者传输成本高、改不了后者传输成本极低、随时能调。模型擅长的是写菜谱不是刻光盘。所以当你看到Claude Opus 5.5 直出视频正确的理解是它生成了一份能自动播放的动画代码你在浏览器里打开看到的就是一段视频效果。这个认知差是后面所有实操的基础。2.2 CSS 动画与 JS 时间轴的分工实测下来一段视频感强的 HTML 动画通常由两层驱动CSS 层负责循环、缓动、渐变、位移、旋转这类声明式的持续动画。它的优势是浏览器原生优化性能好代码短。比如keyframes定义一个呼吸效果一行animation属性就能让它无限循环。JS 层负责时间轴控制、状态切换、随机性、交互响应。比如让画面在第 3 秒切换到下一个场景或者根据鼠标位置改变粒子方向这些 CSS 做起来别扭JS 几行就搞定。两者配合的典型结构是CSS 定义每个元素长什么样、怎么动JS 定义什么时候动、动到什么程度。模型在生成时往往会先铺一层 CSS 关键帧再用一个requestAnimationFrame循环或者setTimeout序列来编排节奏。2.3 一个最小可跑的视频骨架下面这段是我实测时用的最小骨架你可以直接复制到本地.html文件里打开能看到一个持续旋转并变色的方块——这就是最朴素的直出视频!DOCTYPE html html langzh-CN head meta charsetUTF-8 title最小动画骨架/title style body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: #0b0b12; } .stage { width: 1440px; height: 810px; position: relative; overflow: hidden; } .box { width: 120px; height: 120px; position: absolute; top: 50%; left: 50%; margin: -60px 0 0 -60px; border-radius: 16px; background: linear-gradient(135deg, #6a5cff, #00d4ff); animation: spin 4s linear infinite, hue 6s ease-in-out infinite; } keyframes spin { to { transform: rotate(360deg); } } keyframes hue { 0%,100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(120deg); } } /style /head body div classstagediv classbox/div/div /body /html注意1440px × 810px这个尺寸——它对应 16:9 的常见视频比例是热词里反复出现的规格。把舞台固定成这个尺寸动画看起来才像视频而不是网页特效。这个细节很多人第一次做会忽略导致画面比例乱掉。3. 提示词怎么写从鹈鹕骑自行车看指令设计3.1 为什么鹈鹕骑自行车成了经典测试热词里反复出现鹈鹕骑自行车提示词鹈鹕测试提示词这不是偶然。鹈鹕骑自行车是一个同时考验造型能力、物理合理性、动态连贯性的复合任务鹈鹕有大嘴、有翅膀、有细腿自行车有轮子、有车架、有踏板两者还要骑在一起并且动起来。模型如果只会画静态图形这个任务立刻露馅只有真正理解结构 运动的模型才能把它做成一段能看的动画。所以这个提示词本质上是一个能力探针。你用它测任何模型都能快速判断对方在代码生成动画这件事上的水位。3.2 提示词的四段式结构实测下来能稳定产出高质量动画的提示词基本都遵循这个结构场景与主体明确画什么、几个元素、什么风格。比如一只鹈鹕骑着一辆复古自行车扁平插画风格配色以橙蓝为主。动态描述说清楚什么在动、怎么动、节奏如何。比如自行车轮持续旋转鹈鹕身体随踏板上下起伏背景云朵缓慢横向漂移。技术约束指定输出格式和尺寸。比如输出单个 HTML 文件内联 CSS 和 JS舞台尺寸 1440×810无外部依赖。质量要求补充细节期望。比如动画循环无缝衔接帧率流畅不使用任何图片资源全部用 CSS 或 SVG 绘制。这四段缺一不可。我试过只写第一段模型会给你一张静态图只写前两段它可能用外部图片链接结果你本地打开一片空白加上技术约束之后产出的稳定性明显提升。3.3 一份可直接复用的提示词模板把上面的结构固化下来就是这份模板你可以按需替换方括号里的内容请生成一个单文件 HTML 动画要求如下 - 场景[描述画面主体与风格] - 动态[描述各元素的运动方式与节奏] - 技术单个 HTML 文件内联 CSS 与 JS舞台 1440×810居中显示深色背景 - 约束不使用任何外部图片、字体、库所有图形用 CSS 或内联 SVG 绘制 - 质量动画无缝循环运动带缓动整体观感流畅自然这份模板我用了十几次产出合格率大概在八成以上。剩下两成翻车的情况多半是动态描述太模糊比如只写让它动起来模型就随便给你加个旋转效果很敷衍。动态描述越具体产出越可控这是提示词工程里最朴素也最有效的规律。3.4 迭代式追问比一次性长提示更有效很多人喜欢把提示词写得又臭又长指望一次到位。实测下来分步迭代的效果反而更好。第一轮先让它出骨架跑起来看效果第二轮针对具体问题追问比如轮子转得太快改成 3 秒一圈背景太单调加一层缓慢移动的渐变光晕第三轮再打磨细节。这种方式的优势在于每一轮你都能看到实际画面反馈精准模型也更容易理解你要什么。一次性长提示的问题是你没法预判它理解成了什么样等看到结果往往已经跑偏很远改起来反而更费劲。4. 从提示词到成品的完整实操链路4.1 环境准备Claude Code 的接入方式如果你只是想在网页版里试直接开对话窗口贴提示词就行。但要做成可复用的工作流用Claude Code这类命令行工具会顺手很多。它的价值在于能直接在你的项目目录里生成文件、能读取本地上下文、能连续多轮修改同一个文件不用来回复制粘贴。安装和配置的通用思路是先装好运行时环境再通过包管理器拉取工具本体然后用你的账号完成授权。具体命令各平台略有差异但核心就三步——装环境、装工具、登录。装完之后在项目目录里启动它就能感知当前文件夹你让它生成animation.html它就直接写进目录浏览器刷新即可预览。提示如果你在配置过程中遇到授权相关的报错先确认账号状态和网络环境是否正常多数问题出在这一步而不是工具本身。4.2 生成、预览、微调的循环真正高效的节奏是这样的在项目目录里让 Claude Code 生成初版 HTML。浏览器打开看动画效果。把不满意的地方用一句话描述清楚让它改。重复 2 到 3直到满意。这个循环里描述清楚是唯一的难点。别说不好看要说第三个元素的入场太突兀加 0.5 秒的淡入和上移。模型对具体的、可量化的修改指令响应最好对模糊的审美评价基本无能为力。4.3 尺寸与性能的取舍热词里反复出现1440px × 810px这个尺寸不是随便定的。它是 16:9 比例下比较常见的展示规格既能保证清晰度又不会让浏览器渲染压力过大。如果你要做更长的动画或者更复杂的粒子效果可以考虑降到1280×720性能会明显更稳。性能这块有个经验CSS 动画优先JS 动画兜底。能用transform和opacity做的动画尽量别用 JS 逐帧改样式因为前者走的是 GPU 合成层后者走主线程元素一多就卡。模型有时候会图省事全用 JS 写你看到卡顿就让它改用 CSS 关键帧实现通常立竿见影。4.4 常见产出问题与对应改法现象大概率原因改法打开一片空白引用了外部资源或路径错误要求全部内联无外部依赖动画卡顿大量 JS 逐帧改样式要求改用 CSS transform/opacity循环有跳变首尾帧不衔接要求首尾状态一致无缝循环比例变形舞台尺寸未固定明确指定 1440×810 并加 overflow hidden元素重叠错位定位方式混乱要求统一用绝对定位 百分比坐标这张表是我踩坑踩出来的基本覆盖了九成以上的翻车场景。遇到问题先对照查一遍比盲目重生成效率高得多。5. 让动画像视频的几个关键技巧5.1 缓动曲线决定质感线性运动看起来最假因为现实里没有东西是匀速启动匀速停止的。给动画加上缓动质感立刻上一个台阶。CSS 里用cubic-bezier或者现成的ease-in-out、ease-out都能明显改善观感。比如一个元素入场用ease-out会比linear自然得多——快速进入、缓慢停下符合直觉。模型默认经常用linear你可以在提示词里直接要求所有运动使用缓动避免线性。这一句话的收益极高几乎零成本。5.2 层次感来自速度差一段好的动画画面里的元素不会以同样的速度运动。前景快、背景慢主体清晰、陪衬模糊这种速度差和景深差会制造出强烈的空间感。做法很简单给背景元素设置更长的动画周期给前景元素设置更短的周期再配合轻微的透明度和缩放差异。比如鹈鹕骑车那个场景云朵用 20 秒漂移一轮自行车轮用 1 秒转一圈鹈鹕身体用 0.5 秒起伏一次。三个速度层级叠在一起画面立刻活了。5.3 循环无缝的秘诀视频要循环播放首尾必须衔接。CSS 动画天然支持infinite但前提是关键帧的首尾状态一致。如果你用 JS 控制时间轴就要手动把最后一帧的状态设回初始状态。一个稳妥的做法是所有周期性动画都用 CSS 关键帧JS 只负责非周期性的场景切换。这样循环的可靠性最高。5.4 用 CSS 做涟漪光圈扩散这类特效热词里提到CSS 涟漪光圈扩散这是个很实用的效果做加载动画、点击反馈、氛围渲染都好用。核心思路是用一个圆环元素通过scale放大配合opacity淡出形成扩散感.ripple { position: absolute; border-radius: 50%; border: 2px solid rgba(120, 180, 255, 0.8); animation: ripple 2s ease-out infinite; } keyframes ripple { 0% { transform: scale(0.2); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } }多个这样的圆环错开延迟启动就能形成一圈圈扩散的光晕。这个效果纯 CSS 实现性能好视觉冲击力强非常适合放在动画背景里当氛围层。6. 实测踩坑记录那些文档不会告诉你的事6.1 模型会偷懒用外部资源第一次实测时我让它画一个带纹理的背景结果它直接写了个background-image: url(...)指向一个不存在的图片。本地打开当然是一片空白。后来我在提示词里加了硬约束禁止任何外部资源引用这个问题才消失。模型倾向于用最省 token 的方式解决问题引用外部资源就是它的偷懒路径之一你得主动堵上。6.2 中文字体渲染的坑如果动画里有中文文字不同系统默认字体差异很大可能导致排版错位。稳妥的做法是显式指定字体栈比如font-family: PingFang SC, Microsoft YaHei, sans-serif并且给文字容器留足空间别让它贴边。我吃过一次亏本地看着好好的换台机器文字就溢出了。6.3 时间轴错乱的排查思路有一次动画跑着跑着突然所有元素挤在一起排查了半天发现是 JS 里用了多个setTimeout嵌套延迟累加导致时序错乱。后来改成用一个统一的时间轴变量驱动问题解决。多个独立计时器是动画错乱的头号元凶能用单一时间源就别用多个。6.4 别指望一次生成就完美这是心态问题。模型生成的是初稿不是成品。把它当成一个手很快但审美一般的实习生你的角色是导演负责提要求和把关。接受这个定位之后整个工作流会顺畅很多。我现在的习惯是第一轮只求跑起来第二轮调节奏第三轮抠细节三轮下来基本能到可用的程度。7. 这套玩法还能怎么扩展把代码即动画这个思路打开能做的事情比想象中多。比如做产品演示时用一段自动播放的 HTML 动画代替录屏体积小、可交互、随时改做数据可视化时用 CSS 动画让图表生长出来比静态图生动得多做教学材料时把抽象概念做成循环动画理解成本直线下降。再往深了走可以结合requestAnimationFrame做基于物理的运动让动画更真实可以接入鼠标和键盘事件把视频变成可玩的交互甚至可以用 Canvas 做粒子系统性能上限比纯 DOM 高得多。这些方向模型都能帮你写关键还是那句话——把需求描述清楚把约束定死剩下的交给它迭代。我个人在实际操作中的体会是这套工作流最大的价值不是省了做视频的功夫而是把动态视觉的门槛拉到了会写提示词就能上手。以前做一段动画得会 AE、会代码、会调参现在你只要能说清楚想要什么剩下的模型帮你填。当然审美和判断力还是你自己的模型替代不了这部分——它负责实现你负责决定什么值得实现。