| name | dashi-animationstyle |
|---|---|
| description | 把一段 15–60 秒的中文口播做成某种画风的动画视频(1920×1080、30 帧/秒的 mp4,带口播和字幕,能直接拖进剪映)。画面全部由 Claude 用 HTML/Canvas 代码画、无头 Chrome 逐帧截图合成,不用生图模型。自带 7 套风格:扁平流程图、手绘笔记、复古报刊、复古剪纸、超现实拼贴、立体卡通、黑底科技。也能照用户给的一张参考图(或一段视频)做一套新风格(用法二),或按一段文字描述先出 2–3 个方向的静帧给用户挑、再定风格(用法三),附风格词典、讲解动画通用规则和动效知识(转场、次要动作、丰富度检查)。用户说「把这段口播做成动画」「用手绘笔记风格做」「有哪些风格」「照这张图的画风做」「我想要黑板报那样的感觉」「检查风格动画的环境」「先渲个例子看看」时使用。 |
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 分钟)
检查环境:
node "$SKILL/pipeline/自检.mjs"- 报 ✗ 的照提示处理:Node 要 22 以上(
brew install node)、ffmpeg(brew install ffmpeg)、Chrome(装 Google Chrome)。这些要用户自己装,你只告诉他装什么、怎么装。 - 字体报 ✗:是 macOS 按需下载的字体(兰亭黑、圆体、手札体、翩翩体),让用户打开「字体册」搜字体名点「下载」。不下也能渲,但那几个字体会退回苹方。
- whisper 报 ! 是可选的:没有也能做(走稿子 + 静音检测的后备)。
- 报 ✗ 的照提示处理:Node 要 22 以上(
让用户挑一套风格:
node "$SKILL/pipeline/新建作品.mjs" --list列出 7 套;每套的样子看$SKILL/styles/<风格>/静帧/里的 3 张图(用 Read 看,或open给用户看)。用户已经说了要哪套,就用那套渲例子;没说就用「手绘笔记」。用自带的 Token 例子建一个作品并渲染:
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给用户看。能出片了,再做用户自己的口播(用法一)。
用法一:自己的口播 + 现成风格
先问清四件事:口播文件(15–60 秒,超过 60 秒建议分段做);有没有文字稿;要哪套风格;字幕要不要烧进画面(回剪映统一加字幕就不要)。告诉用户用时:实测一次(10-08,Opus 5.5 当观众,23 秒口播、9 个镜头、手绘笔记)从建目录到最终成片约 30 分钟,其中写页面约 18 分钟(含想构图约 10 分钟),转写和字幕 1.5 分钟、分镜 3.5 分钟、静帧和成片(两版)约 8 分钟;只测过这一次、这一套,内容离 Token 例子越远、或用 B 级风格(复古报刊、超现实拼贴,要先重排版式 / 想比喻),按 1 小时准备。中间会停两次请他确认(分镜、3 张静帧)。
没人可问时(例如让你自己跑完):字幕默认烧进画面,交付时另出一版 _无字幕;分镜和静帧的「点头」改成自审,把判断和理由写进 分镜.md 末尾和 静帧/静帧判断.md。
建作品目录
node "$SKILL/pipeline/新建作品.mjs" <作品目录> --style <风格> --audio <口播文件> [--script <稿子.txt>]
有稿子就带上。没有稿子也行。
转写 → 字幕
- 有 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 个字以内;文字以音频为准。
- 有 whisper:
写分镜(
分镜.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" <作品目录>(关键词找不到会报错并告诉你在哪条字幕里找的)。
写页面(主要用时):从模板改。作品目录里的
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 毫秒以内;颗粒、纸纹只生成一次缓存,不要逐帧逐像素算,不要逐帧画满屏渐变(见知识库第二节)。
- 先直接渲一张静帧看看骨架(
先出 3 张静帧给用户点头
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段)和给用户看的分开。
- 重出静帧时,同一目录里同一前缀的旧静帧和旧 480 宽检查图会先挪进
出整段:
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。
交付和修改:告诉用户成片路径(
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 不带、不传任何别人的图,作品目录里的参考图是用户自己放的。
- 参考里的真实照片、复杂手绘插画,代码只能画出近似的版本。
- 口播先按用法一第 1–3 步做出字幕和分镜;只想先试风格,用 Token 例子(
--example token),定了再换自己的口播。 - 读参考:用 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第一节记成进场、主动作、次要动作、转场。 - 取色:
node "$SKILL/pipeline/取色.mjs" <参考图> 16 [x:y …],先看按面积排的主色,再对底、主线、标题、强调物逐点取;每个用途一个色值,写清对应参考图哪里。强调色 A/B:参考图里有红有蓝就用它自己的;只有一种,缺的用默认(红#d41928/ 蓝#2373ce);都没有,用色板里最醒目的两种对比色;其余颜色避开 A/B 的色系(知识库从11套里学到的.md第六节)。字和底的对比度按knowledge/讲解动画通用规则.md第二节算。 - 挑字体(只在本机已装的里挑,不下载、不装):
- 先认参考图里的字是哪一类:宋 / 衬线、黑体(多粗)、圆体、手写、书法(楷、隶、魏碑、行楷)、窄体英文、等宽;每一类 macOS 里有哪些、像什么,查
knowledge/风格词典.md第二节「字体对照」。 - 同一类里挑 2–3 个候选,把标题那句话各渲一张静帧并排比(改字体栈,
--stills 某秒 --prefix 字体A),挑字形、粗细、字面宽度最像的;写进字体栈时最后垫一个一直都在的(苹方、冬青黑体Hiragino Sans GB、宋体-简Songti SC)。 - 按需下载的字体(兰亭黑、圆体、手札体、翩翩体、楷体、隶变、魏碑、报隶、行楷、凌慧体、娃娃体、雅痞)没下载时只带一部分字,一个词里会一半是它、一半退回苹方。用到就告诉用户:「打开『字体册』,搜『<中文名>』,点『下载』」;不下载也能渲,按风格卡里写的替代出。
- 用户自己装在
~/Library/Fonts的字体能拿来试,但风格卡和字体栈里要写好系统替代,并出一张「去掉用户字体」的静帧确认还像(知识库第五节有 7 套的实测)。
- 先认参考图里的字是哪一类:宋 / 衬线、黑体(多粗)、圆体、手写、书法(楷、隶、魏碑、行楷)、窄体英文、等宽;每一类 macOS 里有哪些、像什么,查
- 写风格卡:照
knowledge/风格卡模板.md在作品目录写风格卡.md:先填「来源」「看起来什么样」「配色」「字体」,部件、行号等页面写完再补。 - 选底座:按下表挑最接近的现成模板,
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 值(亮 / 本色 / 暗 / 最暗 / 反光)、底色 |
| 深底 + 细线 + 辉光、电影感(黑金、霓虹、蓝图、暗色水墨) | 黑底科技 | 线色、辉光、颗粒、字体 |
- 出 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第七节看。 - 出片:回到用法一第 4–7 步(按分镜写场景、静帧点头、出整段、自检)。做完后作品目录里的
风格卡.md+index.html就是用户自己的一套风格,下次新口播从这个index.html起步。
用法三:用文字描述想要的风格
用户没有参考图,只说得出感觉(例如「像小学教室黑板报那样的粉笔风,温暖一点」)。做法:问清楚 → 查知识库把描述翻成参数 → 先出 2–3 个方向(A/B/C)的静帧给他挑 → 挑定后写风格卡 → 出片。知识库的用处:把「温暖」「高级」「复古」这类词落成具体的色值、字体、笔触和动效,并提前避开每种风格最常见的翻车(字太小、颜色太多、满屏颗粒拖慢渲染……)。
- 先问清楚(一次问完;答不上的用括号里的默认;没人可问时按描述自己推,写进风格卡「来源」):
| # | 问什么 | 决定什么 |
|---|---|---|
| 1 | 这段口播讲什么?有没有步骤、数字、对比? | 版式:流程长卷 / 一屏一个点 / 往下读的笔记(默认按分镜内容定) |
| 2 | 想让观众看了有什么感觉?挑 1–2 个:温暖、可靠、好玩、高级、怀旧、紧张、安静 | 色温、圆角还是直角、动效弹不弹 |
| 3 | 年代感:现代 / 八九十年代 / 民国 / 未来 / 无所谓(无所谓) | 字体(衬线 / 黑体 / 手写)、纸纹、网点、褪色 |
| 4 | 像什么材料做的:纸、黑板、白板、屏幕、玻璃、黏土、水彩、霓虹灯…… | 底和笔触的质感 |
| 5 | 颜色:偏暖 / 偏冷 / 黑白 / 高饱和 / 低饱和;有没有一定要或一定不要的颜色(品牌色) | 底色、主色、强调色 A/B |
| 6 | 热闹还是克制,1–5 分(3):1 = 一屏一个东西、大量留白,5 = 满屏贴纸、一直在跳 | 颜色个数、部件密度、运动幅度 |
| 7 | 给谁看、在哪看:小学生 / 大众 / 专业人士;手机还是电脑(大众、手机) | 字号、字体气质、一屏放多少字 |
- 翻成参数:读
knowledge/风格词典.md第一节「描述词 → 参数」和最接近的 1–3 种风格条目,把问卷答案落成一张参数表:底色、主线色、1–2 个辅助色、强调色 A/B、字体栈(标题 / 正文 / 字幕)、线条和质感、版式、动效、起步模板(用法二第 5 步那张表)。每一项写依据(词典第几种、哪条规则)。再读knowledge/讲解动画通用规则.md:字号、对比度、颜色预算、一个镜头一件事、动效时长——这些不随风格变,三个方向都要守。参数表里加一行「动效」:背景层怎么一直动、用哪 3 种以上转场(knowledge/动效和画面变化.md第三、四、六节)。词典里写「已实测」的(霓虹赛博)先读它的风格卡,从它的实测页起步。 - 出 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 秒。还没人当观众从头实测过用法三。
- 建作品目录(还没口播就用
- 挑定后(也可以是「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 |
例句 例句切分 数据样例 | 否 | Token 例子专用 → TL.example、TL.data;新内容不用写 |
页面里的 window.TL:duration、title、text、cues({id,text,start,end,show,hide})、chars(字级时间 {text,start,end,cue},英文词算一个字)、shots({id,start,end,title,cues,keywords})、marks、highlights、emphasis、assets;函数 TL.cueAt(t)、TL.shotAt(t)、TL.mark(名字)、TL.markEnd(名字)、TL.has(名字)。
render.mjs 常用参数:--stills 秒,秒,秒(静帧 + 480 宽检查图,配 --outdir、--prefix;同前缀的旧图先挪进 旧静帧/)、--scan(扫片拼图)、--check-marks(关键词前后帧拼图;这两个只出检查图、不出片,默认放 <作品目录>/检查/)、--preview(10 帧/秒、960×540,看节奏)、--from 秒 --to 秒(只渲一段)、--no-subtitle(文件名自动加「_无字幕」)、--format jpeg(满屏颗粒时快一倍多)、--check-determinism auto|秒,秒(确定性检查,v1.3)、-o 输出.mp4、--audio 文件、--chrome 路径。node "$SKILL/pipeline/render.mjs" --help 看全部。
字幕.mjs 参数:--no-whisper(没有 whisper 时只用稿子 + 静音检测)、--trim auto(按稿子裁掉口播两头稿子里没有的话)/ --trim 起,止(手动裁,秒数按原口播)、--script 稿子.txt、--max 20(每条字幕最多几个字)。输出 字幕.json / .srt,有 whisper 时还有 whisper原文.txt / .json。
出错时:页面脚本报错会停下并打印行号;「20 秒内没有定义 window.seek」先查 timeline.js 在不在页面旁边、脚本有没有报错;字体没生效(族名写错会悄悄退回苹方)就渲一张静帧看;找不到 Chrome 按提示装或用 --chrome。
别的工具:pipeline/取色.mjs <图片> 16 [x:y …] 取主色和指定点颜色(做新风格时用);pipeline/丰富度检查.mjs <成片.mp4> 看画面变化够不够(用法一第 6 步);pipeline/动效部件.js 转场和次要动作的共用函数(用法一第 4 步;v1.3 加了 resetCtx 复位画布、iris 圆形遮罩、sweep 色块横扫,后两个能用 area 只盖一块)。
知识库($SKILL/knowledge/):从11套里学到的.md(做 11 套样片踩过的坑、渲染速度、字体实测、概念怎么演;开头有四份知识的索引)、风格词典.md(描述词 → 参数、macOS 字体对照、27 种风格各怎么做,用法三主要查它)、讲解动画通用规则.md(字号、对比度、字幕安全区、颜色预算、一镜一事、动效时长,注了出处)、风格卡模板.md(新风格的空白风格卡)、动效和画面变化.md(v1.2:每个镜头的变化清单、多久一个新变化、各风格的转场、分层和推拉、动画原则、盲测里好用的手法、丰富度自查表、共用部件用法)。
