1实现原理 · 为什么它能做到
核心是「把整部短片压成一个自包含 HTML」：画面每个像素由代码算，无图片、无字体文件、无库；再由无头浏览器逐帧 seek 成 MP4——确定性来自「每帧是帧号的纯函数」。
skills/javascript-animation/SKILL.md
Make short animated films where every pixel is computed: no images, no fonts to load, no libraries. One HTML file holds the whole piece; a headless browser seeks it frame by frame into an MP4.
这里在做什么：zero-asset 契约同时决定了交付形态（单文件）、验证方式（可 seek）与渲染管线（逐帧截图 → ffmpeg）。
默认流程刻意「不停下来问」：推断形式/时长/画幅后直接跑完，只在交付时说明还能改什么；只有完全没有主题时才先问。
skills/javascript-animation/SKILL.md
Run straight through. Pick sensible defaults and mention alternatives at delivery. Ask *before* starting only if there is no subject at all (e.g. "make an animation", nothing else).
这里在做什么：把交互成本压到最低；代价是验收靠自查脚本与两遍人眼复核补上。
画面与声音由同一份数据驱动：节拍网格、分镜表与调度先写成页面里的 BPM/SECTIONS/SHOTS/EVENTS，场景、相机与配乐都读它，于是声画对齐是结构性的。
skills/javascript-animation/SKILL.md
These go into the page as `BPM`, `SECTIONS`, `SHOTS`, `EVENTS`: the scenes, camera and soundtrack all read them, so picture and sound line up by construction.
这里在做什么：把「分镜」从笔记变成可执行数据；starter.html 的骨架已是 storyboard-driven。
画法纪律针对手绘动画的典型失败模式：纯帧号函数（禁 rAF 状态/CSS 动画/累积物理）、boil 每 4 帧换种子而非每帧抖、身体用椭圆与圆角矩形、按最能读出姿势的角度取景、显式规定前后绘制顺序。
skills/javascript-animation/SKILL.md
- **Boil, don't jitter.** Change the wobble seed every 4 frames (`BOIL`), not every frame. Every frame reads as noise; ~7.5 changes a second reads as hand-drawn.
这里在做什么：这些是「代码画画为什么看起来业余」的根因清单，每条对着一个具体症状。
自查是脚本门禁 + 两遍人眼：先 asset-audit / layout-check / sync-check，再走 storyboard conformance 与 director pass（2fps 接触表打分）。
skills/javascript-animation/references/qc.md
Scripts first: `asset-audit` CLEAN, `layout-check` CLEAN, `sync-check` passing (a remaining STARTLE is acceptable only on a deliberate stinger you can name). Then the two passes by eye below.
这里在做什么：qc.md 把自查拆成可勾选清单（帧、形体、分镜符合度、调度、运动、事实与资产）。
文本碰撞由工具判定而非靠看：starter 的 claim()/placeFree() 登记每个文本框与关键物体的包围盒，layout-check 逐采样帧列出重叠与发生时刻。
skills/javascript-animation/SKILL.md
- **Text never collides.** Claim every text box and key object; `layout-check` must print CLEAN. A caption overlapping a monitor edge or a face looks careless, and eyes on a contact sheet miss it.
这里在做什么：qc.md 给了动机证据（一个 sent 标签压在显示器边缘，两轮人眼都没看出来），所以改用程序化判据。
真人照片被限制在「本地看」：按特征提取法把人物画成风格化角色，明确要求从不上传、不嵌入、不放进任何发布物——这是本 skill 唯一的隐私条款，且是硬指令。
skills/javascript-animation/SKILL.md
Photos stay local: never upload them or put them in anything published.
这里在做什么：照片只作为「看得见」的参考输入（视觉模型看图提取特征），不进产物、不出网；character.md 把同一条写成第 6 步。
2核心能力
01零资产短片生成：故事/解说/诗/循环/绘本等形式的 30–45s 默认时长、1080×1080 默认画幅
02绘制库（starter.html）：水墨/插画/版画/单线刻/文字成形的图元、标签、纸张与滤镜层、withCamera 相机、claim/placeFree 版面登记
03MP4 / 静帧 / 接触表渲染（render.mjs）：逐帧 seek 画布 → jpeg 管道 → ffmpeg H.264 yuv420p，必要时写 CUES 与离线音轨并 mux
04零资产证明（asset-audit.mjs）：静态规则扫 HTML + 实跑页面记录所有网络请求，任何加载/内嵌即 exit 1
05版面碰撞检查（layout-check.mjs）：读 window.LAYOUT，报出文本框互相重叠或压住关键物体的时间段
06角色一致性与锚点：角色函数化、暴露嘴/手等锚点供道具挂接，跨场景保持同一人；照片→特征夸张的风格化提取
07分镜/节拍/调度方法论（storyboard.md）：调性与段落形状、按形式的镜头时长表、镜头行字段、一个世界多机位、连续性与故事逻辑
08渲染自查两遍：storyboard conformance（每镜动作拍静帧对表）与 director pass（2fps 接触表评节奏/取景/死帧/声画）
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| package | playwright-core（脚本用它启动 Chrome 逐帧 seek 页面）；另需 Chrome 或 `npx playwright install chromium` |
| cli | ffmpeg（jpeg 管道编码 H.264、拼接触表、把离线渲染的 WAV 混进 MP4） |
| cli | 兄弟 skill 的同步检查：node ../soundtrack/scripts/sync-check.mjs（跨 skill 调用其 ffmpeg/ffprobe 分析） |
| network | 无执行期外部端点：交付页面的契约就是「不加载任何东西」，由 asset-audit 的静态规则 + 实跑网络记录双向证明 |
| package | Web Audio（浏览器内置的 OfflineAudioContext，用于离线渲染页面内合成的配乐；由 soundtrack 模板提供） |
4管控建议与判定依据
建议配套管控措施
面向 Agent
分级或逐次授权，建议在沙箱运行
面向管理者
审批流程、可回滚、全程审计
判定依据（文件路径与关键语句摘要）
- scripts/: 执行本地脚本或命令: node scripts/render.mjs piece.html sheet.jpg --sheet 1 / --stills 90,300,61
- 网络端点: 声明外部网络访问: 本 skill 的脚本自身不发送任何业务请求：playwright 打开的是 file:// 本地页面，ffmpeg/ffprobe 只读本地文件
- 本地工作目录: 文件读写与工件输出: <out>.mp4（全片）、<out>-<frame>.jpg（静帧）、out 指定名的接触表图（render.mjs）
审计说明： 。判级对象＝skill 自身目录：SKILL.md + 5 份 references + templates/starter.html + 3 个自带脚本（render.mjs / asset-audit.mjs / layout-check.mjs）。脚本行为全部本地：playwright-core 打开 file:// 本地页面逐帧截图、ffmpeg 编码与拼图、读 window.LAYOUT 判版面、写本地 mp4/jpg/wav 与临时目录；无网络外发、无凭证读取、无环境变量读取（全仓正则零命中）。用户照片会被读取，但文档明令只本地看、不上传不外发。注意点：① 运行前需在用户项目里 `npm i playwright-core`（必要时 `npx playwright install chromium`）——远程包与浏览器二进制属供应链接触面，版本由用户锁定；② 它调用兄弟 skill 的 ../soundtrack/scripts/sync-check.mjs（跨 skill 委派，按范例只记入 risks，不抬档）；③ AI 生成物的版权与事实准确性由用户自担（qc.md 要求「屏幕上每个事实都要有能说出来的来源」，但不做校验）。不含黄档特征（无常规网络外发）、不含橙档特征（无凭证/无素材出网/无第三方服务后端），经扫描也无关沙箱、关 TLS、绕过自动化侦测等红档行为。
5第二遍独立确认
- [ok] 脚本是否真的无网络外发（蓝档的关键） — 三个 .mjs 逐个读过：render.mjs 只 spawn ffmpeg 与 playwright 打开 file:// 页面；asset-audit.mjs 的 live check 只监听请求并打印；layout-check.mjs 只 evaluate window.draw/LAYOUT。skill 目录内无 fetch/http 调用点。
- [ok] 是否有凭证/环境变量读取 — `process.env|API_KEY|TOKEN|SECRET|Authorization` 在本仓命中仅一处：skills/soundtrack/references/ai-music.md 的 $OPENROUTER_API_KEY（属 soundtrack）。本 skill 内零命中，credential_reads 为空成立。
- [ok] 是否有更高的触发条件被漏掉（红档特征） — `sandbox|automationcontrolled|no-verify|stealth|bypass|dangerously` 全仓零命中；浏览器以默认方式启动（`chromium.launch({ channel: 'chrome' })`，无 stealth 补丁、无关 TLS/沙箱开关）。
- [ok] SKILL.md 引用的脚本与模板是否都真实存在（有无示意命令） — 四条命令逐条核对到真实文件：scripts/render.mjs、scripts/asset-audit.mjs、scripts/layout-check.mjs、templates/starter.html 均在 skill 目录内；跨 skill 的 ../soundtrack/scripts/sync-check.mjs 在同仓兄弟 skill 目录内存在。无空引用。
- [ok] 「zero-asset」是否是可执行契约而非口号 — asset-audit.mjs 有 13 条静态规则（含 data: URI、@font-face、动态 import、base64 大块）与一次实跑网络记录，命中即 exit 1；qc.md 把 'asset-audit CLEAN' 列为交付前第一道门禁。契约可执行。
- [ok] 「照片只本地」的隐私声明是否两处一致且可定位 — SKILL.md 触发条件表内 'Photos stay local: never upload them or put them in anything published.'；character.md 第 6 步 'Photos are for looking at locally. Never upload them, embed them, or put them in anything published.' 两处同口径，无矛盾。
- [ok] 「每帧是帧号的纯函数」是否与 starter/render 实现相符 — starter.html 顶部注释写死契约（不许 Math.random/Date，用 rng(seed)/hash2，任意帧可单独渲染），render.mjs 只调用 window.draw(f) 取 dataURL、不做时间推进；两侧一致，声明属实。
6结论
适合： 适合「零素材、纯代码生成」的短片：手绘风动画、代码绘制的解说/故事/诗/循环、把用户照片变成风格化绘本（照片不出本地），以及需要可 seek、可复现、可逐帧验收的渲染流程；也适合把「分镜→节拍→声画对齐→自查」当作可复用工程流程的团队。交付为单文件 HTML + MP4，HTML 可直接在浏览器播放（点击起音）。
不适合： 不适合：① 需要真实素材（实拍、图片、字体排版）的作品——契约就是零资产，加载任何东西都会被 asset-audit 判不合格；② 数据驱动图表（chart-animation）、纯文字运动（kinetic-typography）、3D/WebGL（webgl-animation-skills）；③ 无法安装 playwright-core/浏览器或没有 ffmpeg 的环境；④ 使用不具备视觉能力的模型却要求「已做视觉验收」的场景；⑤ 期望用静帧完全替代真机动态观感的验收（qc.md 以接触表/静帧为主，动态观感仍需自看）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload javascript-animation.tar.gz
sha256:
Option B · Copy Guide for Agentcf575d5199b6a4ed…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit deb46e0eff.