1. 这个标题到底在说什么先拆概念再动手“Claude Opus 5.5 竟然能直出视频”这个说法第一次看到的人大概率会愣一下。因为在大众认知里Claude 是一个对话式的大语言模型它的输出是文字最多加上代码块和结构化数据。视频是二进制流是帧序列是编码封装这两者之间隔着一条看起来不可逾越的鸿沟。所以当有人说“直出视频”的时候我的第一反应不是“哇好厉害”而是“它到底是怎么做到的”。答案其实藏在热搜词里。你仔细看那串关键词HTML、CSS、!doctype html、html langzh-cn、meta charsetutf-8、CSS 涟漪光圈扩散、数字加载动画效果、植物大战僵尸 HTML 完整代码、鹈鹕骑自行车提示词。这些词拼在一起指向一个非常明确的技术路径用 HTML CSS JavaScript 在浏览器里渲染出动态画面再通过某种方式把这段动态画面录制成视频文件。Claude Opus 5.5 做的是帮你把“描述”直接翻译成“可运行的网页动画代码”而“视频”是这段代码在浏览器里跑起来之后被捕获的结果。换句话说它不是像 Sora 那样直接生成像素级的视频流而是走了一条“代码即画面”的路线。你给它一段提示词它吐出一个完整的 HTML 文件你双击打开浏览器里就开始播放动画。这个动画可以是涟漪扩散、可以是数字加载、可以是鹈鹕骑自行车甚至可以是植物大战僵尸的简化版。然后你用录屏工具或者浏览器自带的捕获能力把这段动画存成 MP4 或 WebM。整个链路里Claude 负责的是“写代码”这一环而“视频”是代码运行后的副产品。这个能力为什么值得单独拿出来说因为它把视频制作的门槛从“会剪辑、会特效、会三维软件”拉低到了“会描述你想要的画面”。对于前端开发者来说这意味着一件事你手里多了一个能瞬间产出动画原型的工具。对于产品经理和设计师来说这意味着你可以用自然语言快速验证一个动效想法不用等排期。对于内容创作者来说这意味着你可以批量生产轻量级的动态素材而不需要打开任何专业软件。我试过用类似的思路让模型生成 CSS 动画实测下来只要提示词写得足够具体它给出的代码基本能直接跑偶尔需要微调几个参数。Claude Opus 5.5 在这个方向上的表现从热搜词的密度来看已经引起了相当多人的关注。接下来我会把整个流程拆开从提示词设计到代码结构从动画原理到录制方法一步一步讲清楚。2. 核心原理拆解为什么 HTML CSS 能变成视频2.1 浏览器渲染管线与帧的概念要理解“代码怎么变成视频”得先理解浏览器是怎么把 HTML 和 CSS 画到屏幕上的。浏览器内部有一条渲染管线解析 HTML 构建 DOM 树解析 CSS 构建 CSSOM 树两者合并成渲染树然后进行布局计算确定每个元素在屏幕上的位置和大小接着进行绘制把元素填充成像素最后进行合成把多个图层合并成最终画面。这一整套流程每秒钟执行 60 次就是 60 帧每秒。视频的本质就是把这些帧按顺序存下来再用编码器压缩成一个文件。所以当你写了一个 CSS 动画比如keyframes ripple { from { transform: scale(0); opacity: 1; } to { transform: scale(4); opacity: 0; } }浏览器会在每一帧重新计算这个元素的transform和opacity然后重新绘制。你肉眼看到的是涟漪在扩散计算机看到的是连续变化的数值序列。录屏工具做的事情就是把这个数值序列对应的画面一帧一帧抓下来存成视频。这里有一个关键点不是所有 CSS 属性都能被高效地动画化。transform和opacity之所以被推荐用于动画是因为它们可以触发 GPU 合成浏览器不需要重新布局和重绘只需要在合成阶段改变图层的属性。而像width、height、margin这类属性每一帧都会触发布局计算性能开销大动画容易卡顿。Claude Opus 5.5 在生成代码时如果提示词里强调了“流畅”“高性能”它通常会优先使用transform和opacity这是它懂前端的一个体现。2.2 从提示词到可运行代码的映射逻辑大语言模型生成代码本质上是在做概率预测。它见过大量的 HTML、CSS、JavaScript 代码知道什么样的描述对应什么样的代码结构。当你写“做一个鹈鹕骑自行车的动画”时它会在训练数据里搜索相关的模式鹈鹕怎么画用 SVG 还是 CSS 形状自行车怎么画轮子怎么转然后把这些模式组合成一个完整的页面。但这里有一个陷阱模型不知道你的审美偏好。它生成的鹈鹕可能是一个简笔画也可能是一个复杂的 SVG 路径。它生成的自行车可能轮子是圆的也可能是方的。所以提示词的质量直接决定了输出质量。热搜词里反复出现“鹈鹕骑自行车提示词”“鹈鹕测试提示词”说明很多人已经意识到这个场景是一个很好的测试用例因为它同时涉及形状绘制、动画时序、物理模拟轮子转动、身体起伏等多个维度。我个人的经验是提示词里要包含四个要素主体描述、动作描述、视觉风格、技术约束。主体描述告诉它画什么动作描述告诉它怎么动视觉风格告诉它用什么颜色和线条技术约束告诉它用什么技术实现。比如“用纯 CSS 绘制一只鹈鹕鹈鹕骑在一辆自行车上轮子持续旋转鹈鹕身体随轮子转动上下起伏整体风格为扁平化卡通背景为浅蓝色使用 transform 和 opacity 实现动画不要使用 JavaScript”。这样写出来的提示词模型基本能给出一个结构清晰、可直接运行的 HTML 文件。2.3 为什么是 HTML 而不是其他格式有人可能会问为什么不让模型直接生成视频文件答案很简单视频文件是二进制格式模型输出的是文本。模型可以输出 Base64 编码的字符串但那样生成的视频质量极低而且长度受限。相比之下HTML 是纯文本模型可以逐行生成浏览器可以逐行解析而且 HTML CSS 的表达能力足够覆盖大部分二维动画场景。更重要的是HTML 文件是可编辑的。你拿到模型生成的代码后可以改颜色、改速度、改尺寸甚至可以把它嵌入到现有的网页里。视频文件一旦生成修改成本就高得多。所以“直出视频”这个说法更准确的理解是“直出可生成视频的代码”。这个区别很重要因为它决定了你的工作流你不是在等一个视频文件你是在等一段可以反复调整的代码。从热搜词里还能看到“html 格式转换 wps 表格”“ubuntu 的 html 编辑器”“css 样式引入方式”这些词说明很多人在拿到代码之后还需要处理格式转换、编辑环境、样式引入等问题。这些都属于“代码到手之后”的环节我会在后面单独讲。3. 提示词工程实战怎么写才能让模型输出可用的动画代码3.1 提示词的四层结构我把提示词拆成四层场景层、动作层、视觉层、技术层。场景层描述画面里有什么动作层描述这些东西怎么动视觉层描述颜色、线条、字体、布局技术层描述用什么技术实现、有什么限制。这四层缺一不可缺了场景层模型不知道画什么缺了动作层画面是静止的缺了视觉层出来的东西可能很丑缺了技术层可能给你塞一堆用不上的库。举个例子热搜词里有“css 涟漪光圈扩散”和“数字加载动画效果 css”。如果你只写“做一个涟漪动画”模型可能给你一个简单的圆在放大。但如果你写“在深色背景上从中心向外扩散三层涟漪光圈每层光圈延迟 0.3 秒启动光圈颜色从白色渐变到透明使用 CSS keyframes 和 transform: scale() 实现不要使用 JavaScript”出来的效果就完全不一样。后者有明确的层数、延迟、颜色变化、技术实现方式模型只需要把这些参数翻译成代码。再比如“植物大战僵尸 HTML 完整代码”这个热搜词。植物大战僵尸是一个复杂的游戏涉及网格布局、角色动画、碰撞检测、状态管理。如果你直接让模型“写一个植物大战僵尸”它可能会给你一个简化到不能再简化的版本。但如果你写“用 HTML CSS JavaScript 实现一个简化版植物大战僵尸网格为 5 行 9 列植物有豌豆射手和向日葵两种僵尸从右侧出现并向左移动豌豆射手发射子弹子弹击中僵尸后僵尸消失使用 Canvas 或 DOM 实现均可代码要完整可直接运行”这样出来的代码才具备可玩性。3.2 参数化控制让动画可调好的提示词不仅要描述画面还要留出可调参数。我习惯在提示词末尾加一句“把所有可调参数如动画时长、颜色值、尺寸提取为 CSS 变量放在 :root 里方便后续修改。”这样模型生成的代码会有一个清晰的变量区你改一个值整个动画的节奏或配色就变了。比如涟漪动画模型可能会生成这样的代码:root { --ripple-duration: 2s; --ripple-color: rgba(255, 255, 255, 0.6); --ripple-count: 3; --ripple-delay: 0.3s; }然后你在keyframes里引用这些变量。这样你不需要去代码深处找某个具体的数值只需要改:root里的几行就行。这个技巧在批量生成动画时特别有用你可以让模型生成一套模板然后自己替换变量值快速产出多个变体。3.3 避免常见坑模型容易犯的几个错误根据我自己的实测模型在生成动画代码时容易犯几个错误。第一个是动画不循环它可能只播放一次就停了。你需要在提示词里明确写“动画无限循环”。第二个是性能问题它可能用left和top来做位移动画而不是transform: translate()。你需要在技术层里写“使用 transform 和 opacity 实现动画避免触发布局重排”。第三个是兼容性问题它可能用了某些浏览器不支持的新特性。你可以写“确保在 Chrome 和 Firefox 最新版中可正常运行”。还有一个坑是代码不完整。有时候模型会省略一些它认为“显而易见”的部分比如html标签的闭合、CSS 的引入方式。你需要在提示词里写“输出完整的 HTML 文件包含!doctype html、html、head、body所有标签CSS 写在style标签内”。热搜词里反复出现!doctype html html langzh-cn head meta charsetutf-8这一串说明很多人都在处理这个问题。直接把这个要求写进提示词能省掉很多手动补全的麻烦。4. 从代码到视频完整实操流程4.1 环境准备你只需要一个浏览器整个流程对环境的依赖极低。你不需要安装任何专业软件不需要配置复杂的开发环境。一个现代浏览器Chrome、Edge、Firefox 都可以一个文本编辑器VS Code、Sublime Text、甚至记事本就够了。如果你用 VS Code可以装一个 Live Server 插件右键点击 HTML 文件选择“Open with Live Server”浏览器会自动打开并实时刷新。如果你不想装插件直接双击 HTML 文件也能在浏览器里打开。热搜词里有“claude code 安装”“vscode 配置 claude code”“ubuntu 配置 claude code”这些词说明很多人是在 VS Code 或 Ubuntu 环境下工作的。如果你用 Claude Code 这个工具它可以直接在终端里调用模型把生成的代码写入文件。但即使你不用任何插件手动复制粘贴代码到文件里效果是一样的。工具只是提升效率不是必需品。4.2 生成代码从提示词到 HTML 文件假设我们要做一个“数字加载动画”提示词可以这样写生成一个完整的 HTML 文件实现数字加载动画。页面背景为深灰色#1a1a1a中央显示一个从 0 到 100 的数字数字每秒增加 10字体为等宽字体颜色为亮绿色#00ff88字号为 120px。数字下方有一个进度条宽度从 0% 增长到 100%颜色与数字相同。使用 CSS 动画和 JavaScript 实现动画无限循环。输出完整的 HTML 代码CSS 写在style标签内JavaScript 写在script标签内。模型收到这个提示词后会生成一个完整的 HTML 文件。你把它保存为loading.html双击打开就能看到数字在跳动进度条在增长。如果你觉得数字增加太快或太慢改一下 JavaScript 里的setInterval时间间隔就行。如果你觉得颜色不好看改一下 CSS 里的颜色值就行。这里有一个细节模型生成的 JavaScript 可能用了requestAnimationFrame而不是setInterval。两者都能实现动画但requestAnimationFrame更流畅因为它与浏览器的刷新率同步。如果你对流畅度有要求可以在提示词里写“使用 requestAnimationFrame 实现动画”。如果你只是想要一个简单效果setInterval也够用。4.3 录制视频三种可行方案代码跑起来之后怎么把它变成视频我试过三种方案各有优劣。第一种是浏览器录屏。Chrome 和 Edge 都有内置的录屏功能按 F12 打开开发者工具按 CtrlShiftP 打开命令面板输入“Capture screenshot”或“Record”可以截取当前画面或录制一段视频。这个方案的好处是不需要安装额外软件坏处是录制质量受限于浏览器窗口大小而且不能精确控制帧率。第二种是专业录屏软件。OBS Studio 是免费开源的功能强大可以设置录制区域、帧率、码率。你可以把浏览器窗口固定在某个尺寸然后用 OBS 录制这个区域。这个方案的好处是画质高、可控性强坏处是需要花几分钟学习 OBS 的基本操作。第三种是代码级捕获。如果你懂一点 JavaScript可以用MediaRecorderAPI 配合canvas.captureStream()来录制。这个方案的好处是纯代码实现可以精确控制每一帧坏处是需要把动画渲染到 Canvas 上而不是直接用 DOM。对于简单的 CSS 动画这个方案有点杀鸡用牛刀但对于复杂的 Canvas 动画这是最干净的方案。我个人的选择是如果只是快速验证效果用浏览器录屏如果要产出高质量素材用 OBS如果要集成到自动化流程里用 MediaRecorder。4.4 后期处理裁剪、压缩、格式转换录下来的视频通常需要简单处理一下。裁剪掉多余的边缘压缩一下体积转成通用的 MP4 格式。我常用的是 FFmpeg命令行工具功能极其强大。比如把 WebM 转成 MP4ffmpeg -i input.webm -c:v libx264 -preset slow -crf 18 output.mp4-crf 18是质量参数数值越小质量越高18 是一个视觉无损的常用值。如果你需要更小的体积可以调到 23 或 28。如果你需要裁剪画面可以用-vf cropwidth:height:x:y参数。这些命令看起来有点吓人但用几次就熟了。热搜词里有“html 格式转换 wps 表格”虽然这个场景和视频无关但说明很多人有格式转换的需求。视频格式转换和文档格式转换的逻辑是一样的找到输入格式和输出格式用对应的工具做转换。FFmpeg 就是视频领域的万能转换器。5. 常见问题与排查技巧实录5.1 动画不播放或只播放一次这是最常见的问题。原因通常是keyframes里没有写infinite或者animation属性写错了。检查一下animation的简写属性格式是animation: name duration timing-function delay iteration-count direction fill-mode;。如果你写了animation: ripple 2s ease-in-out;它默认只播放一次。要无限循环必须写animation: ripple 2s ease-in-out infinite;。另一个可能的原因是keyframes的名称和animation里引用的名称不一致。CSS 是大小写敏感的Ripple和ripple是两个不同的名称。检查一下拼写。5.2 动画卡顿或掉帧如果动画看起来一顿一顿的大概率是因为动画属性触发了布局重排。检查一下你动画的属性是不是width、height、top、left、margin这些。如果是改成transform和opacity。比如把left: 100px改成transform: translateX(100px)把width: 200px改成transform: scaleX(2)。还有一个原因是元素太多浏览器渲染压力大。如果你有几百个元素同时在动考虑用 Canvas 代替 DOM。Canvas 把所有绘制操作集中在一个画布上性能开销比操作几百个 DOM 节点小得多。5.3 录制的视频颜色不对或模糊颜色不对通常是因为录屏软件的颜色空间设置有问题。确保录制时使用的是 sRGB 颜色空间而不是 Adobe RGB 或 ProPhoto RGB。模糊通常是因为录制分辨率低于显示分辨率或者码率太低。把录制分辨率设成和浏览器窗口一样大码率设成 8Mbps 以上基本就能解决。5.4 模型生成的代码有语法错误模型偶尔会生成有语法错误的代码比如少了一个闭合括号或者属性名拼错了。这时候不要慌把代码复制到 VS Code 里它会用红色波浪线标出错误位置。大部分错误都是拼写问题或括号不匹配手动改一下就行。如果错误太多重新生成一次在提示词里加一句“确保代码语法正确所有标签和括号正确闭合”。5.5 常见问题速查表问题现象可能原因解决方法动画不播放animation缺少infinite加上infinite动画只播放一次iteration-count默认为 1显式设置infinite动画卡顿使用了width/left等属性改用transform/opacity颜色不对颜色空间不匹配统一使用 sRGB视频模糊分辨率或码率过低提高录制分辨率和码率代码报错语法错误用编辑器检查并修复元素位置偏移盒模型计算错误检查box-sizing和margin字体不显示字体未加载使用系统字体或引入 Web Font6. 进阶玩法把动画代码嵌入现有项目6.1 作为独立页面嵌入 iframe最简单的嵌入方式是用 iframe。把生成的 HTML 文件放在服务器上然后在你的主页面里写iframe srcanimation.html width800 height600/iframe。这样动画就在一个独立的沙箱里运行不会影响主页面的样式和脚本。缺点是 iframe 会增加一次 HTTP 请求而且父子页面之间的通信稍微麻烦一点。6.2 提取 CSS 和 JavaScript 合并到主项目如果你想把动画直接集成到现有页面里可以把生成的代码拆开。CSS 部分复制到你的样式文件里HTML 部分复制到你的模板里JavaScript 部分复制到你的脚本文件里。注意检查类名和 ID 是否冲突如果有冲突给它们加一个前缀。比如把.ripple改成.my-animation-ripple。热搜词里有“css 样式引入方式”和“css 文件需要写style吗”说明很多人对 CSS 的引入方式有疑问。简单说CSS 可以写在 HTML 的style标签里也可以写在独立的.css文件里然后用link引入。两种方式效果一样区别在于独立文件更利于缓存和复用。如果你要把动画集成到大型项目里建议用独立文件。6.3 用 CSS 变量做主题切换如果你想让动画支持多套配色可以用 CSS 变量。在:root里定义默认值然后在[data-themedark]里覆盖这些值。这样你只需要切换>:root { --bg-color: #ffffff; --text-color: #333333; --accent-color: #00ff88; } [data-themedark] { --bg-color: #1a1a1a; --text-color: #eeeeee; --accent-color: #00cc66; }然后在动画代码里引用这些变量而不是写死颜色值。这样你只需要改几行变量定义就能切换整个主题。7. 我踩过的坑和最后分享的几个技巧第一个坑是过度依赖模型生成完整项目。模型擅长生成单个动画或单个组件但不擅长生成一个完整的、有多个页面和复杂交互的应用。如果你要做一个完整的网站最好把任务拆成多个小任务每个任务让模型生成一个组件然后自己组装。这样每个组件的质量更可控调试也更容易。第二个坑是忽略浏览器的默认样式。不同浏览器对body的默认margin不一样对h1的默认字号也不一样。如果你不重置这些默认样式动画在不同浏览器里的位置可能会有偏差。我习惯在 CSS 开头加一段重置代码* { margin: 0; padding: 0; box-sizing: border-box; }这三行能解决大部分布局问题。第三个坑是忘记处理高 DPI 屏幕。在 Retina 屏幕上1 个 CSS 像素对应 2 个物理像素。如果你用 Canvas 绘制动画需要把 Canvas 的width和height属性设成 CSS 尺寸的 2 倍然后用ctx.scale(2, 2)缩放上下文。否则动画在 Retina 屏幕上会模糊。最后分享一个小技巧用will-change属性提前告诉浏览器哪些元素会变化。比如will-change: transform, opacity;可以让浏览器提前为这些元素创建合成层动画会更流畅。但不要滥用这个属性因为它会消耗额外的内存。只在确实需要优化的元素上使用。还有一个技巧是用prefers-reduced-motion媒体查询尊重用户的系统设置。有些用户因为身体原因在系统里开启了“减少动态效果”。你可以用这个媒体查询来降低动画速度或直接禁用动画media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }这个细节很多人会忽略但它体现了一个开发者对用户体验的尊重。