JeecgBoot AI专题研究| 从代码选型到案例复盘再到 XML 提示词模板一份让 AI 稳定出片的实战指南写在前面时间线被 AI 视频刷屏之后Claude Opus 5.5 发布后的一周里技术圈的信息流几乎被各种 AI 视频占满像素动画、界面动效、游戏史短片、AI 发展史纪录片……每一条都精细得不像“一句话做出来的”。热闹之下最常见的问题有三个这些视频到底是怎么做出来的不同风格背后分别用了什么技术我自己写提示词怎样才能稳定做出想要的效果而不是开盲盒本文就围绕这三个问题展开先讲清原理与技术选型再拆解 5 个风格迥异的社区案例最后给出一套可直接复用的提示词框架和工作流。即便你用的是其他大模型这套方法论同样适用只是最终效果会受模型的代码能力影响。一句话讲清原理模型不生成视频它生成“画视频的代码”很多人以为 Claude 已经能直接生成视频其实不能。Opus 5.5 能读文字和图片但输出只有文字这和 Seedance、可灵这类视频生成模型是两回事。画面是从代码来的。可以把它类比成小时候玩的翻页动画书每页画一张图快速翻过就动了起来。代码视频的流程如出一辙模型写一个网页网页里有一个函数告诉它“现在是第几秒”它就画出这一秒的画面再用一个程序按每秒 24 张或 60 张的速度把每一帧截图下来最后把几千张截图拼成一个 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. ManimPython 动画引擎Manim 最初是 3Blue1Brown 的作者为自己的数学视频编写的开源工具。它的思路与前面不同你不必逐帧绘制只需声明画面里有哪些对象一个圆、一段文字、一条坐标轴以及它们如何变化画出、移动、变形Manim 会自动补全中间过程。优点是公式和图形极其精准缺点是整体风格偏素想要丰富质感和设计感前面几种更合适。配套工具与“代码作曲”除了上述七类绘制方案还有两个必不可少的配套工具Playwright在后台打开一个看不见的浏览器用于对代码画面逐帧截图FFmpeg专业音视频处理工具负责把画面序列、音乐、音效合成最终视频另外值得一提声音同样可以用代码合成。声音本质上就是一串波形用 Python 的 numpy、scipy 就能算出每个音符的波形鼓点、贝斯、钢琴、合成器、界面点击音都能做出来。一张表快速对照想要的效果推荐技术典型场景像素风、扁平插画、2D 动画Canvas 2D游戏角色、趣味短片界面动效、产品宣传HTML/CSS/SVGSaaS 产品演示、功能介绍复古电视、胶片、发光质感WebGL 着色器叠加 Canvas怀旧风、炫酷片头真实空间运镜、立体展示Three.js产品 360°、3D Logo、粒子云彩铅、水彩手绘感p5.js p5.brush绘本、情绪短片完整叙事、长片工程化HyperFrames / Remotion科普片、宣传片公式、图形精准演示Manim数学、算法讲解这些技术名词不用全部掌握只要记住名字和大致效果就能在提示词里准确地告诉 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 BPM7 个小节每一拍都有事情发生。 按钮 → 加载 → 对勾 → 灵动岛 → 音乐播放器播放和暂停图标互相变形→ 拖动进度条 → 变成音量滑块拖过最大值时被拉长 → 开关踩着节拍翻转 → 开关的圆点变成标签页的指示条 → 标签页展开成一张自己画出来的图表悬停时出现提示 → 收成 ⌘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.js1993 年以后的走廊、城堡、方块世界Python 合成配乐画面跟着音乐剪辑为了直观感受着色器的作用可以对比同一段像素画面在加着色器前后的差异——左边只有 Canvas右边叠加了着色器同样 3 秒、90 帧纯 Canvas 版本渲染耗时 7 秒加上着色器后是 48 秒。同一套像素画面叠加不同代码就能获得截然不同的质感代价则是渲染时间成倍增长——长片制作时需要提前规划好渲染预算。最有意思的是这条片子的提示词只有短短几行做一条 2 分钟的电影感视频讲电子游戏的历史要史诗、要动人像一部纪录片预告片全力以赴。 配乐你自己写完全用代码合成不要采样不要音频文件不要虚拟乐器。画面要跟着音乐剪。 1920x108060 帧。不要下载任何图片或素材每一帧都用代码生成。最后把画面和音乐混在一起渲染成 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 遇上皮克斯电影的开场有情绪、聪明、精准。 技术设置 用 RemotionReact。新建一个项目1920×108030fps时长正好 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然后是 ChatGPT2022 年 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 更准确地区分各部分的含义。推荐的七块结构如下标签作用role让 Claude 扮演什么角色动效设计师、科普作者还是产品导演inputs开工前先向你索取的信息主题、时长、画幅、配色、参考图、音乐没给的不许自己编direction画面风格以及明确的禁止清单structure分镜与节奏几个镜头、各多长、怎么转场、卡在哪一拍build技术路线用哪几种代码、怎么渲染、怎么配乐gotchas这种做法最容易出问题的地方start第一步做什么等你确认后再往下最容易被忽视的一环禁止清单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 / HTMLCSSSVG / WebGL 着色器 / Three.js / Remotion / HyperFrames】来做不用外部图片和素材。 2. 页面暴露 window.render(t)画出第 t 秒。所有画面只由 t 算出来随机数带固定种子不用计时器帧和帧之间不保存状态。 3. 用 Playwright 逐帧调用 render(t) 并截图再用 ffmpeg 合成 MP4。 4. 配乐和音效用 Pythonnumpy、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 通常包含四个阶段需求澄清接受一个想法、一篇文章、一个产品网址甚至一条参考视频先抽帧分析镜头与节奏如果提供了音乐先测出节拍再排镜头方案比选给出三个刻意拉开差异的方案每个写清风格、技术路线、逐镜头概要、声音方案和预计渲染时长预览确认每个方案先出一张关键帧动效型方案出几秒小样让人看图挑选而不是凭文字想象执行与自检把确认的方案写成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 的全部源码适合研究长片如何组织代码总结回顾全文核心结论只有三条Opus 5.5 不生成视频它写出画视频的代码再由浏览器逐帧截图、FFmpeg 合成。正因为画面来自代码文字准确、时间精确、改动可控。技术选型决定画面风格2D 用 Canvas界面动效用 HTML/CSS/SVG质感靠着色器空间运镜靠 Three.js手绘靠 p5.js长片工程化选 Remotion/HyperFrames数学讲解选 Manim写实人物则交给视频模型与代码混合使用。稳定出片靠结构化提示词XML 七块框架 具体的禁止清单 CLAUDE.md 项目规矩 抽帧自检循环把“一句话开盲盒”变成可复用、可交付的生产流程。对于产品团队而言这意味着功能演示、版本发布、数据可视化这类视频正在从“外包制作”变成“工程师写提示词就能产出”的日常工作。现在入局正是积累自己那套提示词与规范资产的好时机。本文为 JeecgBoot AI 专题研究系列文章。