应用演示视频
核心理念
魅力来自应用本身。构建一个深色电影感的UI，使其有节奏地跳动、闪烁并宣布真实结果；然后录制该UI；最后在后期编辑中添加保留字幕栏、推近效果和排版标题与结尾卡片。
如果内容还不是一个应用——例如管道、评分数据集、成本模型、CLI——则先将其搭建为一个小型可面对镜头的前端（参见FRONTEND_STYLE.md和theme.css）。不要直接跳转到排版幻灯片或视频模型。
不要使用视频生成模型、图像生成模型或TTS来生成演示。标题和结尾卡片使用排版。默认画面为静音；除非简报要求添加音效，否则不要添加库存音乐或语音。
一个经过处理的匿名示例（包含三种剪辑方式：叠加字幕 vs. 幻灯片 vs. 在实时会话上保留字幕栏）位于REFERENCE_CASE.md中。
资产
所有路径均相对于此技能文件夹。
FRONTEND_STYLE.md— 设计令牌、组件模式、文案语气、动效规范、录制前检查清单theme.css— 可拖入的CSS变量、极光/玻璃/发光效果、关键帧tailwind-theme.css— Tailwind v4@theme代码片段./record_demo_template.py— 参数化Playwright录制器./edit_demo.py/./edit_demo.sh— 标题、字幕、推近效果、结尾卡片、编码example_timeline.json— 编辑器读取的节拍列表REFERENCE_CASE.md— 匿名处理的工作示例以及从三种剪辑中汲取的经验教训
视觉风格（快速参考）
应用内主题（亦见FRONTEND_STYLE.md和theme.css）：
| 角色 | 色号 |
|---|---|
| 页面墨色 | #05060A / #0A0C14 / #11131F / #1A1D2E |
| 正文文字 | #E5E7F0 |
| 青色（在范围内的/实时） | #22D3EE / #67E8F9 |
| 紫色（繁重或付费的引擎） | #A855F7 / #A78BFA |
| 品红（渐变终点） | #F0ABFC |
| 翡翠色（匹配/完成/总计） | #10B981 |
| 玫瑰色（威胁/硬停止） | #F43F5E |
| 琥珀色（差距、假设、未批准） | #F59E0B |
| 金色（成就爆发） | #FBBF24 |
极光清洗、渐隐的48px网格、玻璃卡片、颜色编码的发光效果。UI使用Inter字体，时钟和反馈使用JetBrains Mono，使用表格数字。加载字体；仅在主题中命名不够（theme.css包含导入）。标题为font-black tracking-tight，大小约为48-60px，其中一个词使用#67E8F9 → #A78BFA → #F0ABFC文字渐变。引导文字为11-13px大写，字间距0.14-0.25em。
字幕栏/标题卡片主题（编辑层，非应用）：
| 角色 | 色号 |
|---|---|
| 背景 | #08070C |
| 金色分隔线/引导文字 | #E1A01D |
| 标题 | #F3ECE3 |
| 副文本 | #9A958C |
编辑器中标题字体为粗体斜体Grotesk。./edit_demo.py会使用./fonts，或APP_DEMO_FONT/APP_DEMO_FONT_ITALIC，或系统DejaVu/Liberation字体。如果有的话，Geist Italic 900是一个不错的替代选择。
动效
共享缓动函数：cubic-bezier(0.16, 1, 0.3, 1)。计数器从前一个值开始递增（默认1.1s，KPI磁贴1.6s，投影1.8s）。活动步骤脉冲（1.4s）并伴随扩展环（1.3s）。完成效果为弹簧勾选加粒子爆发。成就提示持续约1.7s。CTA和活动步骤闪光（1.6s循环）。
安排传入事件的速度，使每次通过都清晰可读（步骤结束后约1.5s）。服务器时间和计数保持真实；仅在它们出现时延迟。运行结束后，等待约900ms，然后平滑滚动到缩放入场的结果标题。
文案语气
写得像预告片，然后用数字证明。
- 标题：一个简短比喻，一个渐变词。副标题说明观众将看到什么解锁，然后说他们将看到一个成本和置信度读数。
- 实时CTA：一个点火动词。重播CTA：一个播放动词。
- 每个步骤都有一个具体标题和一个2-3词的“标题大小写”成就，完成时弹出并在行上标记星号。
- 差距是工作，不是失败。威胁有一个命名的防护。未批准输出在UI中标记。页眉中保留安全/只读行。
- 成本精确（足够的小数位，避免小于一分钱变为$0.00）并标记为计费与估算。假设在磁贴上命名。
- 全工作流的成本或价值比较及其注释存在于产品中，以便摄像机可以滚动到它们。
演示用户体验
?replay=<id>（可选?speed=）以真实时序自动启动先前计费的运行，并且UI显示是重播。?run=<id>（可选?backend=）重新打开一个已完成的运行以进行仪表板重拍，而不重新计费。- 实时路径：上传或连接真实数据 → 如果需要，确认付费引擎 → 点火 → 节奏时间线+请求反馈 → 仪表板、投影、成本面板、注释。
工作流程
- 为镜头样式化前端。 如果没有UI，则搭建一个。应用
theme.css（如果应用使用Tailwind v4则同时应用tailwind-theme.css）。遵循FRONTEND_STYLE.md中的检查清单。 - 锁定真实数据。 使用实时运行或忠实重播装置。之后的每条字幕必须能够引用出现在屏幕上或运行自身指标中的数字。
- 使用Playwright录制 在 1920×900。不要在页面上添加字幕药丸——它们会遮挡UI。编写连续拍摄（落地页 → 工作流程 → 结果），每个停留2-4秒并缓慢滚动。使用
./record_demo_template.py。保持Playwright的原生帧率（通常为25 fps）。 - 编辑 使用
./edit_demo.sh。画布为1920×1080：一个1920×900的应用面板位于保留的 180px 栏（#08070C/#E1A01D/#F3ECE3/#9A958C）之上。约 2秒 标题卡片，硬切（非1秒交叉淡入淡出），~0.4秒 1.3倍推近效果 仅应用于应用面板（栏保持不变）。以 应用内 成本或价值比较结束，然后是 ~3秒 注释卡片。目标时长 60-70秒。默认静音（为了播放器兼容性，静音AAC轨道也可以）。 - 验证帧。 确认栏从未遮挡UI、推近效果未裁剪栏、并且每条带字幕的数字都在屏幕上或标记为假设。
- 处理过程讲解应放在单独的幻灯片中。 架构、工作原理和要点卡片不能替代本视频中的会话。
字幕语气
- 引导文字：几个分散的大写单词（
实时会话、任务完成、关键点）。 - 标题：一到两个短句。使用句号，而非省略号。
- 将令人惊讶的测量事实放在首位：计数、时间、成本、发现什么。
- 指向当前屏幕上的内容，然后添加要点。不要讲解教程。
- 当切到应用内成本面板时，说明那是应用自己的面板，而不是幻灯片。
失败模式
| 错误 | 修复 |
|---|---|
| 页内HTML/CSS字幕叠加 | 始终在应用下方保留字幕栏 |
| 截图拼贴或排版“过程”幻灯片作为主体 | 录制会话；将过程卡片移到幻灯片中 |
| 每个节拍之间使用交叉淡入淡出 | 硬切；将动效保留给推近效果和应用本身 |
| 虚构或未标记的四舍五入数字 | 复制运行的数字；标记假设 |
| 推近效果缩放整个1080p帧并裁剪栏 | 仅缩放1920×900面板 |
| 以架构或工作原理图结束 | 以产品的成本/价值比较结束，然后是注释 |
| 使用视频模型生成“演示” | 仅使用Playwright + ffmpeg |
| 添加画外音或音乐“使其更具电影感” | 默认静音；画面和字幕承载效果 |
| 扁平UI、数字弹出、没有应用内成本面板 | 首先样式化应用（FRONTEND_STYLE.md）；不要试图仅在编辑中修复 |
| 标题或CTA写得像设置页面 | 比喻 + 渐变词；实时使用点火动词，重播使用播放动词 |
| CSS中命名了字体但从未加载 | 从theme.css添加Inter + JetBrains Mono导入 |
| 因为“没有应用”而将数据集或CLI录制为幻灯片 | 先搭建一个小型前端来增加魅力，然后录制它 |
快速开始
需要 ffmpeg 和 Python 3。
python3 -m venv .venv && .venv/bin/pip install playwright pillow && .venv/bin/python -m playwright install chromium
# 1. 样式化应用（theme.css / FRONTEND_STYLE.md）使其在镜头前表现出色。
# 2. 在应用运行并且录制器中的 actions() 已填好后：
.venv/bin/python ./record_demo_template.py --out demo_raw.webm
./edit_demo.sh --input demo_raw.webm --timeline example_timeline.json --output demo.mp4
可选：将Geist（或其他粗体斜体Grotesk）放入 ./fonts，或设置 APP_DEMO_FONT 和 APP_DEMO_FONT_ITALIC。
目的
从真实会话制作工作应用的戏剧性演示、宣传或发布视频。样式化一个可面对镜头的前端，使用Playwright录制，并使用ffmpeg合成保留字幕栏、推近效果和排版标题与结尾卡片。管道、数据集、成本模型或CLI首先被搭建为该前端。
输入
- 在录制器基URL（
record_demo_template.py中默认为http://127.0.0.1:8765）上运行的应用，或为录制而构建的小型前端。 - 真实数据，或先前计费运行的忠实重播。带字幕的数字来自屏幕或运行的指标，或标记为假设。
record_demo_template.py中已填好的actions()。- 类似
example_timeline.json的时间线JSON。 - ffmpeg、Python 3、
playwright、pillow。可选在./fonts中的斜体Grotesk，或APP_DEMO_FONT和APP_DEMO_FONT_ITALIC。 theme.css、应用使用Tailwind v4时的tailwind-theme.css，以及FRONTEND_STYLE.md中的检查清单。
输出
- 来自
record_demo_template.py的原始拍摄（.webm，或使用--transcode时为.mp4）。 - 来自
edit_demo.sh的编辑文件：1920×1080 H.264，通常60-70秒，静音AAC。一个1920×900的应用面板位于180px的字幕栏之上，附带约2秒的标题卡片、硬切、约0.4秒1.3倍的应用面板推近效果，以及约3秒的注释结尾卡片。
非目标
- 视频生成模型、图像生成模型和TTS。
- 库存音乐或语音，除非简报要求添加音效。
- 页内字幕叠加、截图拼贴和交叉淡入淡出的过程幻灯片作为主体。
- 虚构的数字或未标记的四舍五入数字。
- 使用架构或工作原理幻灯片替代会话。
检查
FRONTEND_STYLE.md录制前检查清单通过，包括已加载的Inter和JetBrains Mono以及可读的1920×900帧。- 保留栏从未遮挡UI。推近效果仅移动1920×900面板，因此栏保持全宽且未被裁剪。
- 每个带字幕的数字都在屏幕上或在运行指标中，或者字幕和结尾卡片都将其称为假设或投影。
- 剪辑为硬切，时长约60-70秒，除了编辑器混入的静音AAC外，音轨为静音。
bash -n edit_demo.sh和python3 -m py_compile（作用于edit_demo.py和record_demo_template.py）均成功。
失败模式与恢复
使用上面的 失败模式 表格。恢复：
| 你看到什么 | 你该做什么 |
|---|---|
| 字幕覆盖按钮或图表 | 删除页面内叠加层。将该行放入时间线并重新运行./edit_demo.sh。 |
| 主体是静态图像、拼贴或交叉淡入淡出 | 使用./record_demo_template.py录制会话并在节拍之间硬切。 |
| 推近效果裁剪了栏 | 保持zoom在节拍上。edit_demo.py仅缩放应用面板。 |
| 字幕中的数字不在屏幕上 | 复制仪表板或运行指标中的数字，或在磁贴和结尾卡片上标记假设。 |
| 扁平UI、数字弹出或无成本面板 | 从theme.css和FRONTEND_STYLE.md重新样式化，然后重新录制。 |
| 编辑器因找不到字体而退出 | 在./fonts下添加.ttf，或设置APP_DEMO_FONT和APP_DEMO_FONT_ITALIC，然后重新运行./edit_demo.sh。 |
| 源是笔记本、CLI或电子表格 | 围绕真实数据构建FRONTEND_STYLE.md中的小型前端，然后录制它。 |