video-design

视频设计

网页设计技能了解页面：滚动、悬停状态、导航栏。视频没有这些。视频由场景组成，观众无法暂停在某一帧；旁白决定节奏；有人手中的手机，或房间后方的投影仪。这项技能是工具包中的视频层：它接收来自任何来源的设计方向，将其转化为场景，然后像评审一样检查渲染结果。

三层结构

design source (optional, the user's choice)  →  design.md (the handoff)  →  video-design (this skill)  →  qc.py + critique
taste-skill, frontend-design, a team's own        palette, type, acts,        fields per act, one data        layout, contrast,
design skill, a brand guide                       rules on/off                accent, type steps, motion      stills, contact sheet

• 设计来源提供方向：调色板、字体或构思。任何能做到这一点的技能都可用，而且并非必需：使用我们的默认方案时，这项技能会根据分幕调色板和品牌自行编写 design.md。你可以接入自己的设计技能，也可以使用我们的技能。项目会在 project.json（design.source）中记录所选方案。请参阅 sources.md。
• design.md 位于项目中。它是约定：记录来源做出的决定，并将其映射到视频的各幕，同时说明关闭了哪些团队规范及原因。更换来源意味着更换 design.md，而不是更换代码。请参阅 handoff.md。
• 这项技能按照以下规则应用设计；无论来源如何决定，这些规则都始终适用，因为它们源于视频的观看方式，而非审美偏好。

视频规则

色彩服务于叙事。

• 最多使用两到三个色块，且仅在叙事发生变化时（例如进入新的一幕，而非新场景）才更换色块。每个场景都变色，就毫无意义；在转折处变色，才能让观众感受到变化。先写下各幕（handoff.md），再为每一幕指定色块。
• 相邻色块的差异应体现在亮度上，而不只是色相：浅、中、深。同样亮度的两个色块（橙色和天蓝色）会在切换时闪烁，即使 ffmpeg 的切换检测器也无法识别这种变化。
• 色块之间采用硬切。内容可以淡出再淡入；背景色块不能交叉淡化。
• 一种数据强调色。 品牌色仅用于旁白正在提及的对象（它点名的条形、线条或数字），不用于其他地方。其他内容只能使用墨色或一种中性色。切勿使用背景色的色调变化（在青柠色上叠加 45% 黑色会渲染成橄榄色，这是没人选过的颜色）。
• 彩色背景上的文字应使用该背景对应的纯色墨色；次要行可使用 70-80% 的不透明度，但前提是仍能通过对比度检查。彩色背景上的灰色文字看起来像污渍。

字体。

• 每段视频只使用五种字号，并一次确定。在 1080p 下：展示文字 200-260，数字 112-132，标题 64-72，标签 32-36，注释 28。手机端字号下限为 1080p 下的 28px（qc.py --layout 会检查其是否达到短边的 2.6%）。
• 最多使用一种字体和两种字重。展示字号的字距设为 -0.03 到 -0.05em，行高设为 0.9-1.0。
• 标题或陈述最多分两行，按短语手动换行（<br />），绝不依赖自动换行。计算行长：在 1920px 分辨率下，展示字号每行约 32 个字符。第三行只剩一个词，是最明显的问题。
• 数字使用等宽数字，避免计数时跳动。

布局。

• 视频中所有标题共用一条左边缘（每个场景的 x 坐标都相同）；图表和数字可以延伸得更宽，但标题不能移动。
• 每个场景只突出一个主体：图表、数字或陈述。只有当数字是图表汇总出的结果时，才能让大数字与图表共处一个场景。
• 不要排列一行相同的卡片（例如四个步骤对应四个黑框）。改用一个带有多个停靠点的图形、一句话，或按照旁白逐步呈现的序列。
• 不要使用渐变、辉光、静止元素上的投影、玻璃面板或装饰性形状。使用纯色背景、产品本身、真实图片，或根据主题绘制的背景（见下文）。
• 脚注和来源：在左下角以注释字号显示一行。若一个场景需要三行注释，就应改用旁白来表达。 从主题中提取背景。 默认使用纯色背景，通常也恰到好处。觉得单调时，不要添加装饰：把主题本身的结构画出来。想想这个事物原本有什么形状：日历有周视图网格，歌曲有节拍网格或五线谱，代码有行号栏，地图有等高线，聊天有消息列，电子表格有单元格。只用这种形状，不添加任何臆造的元素，让它成为背景。
• 用背景色的墨色绘制细线，透明度为 10-16%（深色背景可略低）。在手机上应清晰可见，在文字后方则应隐去；如果观众先注意到线条而不是文字，就把线条透明度减半。
• 整个视频只用一种图案，每个文字场景都保持一致。出现产品或图表的场景不需要背景：它们本身就是画面。
• 背景上的元素应采用主题自身的视觉语言（日历上的事件卡片、聊天中的气泡），以墨色线条勾勒，并在对应的命名词语处出现（cue()）。它们应出现在文字上方和下方，不能压在文字行后面。
• 背景也可以承载转折：旁白列举时逐渐填满，提出问题时清空。这就是纹理和创意之间的区别。
• 在 design.md 的 "Ground" 一节中记录。绝不使用噪点、素材图片、色块或生成式背景；这些正是要替代的装饰手法。

图表（lib/components/DataChart.tsx）。

• 面积填充保持纯色，透明度不超过 15%（area="flat"）；柱形使用方角（radius={0}）；单个系列不显示图例；网格线用 3-7 条或不显示。
• 强调色应在旁白提到对应内容的词语处落到相应柱形或折线上（使用 cue() 中的 highlightAt / growAt）；如果有第二组数据，使用墨色或白色，绝不使用第二种色调。
• 屏幕上的每个数字都应来自数据文件，旁白提到的每个数字都应在构建时与之核对（参见 examples/data-chart-stars 和 check() 模式）。

转场。 场景切换使用硬切，或在有助于呈现移动边缘时使用 @remotion/transitions 中的 wipe()；绝不在不同背景之间使用交叉淡化。如果某个场景以新的方式再次展示同一事物（例如以另一种设计呈现同一张图表，或修复后的屏幕），就在原位用 lib/components 中的 PageTurns 翻转，并在说到新页面名称的词语处翻页。效果转场（lib/transitions：故障、漏光、缩放模糊）属于品牌选择，不是默认设置；如要使用，应在 design.md 的 "Rules turned off" 一节中记录。

动效应遵循 .claude/skills/remotion/motion-craft.md：包括以帧为单位的时序、阅读时间，以及看起来像自动生成内容的默认设置。屏幕上的每次变化都应在对应的命名词语处发生（cue()），这样静止场景就总有下一步动作，这正是 qc.py --render 的静帧过长检查所要查找的内容。

工作流

1. 分幕。 写出视频的分幕（两到四幕）以及每幕包含哪些场景。这是最重要的设计决策，应通过文字确定。
2. 设计方向。 如果 project.json 指定了设计来源，就使用该来源；否则提供已安装的来源（sources.md），或使用我们的方案：从 palettes.md 中选择一组幕间调色板，并融入品牌色。
3. design.md。 根据来源的设计方向（handoff.md）填写：每幕一种背景色、墨色、一种强调色、五级字号、背景（纯色或主题自身的形状），以及附带理由的关闭规则。
4. 构建场景，并遵循设计稿。
5. 检查。 运行 uv run tools/qc.py --project <p> --layout 和 --render out/video.mp4。
6. 查看。 uv run tools/contact_sheet.py out/video.mp4 会为每个场景平铺一帧定格画面。使用 critique.md 对其进行评审，修复最重要的三项，然后渲染并再次查看。最多进行三轮。

文件

文件	何时阅读
handoff.md	编写或阅读 design.md 时：了解格式和完整示例。
sources.md	选择设计来源、接入其他来源或为他人列出来源时。
critique.md	根据联系表审查渲染结果时：了解审查轮次、评分和上限。
palettes.md	了解适用于视频的现成 Act 调色板、角色映射及其来源。

这些规则中的部分内容（将色彩字段作为章节、相邻色之间的明度关系、一个强调色、两行标题、五种字号，以及审查评分和上限）是将 Leonxlnx 的 taste-skill（MIT）改编用于视频的。参见 sources.md。