1. 一个被标题党耽误的真本事模型直出视频到底是怎么回事第一次看到Claude Opus 5.5 竟然能直出视频这个说法我的反应和大多数人一样——又是标题党。毕竟大语言模型输出的是文本 token怎么可能凭空吐出一个 mp4 文件但把那些所谓的提示词扒开看了一遍之后我发现事情没那么简单也没那么玄乎它确实能直出视频只不过这个视频不是模型自己渲染出来的而是模型用HTML CSS JavaScript现场写了一个可以播放的动画页面你在浏览器里打开它就在动。说白了这是一次用代码模拟视频的操作。模型没有调用任何视频生成模型没有跑扩散模型也没有渲染管线它做的事情是理解你想要的画面、运动、节奏然后把这些东西翻译成浏览器能执行的代码。你拿到的产物是一个.html文件双击就能看能循环播放能交互甚至能改参数。这件事为什么值得单独写一篇因为它把两件原本分开的能力缝在了一起语义理解和前端实现。以前你要做一个鹈鹕骑自行车的动画得先想清楚画面再自己写 CSS keyframes调半天位置和时序。现在你可以用自然语言描述让模型把中间那层翻译干掉。对做前端的人来说这是一个效率工具对不做前端的人来说这是一扇门——你不需要会写代码也能得到一个能动的东西。这篇文章适合三类人看一是想搞清楚AI 直出视频到底是什么原理的技术爱好者二是想把这套流程用在自己工作里的前端、运营、设计从业者三是纯粹好奇、想动手复现一个的人。我会把提示词怎么写、代码怎么落地、参数怎么调、坑在哪里全部拆开讲清楚。你照着做大概率能跑出一个属于自己的直出视频。需要先说明一点下面涉及的具体模型版本、界面入口、命令细节都是基于当前常见实践的合理还原不同时间点、不同客户端可能略有差异核心思路和方法是通用的你按自己的环境对应调整即可。2. 拆解直出视频的真实原理它到底生成了什么2.1 从文本到动画中间那层被隐藏的翻译要理解这件事先得接受一个前提浏览器本身就是一个动画播放器。CSS 的keyframes、transition、animation加上 JavaScript 的requestAnimationFrame组合起来能做出非常接近视频的效果——位移、缩放、旋转、透明度变化、颜色渐变甚至粒子效果。视频文件本质上是一帧一帧的图片按时间轴播放而 CSS 动画本质上是浏览器按时间轴计算元素的样式两者在时间维度上的连续变化这件事上是同构的。所以当模型直出视频时它实际输出的结构大致是这样的!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title鹈鹕骑自行车/title style /* 场景、角色、运动全部在这里定义 */ /style /head body div classstage div classpelican/div div classbicycle/div /div script /* 需要交互或复杂时序时用 JS 补 */ /script /body /html模型做的事情是把一只鹈鹕骑着自行车从左边骑到右边轮子要转背景要有云在飘这句话拆解成舞台尺寸、角色分层、每个元素的初始位置、运动轨迹、运动时长、缓动曲线、循环方式。这些全部是它训练时见过无数遍的前端模式它只是把它们按你的语义重新组合了一遍。注意模型并不会真的看见画面。它是在用代码描述画面。所以你对画面的描述越接近可被代码表达的结构出来的结果就越准。这是后面提示词写法的核心依据。2.2 为什么是 HTML/CSS 而不是别的方案有人会问为什么不是生成 GIF、不是生成 SVG 动画、不是直接调视频模型这里有几个现实考量。第一HTML/CSS 是模型最熟悉的领域之一。训练语料里前端代码的密度极高模型对布局、定位、动画的理解非常扎实出错率相对低。第二产物可编辑、可复用。你拿到的是一个文本文件想改颜色改颜色想改速度改速度想嵌到网页里直接嵌。第三零依赖、零成本。不需要显卡不需要渲染农场不需要等几分钟出片浏览器打开就是成品。第四可交互。视频是死的HTML 页面可以响应鼠标、可以点击、可以传参这是视频做不到的。对比一下几种AI 生成动态内容的路线方案产物生成速度可编辑性交互能力硬件要求文生视频模型mp4/gif慢分钟级差基本重生成无高需 GPU代码生成动画html/css/js快秒级强直接改代码强无SVG 动画svg快中中无逐帧图片序列png 序列慢差无中从表里能看出来代码生成动画这条路在快速拿到一个能动的东西这个目标上性价比是最高的。它不适合做电影级画面但适合做演示、做原型、做小玩具、做教学素材。2.3 鹈鹕骑自行车为什么成了经典测试题热词里反复出现鹈鹕骑自行车提示词鹈鹕骑车提示词鹈鹕测试提示词这不是偶然。这个题目在 AI 圈子里已经成了一个非正式的基准测试原因很有意思。它同时考验了好几件事语义理解鹈鹕长什么样、自行车长什么样、骑这个动作怎么表达、空间关系鹈鹕要坐在车座上翅膀要够到车把脚要踩到踏板、运动逻辑轮子转、车前进、身体随车移动、审美配色、比例、背景。一个模型如果能把鹈鹕骑车做得像模像样说明它对把复杂语义翻译成结构化代码这件事掌握得不错。而且这个题目有个好处结果好坏一眼就能看出来。鹈鹕的嘴是不是太长、轮子是不是方的、车是不是在倒着走普通人也能判断。所以它比生成一个登录页更能直观反映模型的空间和运动理解能力。3. 提示词怎么写从一句话到可执行代码的翻译术3.1 提示词的四层结构我试过很多种写法最后总结出一个比较稳的结构分四层场景层、主体层、运动层、约束层。缺一层结果就会飘。场景层负责交代舞台画布多大、背景什么颜色、有没有地面、有没有天空。主体层负责交代角色有几个元素、分别是什么、长什么样、初始在哪。运动层负责交代时间谁在动、怎么动、动多久、循环不循环。约束层负责交代技术边界用什么技术、不要用什么、代码要能直接跑。举个例子同样是鹈鹕骑自行车两种写法的差距是巨大的差画一个鹈鹕骑自行车好用 HTML CSS 做一个 1440x810 的动画页面。 背景是浅蓝色天空底部有一条绿色地面。 画面中央有一只鹈鹕白色身体、橙色长嘴、黑色眼睛 骑在一辆红色自行车上。自行车有两个轮子轮子持续旋转。 鹈鹕身体随自行车轻微上下起伏模拟蹬车节奏。 整体动画无限循环节奏轻快。 只用一个 html 文件CSS 写在 style 标签里不要引入外部资源。第二种写法把四层都覆盖了模型几乎不需要猜。第一种写法模型只能自由发挥出来的东西大概率不是你想要的。3.2 关键参数怎么给尺寸、时长、节奏参数是提示词里最容易被忽略、但对结果影响最大的部分。我列几个必须给的画布尺寸。给具体像素比如1440x81016:9或者1080x1080正方形。不给的话模型可能给你一个自适应布局元素位置全靠百分比动画容易变形。给了固定尺寸模型就能用绝对定位精确摆放。动画时长。一个循环几秒直接决定观感。太快像抽搐太慢像卡顿。经验值简单位移 2-4 秒复杂组合动作 4-8 秒。鹈鹕骑车这种我一般给 3 秒一个循环轮子转速和身体起伏能对上。缓动曲线。linear是匀速ease-in-out是两头慢中间快cubic-bezier可以自定义。轮子旋转必须用linear不然会一顿一顿的身体起伏用ease-in-out更自然。循环方式。infinite无限循环或者指定次数。做展示用infinite做一次性演示可以不加。这些参数在提示词里直接写出来比让模型自己猜靠谱得多。你可以这样写轮子旋转animation: spin 1s linear infinite; 身体起伏animation: bob 0.5s ease-in-out infinite alternate;模型看到这种具体指令基本会照做。3.3 让模型分步思考的提示词技巧直接让模型一次性输出完整代码有时候会翻车——尤其是元素多、运动复杂的时候。我的做法是让它先出结构再出样式最后出动画。提示词可以这样写请分三步完成 第一步先用 HTML 搭出页面结构列出所有需要的元素和它们的层级关系 第二步用 CSS 给每个元素设置尺寸、颜色、位置 第三步添加 CSS 动画让轮子转、身体起伏、背景云飘。 每一步都输出完整代码最后合并成一个 html 文件。这种分步提示的好处是模型在每一步的上下文更聚焦出错概率低。而且你能在中间步骤就发现问题及时纠正不用等它全写完再返工。还有一个技巧是给参考锚点。比如风格参考扁平化插画配色参考莫兰迪色系运动节奏参考打字机动画。模型对这类风格词很敏感能快速收敛到你想要的方向。提示如果你用的是支持多轮对话的客户端不要一次性把要求全塞进去。先让它出一个基础版跑起来看效果再针对具体问题提修改要求比如轮子转太快了改成 2 秒一圈鹈鹕的嘴再长一点。迭代比一次到位更高效。4. 从零复现一个能跑的直出视频完整流程4.1 环境准备你其实只需要一个浏览器先说结论做这件事你不需要装任何开发环境。一个现代浏览器Chrome、Edge、Firefox 都行加一个文本编辑器就够了。模型生成的代码你复制到一个.html文件里双击打开就能看。如果你想让流程更顺可以准备这几样一个代码编辑器VS Code 是首选免费、插件多、对 HTML/CSS 高亮友好。热词里提到的vscode 配置 claude codeclaude code for vs code就是这类集成把模型能力直接接进编辑器改代码不用来回切窗口。一个能对话的模型客户端网页版、桌面版、命令行版都行。热词里的claude code 安装claude code 下载claude code 桌面版说的就是这些入口。命令行版适合喜欢在终端里干活的人桌面版适合想要图形界面的人。一个本地预览方式直接双击 html 文件或者用 VS Code 的 Live Server 插件改完自动刷新调动画特别方便。关于claude code 如何直接执行终端命令这类问题简单说就是命令行版的工具通常能在你授权后执行 shell 命令比如帮你创建文件、启动本地服务。这个能力在做动画调试时挺有用——你可以让它生成文件后直接打开预览。但具体权限和行为以你所用工具的说明为准别在不清楚的情况下乱授权。4.2 第一步把需求写成结构化提示词我拿鹈鹕骑自行车当例子完整走一遍。提示词我这样写用 HTML CSS 做一个 1440x810 的动画页面主题是鹈鹕骑自行车。 场景浅蓝色天空背景底部 1/4 是绿色草地天空中有两朵白云缓慢从左向右飘。 主体 - 一只鹈鹕白色椭圆身体橙色长嘴长度约为身体的一半黑色小眼睛两条细腿。 - 一辆红色自行车两个黑色轮子带辐条车架、车把、车座齐全。 - 鹈鹕坐在车座上翅膀搭在车把上脚踩在踏板上。 运动 - 自行车整体从画面左侧移动到右侧再循环回来周期 6 秒。 - 两个轮子持续旋转1 秒一圈linear。 - 鹈鹕身体随蹬车节奏上下起伏0.5 秒一次ease-in-out。 - 白云缓慢飘动8 秒一个循环。 技术要求 - 单个 html 文件CSS 写在 style 标签内。 - 不使用任何外部图片、字体、库。 - 所有元素用 div CSS 绘制不用 SVG。 - 代码加注释说明每个动画的作用。这个提示词把四层结构都覆盖了参数也给全了。模型拿到之后基本能一次出可用的代码。4.3 第二步读懂模型给的代码结构模型输出的代码结构通常是这样的我简化了实际会长很多!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title鹈鹕骑自行车/title style body { margin: 0; background: #87ceeb; } .stage { position: relative; width: 1440px; height: 810px; overflow: hidden; } .ground { position: absolute; bottom: 0; width: 100%; height: 200px; background: #7ec850; } .cloud { position: absolute; width: 120px; height: 50px; background: #fff; border-radius: 50px; animation: drift 8s linear infinite; } keyframes drift { from { left: -150px; } to { left: 1500px; } } .bike-group { position: absolute; bottom: 180px; animation: ride 6s linear infinite; } keyframes ride { from { left: -300px; } to { left: 1500px; } } .wheel { position: absolute; width: 100px; height: 100px; border: 8px solid #222; border-radius: 50%; animation: spin 1s linear infinite; } keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .pelican-body { position: absolute; width: 160px; height: 100px; background: #fff; border-radius: 50%; animation: bob 0.5s ease-in-out infinite alternate; } keyframes bob { from { transform: translateY(0); } to { transform: translateY(-8px); } } /style /head body div classstage div classcloud styletop:80px;/div div classcloud styletop:180px; animation-delay:3s;/div div classground/div div classbike-group div classwheel styleleft:0; bottom:0;/div div classwheel styleleft:180px; bottom:0;/div div classpelican-body styleleft:40px; bottom:80px;/div /div /div /body /html读这段代码重点看三件事层级关系谁在谁里面、定位方式absolute left/bottom、动画绑定哪个元素挂了哪个 keyframes。看懂这三样你就能自己改。4.4 第三步调参和微调让它真的像那么回事模型第一版出来通常能跑但细节糙。我一般按这个顺序调先调位置。鹈鹕是不是坐在车座上、翅膀是不是够到车把、脚是不是在踏板上。这些靠改left、bottom的像素值。改的时候一次只动一个值改完刷新看效果别一次改一堆不然你不知道是哪个改动起的作用。再调比例。鹈鹕身体和自行车的大小关系、轮子直径和车架的比例。比例不对画面就假。经验上轮子直径大约是车架高度的 1/2鹈鹕身体长度大约是车架长度的 2/3。然后调节奏。轮子转速、身体起伏频率、整体移动速度三者要协调。轮子转一圈的时间应该和自行车前进一个轮子周长的距离所需时间大致对应不然会有轮子空转的违和感。这个不用精确计算目测差不多就行。最后调配色和细节。加个阴影、给轮子加辐条、给天空加渐变画面质感立刻上一个台阶。实操心得调动画的时候把animation-duration临时改大比如从 1s 改成 10s慢动作看运动轨迹能快速发现位置和时序问题。调好了再改回来。4.5 第四步导出和分享调好之后这个 html 文件就是你的成品。分享方式有几种直接发文件对方双击就能看前提是对方有浏览器基本都有。部署到静态托管把文件传上去得到一个链接谁都能访问。录屏转视频如果你确实需要一个 mp4用系统自带录屏或者 OBS 录一段就变成真视频了。这一步是代码动画到视频文件的桥。嵌入网页用 iframe 嵌到自己的页面里或者把代码拆开融进现有项目。热词里提到的html 格式转换 wps 表格是另一个方向的需求——把 html 里的表格数据导到 WPS。这跟动画没关系但说明 html 作为通用格式用途很广。做动画的话你关注导出和嵌入就够了。5. 常见问题与排查技巧实录5.1 动画不动、元素错位、画面闪烁怎么办这是最高频的三类问题我整理成一张速查表现象常见原因排查方法解决方式动画完全不动keyframes 名字对不上、animation 没绑定检查animation属性里的名字和keyframes是否一致改成同名注意大小写元素位置全乱父元素没设position: relative看绝对定位元素的父级有没有定位上下文给父容器加position: relative画面闪烁抖动用了left/top做动画触发重排看动画属性是不是布局属性改用transform: translate()轮子转起来一顿一顿缓动曲线用了ease检查animation-timing-function改成linear循环时跳一下起止状态不一致对比from和to的值让首尾状态衔接或用alternate元素被裁掉父容器overflow: hidden且元素超出检查容器尺寸和元素位置调整容器大小或元素坐标重点说两个。闪烁抖动这个问题新手特别容易踩。原因是left、top、width、height这些属性改变时浏览器要重新计算布局reflow开销大动画就不流畅。而transform和opacity只触发合成composite性能好得多。所以做动画位移用translate缩放用scale旋转用rotate透明度用opacity这是铁律。循环跳变这个问题本质是首尾帧不连续。比如一个元素从left: 0动到left: 100px循环时它会瞬间跳回 0。解决办法要么是让终点和起点视觉上一致比如转圈360 度和 0 度看起来一样要么用animation-direction: alternate让它来回动。5.2 模型生成的代码跑不起来怎么快速定位模型偶尔会给出有语法错误的代码或者引用了不存在的资源。排查顺序我一般这样走第一步看浏览器控制台。按 F12 打开开发者工具切到 Console 面板红色报错就是问题所在。常见的是Unexpected token语法错误或者Failed to load resource资源加载失败。第二步二分法注释。如果报错信息看不懂把代码从中间切开注释掉一半看还报不报错。报错就在前半段不报就在后半段逐步缩小范围。这个方法笨但有效。第三步让模型自己修。把报错信息原样贴回给模型说这段代码报了这个错帮我修。模型对错误信息的理解通常不错能快速给出修正版。第四步检查外部依赖。如果代码里引用了外部字体、图片、库而你的环境访问不了就会失败。让模型改成纯 CSS 绘制、不依赖外部资源能规避大部分这类问题。避坑技巧让模型生成代码时明确要求不使用任何外部资源。这一条能省掉你 80% 的调试时间。所有图形用 div CSS 画所有字体用系统默认所有逻辑内联。产物自包含到哪都能跑。5.3 怎么让动画更高级几个提升质感的小技巧基础版能跑之后想让它看起来不那么学生作业可以加这几样加缓动。所有运动都加一点ease-in-out或者自定义cubic-bezier机械感立刻减少。真实世界的运动很少是匀速的。加次级运动。主体动的时候附属元素跟着动一点。比如自行车前进时鹈鹕的嘴轻微上下晃轮子转的时候辐条有轻微模糊感。这种跟随运动是动画质感的来源。加环境细节。地面加一点纹理、天空加渐变、加个太阳或者远山。细节不用多一两个就够画面立刻有层次。加光影。给主体加box-shadow或者用radial-gradient做个假阴影立体感就出来了。控制节奏。不要所有东西都同时开始动。错开一点有先后画面就活了。用animation-delay实现。这些技巧不需要多高深的技术但组合起来效果差别很大。我做过对比同样的鹈鹕骑车加了缓动和次级运动之后观感提升非常明显。5.4 关于直出视频这个说法的理性认识最后说点实在的。这个能力很强但别神化它。它做的是用代码模拟动态画面不是真正的视频生成。它的边界很清楚做不了写实画面。想要照片级、电影级的效果它给不了那是视频生成模型的活。做不了复杂物理。碰撞、流体、布料这些CSS 动画搞不定得用 Canvas 或者 WebGL模型也能写但复杂度上去了出错率也高。做不了长时长内容。一个循环几秒到几十秒还行做几分钟的叙事动画代码量会爆炸维护困难。音频是另一回事。视频通常带声音HTML 页面要加音频得单独处理模型不会自动帮你配。认清这些边界你就能把它用在合适的地方快速原型、演示动画、教学素材、网页动效、小游戏。这些场景里它的效率优势非常明显。用对了地方它就是神器用错了地方你会觉得也就那样。6. 这套方法还能怎么扩展鹈鹕骑车只是个引子。同样的思路你可以做很多东西。做产品演示。把产品的工作流程做成动画比静态截图直观得多。比如一个下单流程从点击到支付成功每个步骤用动画串起来。做教学素材。讲算法、讲物理、讲几何用动画演示比干讲强。比如排序算法用不同高度的柱子动起来一眼就懂。做网页动效。落地页、加载动画、按钮反馈这些都能用同样的方法生成直接嵌进项目。做小游戏。HTML CSS JS 能做的游戏不少模型能帮你搭框架你负责调玩法。做数据可视化。把数据变成会动的图表比静态图更有冲击力。热词里提到的css 涟漪光圈扩散图片和文字一行 css怎么调整 css 容器里的文本位置这些都是同一套技能树上的点。你把直出视频这件事搞明白了这些零散的需求自然就能串起来。我个人在实际操作中的体会是提示词的质量决定了产出的下限你的审美和调试能力决定了产出的上限。模型能帮你把想法快速变成可运行的东西但想要什么和好不好看还是得你自己判断。多试、多看、多改手感就出来了。