# Cs Web Promo Film

> 把真实网页做成 30–60 秒产品演示宣传片：Playwright 采集页面长截图，Remotion 用虚拟浏览器窗口做推进、平移、滚动和点击，渲染可交付 mp4，并可附口播稿。触发词包括 $cs-web-promo-film、网页宣传片、产品演示片、把这个网页做成视频、产品功能演示。不用于网页幻灯片、静态海报、真人出镜、电商对标复刻（改用 $cs-auto-videl）、ChatCut 策划或时间线剪辑（改用 $cs-chatcut）。

- Skill: `chenshuo2004/cs-web-promo-film` (Agent Skill, multi-file: 20 files)
- Install (CLI): `npx skillmds@latest add chenshuo2004/cs-web-promo-film`
- Raw SKILL.md: https://api.skillmd.com/api/skills/chenshuo2004/cs-web-promo-film/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: chenshuo2004 (https://skillmd.com/u/chenshuo2004)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/chenshuo2004/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/capture.md)
- 设计运镜、写分镜、搭工程：[references/camera.md](references/camera.md)
- 渲染、抽帧验收、修接黑、去音轨：[references/render-qa.md](references/render-qa.md)
- 写口播稿：[references/voiceover.md](references/voiceover.md)
- 交付前自检：[references/quality-checklist.md](references/quality-checklist.md)

把 [scripts/](scripts/) 拷到工程根；把 [assets/promo-starter/src/](assets/promo-starter/src/) 拷到工程 `src/`；采集配置从 [assets/capture.config.example.json](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. 写分镜，再搭片子

分镜先落成一张表：时间、画面、镜头动作、屏幕文案。一段只做一件事，一次只推进一个信息。

节奏基准（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`，不要默默降画质。

## 最终回复

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