1. 当直出视频这个词从模型嘴里说出来第一次看到Claude Opus 5.5 竟然能直出视频这个说法我的反应和大多数人一样——先怀疑再好奇最后忍不住动手试。毕竟过去两年里我们已经被各种AI 生成视频的演示轰炸过太多次Sora、Veo、可灵、即梦每一个都宣称自己重新定义了视频生成。但这次不一样的地方在于它不是让你去某个视频生成平台排队等渲染而是在一个对话窗口里用 HTML、CSS、JavaScript 把视频直接写出来。这个区别非常关键。传统视频生成模型输出的是像素帧序列本质上是画出来的而 Claude Opus 5.5 走的是另一条路——它输出的是可运行的代码浏览器一打开动画就跑起来了。你拿到的不是一段 mp4而是一个能交互、能改参数、能嵌进网页的活的东西。这就是为什么标题里用了直出这个词因为它确实跳过了渲染管线直接从提示词到可播放的视觉结果。我花了大概一个周末把网上流传的几组提示词包括那个著名的鹈鹕骑自行车测试全部跑了一遍又自己改写了十几个变体踩了不少坑也摸出了一些门道。这篇文章就是把这些经验整理出来讲清楚三件事它到底能做出什么、提示词该怎么写、以及哪些地方会让你白忙一场。不管你是刚接触 AI 编程提示词的新手还是已经在用 Claude Code 做项目的老手应该都能从里面找到能直接抄作业的东西。先说结论它做不出真正的视频文件但它能做出在浏览器里看起来像视频的东西而且质量高得有点意外。理解这个边界是后面所有技巧的前提。2. 拆开直出视频这个说法它到底在做什么2.1 输出的是代码不是帧序列很多人第一次用的时候会懵我让它生成视频它给我一段!doctype html开头的代码这算怎么回事其实这正是它的工作方式。Claude Opus 5.5 在收到生成一个视频这类请求时会把它理解成生成一个能产生动态视觉效果的网页然后用 HTML 结构搭骨架、CSS 做样式和动画、JavaScript 控制时间轴和交互。所以严格来说它做的是程序化动画不是视频编码。你得到的产物是一个.html文件双击就能在浏览器里播放。想分享给别人要么发文件要么部署到静态托管上而不是发一个视频链接。这个认知差是新手最容易卡住的地方——我见过有人反复追问为什么不能导出 mp4其实方向就错了。那为什么大家还是愿意叫它直出视频因为从观感上讲一个精心写出来的 CSS 动画配上合适的节奏和转场在浏览器里播放的效果和一段短视频几乎没有区别。尤其是那种循环播放的抽象动画、产品演示、数据可视化用代码做出来反而更清晰、更可控。2.2 为什么是 HTML CSS JS 这套组合这里要解释一个为什么。模型完全可以用 Canvas 或者 WebGL 来画为什么主流方案还是 HTML CSS JS原因有三层。第一层是可读性和可修改性。CSS 动画的代码是声明式的你打开文件就能看懂这个元素在 2 秒内从左边滑到右边改一个数字就能调整。Canvas 的绘制逻辑是命令式的一堆ctx.arc()、ctx.fill()改起来费劲。对于生成后还要微调这个高频需求CSS 明显更友好。第二层是渲染性能的稳定性。CSS 的transform和opacity动画会被浏览器交给 GPU 合成层处理跑起来非常顺滑不容易掉帧。而用 JS 每帧去改left、top这种属性会触发重排重绘动画一复杂就卡。模型在生成时倾向于选择不容易翻车的方案这是它训练数据里沉淀下来的经验。第三层是兼容性和部署成本。一个纯 HTML 文件扔到任何地方都能跑不需要构建工具、不需要依赖库。这对生成即用的场景太重要了。你想想如果它生成一个需要 npm install 一堆包才能跑的项目那体验就崩了。理解了这三点你就能明白为什么提示词里强调 HTML、CSS 这些关键词是有道理的——它们不是随便选的而是这套方案的技术底座。2.3 鹈鹕骑自行车为什么成了经典测试网上热传的鹈鹕骑自行车提示词其实是一个很有意思的测试用例。它同时考验了模型的几个能力形状组合鹈鹕的身体、喙、翅膀、运动逻辑骑车的蹬踏动作、车轮转动、场景协调鹈鹕和自行车的比例、位置关系。为什么大家爱用这个测试因为它足够具体又足够荒诞。具体到模型必须认真处理每个部件荒诞到模型没法从训练数据里直接抄一个现成的答案。如果它能把这个做出来说明它真的在理解用代码画一个会动的东西这件事而不是在拼凑模板。我自己跑下来的感受是鹈鹕的静态造型它做得还行用 CSS 的border-radius、clip-path拼出个大概轮廓没问题但一旦要求蹬踏板这种精细的关节运动就容易露馅腿会穿模或者动作僵硬。这恰恰暴露了纯 CSS 动画的短板——它擅长整体位移、旋转、缩放不擅长骨骼级别的形变。想做好这类效果得靠 JS 逐帧计算或者用 SVG 的路径动画。3. 提示词怎么写才能让它真的动起来3.1 把视频翻译成它听得懂的语言这是最核心的一条经验别跟它说生成视频跟它说生成一个网页动画。我做过对比测试同样一个需求两种说法出来的结果差距很大。说帮我生成一段视频的时候它有时候会给你一段描述性的文字或者生成一个video标签但里面没有源因为它知道真正的视频生成它做不了就会含糊其辞。但如果你说用 HTML、CSS、JavaScript 做一个网页动画效果是……它立刻就进入状态代码质量明显提升。所以提示词的第一句话最好就把技术栈和产物形态定死。比如用单个 HTML 文件内联 CSS 和 JS实现一个动画画面尺寸 1440x810效果是……这句话里包含了四个关键信息单文件、内联、尺寸、效果。单文件是为了方便复制运行内联是为了不依赖外部资源尺寸是为了避免它生成一个自适应但比例奇怪的东西。这四个信息给全了它翻车的概率会大幅下降。3.2 描述运动而不是描述画面新手写提示词容易把重点放在画什么上比如一只蓝色的鸟在天空中飞。但模型真正需要的是怎么动的信息。因为静态画面它随便拼都能拼出来动态才是难点。正确的做法是把运动拆解成主体、动作、节奏、循环四个要素。举个例子同样是鸟在飞你可以这样写主体一只简化的鸟用 CSS 形状拼成身体是椭圆翅膀是两个三角形动作翅膀上下扇动身体轻微上下浮动节奏扇动周期 0.6 秒浮动周期 1.2 秒两者错开形成自然感循环无限循环首尾帧衔接这样写出来模型就知道该用keyframes定义几组动画分别绑到哪个元素上周期怎么设。它甚至会自动帮你把两个动画的相位错开做出那种不那么机械的效果。我实测下来凡是把运动参数写清楚的提示词出来的结果都能直接用凡是只写让它动起来的出来的东西要么不动要么动得很诡异。3.3 尺寸、帧率和时长的隐藏约定这里有个很多人不知道的细节CSS 动画没有帧率这个概念它是浏览器按屏幕刷新率去插值的。所以你不需要告诉它30fps说了反而会让它困惑。你真正需要控制的是动画的持续时间和缓动函数。持续时间用animation-duration控制单位是秒或毫秒。缓动函数用animation-timing-function控制常见的有linear匀速、ease-in-out两头慢中间快、cubic-bezier()自定义。想要机械感就用linear想要自然感就用ease-in-out想要弹性效果就用带过冲的cubic-bezier。时长方面我建议在提示词里明确写出来。比如整个动画循环时长 4 秒这样它会把各个元素的动画周期协调到这个总时长里不会出现有的元素 0.5 秒循环一次、有的 10 秒才循环一次这种割裂感。至于尺寸前面提到的 1440x810 是个很实用的比例接近 16:9适合做演示。如果你要做竖屏内容就写 810x1440。关键是给一个明确的像素值别让它自己猜。3.4 一份可以直接抄的提示词模板把上面这些原则揉在一起我整理了一个模板你可以直接拿去改用单个 HTML 文件实现一个网页动画内联所有 CSS 和 JavaScript。 画布尺寸 1440x810背景色 #0a0a0a。 动画主体[描述主体用简单几何形状拼成] 运动方式[描述每个部件的动作比如旋转、位移、缩放] 节奏控制整体循环时长 [X] 秒各部件动画周期错开使用 ease-in-out 缓动。 视觉风格[比如扁平、霓虹、渐变] 不要使用任何外部图片或字体所有图形用 CSS 或 SVG 绘制。这个模板的好处是它把模型容易忽略的点都提前堵上了。尤其是最后一句不要使用外部资源能省掉你很多调试时间——不然它可能引用一个不存在的图片链接打开就是一片空白。4. 从提示词到能跑的页面一次完整的实操复盘4.1 环境准备其实你只需要一个浏览器很多人一看到Claude Code、VS Code 配置这些词就头大以为要装一堆东西。其实做这类动画最低配置就是一个浏览器加一个文本编辑器。模型生成的代码你复制到一个.html文件里双击用浏览器打开就能看效果。如果你想改起来方便推荐用 VS Code装个 Live Server 插件改完保存浏览器自动刷新省得手动 F5。至于 Claude Code 这类命令行工具它的价值在于能直接读写你本地的文件适合做多文件项目。但如果你只是玩单文件动画用网页版对话就够了没必要折腾环境。我自己的流程是这样的网页版对话生成代码 → 复制到本地demo.html→ 浏览器打开看效果 → 不满意就回对话里说第三秒那个转场太快了改成 1.5 秒 → 再复制。这个循环跑顺了效率很高。4.2 第一次生成它给了什么哪里不对我拿鹈鹕骑自行车做第一次测试。提示词按前面的模板写主体描述成一只鹈鹕坐在自行车上鹈鹕身体是白色椭圆喙是橙色长条自行车有两个轮子和一个车架。它生成的结果静态造型居然还不错。鹈鹕的身体、喙、眼睛都用 CSS 拼出来了自行车轮子用border-radius: 50%加边框做的车架用几条旋转的div拼的。整体构图是像那么回事的。但一动起来问题就来了。轮子确实在转用的是transform: rotate()无限循环这个没问题。但鹈鹕的腿——它用两条细长的div表示——完全没有动就直挺挺地戳在那里。整个画面看起来像一只鹈鹕被粘在自行车上滑行。这就是前面说的那个短板模型对关节运动的处理很弱。它知道轮子该转因为轮子转是个整体旋转简单但它不知道腿该怎么蹬因为那涉及两个关节的协调复杂。4.3 迭代修正怎么把滑行改成蹬踏发现问题后我没有重新生成而是在对话里追加要求鹈鹕的两条腿需要做蹬踏动作。每条腿分成大腿和小腿两段大腿以髋部为轴做小幅度摆动小腿以膝盖为轴做相位滞后的摆动两者叠加形成蹬踏效果。摆动周期和轮子转动周期一致。这段话的关键是把蹬踏这个模糊的动作翻译成了两段式、相位滞后、周期一致这些模型能执行的具体指令。它收到之后重新组织了腿部的 DOM 结构给大腿和小腿分别加了keyframes并且用animation-delay制造了相位差。改完之后再看腿确实动起来了虽然还是有点僵硬但至少像在骑车了。这个迭代过程让我意识到跟模型协作重点不是一次写对提示词而是知道怎么描述问题。你说腿不动它可能不知道怎么改你说分成两段、相位滞后它立刻就知道该怎么做了。4.4 一个容易被忽略的细节层级和遮挡还有一个坑是画面层级问题。第一次生成的时候鹈鹕的腿画在了自行车车架的上面看起来像是腿穿过了车架。这在静态图里不明显一动起来就特别出戏。解决办法是调整z-index。但模型默认不一定给每个元素都设z-index所以你得在提示词里提前说清楚注意图层顺序自行车后轮在最底层车架在中间层鹈鹕身体和腿在最上层鹈鹕的腿要遮挡住车架的一部分。这句话加上去之后它会给相关元素补上position: relative和z-index遮挡关系就对了。这个经验很实用——凡是涉及前后关系的画面一定要在提示词里点明图层顺序不然模型会按 DOM 书写顺序来堆叠很容易出错。5. 那些让效果从能看到好看的进阶技巧5.1 用 CSS 变量把参数集中管理模型生成的代码经常把各种数值散落在各处改一个颜色要翻半天。我后来养成一个习惯在提示词里加一句把所有颜色、尺寸、动画时长定义成 CSS 变量放在 :root 里。这样生成的代码顶部会有一块:root { --main-color: #xxx; --cycle: 4s; }你想调什么直接改这一块就行不用满文件找。这个技巧对后续微调太有用了强烈建议每次都加上。5.2 缓动函数决定高级感同样是位移用linear和用cubic-bezier(0.34, 1.56, 0.64, 1)出来的感觉天差地别。后者带一点过冲就是那种弹一下再停住的效果看起来更有质感。我常用的几组缓动效果缓动函数适用场景匀速linear轮子转动、进度条自然加减速ease-in-out元素进出场弹性过冲cubic-bezier(0.34, 1.56, 0.64, 1)按钮、卡片弹出急停cubic-bezier(0.6, 0, 0.4, 1)强调性动作在提示词里直接指定缓动函数比说要自然一点有效得多。模型对具体的贝塞尔曲线参数是有概念的对自然这种形容词反而没谱。5.3 涟漪、光圈这类氛围效果怎么加热词里出现了CSS 涟漪光圈扩散这是个很典型的氛围效果。它的原理其实很简单一个圆形的div初始scale(0)、opacity(1)动画结束时scale(3)、opacity(0)配合ease-out缓动就有了扩散消失的感觉。多个这样的圆错开animation-delay就是一圈圈涟漪。我在提示词里会这样写在主体周围添加涟漪效果三个同心圆从中心向外扩散初始缩放 0、透明度 1结束时缩放 3、透明度 0每个圆延迟 0.5 秒依次启动无限循环。这样描述模型基本能一次做对。关键是把起始状态、结束状态、延迟都写清楚别让它猜。5.4 字体和渐变提升质感的两个杠杆纯色文字看起来很平加个渐变立刻就不一样了。CSS 里用background: linear-gradient(...)配合-webkit-background-clip: text和color: transparent就能做出渐变文字。这个技巧在标题上特别好用。字体方面因为不能用外部字体会拖慢加载还可能加载失败所以要在系统字体里选。font-family: system-ui, -apple-system, Segoe UI, sans-serif这组是比较稳的各平台都能找到合适的字体。想要等宽效果就用SF Mono, Consolas, monospace。在提示词里明确写标题使用渐变文字字体用系统字体栈出来的效果会明显精致一些。6. 边界与坑哪些事它做不了哪些坑要提前避6.1 它做不出真正的视频文件这一点必须反复强调。不管你怎么问它都不会给你一个 mp4。如果你确实需要视频文件正确的路径是用它生成网页动画然后用录屏工具比如 OBS、系统自带的录屏把浏览器里的动画录下来再导出成视频。这是一条可行的链路但要额外一步。我试过直接问它能不能导出 mp4它会给你一些用MediaRecorderAPI 录制 Canvas 的思路但那个方案需要把 CSS 动画转成 Canvas 绘制工作量很大不划算。老老实实录屏更省事。6.2 复杂物理效果容易翻车涉及重力、碰撞、弹性形变这类物理效果纯 CSS 很难做好。模型有时候会用一堆keyframes硬凑出来的动作很假。这种场景建议直接要求用 JavaScript 加requestAnimationFrame逐帧计算或者干脆用 Canvas。但即便如此模型对物理公式的把握也一般复杂场景还是得自己调。我的经验是简单的周期运动交给 CSS复杂的交互和物理交给 JS。在提示词里把这个分工说清楚能少走很多弯路。6.3 性能问题元素一多就卡CSS 动画虽然走 GPU但也不是无限的。如果一个页面里塞了几百个动画元素照样会卡。尤其是用了box-shadow、filter: blur()这类开销大的属性元素一多就掉帧。规避办法是能用transform和opacity解决的就别用其他属性模糊效果尽量少用或者用静态图片代替元素数量控制在合理范围。如果提示词里要求的效果特别复杂可以主动加一句注意性能优先使用 transform 和 opacity 做动画。6.4 复制代码时的常见错误最后说个特别低级的坑但真的很多人踩复制代码的时候把开头的!doctype html漏掉了或者复制到一半断了导致页面打不开。还有人把代码粘到 Word 里再复制出来引号变成了中文引号直接报错。正确的做法是从对话里复制完整代码粘到纯文本编辑器VS Code、Notepad 都行保存为.html再用浏览器打开。别经过 Word、微信这类会改格式的工具。这个坑我踩过一次排查了半小时才发现是引号的问题。7. 我个人的几点体会折腾这一圈下来最大的感受是Claude Opus 5.5 在用代码做视觉这件事上的能力确实比我想的强。它不是简单地拼模板而是真的在理解我要一个什么样的动态效果然后选择合适的 CSS 属性去实现。尤其是当你把需求描述得足够具体的时候它的输出质量会有明显提升。但它的边界也很清楚它是个代码生成器不是视频生成器。你把它当成一个能听懂自然语言的 CSS 动画工程师来用体验就很好你把它当成 Sora 来用就会失望。这个定位想清楚了后面所有操作都顺了。另外一个体会是关于提示词的。我发现很多人写提示词的问题不在于写得少而在于写得太抽象。让它好看一点、动得自然一点这种话模型是没法执行的。真正有效的提示词是把你的审美判断翻译成具体的参数——几秒、什么缓动、什么颜色、什么层级。这个翻译能力才是用好这类工具的核心竞争力。最后分享一个小技巧如果你对生成的结果不满意别急着重开对话。在原对话里追加修改要求模型能记住上下文改起来比重新生成快得多。我一般会连续迭代五六轮直到效果满意为止。这个对话式打磨的过程比一次性写完美提示词要现实得多。