Files

Dmytro Stanchiev abb472c83d chore: ruler files update

Signed-off-by: Dmytro Stanchiev <git@dmytros.dev>

2026-05-24 21:03:49 -04:00

14 KiB

Raw Permalink Blame History

Launch Film 工作流：先写万字 director's notes，再做动画

高规格视觉作品（≥ 20 秒、含品牌叙事、含 slogan reveal、可能上 X / 公众号 / B 站推广）的标准工作流。

触发条件：任务是「产品升级宣传片 / 品牌 launch film / launch trailer / superbowl-tier ad / brand campaign / hero animation video」，且用户对质量有明确预期（如「超级碗品质感」「10x 细节」「Apple 级别」）。

反触发：不要在「快速做个动画 demo」「简单 motion graphic」「单个图标动画」时用这条流程——会过度工程化。

1. 为什么先写 director's notes

实战教训（2026-05-11 huashu-md-html v2.0 项目）：

第一轮直接动手写 HTML，产出的是「程序员视角的动画」——每个 capability 平均用力、节奏匀速、slogan 撞在一起、缺少叙事弧。第二轮接到用户「停下，先按苹果导演视角写 1 万字分镜脚本」的指令，写了 v5-director-notes.md（11500 字、13 镜 shot-by-shot spec），然后按脚本实施——一次过、每帧 pause 都耐看、节奏起伏有 climax。

核心差异：写脚本是 think，写 HTML 是 execute。先 think 透了，execute 就是机械翻译。先 execute，每个 shot 都是临场决策，必然乱。

写 director's notes 不是「装」，是把所有视觉决策在动手之前沉淀成文档——每一镜都已经在脑里 visualize 过、reasoning 过、和上下文 trace 过。HTML 实施时不需要再做创意决策，只需要忠实翻译。

2. 触发判断（先问自己 3 个问题）

启动 launch film 工作流前问：

这支片承担品牌叙事吗？（有 thesis / slogan reveal / 升级仪式感）—— 是 → 走 director's notes 流程
观众会暂停看吗？（可能截图、做 X 海报、做封面、慢速 review）—— 是 → 每帧要耐看
客户/用户有「我希望像 XXX 那样」的参照？（Apple / Anthropic / Nike / Penguin / 某导演）—— 是 → 必须明确视觉语境

任一为「是」就走流程。三个都「否」就跳过，直接用 animations.md 的标准流程。

3. Director's Notes 的 5 大部分结构

万字（10000-12000 字中文 / 等量英文）director's notes 必须包含这 5 大部分。任一部分缺失都属于不完整，质量会受影响。

Part I · Director's Statement（创作论，约 1500-2000 字）

回答 5 个问题：

这部片不是什么？（明确排除——如「这不是功能介绍片」「不是 demo」）
核心 thesis 一行——观众看完只记一句话是哪句？
跟谁的语境对话？——列出 5-8 个视觉参照（导演 / 设计师 / 品牌 / 摄影师 / 作品名 + 年份），说明每个参照学了什么
三类观众画像 + 对每类的承诺：主受众 / 次受众 / 外受众，各对应一段
节奏哲学——慢拍 / 加速 / 顶峰 / 缓收的曲线说明 + emotional climax 在第几秒（不一定是最后一秒）

最后加一段 anti-slop checklist：这部片不做的事（具体列出，不模糊）。

Part II · Visual System（视觉系统全谱，约 1500-2500 字）

这是工程化的视觉 spec。完整后任何执行者拿到都能产出一致的视觉。

必含子节：

完整色板：至少 8-10 色，每色含 HEX + 功能定义 + 占画面比例上限
字体系统：至少 6 个字号层级，每层级含字体名 + weight + size + letter-spacing + 用途
网格系统：画布尺寸 + 外边距 + column grid + baseline grid + 关键安全区 + 黄金分割锚点
动画系统：easing 库（4 条以内）+ duration 字典 + stagger 法则 + scene 过渡规则
Chrome 元素：贯穿全片的小细节（counter / chip / ticker / watermark / texture），每个含位置 + 入退场时机
音频系统：BGM 30 秒走向曲线（分层）+ SFX 字典（10+ cues 含时间码 + 音量 + 频段隔离）
反 AI slop checklist：per-shot 自检表（10-15 项）

铁律：所有视觉决策都从 Visual System 推导，不要在 shot list 里临时发明新值。

Part III · Story Arc（故事弧，约 500-800 字）

三幕结构 + 情绪曲线：

Act I · SETUP（0 → 第 1/5 时长，e.g. 0-6s for 30s）：观众进入，问题被提出
Act II · ESCALATION（中间 2/3）：答案展开，主题铺陈
Act III · PAYOFF（最后 1/4）：升华、slogan reveal、品牌印章

含 ASCII 情绪曲线图 + emotional climax 时刻标记。

关键决策：climax 不一定在末尾。30s 片子 climax 通常在 22-25s（不是 29s）——最后几秒是 resolution / decay，不是 peak。这条规则违反必然让作品「虎头蛇尾」。

Part IV · Shot-by-Shot Storyboard（分镜脚本，约 5000-7000 字 · 占 60% 篇幅）

每镜含 10 个字段（缺一不可）：

SHOT NN · NAME
[TIMECODE]    起止时间 + 时长
[FUNCTION]    这一镜在故事弧中的功能（一句话）
[VISUAL]      画面构图 + 元素位置 + 运动方向
[TYPE]        排版 spec（字体 / 字号 / 字距 / 行高 / 颜色 / 对齐）
[ANIM]        每元素 in/out 时机 + easing + duration + stagger + delay
[AUDIO]       music beat + SFX cue（每镜对应 BGM 节奏 + 必含 SFX 时间表）
[CHROME]      四角元素状态（哪些 chrome 在 / 哪些 fade in/out / 哪个 pulse）
[ANTI-SLOP]   这一镜通过了哪些自检项 + 有什么 120% 细节签名
[WHY]         承接上一镜的逻辑 + 推进下一镜的钩子

字段平均 30-80 字 → 每镜 400-700 字 → 12-15 镜 → 5000-7000 字。

实战经验：写完 storyboard 后自己读一遍——任意一镜删掉，整支片是否还成立？如果可以删，那镜就是多余的，删掉。

Part V · Production Manifest（制作清单，约 800-1200 字）

工程交付清单：

字体加载 URL（含 preconnect）
CSS 变量（直接可粘贴）
BGM 来源选择标准 + Suno/Udio prompt 关键词 + 备选库
SFX 字典（按时间码逐 cue 列出文件路径 + 音量）
关键帧验证计划：12-15 张 pause-and-check 关键帧时间码，每帧验证项列出（fonts / positions / chrome state）
录制参数（fps / codec / bitrate / preset）
ffmpeg 音频混合命令（含 audio stream 验证）
交付物清单（mp4 / mp4-60fps / gif / poster.png / silent.mp4 / shot-list.csv）
全链路时间估算（小时级精度）

4. 写 director's notes 的 5 条建议

4.1 用导演的口吻，不用 PM 的口吻

❌「This shot displays the product features.」 ✅「This is the hero shot — if the audience pauses anywhere, I want it to be here.」

导演笔记是给执行者读的，但也是给未来的自己读的。第一人称 + judgment 表达比 description 表达留更多决策线索。

4.2 引用具体作品（含年份），不只是流派名

❌「Apple-inspired」 ✅「Apple 'Designed by Apple in California' (2013, dir. Mark Romanek) — 学的是慢拍 + 衬线 + 大白底」

引用具体作品的好处：(a) 任何观众都能上网搜到对照 (b) 你逼自己想清楚学的是什么具体技术 (c) 防止「灵感模糊」。

4.3 每个决策都 trace 回 first principle

整支片有一句 first principle（如 "Markdown is the new typewriter."）。每个具体决策——配色 / 字体 / 节奏 / chrome——都要能 trace 回这句话。

trace 不上的决策就是装饰，删掉。

4.4 写 anti-slop 比写 do-this 更重要

「这部片不做的事」清单（紫渐变 / emoji / Lorem ipsum / Inter display / SVG 画人物 / 圆角卡 + 左 border accent）比「这部片做的事」清单更能保护质量。

正向决策无穷多，负向 checklist 是有限的——但负向 checklist 一旦违反就是 slop。

4.5 写完不要立即实施——隔 30 分钟再读一遍

写作时大脑在「生产模式」，看不见 inconsistency。隔 30 分钟读自己写的 storyboard，会发现：

某两镜功能重复（删一个）
某镜叙事跳跃太大（加过渡）
emotional climax 位置错（移动）
chrome 元素和 shot 数量不匹配（重新对齐）

这 30 分钟省下的是后期 2 小时的返工。

5. Director's Notes → HTML 实施流程

写完 director's notes 后，HTML 实施步骤：

复用 starter components（assets/animations.jsx 的 Stage/Sprite/Easing/interpolate）— 不重新发明
CSS 变量直接从 Visual System Part II 粘贴 — 不在 HTML 里临时改色
按 Sprite start/end 时间轴对照 Part IV 时间码 — 不擅自加镜
chrome 元素抽成独立组件（ChromeA/B/C/D），用 useTime() 驱动状态切换
destination cards 内容必须真实可读（不是 fake bar lines）—— 这是 v5 项目里最被反复提及的 120% 细节签名
每写完一镜就立即截关键帧验证（用 ?t=NN URL 参数 + Playwright），不要写完全片再统一验证

6. 关键帧验证流程

URL 参数实现（必须在 Stage 组件加）：

const urlMatch = window.location.search.match(/[?&]t=([\d.]+)/);
const frozenTime = urlMatch ? parseFloat(urlMatch[1]) : null;
const [time, setTime] = useState(frozenTime != null ? frozenTime : 0);
const [playing, setPlaying] = useState(frozenTime == null);

→ 这样 file:///path/animation.html?t=14.5 直接 freeze 在 14.5 秒。

批量截图：

for t in 0.5 2.5 4.9 7.0 10.5 13.5 16.5 19.0 21.5 23.4 25.5 28.0 29.9; do
  npx -y playwright screenshot \
    "file://$PWD/animation.html?t=$t" \
    "keyframes/t-$t.png" \
    --viewport-size=1920,1136 \
    --wait-for-timeout=2500
done

每张截图必须验证：

元素无溢出 1920×1080 canvas
字距、行高 visually correct（不挤、不散）
关键 typography 细节（句点颜色 / em-dash / italic / small caps）可识别
chrome 元素位置 + 状态正确
反 AI slop checklist 通过
「pause 时值得看」的 120% 细节存在

7. 多视角并行策略（advanced）

复杂项目（如 launch film 选不出方向 / 想看多个美学差异 / 客户没拍板风格）可以启动多个 subagent 并行做不同导演视角的版本。

实战配置（2026-05-11 huashu-md-html 项目，并行 6 个版本）：

v5  · 基线（Anthropic / Penguin Classics 出版社品位）
v5a · Wes Anderson（对称 + 复古 + 章节卡片）
v5b · Saul Bass（剪纸 + 60s 大字 + 几何切割）
v5c · 王家卫（中文衬线 + 慢动作 + 怀旧）
v5d · Massimo Vignelli（现代主义 grid + 红黑）
v5e · 原研哉 Kenya Hara（极简日式 + 留白）
v5f · 草间彌生 Yayoi Kusama（圆点 + 重复 + 单一强色）

每个 subagent 接到独立 brief：

项目背景（同一份）
必读参考（同一份 v5-director-notes.md 作为方法论模板）
指定的艺术家 DNA（色板 / 字体 / 视觉语言 / 节奏 / 招牌元素 / 反 slop 强化版本，每条 30-50 字）
统一任务清单（director-notes.md + animation.html + keyframes/ + README.md）
统一约束（30s / 1920×1080 / file:// / Google Fonts）

并行启动 + 后台运行，约 30-60 分钟出 6 套完整版本。

完成后审校对比：

各版本核心美学决策表
关键帧并排对比（每版同时刻一帧）
投票：哪个最贴合用户的真实需求

关键：不要让 subagent 之间相互参考——它们必须独立产出，否则就会撞到「平均值」。每个 subagent 的指令里要明说「不要重复 v5 的美学」。

8. 触发的几种典型场景

用户场景	是否触发	备注
「做个 SaaS 升级宣传片」	✅ 触发	默认走完整流程
「Apple 级别 / 超级碗品质感的视频」	✅ 触发 + 升级	强力推荐多视角并行
「30 秒品牌 launch film」	✅ 触发
「这个项目 1 万字脚本再做动画」	✅ 触发	用户明确指明
「简单 motion graphic，logo 转一下」	❌ 不触发	用 animations.md 标准流程
「做个 onboarding 动画 demo」	❌ 不触发	用 animations.md
「教程视频带配音」	❌ 不触发	走 voiceover-pipeline.md
「单个 hero animation」	⚠️ 看复杂度	如果是高规格 hero，触发；普通 hero 用 hero-animation-case-study.md

9. 参考样本

完整 director's notes 参考样本（self-contained，本 skill 内）：

assets/director-notes-samples/launch-film-30s-sample.md（约 78KB · 11500 字 · 13 镜 · 5 大部分齐全）

原始项目位置（含对应实施 HTML + 关键帧）：

~/.claude/skills/huashu-md-html/demos/v5-director-notes.md（director's notes）
~/.claude/skills/huashu-md-html/demos/v5-six-forms.html（HTML 实施）
~/.claude/skills/huashu-md-html/demos/v5-keyframes/（关键帧验证截图）

写新项目时强烈建议先 Read 这份样本，理解工作量和细节密度，再决定要不要全套走流程。

10. 反模式（不要这样做）

❌ 写 1000 字的精简版 director's notes 就动手 → 精简版必然漏 Visual System 的某个子项，导致 HTML 实施时不停回头补 spec。要做就做万字级，要省就直接跳过。

❌ storyboard 只写 5-8 镜 → 30 秒片至少 12-15 镜（每镜 2-3 秒）。镜少 = 节奏匀速 = 没 climax。

❌ director's notes 写完就交付，不做实施 → 文档不是交付物，动画才是。文档 + 动画一起交付，文档作为「设计依据」附录。

❌ 多视角并行时让 subagent 看其他版本 → 各 subagent 必须独立，否则趋同。审校阶段才对比。

❌ 跳过关键帧验证直接录 MP4 → 必然返工。关键帧验证是最便宜的 quality gate。

❌ 把动画细节决策推迟到「等我录的时候再想」 → 录制阶段是机械执行，不能做创意决策。所有决策必须在 director's notes 写死。

最后修订：2026-05-11 真实案例：huashu-md-html v2.0 launch film（v5-director-notes.md）

14 KiB Raw Permalink Blame History Unescape Escape