product-film

产品宣传片

一部看起来仿佛出自产品本身的宣传片：采用产品的配色、字体、组件、徽标和声音，并配合音乐剪辑。在产品代码库内（或旁边）使用 Remotion 制作，这样既能复用真实组件，也便于编辑。

不可妥协的原则

• 以产品的设计为准。 每条规则都来自产品本身：设计令牌、组件、规则文件、落地页和文案。绝不带入其他产品的审美，包括本技能中的任何与其设计相悖的内容。
• 先询问，不要假设。 宣传片呈现什么、如何制作，都由用户决定。动笔写故事前，先采访用户（reference/interview.md）。提供的选项必须根据你在代码中发现的内容定制，绝不要给出泛泛的选项。
• 每一帧都是时间的纯函数。 不使用 CSS transitions 或 keyframes，不使用计时器、Date.now()，也不在帧之间保留状态。对于自行计时的组件，要制作由帧驱动的对应版本。
• 测量，而非猜测。 节拍根据音频确定，位置根据 DOM 确定（使用调试叠层），颜色根据最终文件解码出的像素确定。
• 诚实陈述。 只展示产品真正能做到的事情。落笔前先找到产品的声明规范和获准使用的文案。
• 提交、推送或发布前先询问。 保留每个渲染版本（out/<film>/v1、v2，依此类推）。

工作流

1. 快速探索。 只需了解足够的信息，以便提出好问题：规则文件、设计令牌、组件、徽标（以及吉祥物或动态标识）、落地页和主要功能。参见 reference/discovery.md。
2. 采访。 通过两轮 AskUserQuestion 进行：第一轮了解简报，第二轮了解素材。只有在必要时才进行第三轮。参见 reference/interview.md。
3. 品牌套件 → videos/BRAND.md。 根据用户的选择完成探索，并填写 templates/BRAND.md。
4. 故事 → videos/<film>-prompt.md。 阅读 reference/story.md 和 reference/ingredients.md，然后填写 templates/film-prompt.md。与用户确认：节拍表和 3 张风格帧。
5. 音乐。 如果宣传片没有声音，则跳过。参见 reference/music.md：scripts/beats.py、逐小节的音轨映射、scripts/audio-edit.py，以及放在测得峰值处的音效。
6. 引擎和场景。 阅读 reference/engine.md。
   • 将 templates/kit/ 复制到 videos/src/kit/。
   • 每部宣传片建立一个文件夹：cues.ts（以数据形式呈现的节拍表）、layout.ts、acts/ 和合成。
7. 审阅循环。 参见 reference/review.md。
   • 每次交接时生成静帧（scripts/stills.ts，使用 --debug 进行测量）。
   • 制作联系表和交接表，然后制作半分辨率草稿。
   • 修正后重复，并在过程中向用户展示画面。
8. 最终渲染、验证和交付。 参见 reference/render.md：先运行 scripts/render.ts，再运行 scripts/verify.py，然后发送文件。

质量底线（始终适用，无论素材如何）

• 只使用产品自身的界面、颜色、边框和阴影。 绝不擅自添加产品未使用的卡片背景、轮廓或色调。
• 确保在交付尺寸下清晰可读。 宁可减少文字，也不要缩小字号。删除那些只是重复画面内容的标签。
• 文字绝不被光标、标签或纹理遮挡。 移动时也绝不与其他文字交叉。逐字显示一行文字时，绝不能让它重新居中：为每个词保留固定位置。
• 加载状态保持宽度不变。 使用产品自身的加载样式。
• 每个节拍都要有变化。 如果一个小节中毫无动静，观感就会显得拖沓。
• 场景边界落在小节线上。 循环的最后一帧必须与第一帧相同。落地页循环必须呈现静音状态。
• 不要使用产品表现风格中没有的效果： 光晕、粒子、点击光圈、弹跳缓动和着色器。

浪费大量时间的陷阱

• Remotion 静帧不会转发控制台日志。将测量值打印到帧中（templates/kit/debug.tsx）。
• npx remotion still 每次调用都会重新打包。使用 scripts/stills.ts：打包一次，渲染多个帧。
• Remotion 内置的 ffmpeg 不支持 tmix、select 或 tile。请使用完整版本的 ffmpeg（uv run --with imageio-ffmpeg）。
• **色彩范围：**Remotion 主视频采用有限范围、BT.601，且未标记。若将其按全范围混合，#0a0a0a 会变成 #171717，在深色页面上显示为灰色方块。请解码每个交付成品的第 0 帧并检查数值。
• interpolateColors 无法解析 color-mix()。任何会动画变化的颜色都必须使用十六进制色值。
• 异步图像组件（Radix 或 base-ui 头像）在帧中可能呈现为空。请配套使用 Remotion <Img>。
• 对于会重新定位的弹簧，每个键求和一步闭式解，并按时间对键排序。
• CSS 虚线边框会在方框调整大小时抖动。请使用固定间距的 SVG 描边绘制虚线。
• 使用独立时钟的 WebGL 或着色器效果，每次运行都会绘制出不同画面。优先使用逐帧绘制的纹理。
• 在 monorepo 中：
  • 将每个 remotion 和 @remotion/* 固定到同一个精确版本
  • 绝不要让视频工作区重新解析应用的 Tailwind
  • 在 webpack 覆盖配置中为应用的路径导入设置别名
• 只停止你启动的进程；其他会话可能正在等待使用这台机器。