代码绘制影片
本技能生成一个 HTML 页面，该页面从 (f, seed) 绘制帧 f，并同步计算音轨，最终输出 MP4。影片的内容、外观和运动方式由你决定。本技能包含三个核心要素：你首先写下的意图、你用于评判的审美标准，以及验证成品是否实现意图的检查工具。
设置
在新机器上运行 bash assets/doctor.sh 一次。它会检查 Chrome（或 CHROME 路径）、Node 22 或更高版本、ffmpeg，以及带 numpy 和 Pillow 的 Python 3，并说明如何修复缺失的部分。
1. 撰写意图
将 assets/intent.md 复制到页面旁边，命名为 piece.intent.md。首先填写核心信息和感受：观众观看一次后能说出的要点，以及影片结束时的感受。其余部分等到选定草图后再填写，因为先写好的卡片固定了想法，后续的草图只能改变其外观。这就是分类账影片的三个草图变成同一想法三种外观的方式。
选定草图后，完成卡片。其“评判”部分说明了我们遵循的内容、只有该主题才能提供的观点、外观及其原因、是否以及如何出现文字、它学习的图库影片，以及结尾如何呼应开头。其“衡量”部分给出了时长、节奏、声音和节拍。此后的每一个选择都服务于这张卡片。当作品显示卡片有误时，修改卡片并说明原因。
2. 根据图库评判
reference/gallery.md 包含 29 部 Claude 用代码绘制每一帧的影片，涵盖音乐、解说、故事和实验，以及这些受人喜爱的影片的共同点：
- 有一个贯穿每个场景的事物。
- 每一帧画面都传递信息，而不仅仅是为了变化。
- 影片在开始的地方结束，但已改变。
- 有东西显示我们身处何处：仪表盘、计数器、时钟。
- 外观是一种真实的材质，带着其瑕疵使用，并为该故事而选择。
- 声音和画面浑然一体。
- 文字稀少、醒目，并且是画面世界的一部分。
- 具有观点和温度。
- 和想法一样简短。
这些是判断标准，而非规则。可以在卡片说明原因时打破其中一条。reference/taste.md 包含了该技能作者 Kartik 在构建过程中所进行的修正：这是一个起始品味，并非你的最终标准。当它们与图库不符时，说明差异并询问影片面向的对象。
3. 验证结果
在交付说明中报告所有三个层面。
- 缺陷会阻止构建。 页面能解析、运行并每次都绘制相同的帧。没有帧闪烁或跳跃出剪辑点。混音电平在 -28 至 -8 dBFS 之间且不削波。
check.py、seamcheck.py、verify.py和build.sh强制执行这些检查。 - 意图是可衡量的。
python3 assets/verify.py piece.mp4检查意图卡片的“衡量”部分。任何不符都意味着影片或卡片有误。修复其中一项并说明修复的是哪一项。 - 观看测试由你负责。 即使每行检查都通过了两次，结果可能仍然糟糕。回答
verify.py打印的五个问题：像新人一样复述故事、说出每一帧的内容、关掉声音观看、与参考影片并排观看、评判最后一帧。
lookcheck.py 和 soundcheck.py 从不阻止构建。它们描述节奏、色彩、同步和节拍，你需要对照卡片来解读它们。
工作流程
每一步都有报告行，因此不能在不说明情况的情况下勾选完成。
- 如果对方分享了参考素材，先拆解它。 剪辑、图片或 HTML 页面均可。阅读
reference/references.md。报告其形式、作用、哪些差距可以弥合，以及你采用了什么、保留了什么。 - 写下核心信息和感受。 仅这两行。报告它们。
- 完整观看两部或三部最接近的图库影片。 报告你从每部影片中获取了什么，以及你不会复制什么。
- 用静态图草拟三个不同的故事。 每个故事都是不同的事件，用一句话描述，而不是同一个想法的三种外观。至少有一个应该是观众可以沉浸其中的世界，而不是图表。使用引擎和印刷效果以成品外观绘制每个草图，绝不能是线框图。草图可以跳过缺陷检查，但不能跳过工艺。
assets/sketchcheck.py会拒绝平淡的草图，以及在提供已批准帧时检测出的复制品（使用--refs）。将草图展示给目标受众，让他们选择或组合。报告每个故事的情节。然后完成意图卡片。 - 撰写文字（如果有的话）。 在编写任何代码之前，用同一语调写一段话，保存为
piece.chain.txt。阅读reference/story.md中的“读起来像人声的文字”。报告这段文字及其连接词比例。 - 规划影片。 按顺序列出节拍点、每帧画面在一句话中的含义、显示观众位置的内容，以及结尾。报告计划。这是一个计划，而非合同。
- 构建页面。 从
assets/engine.html开始，或者按照下面的页面契约编写自己的页面。在连接场景之前单独检查每个场景。报告你在观看后重新绘制的内容。 - 制作声音。 首先在
TUNE和SECTIONS中编写旋律，然后为故事的转折点编写四到八个重音。或者使用你自己的piece.score.py、页面生成的piece.wav，或静音。报告score.py打印的乐谱，以及声音为何符合意图卡片。 - 构建。
assets/build.sh piece.html out.mp4。在其前面加上ROUGH=1可以生成用于早期展示的草稿。报告相关数据。 - 验证。 所有三个层面。逐一报告。
- 作为新文件交付。 切勿覆盖上次的构建结果。
一部影片中的两种外观
一部影片可以在两种渲染器之间切换，例如孔版印刷场景和墨水分类账。为第二种渲染器提供其独立的作用域，使用 { raw: (ctx, u, f, size) => {} } 选项绘制其段落，并将剪辑点放入 EXTRA_CUTS 中。assets/examples/parcel42-day/ 正是这样做的。它也是整个工作流程的典型示例，因此请阅读其 README，并关注其方法，而不是外观。
页面契约
任何满足以下条件的页面都可以构建和验证。它设置 const FPS = n。在 ?capture=1 模式下，它将 window.__frames 设置为帧数，将 window.__render(f) 设置为每次以相同方式绘制帧 f，然后将标题设置为 capture ready N。其脚本的第一行将任何错误写入 document.title，因此崩溃不会表现为空白页面。
基于引擎构建的页面还可以使用 ?play=1、?f=N、?grid=1、?scene=id 和 ?cuts=1，并且 score.py 从 plate() 读取其段落。
文件列表
| 文件 | 说明 |
|---|---|
assets/intent.md | 意图卡片模板 |
assets/engine.html | 可选起始点：帧网格、段落和镜头、场景库、移动算法、孔版印刷机、手写笔、三个演示世界 |
assets/score.py | 基于页面节拍网格的计算分数，包含每段的调性、和声、音色、摇摆和结尾 |
assets/build.sh | 门控、捕获、衔接、分数、编码、测量、验证，一站式命令 |
assets/verify.py | 将影片与其意图卡片进行对比，同时检查响度和削波，然后询问观看测试问题 |
assets/check.py | 页面门控：解析、错误处理、模式、网格、渲染 |
assets/seamcheck.py | 闪烁、跳跃出剪辑点、运动内的抖动、漂移的固定锚点 |
assets/sketchcheck.py | 故事草图检查：不平淡、不是已批准帧的复制品（--refs）、不涉及禁止的世界（--world）、无残留存根 |
assets/lookcheck.py、assets/soundcheck.py | 画面和声音的测量指标，需对照卡片和图库解读 |
assets/printcheck.py | 判断帧看起来是打印的还是计算生成的，与参考图像对比。将宽幅帧中心裁剪为正方形 |
assets/refpage.mjs | 拆解作为参考的 HTML 页面：其调色板、标记、图层和音频音色（在绘制它们时），以及一个 MP4 文件，以便剪辑检查也能对其生效 |
assets/capture.mjs | 通过 CDP 进行帧捕获。由 build.sh 调用 |
assets/capture-range.mjs、assets/capture-par.sh | 以任意宽度和高度捕获，支持多 Chrome 实例同时运行。适用于 16:9 及超过一分钟的影片 |
assets/doctor.sh | 检查机器是否就绪：Chrome、Node 22+、ffmpeg、numpy、Pillow |
assets/examples/parcel42-day/ | 已批准影片的源代码，附带说明构建过程的 README |
assets/example-print-still.html | 孔版印刷效果的模型 |
何时阅读什么
每次调用读取一个完整文件。在输出限制下，每次 Codex 运行会读取三到四个技能文件。它会在不提示的情况下丢失约 13000 token 的中间读取内容，包括 gallery.md 的一半。如果读取提示 token 被截断，则单独重新读取该文件。
- 在撰写意图卡片之前，以及展示任何内容之前，阅读
reference/gallery.md。然后阅读reference/taste.md。 - 当对方分享了参考剪辑、图片或 HTML 页面时，阅读
reference/references.md。 - 规划故事或撰写说明文字时，阅读
reference/story.md。 - 画面和声音共享节拍网格时，阅读
reference/time.md。 - 规划转场或镜头运动时，阅读
reference/moves.md。 - 外观是孔版印刷或任何打印效果时，先阅读
reference/press.md，然后在调整纹理前阅读reference/surface.md。 - 添加手写效果时，阅读
reference/hand.md。 - 制作声音时，阅读
reference/sound.md。 - 构建时，阅读
reference/export.md。 - 影片时长超过一分钟时，阅读
reference/export.md的末尾部分。 - 影片是面向 YouTube 的旁白课程时，使用
lesson-film技能，该技能基于本技能构建。 - 陷阱，按阶段列出至今为止本技能出现的所有问题。在填写卡片和绘制草图之前，以及展示任何内容之前，阅读
reference/traps-story.md。在构建页面之前，阅读reference/traps-page.md。规划移动、镜头或节拍网格时，阅读reference/traps-motion.md。外观为打印效果时，阅读reference/traps-print.md。制作声音时，阅读reference/traps-sound.md。首次完整构建之前，阅读reference/traps-build.md。
修改本技能
陈述意图和判断标准，并对照意图检查结果。切勿将一部影片的风格变成规则：这会让每个作品都变成一件参考作品的复制品。任何经验教训都应放入其专属的文件中，其他每个文件都应在同一行中指向该文件。新增的已批准影片应放入图库的“我们的作品”部分，并说明其为何有效。
借鉴与致谢
平面填充加裁剪边缘效果的模型，以及 wob、crayon、hatch、grain、dotScreen 和 scribble 的形状，来自 alesha-pro 的 hand-drawn-canvas-animation 技能（MIT 协议，github.com/alesha-pro/tools）。其纹理是修饰而非渐变，以及形状的填充和轮廓绝不能重合的规则，是解锁本技能打印外观的关键。
优秀范例
一个新人观看一次后能复述故事，且复述内容与核心信息相符。联系表中的每一帧都是一幅有意义的画面。它可以放在图库影片旁边而不显得是复制品。最后一帧完美结尾。零缺陷，卡片匹配，并且你无论如何都会观看它。