dashi-animationstyle

# dashi-animationstyle：风格动画（《大师的AI小灶》出品） 下文 `$SKILL` 指本文件所在的文件夹（装好后一般是 `~/.claude/skills/dashi-animationstyle`）。命令里的路径都要换成实际路径，带空格或中文的路径加引号。 一段口播 + 一套风格 = 一个**作品目录**，所有中间文件和成片都在里面： ``` <作品目录>/ ├── 作品.json 配置：风格、口播、字幕、分镜、输出文件名（新建作品.mjs 写好，render.mjs 从这里读默认值） ├── 口播.wav 口播（新建作品.mjs 从 m4a/mp3/wav/mov 转来） ├── 稿子.txt 口播的文字稿（可选，有就更准） ├── 字幕.json/.srt 字幕：句子、显示字幕、字级时间（字幕.mjs 生成） ├── 分镜.json/.md 分镜：镜头、关键词、固定上色的词（Claude 写） ├── timeline.js 页面用的时间线 window.TL（生成timeline.mjs 生成） ├── index.html 页面（从风格文件夹复制，Claude 按分镜改） └── <目录名>.mp4 成片 ``` 作品目录放在用户自己的项目里（例如 `./动画作品/<名字>_<风格>/`，`./` 指你当前所在的目录，一般是用户的项目文件夹），**不要放进 `$SKILL` 里**。 ## 第一次用：先确认这台电脑能出片（约 2 分钟） 1. 检查环境：`node "$SKILL/pipeline/自检.mjs"` - 报 ✗ 的照提示处理：Node 要 22 以上（`brew install node`）、ffmpeg（`brew install ffmpeg`）、Chrome（装 Google Chrome）。这些要用户自己装，你只告诉他装什么、怎么装。 - 字体报 ✗：是 macOS 按需下载的字体（兰亭黑、圆体、手札体、翩翩体），让用户打开「字体册」搜字体名点「下载」。不下也能渲，但那几个字体会退回苹方。 - whisper 报 ! 是可选的：没有也能做（走稿子 + 静音检测的后备）。 2. 让用户挑一套风格：`node "$SKILL/pipeline/新建作品.mjs" --list` 列出 7 套；每套的样子看 `$SKILL/styles/<风格>/静帧/` 里的 3 张图（用 Read 看，或 `open` 给用户看）。用户已经说了要哪套，就用那套渲例子；没说就用「手绘笔记」。 3. 用自带的 Token 例子建一个作品并渲染： ```bash node "$SKILL/pipeline/新建作品.mjs" ./动画作品/token_手绘笔记 --style 手绘笔记 --example token node "$SKILL/pipeline/render.mjs" ./动画作品/token_手绘笔记/index.html ``` 出来的是 21 秒的成片 `token_手绘笔记.mp4`（讲「提示词和 Token」的一段口播）。实测（Apple M2 Max，v1.3，机器空闲时）：手绘笔记 65 秒；各套 34–72 秒（扁平流程图最快，黑底科技最慢）。渲完 `open` 给用户看。 4. 能出片了，再做用户自己的口播（用法一）。 ## 用法一：自己的口播 + 现成风格 先问清四件事：口播文件（15–60 秒，超过 60 秒建议分段做）；有没有文字稿；要哪套风格；字幕要不要烧进画面（回剪映统一加字幕就不要）。告诉用户用时：**实测一次（10-08，Opus 5.5 当观众，23 秒口播、9 个镜头、手绘笔记）从建目录到最终成片约 30 分钟，其中写页面约 18 分钟（含想构图约 10 分钟）**，转写和字幕 1.5 分钟、分镜 3.5 分钟、静帧和成片（两版）约 8 分钟；只测过这一次、这一套，内容离 Token 例子越远、或用 B 级风格（复古报刊、超现实拼贴，要先重排版式 / 想比喻），按 1 小时准备。中间会停两次请他确认（分镜、3 张静帧）。 没人可问时（例如让你自己跑完）：字幕默认烧进画面，交付时另出一版 `_无字幕`；分镜和静帧的「点头」改成自审，把判断和理由写进 `分镜.md` 末尾和 `静帧/静帧判断.md`。 1. **建作品目录** ```bash node "$SKILL/pipeline/新建作品.mjs" <作品目录> --style <风格> --audio <口播文件> [--script <稿子.txt>] ``` 有稿子就带上。没有稿子也行。 2. **转写 → 字幕** - 有 whisper：`node "$SKILL/pipeline/字幕.mjs" <作品目录>`（实测 20–35 秒的口播转写 2–3 秒）。有 稿子.txt 时按稿子改错字、按稿子的标点分句分条；打印「识别改正」（秒数 + 识别 → 稿子），逐条看一眼。whisper 识别的原文（每段带秒数）存在作品目录的 `whisper原文.txt`。 - 「识别改正」里有 **「→（稿子里没有）」**：识别出了稿子里没有的话。下面「要核对」会说它在几秒、在哪： - **在口播开头或结尾**：多半是从长录音里剪这段时带进来的邻句（上一句结尾、下一句开头）。字幕已经按稿子去掉，但**成片的声音里还在**。先裁掉再往下做：`node "$SKILL/pipeline/字幕.mjs" <作品目录> --trim auto`（按稿子找切点、切在中间的静音里，原文件留成 `口播_裁前.wav`，裁完自动重跑字幕）；自动切得不对就听 `口播_裁前.wav`，用 `--trim 起,止` 手动给秒数（按原文件算）。裁完口播变短，要在写分镜、生成时间线之前裁；已经出过的静帧、成片要重出。 - **在中间**：口误、重复说了一遍，或者稿子漏写了这句；听一下，稿子漏了就补进 稿子.txt 重跑。 - 「（没识别出）→ 稿子的字」：稿子里有、没识别出来，那几个字的时间是插出来的；说得含糊没关系，口播里根本没说就把稿子里那句删掉重跑。 - 没有稿子时：输出是识别原文，没有标点、可能有错字。你照识别结果整理一份**带标点的** 稿子.txt 放进作品目录（只改明显的错字、加标点，不改说法，拿不准的问用户），再跑一次 `字幕.mjs`。 - 没有 whisper：要有稿子，`node "$SKILL/pipeline/字幕.mjs" <作品目录> --no-whisper`。用静音检测找句界、句内按字数摊时间（实测字级平均差 0.08 秒、最差 0.45 秒）。打印的「待核对」里是没找到停顿、按字数估的句界，误差可能到 0.4 秒；能听的话听一下，不对就直接改 字幕.json 里那两条的 start/end。 - 把打印的字幕表（每条的时间和文字）给用户看一眼。字幕规矩：一条一行，约 20 个字以内；文字以音频为准。 3. **写分镜**（`分镜.json` 给机器读，`分镜.md` 给人看；照 `$SKILL/examples/token/分镜.json`、`分镜.md` 的样子写，字段见文末） - 镜头跟着句子切，一个镜头 1.5–5 秒，一个镜头只讲清一件事；写清每个镜头「画面要讲清什么」、关键字（2–4 个）、运动设想（什么词说到时出现什么）。 - **每个镜头写变化清单**（v1.2）：进场 → 主动作 → 次要动作（呼吸、飘动、闪烁、粒子）→ 出场或转场，写进 `分镜.json` 镜头的 `变化` 字段（不进时间线）、`分镜.md` 加一列「变化」。每 2–3 秒要有一个看得见的新变化；转场至少 3 种、同一种别连用 3 次。写法、秒数的依据、各风格适合哪几种转场：`$SKILL/knowledge/动效和画面变化.md` 第一到三节。 - 关键词卡点：`marks` 里写名字、在第几条字幕、原文短语；生成时间线时自动从字级时间算出秒数。 - 挑 **2 个全片固定上色的词**（`高亮`，role A / B，对应风格卡里的强调色 A/B）。标准：挑这段话的两个**核心名词**（观众看完要记住的那两个概念），最好在字幕里出现 2 次以上、在画面里会反复露面；两个最好是一对（Token 例子：成都 / 旅行；观众实测：窗口 / 模态）。A 给先出场、更重要的那个。再挑 3–8 个字幕里要强调的词（`字幕强调`）。 - **字幕里上色是按字面精确匹配**：字幕里出现和 `高亮` / `字幕强调` 一模一样的字才标，不拆词、不认近义词。所以 `高亮` 写「模态」时，「多模态」里只有「模态」两个字上色，「多」不上色。想把「多模态」整个标出来：把「多模态」加进 `字幕强调`——手绘笔记、扁平流程图、复古剪纸、黑底科技是「长的优先」，整个「多模态」按强调词的样子标（「模态」就不再是强调色）；复古报刊、立体卡通、超现实拼贴是两层叠着标，「多模态」三个字都有强调标记、其中「模态」同时是强调色。或者 `高亮` 直接用「多模态」（那「文字模态」里的「模态」就不上色了）。取舍写进 分镜.md。 - 想不出某个概念怎么演，查 `$SKILL/knowledge/从11套里学到的.md` 第七节：先看「通用概念怎么画」表（范围、太多、太贵、失忆、分类、能力齐全……），再看 11 套各用什么演 Token 例子的「聊天框、切分、海量数据、推断」。 - 把镜头表（镜头、时间、台词、画面）给用户看，**点头再画**。 - 生成时间线：`node "$SKILL/pipeline/生成timeline.mjs" <作品目录>`（关键词找不到会报错并告诉你在哪条字幕里找的）。 4. **写页面**（主要用时）：**从模板改**。作品目录里的 `index.html` 就是这套风格的 `模板.html`（7 套都有）：底座（配色、字体、质感、部件、镜头、页眉、字幕，原样留着）+ 按镜头自动排的骨架，已经能吃任何时间线。 - 先直接渲一张静帧看看骨架（`render.mjs … --stills 3 --outdir <作品目录>/静帧 --prefix 骨架`）。骨架只有标题和关键词，**不能直接交差**。 - 读 `$SKILL/styles/<风格>/风格卡.md` 的「换内容时怎么改 → 从模板改」：模板里哪块是底座、哪块是骨架、有哪些现成部件。部件长什么样、怎么组合，对照同一文件夹的 `示例_Token.html`（Token 例子的完整页面，只当参考；拿新时间线直接打开会报错）。 - 把「场景：按新分镜重写」那一块换成真正演内容的画面，**再把 `render(t)` 里调骨架的那一行（手绘笔记是 `drawSections(t, v);`，各套见风格卡，模板里那行有「← 场景入口」注释）换成你自己的分段函数**，骨架的代码删掉。只加新函数、不换这一行，画面上还是骨架。 - 要用示例页里的部件（例如机器人、聊天框），连它用到的常量、小函数一起抄过来；手绘笔记的模板已经带了观众实测时写好的常用部件（机器人、气泡、信息小卡、成绩单、色块词、颗粒章、※），见模板里「常用部件」那段注释。 - 场景多时分块写（每段一个文件，最后拼成 index.html），每写完一段出几张静帧看（`--prefix 调试`），实测这样每段都一次跑通。 - **默认动效**（v1.3）：7 套模板自带这套风格的背景层（一直在动）、镜头交界的默认转场（按 `TL.shots` 自动轮换）和每个镜头的慢推，换任何时间线都自动生效；开关和每个切点用什么转场在模板开头的 `FX_DEFAULT`、`FX_PLAN`（不是每套都有 `FX_PLAN`，见风格卡「默认动效（v1.3）」）。你写的场景如果在某个切点自己做了转场，就把那个切点的默认转场关掉，别叠两层。 - **转场和次要动作**（v1.2）：调 `动效部件.js`（新建作品时已复制进作品目录；用法在文件开头）。模板里有两个函数：`fxBefore(t)` 在画场景之前（推移、慢推、震屏），`fxAfter(t)` 在场景之后、字幕之前（故障撕裂、擦除、翻页、纸片盖屏、粒子、泛光），在里面写 `动效.glitch(g, t, 换场时刻)` 这类调用。背景至少两层、一直有东西在动；盲测里好用的手法（城市剪影、流动网格、灯管字通电、粉笔头、撕边纸……）和代码要点见知识文件第四、六节。 - 页面约定（必须遵守）：舞台 1920×1080；`<script src="timeline.js"></script>` 引时间线；定义 `window.seek(t)`，**画面只由 t 决定**；准备好后 `window.ready = true`；保留 `NOSUB` 开关（`const NOSUB = /[?&]nosub=1/.test(location.search)`，画字幕和字幕底带的函数开头 `if (NOSUB) return;`）；**每帧开头把画布状态整套复位**（`动效.resetCtx(g)`，每帧重画的离屏画布也要）——上一帧留下的 lineCap、setLineDash、globalAlpha 会漏到下一帧，按顺序出片看不出来，单独出静帧就不一样（v1.3 前立体卡通、黑底科技、复古报刊的示例页都踩过）。 - 时间一律从 `TL` 取（`TL.mark('词')`、`TL.shots`、`TL.cues`），**不写死秒数**；用不确定有没有的关键词先 `TL.has('词')`。 - 读字：观众要看清的字原尺寸 48 像素以上；字幕不小于 60 像素；底部约 170 像素只放字幕，页眉区也别压。 - 性能：每帧最好 150 毫秒以内；颗粒、纸纹只生成一次缓存，不要逐帧逐像素算，不要逐帧画满屏渐变（见知识库第二节）。 5. **先出 3 张静帧给用户点头** ```bash node "$SKILL/pipeline/render.mjs" <作品目录>/index.html --stills 3.2,12.5,24.8 --outdir <作品目录>/静帧 ``` 秒数挑开头、中段、结尾各一个最能代表画面的时刻（关键词刚出现之后）。**手写、逐字浮现、擦出来的风格（手绘笔记、黑底科技、立体卡通的标题，超现实拼贴的手写批注）字是一个个出来的，要取关键词开始说之后约 0.3 秒**（`timeline.js` 打印的关键词秒数 + 0.3），不然字还没写完（实测 4.95 秒只写出「失」，5.15 秒才是「失忆」）。自己先用 Read 看三张 PNG 和自动生成的 `_480宽检查.png`（字幕和关键字缩到 480 宽还能读；手绘笔记的笔尖跟着写，看一眼笔杆有没有压住要读的字），没问题再 `open` 给用户看。用户不点头就改，再出静帧。 - 重出静帧时，同一目录里同一前缀的旧静帧和旧 480 宽检查图会先挪进 `静帧/旧静帧/<前缀_时分秒>/`，文件夹里只留这一批。调试用的多出几张没关系，用 `--prefix 调试`（或按段 `--prefix A段`）和给用户看的分开。 6. **出整段**：`node "$SKILL/pipeline/render.mjs" <作品目录>/index.html`（命令放后台；满屏颗粒的几套 作品.json 里已经设了 jpeg 截图；21 秒的手绘笔记 v1.3 实测 65 秒）。出完自检： - `ffprobe -v error -show_entries stream=codec_name,width,height,r_frame_rate:format=duration -of compact <成片>`：h264 1920×1080 30/1 + aac，时长和片长（分镜.json 的 `duration`，没写就是口播时长）差不到 1 帧（按帧向上取整，21.17 秒的口播出来是 21.20 秒）。 - 确定性（v1.3，几秒钟）：`node "$SKILL/pipeline/render.mjs" <作品目录>/index.html --check-determinism auto`，三个时刻各比一次「单独 seek」和「先跳到别处再回来」，要全是 ✓；有 ✗ 就按页面约定那条复位画布状态。 - 出检查图（不出片，23 秒的片子约 7 秒）：`node "$SKILL/pipeline/render.mjs" <作品目录>/index.html --scan --check-marks`，在 `<作品目录>/检查/` 里： - `扫片_1.png`、`扫片_2.png`…：每秒 3 帧、一张 4×8 格（约 10.7 秒），看有没有截断、叠字、闪烁、空白，字幕是不是跟着换；镜头交界前后 0.5 秒最容易出事。 - `卡点.png` + `卡点_说明.txt`：每个关键词开始说之前 0.1 秒、之后 0.35 秒各一帧，一行两个词；「前」那格还没有对应动作、「后」那格已经开始出现，就是卡上了。 - 字幕对得上：扫片里每格下面的字幕跟着口播换；拿不准的时刻单独出静帧看。 - **丰富度检查**（v1.2）：`node "$SKILL/pipeline/丰富度检查.mjs" <成片.mp4>`，每 2.5 秒一格拼成 `检查/丰富度_扫片.png`，算相邻两格差多少（字幕带不算）。判「不过」、或标了「几乎没变」的那几秒，回去补变化（新东西进场、推近拉开、换色），静止超过 2 秒的补次要动作；再对照知识文件第七节的自查表（转场不要全片一种）。盲测 6 版里这个分数高的那版，3 组都是作者觉得更丰富的。开场是整屏盖色或黑屏开机时第 1 对会特别大，脚本另报「去掉第 1 对的平均」，那个数也要 ≥ 10。 7. **交付和修改**：告诉用户成片路径（`open` 打开）。要回剪映统一加字幕：`node "$SKILL/pipeline/render.mjs" <作品目录>/index.html --no-subtitle`，输出自动叫 `<名字>_无字幕.mp4`（给了 `-o` 也会加「_无字幕」），不会覆盖带字幕的成片；字幕用作品目录里的 `字幕.srt`。v1.3 起 7 套模板和示例页关掉字幕时字幕底带也一起不画；你自己加了字幕底带的，记得也放进 `if (NOSUB) return;` 里。用户提意见时按「第几秒、哪个东西、改成什么」收，改完重出静帧确认，再重渲整段。 ## 用法二：照一张参考图（或一段视频）做新风格 用户给一张自己喜欢的画面（截图、海报、插画）或一段视频，照它的画风做一套新风格，再套到口播上。先告诉用户三件事： - **结果不保证**：我们照 11 份参考做了 11 套，作者留了 7 套；每套 1 小时到 1 小时 45 分（口播、字幕、分镜已经有了的前提下），一般要出 2–4 轮静帧才像。 - **参考图的版权由用户自己负责**：只拿来学画风（颜色、字体气质、线条、版式），成片里不出现原图；skill 不带、不传任何别人的图，作品目录里的参考图是用户自己放的。 - 参考里的真实照片、复杂手绘插画，代码只能画出近似的版本。 0. 口播先按用法一第 1–3 步做出字幕和分镜；只想先试风格，用 Token 例子（`--example token`），定了再换自己的口播。 1. **读参考**：用 Read 看图，写下 4–6 条「看到了什么」（底色、主线、字、部件、留白、质感）。细节裁一块放大：`ffmpeg -i 参考.jpg -vf "crop=宽:高:x:y,scale=iw*2:-1" <作品目录>/参考_局部.png`（先 `sips -g pixelWidth -g pixelHeight 参考.jpg` 看尺寸）；gif 取第一帧 `-frames:v 1`。参考是视频：先出总览 `ffmpeg -i 参考.mp4 -vf "fps=1,scale=480:-1,tile=4x3" -frames:v 1 <作品目录>/参考帧总览.png`，再挑几帧原尺寸细看；还要看**动法**（东西怎么出现、多快、一拍几张、怎么换场；第 11 套黑底科技就是照一条视频做的），按 `knowledge/动效和画面变化.md` 第一节记成进场、主动作、次要动作、转场。 2. **取色**：`node "$SKILL/pipeline/取色.mjs" <参考图> 16 [x:y …]`，先看按面积排的主色，再对底、主线、标题、强调物逐点取；每个用途一个色值，写清对应参考图哪里。强调色 A/B：参考图里有红有蓝就用它自己的；只有一种，缺的用默认（红 `#d41928` / 蓝 `#2373ce`）；都没有，用色板里最醒目的两种对比色；其余颜色避开 A/B 的色系（知识库 `从11套里学到的.md` 第六节）。字和底的对比度按 `knowledge/讲解动画通用规则.md` 第二节算。 3. **挑字体**（只在本机已装的里挑，不下载、不装）： - 先认参考图里的字是哪一类：宋 / 衬线、黑体（多粗）、圆体、手写、书法（楷、隶、魏碑、行楷）、窄体英文、等宽；每一类 macOS 里有哪些、像什么，查 `knowledge/风格词典.md` 第二节「字体对照」。 - 同一类里挑 2–3 个候选，把标题那句话各渲一张静帧并排比（改字体栈，`--stills 某秒 --prefix 字体A`），挑字形、粗细、字面宽度最像的；写进字体栈时**最后垫一个一直都在的**（苹方、冬青黑体 `Hiragino Sans GB`、宋体-简 `Songti SC`）。 - **按需下载的字体**（兰亭黑、圆体、手札体、翩翩体、楷体、隶变、魏碑、报隶、行楷、凌慧体、娃娃体、雅痞）没下载时只带一部分字，一个词里会一半是它、一半退回苹方。用到就告诉用户：「打开『字体册』，搜『<中文名>』，点『下载』」；不下载也能渲，按风格卡里写的替代出。 - 用户自己装在 `~/Library/Fonts` 的字体能拿来试，但风格卡和字体栈里要写好系统替代，并出一张「去掉用户字体」的静帧确认还像（知识库第五节有 7 套的实测）。 4. **写风格卡**：照 `knowledge/风格卡模板.md` 在作品目录写 `风格卡.md`：先填「来源」「看起来什么样」「配色」「字体」，部件、行号等页面写完再补。 5. **选底座**：按下表挑最接近的现成模板，`node "$SKILL/pipeline/新建作品.mjs" <作品目录> --style <它> …` 建目录（`index.html` 就是它的模板；用 `--example token` 建的是 Token 示例页，先 `cp "$SKILL/styles/<它>/模板.html" <作品目录>/index.html` 换成模板）。先只改底座：配色（`C`、`COL_A` / `COL_B`）、字体栈、背景质感、线条画法、字幕带；骨架和字幕逻辑先留着，渲一张静帧看底座对不对，再按分镜写场景。**看主体怎么画，比看底色要紧**：黑底上的粉笔线稿仍从手绘笔记起步，换底色和笔触。 | 参考图的特征 | 从哪套模板起步 | 主要改什么 | |---|---|---| | 线稿、手写、笔记感（手绘、白板、粉笔黑板、手账、水彩线稿） | 手绘笔记 | 底色、笔触（`Sk` 的线宽和颜色、加纹理）、手写字体 | | 扁平色块、图标、步骤箭头（扁平插画、瑞士、包豪斯、孟菲斯、等距 2.5D） | 扁平流程图 | 配色、形状语言（圆角 / 直角 / 几何）、投影 | | 报纸杂志版面、分栏、衬线大标题（日系杂志、瑞士网格、复古报刊） | 复古报刊 | 版面网格、字体、纸色；B 级，先重排版式 | | 纸片剪贴、网点照片、定格跳动（剪纸、拼贴、贴纸、波普） | 复古剪纸 | 纸色、剪边、网点、每秒几张 | | 一个大比喻的概念海报、粗衬线 + 手写批注（超现实、概念海报） | 超现实拼贴 | 先想新比喻；B 级 | | 有体积的立体物件、光面、柔和渐变（黏土 3D、玻璃、立体图标） | 立体卡通 | 材质 5 值（亮 / 本色 / 暗 / 最暗 / 反光）、底色 | | 深底 + 细线 + 辉光、电影感（黑金、霓虹、蓝图、暗色水墨） | 黑底科技 | 线色、辉光、颗粒、字体 | 6. **出 3 张静帧自查**：开头、中段、结尾各一张（关键词开始后约 0.3 秒），和参考图拼在一起看：`ffmpeg -i 参考.jpg -i 静帧1.png -filter_complex "[0]scale=-1:540[a];[1]scale=-1:540[b];[a][b]hstack" <作品目录>/静帧/参考对比.png`。逐条对：配色、字体、线条和质感、版式像不像；480 宽检查图里字读不读得清；A/B 两个词是不是一眼认得出。判断写进 `静帧/静帧判断.md`，再 `open` 给用户看；不像就改底座重出，一般 2–4 轮。丰富不丰富照 `knowledge/动效和画面变化.md` 第七节看。 7. **出片**：回到用法一第 4–7 步（按分镜写场景、静帧点头、出整段、自检）。做完后作品目录里的 `风格卡.md` + `index.html` 就是用户自己的一套风格，下次新口播从这个 `index.html` 起步。 ## 用法三：用文字描述想要的风格 用户没有参考图，只说得出感觉（例如「像小学教室黑板报那样的粉笔风，温暖一点」）。做法：问清楚 → 查知识库把描述翻成参数 → 先出 2–3 个方向（A/B/C）的静帧给他挑 → 挑定后写风格卡 → 出片。知识库的用处：把「温暖」「高级」「复古」这类词落成具体的色值、字体、笔触和动效，并提前避开每种风格最常见的翻车（字太小、颜色太多、满屏颗粒拖慢渲染……）。 1. **先问清楚**（一次问完；答不上的用括号里的默认；没人可问时按描述自己推，写进风格卡「来源」）： | # | 问什么 | 决定什么 | |---|---|---| | 1 | 这段口播讲什么？有没有步骤、数字、对比？ | 版式：流程长卷 / 一屏一个点 / 往下读的笔记（默认按分镜内容定） | | 2 | 想让观众看了有什么感觉？挑 1–2 个：温暖、可靠、好玩、高级、怀旧、紧张、安静 | 色温、圆角还是直角、动效弹不弹 | | 3 | 年代感：现代 / 八九十年代 / 民国 / 未来 / 无所谓（无所谓） | 字体（衬线 / 黑体 / 手写）、纸纹、网点、褪色 | | 4 | 像什么材料做的：纸、黑板、白板、屏幕、玻璃、黏土、水彩、霓虹灯…… | 底和笔触的质感 | | 5 | 颜色：偏暖 / 偏冷 / 黑白 / 高饱和 / 低饱和；有没有一定要或一定不要的颜色（品牌色） | 底色、主色、强调色 A/B | | 6 | 热闹还是克制，1–5 分（3）：1 = 一屏一个东西、大量留白，5 = 满屏贴纸、一直在跳 | 颜色个数、部件密度、运动幅度 | | 7 | 给谁看、在哪看：小学生 / 大众 / 专业人士；手机还是电脑（大众、手机） | 字号、字体气质、一屏放多少字 | 2. **翻成参数**：读 `knowledge/风格词典.md` 第一节「描述词 → 参数」和最接近的 1–3 种风格条目，把问卷答案落成一张参数表：底色、主线色、1–2 个辅助色、强调色 A/B、字体栈（标题 / 正文 / 字幕）、线条和质感、版式、动效、起步模板（用法二第 5 步那张表）。每一项写依据（词典第几种、哪条规则）。再读 `knowledge/讲解动画通用规则.md`：字号、对比度、颜色预算、一个镜头一件事、动效时长——这些不随风格变，三个方向都要守。参数表里加一行「动效」：背景层怎么一直动、用哪 3 种以上转场（`knowledge/动效和画面变化.md` 第三、四、六节）。词典里写「已实测」的（霓虹赛博）先读它的风格卡，从它的实测页起步。 3. **出 2–3 个方向的静帧**：三个方向要真的不一样（同是粉笔风：A 经典墨绿黑板报 + 彩色粉笔花边，B 暖色木框黑板 + 米黄粉笔、克制，C 黑板 + 彩纸剪贴标题），不是同一套换个颜色。做法： - 建作品目录（还没口播就用 `--example token`），`--style` 选起步模板。**用 `--example token` 时 `index.html` 是 Token 示例页，不是模板**，先换成模板：`cp "$SKILL/styles/<起步模板>/模板.html" <作品目录>/index.html`。在 `index.html` 开头写 `const DIR = 'A';` 和三套参数 `DIRS = { A: {…}, B: {…}, C: {…} }`（配色、字体栈、质感和装饰的开关），底座里用到颜色、字体的地方都从 `DIRS[DIR]` 取。 - 复制成三份、只改那一行：`for d in A B C; do sed "s/^const DIR = 'A';/const DIR = '$d';/" index.html > 方向$d.html; done` - 每份出同样两个时刻的静帧：`node "$SKILL/pipeline/render.mjs" <作品目录>/方向A.html --stills 秒1,秒2 --outdir <作品目录>/方向静帧 --prefix 方向A`（B、C 同理）。 - 拼成一张对比图（一行一个方向，从上到下 A、B、C）：在 `方向静帧/` 里 `ffmpeg -y -pattern_type glob -i '方向?_静帧_*.png' -vf "scale=960:540,tile=2x3" -frames:v 1 方向对比.png`。 - 先自己用 Read 看，再 `open` 给用户，每个方向配一句话：是什么感觉、适合什么、各自的风险。 - 实测一次（10-08 自检，描述「像小学教室黑板报那样的粉笔风，温暖一点」，手绘笔记起步，只到方向静帧）：写补丁改底座 + 三套参数约 6 分钟（另有 1 分钟修补丁脚本的匹配），三个方向各出 2 张静帧每个不到 1 秒。还没人当观众从头实测过用法三。 4. **挑定后**（也可以是「A 的颜色 + C 的标题」）：把挑定的参数写死进 `index.html`（删掉 `DIR` 和另外两套），照 `knowledge/风格卡模板.md` 写 `风格卡.md`，再照用法一第 4–7 步写场景、出 3 张静帧点头、出整段。 ## 规矩 - 画面只用 HTML/CSS/SVG/Canvas 代码画；**不用生图模型**；不引外部资源（CDN、网络字体、网络图片）。 - 不用 CSS 动画、transition、requestAnimationFrame、Date.now()、不带种子的 Math.random()（要随机用带种子的，例如 mulberry32，在 seek(t) 里每次重建）。 - 字体只用 macOS 自带的，或在字体栈里写好系统替代；按需下载的字体提醒用户在「字体册」下载。 - 一次渲一套（同时跑很多个会互相拖慢 2–5 倍）；渲染命令放后台。 - 作品目录放在用户的项目里，不往 `$SKILL` 里写东西；`styles/`、`examples/` 只读，要改就复制到作品目录再改。 - 软件要用户自己装；不替用户下载、安装任何东西。 - skill 里不放任何第三方的图；用户给的参考图只放在他自己的作品目录里，版权由用户负责，成片里不出现原图。 ## 做不到的事，和交给谁 - 一次只适合一段 15–60 秒；整条 10 分钟的片子全做成动画要很多小时，挑最需要画面的几段做。 - 配乐、音效、转场、和真人画面穿插：回剪映做（成片是普通 mp4，带口播）。 - 好不好看、像不像这套风格：要用户自己看，不满意就提意见改。内容离 Token 例子越远（例如讲做菜），要新画的部件越多，越要多出几轮静帧。 - 只在 macOS（Apple 芯片）上测过；Windows 没测（字体和 Chrome 路径都不一样）。只用 Opus 5.5 测过，别的模型写页面的质量没测。 - whisper 识别有错字（专有名词、英文最容易错），稿子以用户为准。 ## 附：7 套风格速览（详见各套 风格卡.md） | 风格 | 看起来 | 适合讲 | 新 Mac 要先在「字体册」下载 | 出片截图 | |---|---|---|---|---| | 扁平流程图 | 奶油底、琥珀标题带、编号横向流程 | 步骤、原理、因果链 | 兰亭黑（不下退苹方） | png | | 手绘笔记 | 米白纸墨蓝线稿 + 橙色，逐笔描、逐字写 | 概念拆解、观察记录 | 手札体、圆体、翩翩体 | png | | 复古报刊 | 整版报纸，往下潜进深蓝插图区 | 科普解读、专题报道感 | 不用（全是常驻字体） | png | | 复古剪纸 | 皱奶油纸上一层层剪纸、定格跳动 | 有态度的观点、几个关键东西 | 兰亭黑 | jpeg | | 超现实拼贴 | 米灰海报、特粗衬线大标题、一个大比喻 | 思维方式、认知、连锁后果 | 翩翩体、手札体 | jpeg | | 立体卡通 | 炭黑底、光面立体物件、杂志分栏 | 科学原理、拿工具处理东西的过程 | 兰亭黑、圆体 | jpeg | | 黑底科技 | 近黑底、暖金细线、衬线字由虚到实 | 高端科技概念、原理、历史趋势 | 不用 | jpeg | ## 附：文件和字段 **风格文件夹** `$SKILL/styles/<风格>/`：`风格卡.md`（配色、字体和系统替代、构图、部件、动效、强调色 A/B、字幕区、渲染速度、换内容时怎么改、踩过的坑）、`模板.html`（通用模板，新作品从它改；7 套都有）、`示例_Token.html`（Token 例子的完整页面，看部件怎么用的参考）、`静帧/`（样片的 3 张 jpg，文件名是秒数）。另有 `styles/霓虹赛博/`（v1.2 实测过一次，只有风格卡、`实测_Token.html` 和静帧，不在 `--list` 里；用法三挑霓虹时用）。 **分镜.json 字段**（`examples/token/分镜.json` 是完整例子） | 字段 | 必填 | 内容 | |---|---|---| | `说明` | 否 | 写给人看的备注，生成时间线时不读 | | `duration` | 否 | 片长（秒）。不写就是口播时长；口播最后一个字离结尾不到 0.5 秒时（`字幕.mjs` 会提醒），写成比口播长约 1 秒，片尾多停一会儿：最后一条字幕留到片尾，`render.mjs` 在口播后面补静音（v1.3） | | `标题` | 否 | 页眉标题 → `TL.title` | | `shots` | 是 | `[{id, cues:[字幕编号…], title, 关键字:[…], 时间点:[…], 要讲清, 运动设想}]`；`start`/`end` 可以不写（按字幕自动算，第一个从 0 开始、最后一个到片尾）。整段都不写时按句子自动分（只适合试渲） | | `shots[].时间点` | 否 | 这个镜头里要卡点的关键词，写 `marks` 里的 name（例如 `["打开", "聊天框", "例句"]`），提醒自己这个镜头哪几个动作要卡在哪几个词上；不进 `TL`，生成时间线时检查名字在不在 `marks` 里，不在就提示 | | `marks` | 否 | `[{name, cue, phrase, nth}]`：在第 cue 条字幕里找 phrase（不写就是 name）；不写 cue 就在全文找第 nth 次 | | `高亮` | 否 | `[{text, role:"A"}, {text, role:"B"}]`：全片固定上色的两个词 → `TL.highlights`（怎么挑见用法一第 3 步；字幕里整词精确匹配、长的优先） | | `字幕强调` | 否 | 字幕里要强调的词 → `TL.emphasis`（同样整词精确匹配） | | `素材` | 否 | 任何你想带给页面的数据（例如一组聊天记录、清单）→ `TL.assets` |