Claude Code 复刻爆火 Riso 动画：全流程、Prompt 与 Token 消耗拆解

一段以「一个墨点向世界呼唤、涟漪层层扩散」为主题的 risograph（孔版印刷）风格动画在社交平台走红后，最常见的追问变成了一句话：「Prompt 是什么？」原作者并未公开。于是有人干脆从零写了一份约 10000 字符的创作简报（brief），丢进 Claude Code 配合 Opus 5 跑了一遍，最终产出了一段以纯代码实现的 30 秒动画。整个过程与消耗数据被完整记录下来，为「AI 编程 + 生成式创作」提供了一个罕见的可复现样本。

Claude 究竟造出了什么

最终产物是一个单独的 index.html 文件，224 KB、约 3500 行代码。它只用 Canvas 2D，不依赖任何库、图片、字体或网络请求——画面里的每一个像素、每一层纹理都是代码算出来的。

作者对技术实现的描述相当克制却信息密集。每一种「油墨」都是独立的半调（halftone）图层，各自拥有专属的网屏角度；图层之间刻意做出 1~3 像素的偏移，模拟孔版印刷特有的「套印不准」质感，再叠加纸张纹理与油墨枯竭形成的空洞。最关键的一点在架构层面：render(t) 是一个关于时间的纯函数，所有随机性都被种子化（seeded），因此动画可以跳到任意一帧而不会闪烁——这也是让无头浏览器逐帧检查成为可能的前提。

就连配乐都在同一个文件里用 WebAudio 合成：120 BPM 的 pad 音色加琶音，每次涟漪扩散时叠一声轻响。简报里规划了 28 个蒙太奇场景，最终 20 个进入成片，动画自身允许在任何转场前裁掉这些场景以控制预算。成片是通过页面内置的录制按钮捕获、再转成 MP4 的。

半调（halftone）是传统印刷中将连续色调转化为网点阵列的技术：通过改变网点的大小或密度来模拟不同深浅的颜色。孔版印刷（risograph）使用的是丝网漏版方式，每种颜色单独过一遍，因此多色印刷时各层之间的微小对位误差——即「套印不准」——是这种工艺天然的视觉特征，也是其区别于数字印刷的重要美学标记。代码中用 1~3 像素随机偏移来刻意还原这种误差，本质上是把物理工艺的「缺陷」转化为风格语言。mulberry32 是一种轻量级的伪随机数生成算法，接受一个固定的种子值后每次产生完全相同的随机序列，这让动画的「随机性」变得完全可重现——相同时间点 t 总会产生相同画面，是实现可 seek 播放和逐帧截图对比的数学基础。

流程设计：明确禁止「一次成型」

这个案例最值得借鉴的，不是 Prompt 有多华丽，而是它对 AI 工作方式的编排。简报明确告诉 Claude 不要试图一次生成全部，而是分阶段推进：

• 先搭引擎：纸张、孔版合成器、中心墨点、涟漪、时间轴、播放控件；
• 再以每批约 8 个的节奏生成场景，每批做完都要目视检查；
• 然后处理后半段的转场与后续幕；
• 最后做一次完整的巡检（inspection pass）。

人类一方的介入极其简短，基本是几句「继续做潜水镜头和前 8 个场景」「继续 Act III 的档案库」「请收尾」之类的推进指令。真正繁重的自检工作由 Claude 自己完成：它在无头浏览器里渲染帧，在每个转场附近每 0.25 秒截一张「联系表」（contact sheet）逐一比对，修复画面跳变、漂移和不可读的场景。作者提到有一个耗时约 100 毫秒的卡顿帧，最终通过性能剖析定位到一条超大路径上缺失的 closePath()——这种颗粒度的调试由模型自主完成，颇具代表性。

整个会话历时约 5 小时 40 分钟（含休息），一次完成。

「联系表」（contact sheet）是摄影暗房时代的术语，指将一卷胶卷的所有底片缩小后印在同一张相纸上，供摄影师快速预览筛选。在这里被借用来描述将动画关键时间点的截图排列在一起进行批量比对的质检方法——Claude 每隔 0.25 秒截一帧，将转场前后的画面并排输出，从而在不逐帧手动查看的情况下快速发现跳变或渲染异常。这种「缩略图阵列式」的自检方式，是将人类视觉质检习惯转化为可被 AI 执行的自动化流程的典型例子。

Token 消耗：成本来自「写—看—改」的循环

从 Claude Code 的会话日志看，这次任务的消耗数据如下：

• 输出 token 约 71.6 万（含代码、推理、工具调用）；
• 缓存输入读取约 4300 万 token，写入缓存约 150 万 token。

作者强调了一个反直觉的点：帧数本身不构成成本，因为最终帧是浏览器画出来的，而不是模型逐帧生成的。真正烧钱的是迭代——反复地写代码、截图查看、再修复。这也解释了为什么缓存输入量（4300 万）会远高于输出量：每一轮自检都要把大量已有上下文重新读入。

这组数字对评估「让 AI 做长程创作型任务」的实际开销很有参考价值：它揭示了 agent 式工作流的成本结构——不在于最终交付物的体量，而在于收敛到高质量所需的循环次数。

缓存输入（cache read）是 Claude API 的提示词缓存（Prompt Caching）机制产生的数据：当多轮对话中大量上下文重复传入时，已缓存的部分以极低的价格重新读取，而非按全价重新计费。本案例中缓存读取量（约4300万 token）远超输出量（约71.6万 token），直观反映了 agent 式工作流的结构——每一轮「截图→分析→修复」循环都要把数千行已有代码和上下文重新送入模型，但大部分内容命中缓存，实际计费远低于原始数字暗示的水平。这也意味着，如果没有提示词缓存机制，长程创作型任务的成本会高出数倍，缓存设计是此类工作流在经济上可行的关键基础设施。

这份 Prompt 值得学习的地方

抛开动画本身，这份约 10000 字符的简报堪称一份「如何给 AI 下创作任务」的范本。它没有停留在「做一个孔版风格动画」的模糊描述，而是把创作意图拆解到了可执行、可验证的层级：

叙事有明确主线。 简报把整段动画描述成一个完整的故事：孤独的墨点发出涟漪呼唤世界，钟声、狼嚎、鲸、烟火纷纷回应并被收集为记忆，但独自一人时记忆褪成蓝色；随后一个粉色墨点从画外应答，两者涟漪相遇处绽放出花朵，世界被两种油墨重新印刷，最后落在手写签名上。这种「先讲清楚要表达什么」的做法，让每个技术选择都有了归属。

给出精确的视觉系统。 简报直接列出孔版印刷的标准色值（Blue #0078BF、荧光粉 #FF48B0、靛蓝 #2E3192 等），规定「没有纯黑，暗部靠油墨叠印相乘得到」，甚至指定了半调网点的间距（4~6 px）和每种油墨的网屏角度（15°/45°/75°/0°）。

约束与自检标准写死在 Prompt 里。 比如「一个大胆的主体，0.25 秒内能作为剪影被识别」「预算不够时只能砍 Act II 的场景，绝不能砍转场和后续幕」「场景之间不许用交叉淡入（唯一例外是墨水排空效果）」。这些硬性规则大幅降低了模型跑偏的空间。

架构要求前置。 简报直接要求 render(t) 是确定性纯函数、用 mulberry32 之类的种子化 PRNG、时间轴要用数据数组驱动而非硬编码 if/else。把工程规范写进创作简报，是保证「可 seek、可逐帧检查」这一自检闭环得以成立的根本。

一个可复现的信号

需要清醒地看到：这是对创意的复刻（recreation），并非原作，作者本人也如实说明。但它的价值恰恰在于「透明」——完整公开了 Prompt、流程编排和 token 账单，让整件事从「炫技演示」变成了可被验证、可被复用的方法论。

它同时印证了当前 AI 编程的一个趋势：模型的能力上限，越来越取决于人类能否把任务拆解成「可自检的阶段」。当动画能被表达为时间的纯函数、当质量标准能被写成截图比对规则时，AI 就能在很大程度上自己完成「写—看—改」的闭环，人类只需在关键节点推一把。