demotion — 通过真实应用界面自动生成系统演示
最终产物：一个 .mp4 文件（1920x1080，60 fps，1-2 分钟），看起来像是专业录制的应用屏幕录像，但完全由 Remotion 代码驱动，因此流畅（无真实录制的卡顿）、可重复，并在功能变更时易于更新。
工作语言：中文（回复、总结、视频字幕）。不要打开 Chrome 或登录本地应用来“查看”UI：界面的真实来源是代码；输出通过 Remotion 静帧/视频检查。
不可违反的原则
- 真实 UI，而非模仿。 复制应用程序代码中的标记 + Tailwind 类字符串 + 颜色令牌 + 字体。UI 文本（标题、标签、提示、消息）需精确复制。不要绘制“相似”的内容。
- 产品真实性源于代码。 字幕中的每个声明（价格、配额、默认值、限制、谁支付什么）都必须从代码/配置中读取，而非记忆或猜测。真实示例：“机器人测试消耗配额吗？” → 检查其 API 路由和使用记录函数后再编写字幕。代码中不存在的内容不得声明。
- 所有运动基于视频时间计算。 无 CSS 动画/过渡、无
setTimeout、无跨帧状态/缓存：每个帧 =t的纯函数。（并行渲染将帧分配到多个标签页。） - 虚拟数据一致且安全。 一个虚拟企业/角色，占位号码/电子邮件/账户，所有场景中使用相同数字。不要使用真实客户数据。对于“几天后”的统计，添加“示例数据”字幕。
- 时长 1-2 分钟，除非另有要求：剪掉等待部分，加快打字/加载速度（3-8 倍），并附上“4x”徽章；需要阅读的部分保持 1-2 倍速度。字幕在加速后必须至少可读 1.2 秒。
- 用眼睛验证：在关键帧渲染静帧并查看（读取图像）后再进行最终渲染。
工作流程
阶段 0 — 检测与目标
- 查找已有演示：
**/src/demo/kit/stage.tsx。存在 → 不要重新搭建脚手架；进入“更新演示”。 - 不存在 → 需要视频项目。默认位置：
<repo>/video/（独立文件夹；如果仓库使用 Next/ESLint，则添加到根 tsconfig 的exclude和 ESLint 的globalIgnores，以避免应用构建/CI 检查它）。 - 仅一次询问无法推断的事项：目标时长、是否有音频/旁白、必须展示的部分。默认：中文字幕、无旁白、≤2 分钟、从零开始到主要功能的用户旅程。
阶段 1 — 产品研究（读取代码，而非猜测）
对于每个要出现的页面/功能，读取：路由（app/**/page.tsx）、组件、UI 文本、套餐/价格/配额、默认规则、限制、引导/入门文本（这是最佳产品知识来源）、支付流程、角色。记录在 referensi/storyboard.md 中，格式为：页面 → 展示内容 → 字幕 → 已验证的声明（文件:行号）。必要时将大量代码阅读分配给子代理 Explore；最终决策仍由您负责。
阶段 2 — 故事板
按照用户旅程编排 8-14 个场景（落地页 → 注册 → 开始/引导 → 核心设置 → “哇”时刻 → 监控 → 支付/订阅 → 行动号召）。每个场景：目标、原始时长、光标步骤、字幕。查看 referensi/storyboard.md（字幕模式、节奏、章节标签“N · 名称”）。
阶段 3 — 搭建脚手架
node "$HOME/.claude/skills/demotion/skrip/scaffold.mjs" --dest <repo>/video --nama "产品名称" --domain produk.com --aksen "#3ddc97" --install
复制引擎（src/demo/kit/*）、Root 框架、示例场景、Tailwind v4 配置。然后：
- 将应用程序 CSS 的颜色令牌 + 组件类复制到
src/demo/index.css（移除动画/过渡）。 - 将
src/demo/fonts.ts中的字体替换为应用程序使用的字体（@fontsource/<名称>）；加载所有使用的字重。 - 在
config.ts中填充BRAND（名称、域名、深色背景上的强调色）。 - 测试：
REMOTION_FPS=30 npx remotion still src/demo/index.ts S-示例 out/uji.png --frame=270 --config=remotion.demo.config.ts。 有真实场景后删除scenes/contoh.tsx。
阶段 4 — 移植 UI 并编写场景
- 产品组件 →
src/demo/pages/*.tsx（复制标记/类；用静态 props 替换数据和处理程序）。通用原子组件在kit/atoms.tsx；WhatsApp 手机在kit/phone.tsx。 - 一个场景 = 一个文件
scenes/<id>.tsx，导出DUR（原始秒数）和组件；在scenes/index.ts中用buat("<id>", Komp, DUR_X)注册。完整模式：templat/src/scenes/contoh.tsx和referensi/arsitektur.md（Stage API：光标/滚动/相机/聚光，data-cur，与T一起的事件时间）。 - 侧边栏/模态框/引导 =
fixed层（不随滚动移动），页面内容 = children。 - 场景数 ≥6 且独立 → 通过分叉并行化（参见
referensi/brief-fork.md）；您首先编写共享框架（数据、多个场景使用的页面）。
阶段 5 — 剪辑与加速
在所有场景以 1x 速度正确后，填充 scenes/potong.ts（每个场景的片段 S(a,b,v)）。通过 npx remotion compositions src/demo/index.ts --config=remotion.demo.config.ts 检查总时长（Demo 的时长列）。
阶段 6 — 验证
npx tsc --noEmit -p tsconfig.json- 低成本预览：
REMOTION_FPS=30 npx remotion render src/demo/index.ts Demo out/preview.mp4 --config=remotion.demo.config.ts --crf=26 --scale=0.5 --concurrency=10 --gl=angle - 接触片：
python "$HOME/.claude/skills/demotion/skrip/lembar-kontak.py" out/preview.mp4 --tiap 5然后读取图像。 - 检查：文本截断、字幕覆盖被点击的按钮、光标偏移、数字不一致、声明错误、布局跳跃、空白/过长时刻。
阶段 7 — 最终渲染与发送
powershell -File "$HOME/.claude/skills/demotion/skrip/bersihkan-proses.ps1" # 如果有旧渲染则必须执行（如果用户正在使用 Studio，则添加 -JanganStudio）
cd <repo>/video && REMOTION_FPS=60 npx remotion render src/demo/index.ts Demo out/demo.mp4 --config=remotion.demo.config.ts --codec=h264 --crf=17 --concurrency=10 --gl=angle
在后台运行（run_in_background），无小 timeout。预计：约 12-18 帧/秒（GPU），2 分钟 60 fps ≈ 7,000 帧 ≈ 8 分钟。完成后 → 检查 ffprobe（时长，1920x1080，60 fps）+ 一帧，如果 >30 MB 则运行 node ".../skrip/kompres.mjs" out/demo.mp4 out/demo-ringan.mp4 --crf 24 并使用 SendUserFile 发送（限制 30 MB；完整文件保留在磁盘上，告知用户）。
更新现有演示
通过 git diff/git log 查看更改的页面/文本 → 仅更新相关场景及 pages/*（从代码重新复制标记），再次检查字幕声明，调整 potong.ts，验证该场景的静帧，然后重新完整渲染。
曾遇到的陷阱（开始前阅读 referensi/jebakan.md）
React is not defined（模块级别的 JSX）· 跨帧缓存导致光标跳跃 · 孤儿渲染进程消耗 CPU · blur/backdrop-filter 使渲染慢 3 倍 · Tailwind 断点使用无头窗口宽度 · sticky 在滚动内容中失效 · 并行渲染 + 未完成文件破坏 bundle · Remotion 的 ffmpeg 没有 fps/tile 滤镜 · 功能声明错误被用户发现。
本技能中的参考资料
referensi/arsitektur.md— 引擎 API（Stage，光标/滚动/相机/聚光步骤，时间映射，工具包）referensi/jebakan.md— 陷阱列表及解决方案referensi/storyboard.md— 如何编排场景、字幕、节奏、研究清单referensi/brief-fork.md— 用于通过子代理分叉编写场景的简要模板referensi/render.md— 渲染命令、速度、GPU、压缩、发送templat/— 脚手架复制的代码 ·skrip/— 脚手架、进程清理、接触片、压缩- 一个包含 13 个场景的真实示例（落地页 + 滚动、聚光引导 + 对话框、手机扫描二维码、分屏仪表盘 + 手机、页面跳转 + 支付）来自作者的项目 ChatGerCep；其模式在
templat/src/scenes/contoh.tsx和referensi/arsitektur.md中。