CS 网页宣传片
把真实页面做成有「产品演示」质感的短片。核心主张：不重绘产品界面，只决定镜头怎么看它。片中每一个像素都是页面上真实存在的东西，可信度全部来自这一点。
交付边界
- 默认交付一个 Remotion 工程 + 一支 mp4：1920×1080、60fps、30–60 秒、H.264。
- 默认无音轨（留给后期配 BGM）。用户要 BGM 或口播时才加，且口播稿单独出
VO.md。 - 页面内容一律来自 Playwright 采集的长截图，禁止用 HTML/CSS 重画产品界面、禁止手打页面上的文案当作截图内容。
- 只拍匿名访客能真实打开的公开页面。付费浮层、cookie 条、站方广告可以在采集时隐藏，产品功能区不得改动。
- 调色（整体曝光）允许，改内容不允许。
- 不部署、不上传、不发布。仅在用户明确要求后导出其他规格或分发。
- 网页幻灯片不是本 skill。电商对标复刻交给
$cs-auto-videl。ChatCut 策划与剪辑交给$cs-chatcut。
先读什么
按当前阶段读最少的资料：
- 采集页面、量元素坐标：references/capture.md
- 设计运镜、写分镜、搭工程：references/camera.md
- 需要提升动效质感时，把参考、节拍和视觉事件写成导演 brief：references/motion-direction.md
- 渲染、抽帧验收、修接黑、去音轨：references/render-qa.md
- 写口播稿：references/voiceover.md
- 交付前自检：references/quality-checklist.md
把 scripts/ 拷到工程根；把 assets/promo-starter/src/ 拷到工程 src/；采集配置从 assets/capture.config.example.json 复制为工程根的 capture.config.json。不要从零手写窗口和动画工具。PromoFilm.tsx 是每个片子唯一需要真正手写的文件。
工作方式
1. 先问清三件事，其余自己定
只有这三件会改变片子的骨架，缺了必须问：
- 时长与用途（15/30/40/60 秒；投放在哪、给谁看）
- 叙事顺序（先讲什么后讲什么；哪个是主入口）
- 色调气质（暖深色 / 冷深色 / 明亮 / 跟随品牌页）
页面上能查到的（有几个板块、工具叫什么、链接指向哪）自己去页面上看，不要问用户。
2. 打开页面，摸清真实结构
动工前必须先采一轮截图并实际看图。常见的意外，早发现比返工便宜：
- 用户给的链接不是他以为的那一页（分享链接常指向子页）。
- 关键板块未登录不渲染（书架、收藏、个人数据），片子不能靠它承担叙事。
- 页面在内层容器里滚动，
fullPage: true只截到一屏。 - 浅色页面和深色页面混排，直接切会闪。
结构和用户的预期不一致时，带着截图说明现状，给出可行的替代取材，再继续。
3. 采集：一次采全，采准
运行 node scripts/capture.mjs，把目标写在工程根的 capture.config.json。要点见 capture.md，最关键的两条：
- 先滚到底触发懒加载，再把 viewport 撑到
scrollHeight高度截图，不要指望fullPage。 deviceScaleFactor: 2，逻辑宽度固定 1440，之后所有坐标都用这套逻辑单位。
采完把每张图的真实像素高度填进 tokens.ts 的 PAGES，运镜全靠它换算。
4. 量坐标，不要目测
运行 node scripts/measure.mjs 产出 boxes.json，拿到每个关键元素的页面坐标。所有推进落点、平移目标、点击位置都从实测坐标算。目测的运镜一定会把四列网格裁成三列半，或者把指针点在链接旁边的空白上。
5. 写分镜，再搭片子
分镜先落成一张表：时间、画面、镜头动作、屏幕文案。一段只做一件事，一次只推进一个信息。若用户要求高级动效或提供参考片，先按 motion-direction.md 明确观看主次、关键事件、层间错相和可检验的禁止项，再实现镜头。
节奏基准（40 秒片）：开场题字 3–4 秒，每个内容段 6–8 秒，转场 0.85 秒，收尾 3 秒。段落少于 6 秒观众来不及读完屏幕文案。
然后按 camera.md 搭 PromoFilm.tsx：每段一个 Layer，所有几何量用同一组 stops 打关键帧，转场用共享的 CUT 区间。
6. 渲染并逐段看图验收
渲染后必须抽帧并真的读图，不能只看渲染成功就交付。按 render-qa.md 做三项：
- 每段中点抽静帧，逐张检查取景是否裁切、文案是否叠压、指针是否落在链接上。
node scripts/luma-sweep.mjs扫全片亮度，确认转场处没有掉黑。ffprobe确认时长、帧率、无音轨。
发现问题改参数重渲，不要在文档里记「已知瑕疵」蒙过去。
7. 需要口播时单独出稿
按 voiceover.md 写。铁律：口播不复述屏幕上已有的字，画面负责「是什么」，口播负责「为什么值得」。加了口播就要回头删掉画面里重复的正文行。
默认无音轨时，信息由底部字幕承担，规则相同：不复述页面上已有的字，每句 11–16 字。
8. 多画幅是两套取景，不是裁切
默认只做 1920×1080。用户明确要竖屏或 3:4 时：
- 同一条叙事、同一套
CUT/ 字幕 / 数字口径。 - 另写一份 Film 文件重排窗口，不要把 16:9 裁成 9:16。桌面三栏页直接裁会切卡片。
- 竖屏常见改法：网格改两列纵滚、落地页用短窗口避开会过期的模块、字幕上移躲开平台控件。
- 规格：9:16 用 1080×1920；3:4 用 1080×1440。帧率仍 60。
9. 片中数字必须能从页面重新拉出来
专题数、工具数、节点数一律读自公开页，写进常量，采集当天记下日期。产品增减时先复核再重渲，不要用手写记忆。会随日期变化的模块（「今天一眼看懂」、黄历、个性化推荐）不要入镜。
硬约束
这些是踩过的坑，不要重犯：
- 转场接黑：两层各自用 ease-out 曲线交叉淡化，不透明度之和小于 1，转场处会闪一下黑。必须用近线性曲线，且出场层的淡出区间与入场层的淡入区间完全相同。改完用 luma-sweep 验证，不要靠眼睛。
- 浅色页混排：浅色页放到深色画布上要整体压曝光到 0.93–0.95，否则切过去像闪光灯。这是调色，不改内容。
- 窗口消失在背景里：近黑的产品页放在近黑画布上会糊成一团，窗口后面需要一层暖光 halo 和足够强的投影把它托起来。
- Remotion 自带 ffmpeg 阉割：
fps、crop等滤镜被禁用。抽帧用-r控制输出帧率，裁切一律用 CSSoverflow做，不要写滤镜。 - 静音音轨：Remotion 即使没有音频源也会写一条静音轨。交付前用
remotion ffmpeg -i in.mp4 -c:v copy -an out.mp4剥掉，不要重编码视频。 - 字体：中文用
@remotion/google-fonts载入并waitUntilDone()，不要依赖系统字体，渲染机上不一定有。 - Windows 浏览器路径：Playwright 会去找沙箱缓存。采集前先
$env:PLAYWRIGHT_BROWSERS_PATH="$env:LOCALAPPDATA\ms-playwright"，否则报Executable doesn't exist。 - 浅色片不要压曝光：全程浅色页时
grade保持 1，用略深于页面的画布加投影分层。只有深浅混排才压到 0.93–0.95。 - 大图不要同时挂载：同一段里多张 2× 长截图
alpha接近 0 时直接return null。六张 2880px 图一起解码会报EncodingError。 - 渲染并发：出现解码错误时加
--concurrency=2，不要默默降画质。
最终回复
说明：成片路径与规格（分辨率/帧率/时长/有无音轨/体积）、叙事顺序、素材来源页面、做过的调色与隐藏处理、验收结论，以及改时长、改文案、改运镜分别改哪个文件。
