用 Claude Opus 5.5 写代码做视频：7 类技术路线、5 个案例拆解与可复用提示词框架

JeecgBoot AI专题研究| 从代码选型到案例复盘，再到 XML 提示词模板，一份让 AI 稳定出片的实战指南

写在前面：时间线被 AI 视频刷屏之后

Claude Opus 5.5 发布后的一周里，技术圈的信息流几乎被各种 AI 视频占满：像素动画、界面动效、游戏史短片、AI 发展史纪录片……每一条都精细得不像“一句话做出来的”。

热闹之下，最常见的问题有三个：

1. 这些视频到底是怎么做出来的？
2. 不同风格背后分别用了什么技术？
3. 我自己写提示词，怎样才能稳定做出想要的效果，而不是开盲盒？

本文就围绕这三个问题展开：先讲清原理与技术选型，再拆解 5 个风格迥异的社区案例，最后给出一套可直接复用的提示词框架和工作流。即便你用的是其他大模型，这套方法论同样适用，只是最终效果会受模型的代码能力影响。

一句话讲清原理：模型不生成视频，它生成“画视频的代码”

很多人以为 Claude 已经能直接生成视频，其实不能。Opus 5.5 能读文字和图片，但输出只有文字，这和 Seedance、可灵这类视频生成模型是两回事。

画面是从代码来的。可以把它类比成小时候玩的翻页动画书：每页画一张图，快速翻过就动了起来。代码视频的流程如出一辙：

1. 模型写一个网页，网页里有一个函数，告诉它“现在是第几秒”，它就画出这一秒的画面
2. 再用一个程序按每秒 24 张或 60 张的速度，把每一帧截图下来
3. 最后把几千张截图拼成一个 MP4

无论用哪种代码实现，底层逻辑都大同小异。差别主要在于：你想要什么样的画面风格，就该选什么样的绘制技术。

七类技术路线：不同风格该选什么代码

1. JavaScript + Canvas 2D：平面画布

Canvas 是网页里的一块画布，JavaScript 可以在上面画线、画圆、填色、写字。像素风、扁平插画、手绘线条等二维画面，基本都能用它实现。它的优点是轻量、渲染快，是绝大多数 2D 动画的首选。

2. HTML / CSS / SVG：网页元素

HTML 搭结构，CSS 管颜色、圆角、阴影等样式，SVG 负责矢量图标、线条和曲线。这套组合特别适合做软件产品宣传片和界面动效，文字清晰、排版精确、动效丝滑。

3. WebGL 着色器：显卡级质感

WebGL 是网页调用显卡绘图的技术，着色器（shader）是跑在显卡上的小程序，会为画面中每一个像素单独计算颜色。老电视的扫描线与弧面、胶片颗粒、水面反光、发光粒子等复杂质感都靠它实现。实践中它通常与 Canvas 配合：先用 Canvas 画好内容，再叠一层着色器提升质感。

4. Three.js：真正的 3D 场景

Three.js 是网页 3D 工具库，模型、材质、灯光、镜头都可以用代码搭建，底层同样是 WebGL，因此水面、雾气、光束等着色器效果能直接叠加在 3D 场景上。

用了 Three.js，镜头才能真正在空间里运动——推近、拉远、环绕一周都不在话下。产品 360° 展示、立体 Logo、几万个光点组成的粒子云、方块堆出的小镇，通常都靠它。

局限也很明显：纯代码搭的模型基本是方块、球体、圆柱等基础形状拼成的，做风格化场景没问题，想做出与实物一模一样的手机就很难。最佳实践是把产品的 3D 模型文件一并交给模型，让它直接导入后做动画。

5. p5.js 艺术库：手绘笔触

想要彩铅、水彩、蜡笔这类手绘感，常用 p5.js 搭配 p5.brush 笔刷插件，它能模拟真实笔刷的方向、粗细和纸张纹理。

6. HyperFrames / Remotion：成熟的视频框架

前面几种都要求模型从零写起，而 HyperFrames 和 Remotion 是现成的代码视频框架，把渲染、导出等通用部分都封装好了，模型只需专注画面。

两者效果相近，核心区别在控制方式：HyperFrames 按时间线控制，Remotion 按帧控制，理论上 Remotion 的可控性更强。实际做短视频时，两者差距并不大，按团队技术栈选择即可。

7. Manim：Python 动画引擎

Manim 最初是 3Blue1Brown 的作者为自己的数学视频编写的开源工具。它的思路与前面不同：你不必逐帧绘制，只需声明画面里有哪些对象（一个圆、一段文字、一条坐标轴）以及它们如何变化（画出、移动、变形），Manim 会自动补全中间过程。

优点是公式和图形极其精准；缺点是整体风格偏素，想要丰富质感和设计感，前面几种更合适。

配套工具与“代码作曲”

除了上述七类绘制方案，还有两个必不可少的配套工具：

• Playwright：在后台打开一个看不见的浏览器，用于对代码画面逐帧截图
• FFmpeg：专业音视频处理工具，负责把画面序列、音乐、音效合成最终视频

另外值得一提：声音同样可以用代码合成。声音本质上就是一串波形，用 Python 的 numpy、scipy 就能算出每个音符的波形，鼓点、贝斯、钢琴、合成器、界面点击音都能做出来。

一张表快速对照：

这些技术名词不用全部掌握，只要记住名字和大致效果，就能在提示词里准确地告诉 AI 你要什么。

五个案例拆解：看代码组合能做到什么程度

下面 5 个社区案例风格差异很大，用到的代码组合也各不相同，基本覆盖了目前代码视频的主要玩法。

案例一：像素巫师——只用 Canvas 2D

由创作者 @majidmanzarpour 分享。把这条 11 秒的视频抽帧后能看清：它其实是一段约 5 秒多的循环播放了两遍。巫师站着轻晃 → 举起法杖、杖头周围蓝色火花向内旋转聚拢 → 法杖前指，放出光圈和飞弹 → 收招复位，再次循环。

技术上它只用了 Canvas 2D 一种代码，像素感来自两个关键手法：

• 小画布放大：所有内容先画在 128×96 的小画布上，再整数倍放大到全屏，并关闭平滑插值，每个像素都是清晰的小方块
• 刻意的“顿挫感”：巫师姿势每秒只变化约 10 次，模仿老游戏逐张手绘的像素动画；而火花、飞弹等特效每帧都在动，整体不显卡顿

巫师本身没有用任何图片，完全由代码用小方块拼成，法杖角度、手臂高度都做成了参数，因此同一个角色可以复用出各种动作。据作者介绍，整个过程在 Claude 网页版普通对话中完成，没有参考图，约 30 分钟。以下是中文版提示词，可直接复制试用：

创建一个独立的单 HTML 文件，用原生 JavaScript 和 Canvas 2D 渲染一个正在施法的像素风巫师动画。不使用任何外部素材、库或网络请求。 渲染 - 所有内容先画在一块逻辑分辨率固定为 128×96 的离屏画布上，再按能放进窗口的最大整数倍放大，画到全屏的显示画布上，居中，设置 imageSmoothingEnabled = false 和 CSS image-rendering: pixelated。 - 所有绘制都对齐到逻辑画布的整数坐标。不要亚像素位置、抗锯齿、渐变和 shadowBlur。 - 固定调色板，大约 24 个颜色：夜空用深蓝和深紫，长袍用暖色，再加 3–4 个明亮的魔法色。每一个像素都必须来自这个调色板。 角色 - 用填充矩形和一串串像素程序化地搭出巫师，大约 24×32 个逻辑像素：带弯折的尖顶帽、长胡子、双色长袍加深色描边、杖头有宝石的法杖。 - 把姿势做成参数（法杖角度、手臂抬起高度、头部倾斜、长袍摆动）。参数平滑变化，但每一帧都量化到像素网格上，这样虽然循环以 60fps 运行，动作看起来却像每秒 8–12 张的像素动画。 动画 - 循环状态机：待机（两帧上下晃动、胡子摆动）→ 蓄力（法杖举起、宝石闪烁、火花螺旋着向内聚拢）→ 施法（一道强光爆发，飞弹横穿画面，屏幕震动 1–2 像素）→ 收招（回到原位）。关键帧之间的姿势参数用缓动过渡。 - 粒子系统预先分配好、循环复用，不产生新对象。蓄力时火花围着宝石转，施法时向外炸开，每个粒子消失前从白色经过魔法色变成深色。画粒子时位置对齐到像素网格。 - 用固定的 60Hz 时间步长更新，用 requestAnimationFrame 渲染。循环里不产生任何新对象。 场景 - 极简背景：深色夜空、几颗闪烁的 1 像素星星、月亮、石头地面。角色的剪影必须清晰可辨。 - 宝石给巫师打一圈 1 像素的轮廓光，蓄力和施法时变亮。 质量标准 - 任何窗口大小下像素都清晰，无缝循环，稳定 60fps，剪影清楚。看起来要像一段精致的 16-bit 游戏角色动画，而不是缩小了的矢量图形。

复盘要点：这份提示词的精髓在于把“像素风”拆成了可执行的技术约束（逻辑分辨率、禁用抗锯齿、固定调色板、姿势量化），而不是笼统地说“做成像素风格”。

案例二：界面变形——HTML/CSS/SVG + 弹簧 + 节拍

由创作者 @twoclipping 分享。整条视频从头到尾只有一个黑白形状，在按钮、加载、播放器、滑块、开关、图表、命令面板之间不断变形。每一次变化都由一个鼠标光标真实地点击、拖拽触发，并且精准卡在音乐节拍上，快速变形的帧里还带着拖影。

按钮、文字、图表都是真实的网页元素，但质感远超普通网页动效，秘诀在于提示词里加入了三样东西：

• 弹簧动画：所有尺寸、圆角变化都用弹簧公式计算，带一点回弹，比匀速运动自然得多
• 节拍网格：先用 Python 分析音乐、找出每一拍的时间点，所有变化都落在拍子上
• 运动模糊：每帧多截 4 张叠加，快速运动的物体自然带出拖影

中文版提示词如下：

<inputs> 开工前先问我：8–12 个界面状态（按钮、加载、播放器、滑块、开关、标签页、图表、命令面板、通知这些），纯黑白还是加一个强调色，以及一首 120 BPM 左右、可以商用的免版税音乐。 </inputs> <direction> Dribbble 级别的界面动效。从头到尾只有一个形状，永远不切镜头：每一个状态都是同一个元素改变尺寸、圆角和颜色变过去，里面的内容在一下短暂的模糊里切换。 一个鼠标光标用真实的点击和拖拽驱动每一次变化。浅暖灰背景，黑白组件，一种干净的界面字体（Geist）。所有动画都用弹簧，最多带一点点回弹。镜头跟着缩放，让每个状态都占满画面。最后一帧和第一帧一样，可以无缝循环。 禁止：弹跳缓动、粒子爆炸、发光、组件上的渐变、粗细不统一的图标、没有动作的空档、任何看起来像模板的东西。 </direction> <structure> 120 BPM，7 个小节，每一拍都有事情发生。 按钮 → 加载 → 对勾 → 灵动岛 → 音乐播放器（播放和暂停图标互相变形）→ 拖动进度条 → 变成音量滑块，拖过最大值时被拉长 → 开关踩着节拍翻转 → 开关的圆点变成标签页的指示条 → 标签页展开成一张自己画出来的图表，悬停时出现提示 → 收成 ⌘K 命令面板 → 输入筛选 → 回车 → 通知 → 回到按钮。 </structure> <build> 1. 一个 HTML 文件，1440×1440。所有样式都在 seek(t) 里由时间算出来：不用 CSS 过渡，不用计时器，帧和帧之间不保存状态。 2. 弹簧用公式直接算。一个值要多次改变目标时，把每一次变化的弹簧叠加起来，这样它始终只由时间决定。 3. 标签页指示条的左右两条边用两个不同的弹簧，前沿先走、后沿后跟，移动的时候会被拉长。开关的圆点也这样做。 4. 拖拽要像真的在拖：光标按住时，数值由光标的位置算出来；松手后从当前位置弹回去。 5. 用 numpy 分析音乐，找出节拍网格，从重拍开始。每一个界面音效都放在对应动作的那一拍上。 6. 用 Playwright 渲染，每帧截 4 张，用 ffmpeg 混合出运动模糊，输出 60 帧的视频。 7. 渲整片之前，每一拍先渲一帧检查，偏离节拍、太挤、看不清的地方先修掉。 </build> <gotchas> 被镜头缩放的元素、会渲染文字的元素，都不要加 will-change，否则文字会糊。在变形容器里切换的文字，要有自己的进场和出场时间，不然新旧文字会叠在一起。最后一帧要和第一帧完全一样，包括光标的位置和速度，否则循环的时候会卡一下。 </gotchas> <start> 先问我要输入的内容，写任何代码之前，先把状态列表排在节拍网格上给我看。 </start>

复盘要点：<build>第 1、2 条非常关键——所有样式都由时间 t 算出、弹簧可叠加，保证了“任意时间点画面唯一确定”，这正是逐帧渲染稳定出片的前提。<gotchas>里关于will-change导致文字发糊的提醒，则是典型的“踩过坑才知道”的经验。

案例三：游戏史短片——Canvas、着色器、3D 全混搭

由创作者 @prasenx 在 Cursor 中让 Claude 完成，是一条 2 分钟的电子游戏发展史。从 1958 年的《双人网球》到街机、像素平台跳跃、第一人称射击、3D 城堡、方块世界，再到 VR，节奏与多重画风切换都非常流畅。

它混合了多种代码：

• Canvas 2D：绘制像素年代的游戏画面
• WebGL 着色器：老电视的弧面、扫描线和发光
• Three.js：1993 年以后的走廊、城堡、方块世界
• Python 合成配乐：画面跟着音乐剪辑

为了直观感受着色器的作用，可以对比同一段像素画面在加着色器前后的差异——左边只有 Canvas，右边叠加了着色器：

同样 3 秒、90 帧，纯 Canvas 版本渲染耗时 7 秒，加上着色器后是 48 秒。同一套像素画面，叠加不同代码就能获得截然不同的质感，代价则是渲染时间成倍增长——长片制作时需要提前规划好渲染预算。

最有意思的是，这条片子的提示词只有短短几行：

做一条 2 分钟的电影感视频，讲电子游戏的历史，要史诗、要动人，像一部纪录片预告片，全力以赴。 配乐你自己写，完全用代码合成，不要采样，不要音频文件，不要虚拟乐器。画面要跟着音乐剪。 1920x1080，60 帧。不要下载任何图片或素材，每一帧都用代码生成。最后把画面和音乐混在一起，渲染成 MP4，保存到【你指定的位置】。

复盘要点：只描述想要的效果和硬约束（分辨率、帧率、禁止外部素材），其余全部交给模型决策。这类“少约束”提示词适合题材本身就有清晰脉络的内容（如历史时间线），模型自带的知识足以撑起叙事。

案例四：甜酷舞蹈——视频模型出人物，代码搭场景

前三个案例里画面全由代码绘制，但代码有个天然短板：写实人物、复杂舞蹈动作很难画好。这时可以换一种分工——人物交给视频模型，场景与动效交给代码。

创作者 @Gorden_Sun 分享的这条作品就是典型：原始素材是 Grok 生成的 15 秒视频，一个女孩在纯绿色背景前跳舞，除了人物什么都没有；成片同样 15 秒，画面却完全变了样。

拆开来看，Opus 主要完成了三件事：

• 抠像：按颜色去掉绿幕，只保留人物
• 场景与动效：背景、大字、胶带、分屏、3D 环绕文字，全部由网页代码绘制
• 节奏：背景和大字跟着音乐节拍切换，人物片段本身不做改动

同样的思路还可以进一步延伸：在 Claude 中通过 MCP 接入角色动画生成工具，由模型调用工具生成角色动作，其余部分仍由代码动效完成。这种“模型调度工具 + 代码收尾”的混合工作流，是目前兼顾写实感与可控性的最优解之一。

案例五：AI 发展史——用 Remotion 讲一个完整故事

由创作者 @kimmonismus 分享的 3 分钟 AI 发展史短片，在 Claude Code 中用 Remotion 完成：每一张画面都是 SVG 和 Canvas 绘制的，配音使用开源语音模型，配乐由 Python 合成。

它的提示词写得极其细致，是“长片工程化”的绝佳范本，你可以替换主题和场景复用：

你是一位动态设计师兼创意总监，正在制作一部 3 分钟的动画短片，完全用代码搭建，最后渲染成 MP4。 这部片子 标题：「Attention Is All You Need → AGI」 讲的是 2017 年的一篇论文，怎样一步一步引出了大语言模型、推理、会用工具的 AI 智能体，以及 AGI 这个还没有答案的问题。它应该像一篇有电影感的影像随笔，而不是幻灯片或者时间线信息图。可以想象成 Kurzgesagt 遇上皮克斯电影的开场：有情绪、聪明、精准。 技术设置 用 Remotion（React）。新建一个项目，1920×1080，30fps，时长正好 180 秒（5400 帧）。 每个场景一个 composition，在一个主 composition 里按顺序排好。 不用任何外部图片素材或现成视频：所有东西都用 SVG、Canvas、CSS 和代码生成的粒子、形状来画。可以用 Google Fonts。 动手之前，先写一份 STORYBOARD.md，写清楚每个场景的时间、画面、屏幕上的文字和转场。然后一个场景一个场景地做。 每做完一个场景，渲染 3–4 张静帧（npx remotion still），用挑剔的眼光看一遍。先修好排版、重叠、可读性和节奏，再做下一个。 最后用 npx remotion render 输出到 out/film.mp4。给音乐留一个可选的 <Audio> 位置（public/music.mp3），我之后再加；如果文件不存在，就渲染无声版。 叙事主线 / 贯穿全片的母题 主角是一个会发光的词元，也就是单词「the」，它穿过每一个时代。2017 年，它是一个孤独的光点，突然通过注意力连线「看见」了所有其他单词。随着时间推移，它有了声音、感官（多模态）、推理能力、双手（工具），最后，有了一个问题。 场景（时间是大概的，你可以重新分配） 0:00–0:15 冷开场。一片黑暗。单词像星星一样散落，彼此不相连。RNN 式的逐个处理：单词一个接一个亮起，慢慢忘掉前面的。 0:15–0:35 2017 年 6 月，「Attention Is All You Need」（Vaswani 等人，Google）。每个单词同时连到其他所有单词。注意力连线绽放成一张网。论文标题像排版印刷一样出现。 0:35–0:55 2018–2020：大语言模型崛起，GPT-1、BERT、GPT-2、GPT-3。规模定律：这张网指数级增长，镜头往后拉。模型开始补全句子，流畅得有点诡异。 0:55–1:20 2022：指令微调和 RLHF，然后是 ChatGPT（2022 年 11 月 30 日）。词元有了一个聊天气泡。用户数计数器爆炸式增长。世界开始跟它对话。 1:20–1:40 2023：多模态。图像、音频和代码从四面八方流进同一张网，词元有了「感官」。每一种模态都变成词元，流过同一个注意力机制。 1:40–2:05 2024–2025：推理模型。一条看得见的思维链展开，分叉、剪枝、回溯。模型「先想再说」，时间变慢。 2:05–2:30 工具使用和智能体。词元长出了双手：它调用搜索、运行代码、打开文件，调度子智能体。很多条线程同时工作，屏幕变成一个忙碌又漂亮的工作室。 2:30–2:50 走向 AGI。所有母题汇合。2017 年的那张网重新出现，但现在是星球尺度。保持开放：不要乌托邦，也不要末日。屏幕上写：「Attention was all we needed. What comes next is up to us.」（如果你能写得更好，就改进这句话。） 2:50–3:00 回到黑暗中一个发光的词元。片名卡，结束。 制作规则 准确性很重要：年份、人名、论文标题都要正确。对某个具体事实没把握时，宁可不写也不要猜，并把所有不确定的说法列在 NOTES.md 里。 文字排版：屏幕上同时最多约 8 个单词，每段文字停留时间要够读完（至少 2.5 秒）。用一种展示字体，再用一种等宽字体表示「模型输出」。 动效：用弹簧和缓动曲线，不要线性运动。场景之间的转场要从内容里长出来（网络变形、镜头穿过一个节点），不用通用的淡入淡出。 颜色：深色背景，加一个暖色强调色，这个强调色随着时代慢慢变化。 细节和彩蛋留给认真看的人（比如真实的论文片段、小小的界面细节、看起来可信的模型输出），像高水准的动态设计作品那样。 节奏：密集和平静的时刻交替，给推理那一场和 AGI 那一拍留出呼吸的空间。 全程自主完成整条流程。做完以后，告诉我 MP4 的路径、一段简短的创作决策总结，以及 NOTES.md。

复盘要点：这份提示词有三个值得学习的设计——用一个贯穿全片的母题（发光的词元“the”）串起叙事；要求先写 STORYBOARD.md、逐场景渲静帧自检；以及对事实准确性的硬约束（不确定就写进 NOTES.md）。这几点对企业宣传片、产品讲解片同样适用。

提示词怎么写，才能稳定出片

别被“一句话出片”带偏

最近刷屏最多的，其实是另一类视频：15 秒内镜头快切、画面炫酷、音乐音效齐全。它的提示词通常只有一句：

做一条 15 秒的动态图形视频，展示你是一个多么厉害的动效设计师，就像是你放进简历里的作品集。全力以赴。

用来测试模型上限很合适，但几乎没有可控性。如果你要做的是自媒体内容、产品宣传、或者有情绪有故事的片子，真正需要的是一个稳定、可复用、能产出预期效果的提示词框架。

用 XML 标签组织提示词

对比效果较好的一批作品会发现一个共同点：它们的提示词大多不用 Markdown 层级，而是用XML 标签分块。Anthropic 官方文档也有相关建议：当提示词中同时包含要求、背景资料、示例等不同类型的内容时，用 XML 标签分别包裹，能让 Claude 更准确地区分各部分的含义。

推荐的七块结构如下：

最容易被忽视的一环：禁止清单

<direction>里的禁止清单对效果影响最大，却最常被忽略：

<direction> 这里写画面风格，还有明确不要的东西 </direction>

没有约束时，模型会回落到它熟悉的默认风格：深色背景、居中大字、所有元素淡入淡出。想要差异化效果，就必须把“不要什么”写具体，例如：不要弹跳缓动、不要粒子爆炸、不要发光、不要组件渐变、不要任何看起来像模板的东西。

通用提示词模板

下面这份模板整合了上述七块结构，替换【】中的内容即可直接使用：

<role> 你是一位动态设计师，也是一位创意程序员，擅长用代码做出有设计感的视频。 </role> <inputs> 开工前先问我这几件事，我没给的不要自己编： 1. 主题，以及看完以后希望观众记住的一句话：【你的主题】 2. 时长和画幅：【30】秒，【1920×1080 / 1080×1920 / 1080×1080】，【30 / 60】帧 3. 风格：【像素 / 扁平插画 / 界面动效 / 彩铅手绘 / 复古电视 / 3D】，有参考视频或截图就发给你 4. 配色和字体：【主色 #颜色】，【字体】 5. 声音：【我提供的音乐文件 / 用代码合成配乐】，要不要配音：【要 / 不要】 </inputs> <direction> 整片只用一套风格、一套配色，同一个角色或元素在每个镜头里的样子都要一致。 每个镜头只讲一件事，画面上的字少而大，每段文字至少停留 2.5 秒。 动画用缓动或弹簧，不用匀速运动。转场从画面内容里长出来，比如一条线变成下一个场景的地平线，不用默认的淡入淡出。 镜头要跟着内容动，推近、拉远、跟随，让主体在画面里足够大。 禁止：【居中大字加渐变背景的默认风格、所有元素同时淡入、满屏小字、任何看起来像模板的东西，按你的情况补充】 </direction> <structure> 先写分镜表，每个镜头写清楚： 镜头 [N]｜[开始–结束秒] 画面：构图、元素、文字 动作：进场、主要动作、出场 镜头：推、拉、跟随还是固定 声音：这一段的音乐和音效 转场：怎么过渡到下一个镜头 如果有音乐，先分析节拍，镜头切换和关键动作都落在拍子上。 </structure> <build> 1. 画面用【Canvas 2D / HTML+CSS+SVG / WebGL 着色器 / Three.js / Remotion / HyperFrames】来做，不用外部图片和素材。 2. 页面暴露 window.render(t)，画出第 t 秒。所有画面只由 t 算出来，随机数带固定种子，不用计时器，帧和帧之间不保存状态。 3. 用 Playwright 逐帧调用 render(t) 并截图，再用 ffmpeg 合成 MP4。 4. 配乐和音效用 Python（numpy、scipy）从零合成，每个音效放在画面动作发生的那一帧上；有配音的话，整段合成，不要一句一句拼。 5. 每做完一个镜头，先渲 3 张静帧自己检查：文字有没有溢出、元素有没有重叠、画面够不够满，修好了再做下一个。 </build> <gotchas> - 字体加载完再开始截图，不然前几帧会用默认字体。 - 用了 WebGL 的话，先渲一帧确认着色器真的生效了，再渲整片。 - 你听不到声音，所以要把音频的波形画成图自己检查，确认没有爆音。 </gotchas> <start> 先问我 inputs 里的问题，然后给我分镜表，等我确认。再渲 3 张关键帧让我看风格，确认后再渲整片。 </start>

让出片更稳的三个技巧

技巧一：调高思考强度

如果效果不理想，先别急着改提示词，把模型的思考强度（effort/thinking）调高往往立竿见影，尤其是分镜规划和复杂动效的推理环节。

技巧二：用 CLAUDE.md 沉淀项目规矩

Claude Code 每次开工都会先读取项目目录下的CLAUDE.md。把做视频的规矩写进去，这个目录里做的每一条视频都会自动遵守，无需在每次提示词里重复：

# 视频制作规矩 ## 渲染 - 每一条视频都只由时间决定：window.render(t) 画出第 t 秒。 - 不用 CSS 动画、不用计时器，帧和帧之间不保存状态，随机数带固定种子。 ## 画面 - 禁用的默认风格：居中大字加渐变背景、所有元素一起淡入、角落里的标签和边框、界面上的发光。 - 一种标题字体、一种正文字体，除非我另外说明，只用一个强调色。 - 每 2–4 秒画面上要有新东西出现。 ## 声音 - 没有给音乐的话，配乐和音效都用代码合成，放在节拍上，响度 -14 LUFS。 ## 给我看之前 - 先出抽帧图，自己打分，把最严重的 3 个问题改掉，每一项都到 8 分以上再给我看。

对团队来说，这份文件相当于“视频品牌规范”，可以纳入版本管理，让不同成员产出的视频风格保持一致。

技巧三：让模型以“挑剔导演”的视角自查

模型看不了视频，但能看图。让它先抽帧，再以严格的动效导演视角打分、找问题、迭代：

检查视频，先完成抽帧处理，然后站在严格的动效导演视角，专门挑毛病，别替自己说好话。 按下面几项各打 1–10 分：前 2 秒抓不抓人、缩到手机屏幕大小还看不看得清、动作是否自然（有没有匀速滑动、有没有卡住不动的空拍）、画面变化是否足够（每 2–4 秒要有新东西）、构图、声音和画面是否对得上。 列出最严重的 3 个问题，标上时间点。重点找这几类：切换时文字叠在一起、居中大字加渐变背景的默认画面、角落里多余的标签和边框、缩放以后变糊的字、循环接缝处的卡顿。 列出以后重新渲染有问题的部分，再出一张新的抽帧图和新的分数。 重复这个过程，直到每一项都在 8 分以上。

推荐工作流：把流程固化成 Skill

如果连提示词都不想每次复制，可以把上述流程封装成一个 Agent Skill，让 Claude Code 在你说“做个视频”时自动按流程执行。一个成熟的视频 Skill 通常包含四个阶段：

1. 需求澄清：接受一个想法、一篇文章、一个产品网址，甚至一条参考视频（先抽帧分析镜头与节奏）；如果提供了音乐，先测出节拍再排镜头
2. 方案比选：给出三个刻意拉开差异的方案，每个写清风格、技术路线、逐镜头概要、声音方案和预计渲染时长
3. 预览确认：每个方案先出一张关键帧，动效型方案出几秒小样，让人看图挑选而不是凭文字想象
4. 执行与自检：把确认的方案写成brief.md（即上文七块结构的提示词），逐镜头制作并静帧自检，整片完成后按评分项打分，每项达到 8 分以上才交付

这种“先澄清、再比选、后执行、全程自检”的模式，本质上是把人类导演的工作方法编码给了 AI，也是目前让代码视频从“开盲盒”走向“可交付”的关键。

延伸资源

想继续深挖，可以关注以下开源仓库：

• athemeroy/awesome-opus-5-5-videos：收录 1000 多条 Opus 5.5 制作的视频，每条都标注了制作方式
• guanmo-ai/awesome-ai-motion：中文 AI 动效案例合集，附原始提示词和出处
• JohnHeibel/ClaudeAnimationBase：基于 p5.js 和 p5.brush 的手绘卡通动画起步模板
• JohnHeibel/PDoomVideo：一支完整 MV 的全部源码，适合研究长片如何组织代码

总结

回顾全文，核心结论只有三条：

1. Opus 5.5 不生成视频，它写出画视频的代码，再由浏览器逐帧截图、FFmpeg 合成。正因为画面来自代码，文字准确、时间精确、改动可控。
2. 技术选型决定画面风格：2D 用 Canvas，界面动效用 HTML/CSS/SVG，质感靠着色器，空间运镜靠 Three.js，手绘靠 p5.js，长片工程化选 Remotion/HyperFrames，数学讲解选 Manim；写实人物则交给视频模型，与代码混合使用。
3. 稳定出片靠结构化提示词：XML 七块框架 + 具体的禁止清单 + CLAUDE.md 项目规矩 + 抽帧自检循环，把“一句话开盲盒”变成可复用、可交付的生产流程。

对于产品团队而言，这意味着功能演示、版本发布、数据可视化这类视频，正在从“外包制作”变成“工程师写提示词就能产出”的日常工作。现在入局，正是积累自己那套提示词与规范资产的好时机。

本文为 JeecgBoot AI 专题研究系列文章。