零基础入门 Opus 5.5 做视频，万字拆解 AI 是如何用代码做视频的【提示词+Skill 全开源】

说明：原文中共有 8 段视频演示。本文已内嵌对应视频，可直接点击播放（视频链接取自作者在 X 上发布的原始演示）。若视频无法加载，可点击文末「原文链接」查看原文。

创建一个独立的单 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 游戏角色动画，而不是缩小了的矢量图形。

<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>

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

你是一位动态设计师兼创意总监，正在制作一部 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。

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

<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>

帮我安装这个 Skill：https://github.com/Kianzzz/xilo-opus-video

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

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