参考视频 → 一套新风格素材包
参考成果:暗金文献风(src/library/gilded/、library-gilded、styles/我的风格/暗金文献风/),就是从一支参考视频(不进 git)蒸馏出来的。用户认可的效果:风格一眼认得出来,但组件全是重写的,示例内容是自己编的,原片的文案、标题、水印一样没带进来。
一口气做完第 0~7 步,中途不等用户确认,每步做完用一两句话同步进度。不导出、不提交 git,除非用户另外要求。动手前先读工程根目录 CLAUDE.md、src/library/README.md、styles/README.md。所有 npm / npx / node 命令前先 export NODE_OPTIONS=--max-old-space-size=4096。
蒸馏的边界(先想清楚再动手)
蒸馏的是画面语法,不是内容。风格本身(配色倾向、字体搭配、版式网格、出场方式、转场手法、节奏)可以学;具体作品不能搬。
- 学:配色体系、字体气质和层级、版式位置、元素的入场 / 退场 / 转场方式、缓动和时长、镜头运动、节奏(硬切频率、镜头长度、卡点)、图表 / 道具的画法、质感(颗粒、光晕、纸纹)。
- 不搬:原片的文案和字幕、标题、具体的场景编排和分镜顺序、创作者的名字 / 水印 / 品牌标识、原片里的人物肖像、第三方 logo 和商标。
- 角色:原片里有知名的版权角色(动漫、游戏、品牌吉祥物)时,学的是它的构造手法(几何、比例、描边、上色方式),画一个明显不同的原创角色,不画得「差不多像」。
- 音乐:原片配乐不进素材包;要用的话走音乐库(
public/music/),并在 README 里写明授权未确认。 - 预览作品里的示例文案自己写,换一个和原片不同的题目;引用的书名、人名用「示例文献」「示例人物」这类占位。
用户说「一比一复刻」时,照上面的边界做,回复里一句话说明「风格一比一,内容不搬」。
0. 定风格 ID 和目录
- 风格 ID:英文小写 kebab-case,取画面最显著的特征(
gilded、ink-scroll、neon-grid),不和src/library/已有目录重名。中文名 3~6 个字(暗金文献风、宣纸水墨风)。 - 拆解包放
materials/distill/<风格ID>/<视频名>/(materials/不进 git,原片的帧不能进仓库)。 - 产出:
src/library/<风格ID>/、src/library/previews/<Name>Demo.tsx、styles/我的风格/<中文名>/README.md+预览.jpg。
1. 机器拆解(每支视频跑一遍)
uv run --with numpy --with pillow python .claude/skills/weilanx-creator-distill-video/scripts/analyze.py \
<视频> --out materials/distill/<风格ID>/<视频名>
产出 report.md(先读这个)、data.json、keyframes/(每个镜头的关键帧)、sheets/(每 3 秒一格的联系表)、palette.png。报告里有:硬切和镜头表、每秒运动强度、主色板(按面积)和强调色(按有彩像素,背景再大也不会把它淹没)、亮度饱和度、音频响度和卡点(调用暗金风 skill 的 beats.py)。
硬切太多或太少时调 --cut(默认 0.30,越小越敏感);联系表太密或太疏时调 --every。
2. 人眼拆解:看懂它为什么好看
详见 references/拆解方法.md。顺序:
- 联系表通看一遍,分出几类画面(标题卡、年份抬头、图表、实物、引文……),记下每类出现在哪几秒。
- 关键帧逐张看,裁出局部放大看字体、描边、阴影、质感(
ffmpeg -vf crop=…)。 - 动效切片:入场、退场、转场、招牌动作各切一条,数「几帧完成」「先快后慢还是匀速」「有没有模糊 / 缩放 / 位移」:
运动强度曲线上的尖峰、镜头表里的切点前后,都值得切一条。uv run --with pillow python .claude/skills/weilanx-creator-distill-video/scripts/strip.py <视频> \ --at 16.6 --span 1.2 --n 8 --out materials/distill/<风格ID>/strips/t16.6.jpg - 取色:强调色看报告,具体元素的颜色在关键帧上取像素(
uv run --with pillow python -c "…getpixel…")。 - 多支视频时,先各自拆,再找共同的语法;不一致的地方记成「变体」(比如暖调 / 冷调两种光晕)。
3. 写风格配方卡
用 references/配方卡模板.md 的结构,写进 styles/我的风格/<中文名>/README.md:一句话定位、画面特征(底色质感、配色、字体、固定版式、出场、转场、镜头、节奏、招牌画面)、组件清单、关键代码位置、期数表、「没有搬的东西」。这是写代码前的设计稿,写清楚了再动手。
4. 写素材包代码
照 src/library/gilded/ 的分层写(它就是第一次蒸馏的成果,结构可以直接参考):
| 文件 | 放什么 |
|---|---|
theme.ts | 配色常量、字体常量、渐变字 / 发光这类样式函数、通用出场函数(如 soft)和缓动 |
stage.tsx | 舞台层:背景、质感(颗粒 / 浮尘 / 纸纹)、固定版式元素(抬头、引用、字幕)、标题卡、引文、柔入容器 |
props.tsx | 实物和道具 |
charts.tsx | 这个风格画图表的方式(只在原片有图表时写) |
硬规则(工程约定,见 CLAUDE.md):
- 动画是帧号的纯函数:组件收
f算样子,随机只用rand(seed),不用 CSS 动画和Math.random()。 - 素材库不能 import
src/episodes/。 - 字体用仓库里已有的(
public/fonts/,OFL)或系统字体;要新加字体先确认许可,加进public/fonts/并更新public/fonts/LICENSES.md。 - 每个组件写一行中文注释说明用途和关键参数。
5. 预览作品
src/library/previews/<Name>Demo.tsx:每 150 帧一场,把每个组件演一遍,场与场之间用这个风格自己的转场;示例文案自己写、题目和原片不同。- 导出
<NAME>_DEMO_FRAMES,在src/Root.tsx注册library-<风格ID>,画幅和原片一致。 npm run typecheck && npm test。
6. 对照自查(至少两轮)
- 每场抽一帧:
npx remotion still src/index.ts library-<风格ID> /tmp/<风格ID>/sN.jpg --frame=N --scale=0.5 --timeout=120000,一次只渲一帧(并行会内存溢出)。 - 和原片同类画面的关键帧左右拼在一起比(
ffmpeg -i 原片帧 -i 我们的帧 -filter_complex hstack),逐项对:底色、主色、强调色、字体气质、字号层级、版式位置、质感、留白。 - 动效对照:同一类入场,原片切片 vs 我们的切片,帧数和缓动对得上吗?
- 每轮列出差距 → 改 → 再渲;常见问题:小字号上的渐变字发褐、发光太弱、元素太小留白太多、图表挤在中间。
- 改完把 4 场拼成
styles/我的风格/<中文名>/预览.jpg(只用我们自己渲染的帧,不放原片截图)。
7. 登记和交付
src/library/README.md加一节(照「暗金文献风 gilded/」的格式:文件 | 内容 表 + 要点)。styles/README.md的「我的风格」表加一行;配方卡的期数表写「还未使用」。- Studio 预览链接:
http://localhost:3000/library-<风格ID>(没开就后台起npx remotion studio src/index.ts --no-open --port 3000)。 - 回复里给:这套风格的要点(3~5 条)、组件清单、对照自查改了什么、哪些东西有意没有搬、还没做到的地方。
- 用户想马上用它做一期时,接着用对应的出片工作流(无口播知识短片可以参考
weilanx-creator-gilded-video的流程,把素材包换成新的)。