Cs Web Promo Film

<!-- CS Skills · 陈硕 | portable skill entry | https://github.com/ChenShuo2004/cs-skills -->

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. 先问清三件事，其余自己定

只有这三件会改变片子的骨架，缺了必须问：

1. 时长与用途（15/30/40/60 秒；投放在哪、给谁看）
2. 叙事顺序（先讲什么后讲什么；哪个是主入口）
3. 色调气质（暖深色 / 冷深色 / 明亮 / 跟随品牌页）

页面上能查到的（有几个板块、工具叫什么、链接指向哪）自己去页面上看，不要问用户。

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 做三项：

1. 每段中点抽静帧，逐张检查取景是否裁切、文案是否叠压、指针是否落在链接上。
2. node scripts/luma-sweep.mjs 扫全片亮度，确认转场处没有掉黑。
3. 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 控制输出帧率，裁切一律用 CSS overflow 做，不要写滤镜。
• 静音音轨：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，不要默默降画质。

最终回复

说明：成片路径与规格（分辨率/帧率/时长/有无音轨/体积）、叙事顺序、素材来源页面、做过的调色与隐藏处理、验收结论，以及改时长、改文案、改运镜分别改哪个文件。