Opus 5.5 用代码做 AI 视频保姆级教程，是一套完整的代码动画教学系统，讲解如何让 Claude 通过写代码而非视频生成模型来产出动画短片。本文拆解 7 类画风代码、5 个案例与可复制的 XML 提示词框架，教程版本 1.0.0，最后更新 2026 年。
一、教程简介
Opus 5.5 不直接生成视频，它输出文字与代码。画面由代码在浏览器里逐帧画出，再用 Playwright 截图、FFmpeg 合成 MP4。这套流程把 AI 视频做成可控可复现的工程。来源文章见 x.com/xilo2991 的 Opus 5.5 万字教程。
二、七类画风代码
- JavaScript 加 Canvas 2D 画平面像素风
- HTML CSS SVG 做产品宣传动效
- WebGL 着色器加显卡质感
- Three.js 搭 3D 场景与镜头
- p5.js 出彩铅水彩手绘笔触
- Remotion 与 HyperFrames 成熟视频框架
- Manim 用 Python 画精准公式动画
对比七类画风
对比不同代码方案，区别在画面形态与可控性。Canvas 与 HTML 偏平面，Three.js 偏 3D，Manim 偏公式动画。
| 画风 | 代码 | 适合 |
|---|---|---|
| 像素风 | Canvas 2D | 游戏角色 |
| 产品动效 | HTML CSS SVG | 宣传片 |
| 3D 场景 | Three.js | 空间镜头 |
| 公式动画 | Manim | 科普教学 |
三、五种案例拆解
像素巫师只用 Canvas 2D，靠小画布整数倍放大做像素感。界面变形用 HTML CSS SVG 加弹簧动画与节拍网格。游戏史短片混用 Canvas、着色器与 Three.js。甜酷舞蹈把人物交给视频模型、场景交给代码。AI 发展史用 Remotion 讲完整故事。
四、提示词框架
稳定出片的关键是用 XML 标签组织提示词，包括 role 角色、inputs 输入、direction 风格与禁止清单、structure 分镜、build 技术路线、gotchas 注意事项、start 起始步骤。direction 里的禁止清单尤其影响成片风格，要写明不要默认深色大字淡入淡出。
五、配套 Skill 开源
作者 xilo 把整套流程做成 xilo-opus-video Skill 开源在 GitHub（https://github.com/Kianzzz/xilo-opus-video），安装后它会先问需求、出三个方案、预览关键帧、确认后按 brief.md 分镜制作并自评改到八分以上。该 Skill 采用 MIT 许可，内容获社区较多 star 与转发。
六、对比视频生成模型
对比 Opus 5.5 代码方案和 Runway 等视频生成模型，区别在可控性。前者逐帧由代码决定，后者按提示生成。若想做出可复现的特定风格，代码方案更合适；要快速生成写实片段则用生成式模型。
常见问题
问. Opus 5.5 能直接生成视频吗
不能，它靠写代码逐帧渲染画面。
问. 需要什么工具
Playwright 截图与 FFmpeg 合成，配乐可用代码合成。
问. 有提示词模板吗
含 XML 标签框架，可复制到任意 AI 使用。
问. Skill 开源吗
xilo-opus-video 已开源在 GitHub，可免费安装。
教程地址：https://x.com/xilo2991/status/2104912748794589515
