hyperframes-motion-director

HyperFrames 动效导演

使用此技能将模糊的视频需求转化为可供评审的 HyperFrames 制作方案。首先生成简洁的简报／设计提案。只有在用户确认方向后，才继续处理素材、构图、快照、渲染和评审。

HyperFrames 负责渲染。此技能负责方向、素材、布局、动效规划和交付检查。

如果影片推广的是具体产品、工具、技能、CLI、应用、API、工作流、模板库或创意系统，应将其视为高端产品宣传片，而不只是电影感隐喻短片。视频必须展示产品实证：命令、卡片、屏幕截图、输出预览、模块、数字、标签、图标、标记或工作流状态，让宣传主张清晰可见。

核心原则

从最终观看体验倒推：

1. 观众应该记住什么？
2. 什么隐喻能够传达要点？
3. 哪个图像层次能为画面增加纵深、背景或张力？
4. 哪一帧能证明视觉方向足够出色？
5. 怎样的运动能让观众继续观看？
6. 哪个节拍承载钩子、揭示、实证和 CTA？
7. 哪些动效选择能引导观众关注这些节拍？
8. 哪些视觉对象能比更多文字更有效地浓缩含义？
9. 哪些验证能证明视频会以确定的方式渲染？

先确保静帧清晰易读、时序合理。只有在画面规划奏效后，才编写动画代码。

有力的静帧是一道门槛。成片缩减成截图时，应该会失去部分含义；否则，动效就只是表面修饰。

视觉风格

除非用户明确提出其他要求，否则默认采用一种严格统一的风格：

• 深黑背景 #050505。
• 极简电影感布光、高对比度、大量留白、低亮度。
• 仅使用白色、灰色和暖金色。暖金色仅作克制的点缀。
• 杂志封面式构图：一个主导符号或短语，不堆叠解释性元素。
• 细微纸张颗粒、浅景深、体积雾、纤细轮廓光、局部金属高光。
• 文字、图像、构图和色彩必须共同表达一个要点。
• 新视频默认使用生成的或用户提供的背景图像层。背景必须营造纵深、隐喻或产品情境。

默认禁止：

• 普通插画、电商横幅构图、图标堆砌、通用科技仪表盘、霓虹赛博朋克、多色调色板、杂乱渐变、装饰性粒子、解释概念的图表和拥挤拼贴。
• 当隐喻表达更清晰时，禁止照搬文章表面的图示。
• PPT 式编排：静态标题卡、反复淡入上移的场景、千篇一律的居中布局、空洞的黑场淡出，或贴在壁纸上的文字。

高端产品宣传片规则

对于产品、工具、CLI、SaaS、API、技能、模板、工作流或系统宣传片，黑色电影风格只是基础，还远远不够。

高端产品宣传片必须包含视觉组件。不要只靠一张背景图、大标题、扫描线和一个符号就开始实施。这样做出来的影片只有单一基调。高端宣传片需要一套可复用的组件库，让产品显得真实可信。

没有视觉组件的产品宣传片不得继续。“视觉组件”是可见且可复用的产品专属界面，包含内容槽位、样式规则、状态、动效交互和快照证明。通用文本框、孤立标签、装饰性边框、浮动线条、背景渐变和没有锚点的图标都不算。

影片必须构建产品实证生态：

• 产品证明素材：命令、UI 界面、输出卡片、截图、生成示例、模块标签、主题堆栈、提供方标签、数字、验证结果、报告或前后状态。
• 组件库：命令卡片、输出／草稿卡片、统计信息块、模块标签组、提供方标签组、证明卡片、产品画面框、锚定路线／信号、主题／输出堆栈、CTA 徽章，或同等的产品专属界面。
• 图标与装饰系统：标记、标签、轨道、括号、光晕、碎片、面板、阴影和纹理都必须有名称、可复用，并与具体含义关联。
• 动效交互：每个主要组件都必须展现产品状态变化，而不只是进入画面。
• 文案层级：痛点 -> 机制 -> 证明 -> 信心 -> CTA。如果某句话适用于任何产品，就改写它。

根据内容确定产品视觉组件覆盖范围：

• 根据源文中的短语、产品机制、证明性主张和操作推导组件数量。不要以 4、6 或 12 等固定数量为目标。
• 如果某项主张取决于真实或忠实还原的产品状态，就加入具体的产品界面。
• 仅当源文包含模块、提供方、功能、主题、模式或状态时，才加入分类组件。
• 如果影片包含 CTA，就加入最终操作组件。
• 重要的产品机制或证明组件应足够早地呈现，避免前半部分只有标题和氛围。
• 每个产品组件都要定义角色、来源、内容槽位、视觉状态、动效交互、快照时间戳和删除测试。
• 每个可见的产品组件都必须执行一项操作：输入、路由、扇出、组装、揭示、扫描、验证、转换、计数、锁定、导出、发布、保存、折叠或交接。仅仅静态摆放不算。
• 对于高端竖版生成图像项目，至少生成一张由源内容驱动的视觉组件表。组件清单的规模应由内容决定，而非预设配额。每张组件表都必须包含产品专属组件，并具备清晰的隔离边界、一致的风格、明确的角色、目标场景、裁剪框、动效用途和删除测试。实现前，将每个通过验收的组件裁剪为独立的本地透明素材。
• 如果组件表过于拥挤，无法提供足够的可用分辨率或隔离空间，则单独生成主视觉对象；但应将单独生成主视觉视为补充，而非组件表的替代方案。
• 为确保文字密集的命令、截图、UI 和证明状态忠实还原，应使用官方素材或通过代码原生重建。这项保真要求不免除制作源内容驱动的组件表；对于适合使用 Image Gen 的位图对象、材质元素、可安全承载证明内容的外壳、符号、印章、转场对象和产品专属前景元素，应使用该组件表。

如果组件库只有文字描述、组件未出现在快照中、所有组件都只是标签不同的通用卡片、组件只是放在屏幕上而没有执行操作，或动效没有展现产品状态变化，则不得交付产品宣传片。

在提出方案、编写分镜、实现或评审产品宣传片之前，请先查阅 references/premium-product-promo.md；尤其是当用户提供高端参考，或抱怨缺少图标库、装饰元素、图像素材、动画交互或顶级设计品质时。

方案必须根据产品推导素材清单。只有在源内容和故事有需要时，才纳入产品／品牌标识组合、具体界面、证明素材、分类体系和反复出现的动效对象。如果视觉清单无法证明产品机制，就检查项目、使用现有素材、生成适合产品的模拟图、截取屏幕截图，或说明最终成片将是概念影片，而非高端产品宣传片。

源文本驱动的视觉系统规则

视觉丰富度不等于视觉质量。更多素材、图标、卡片或生成的道具，如果风格泛泛、与文案不符，或可以替换到其他项目中，依然无法达到要求。

在提出视觉组件之前，应从用户文本、项目、文章、README、产品界面或已确认的文案中提取一套由源文本驱动的视觉系统：

• 源文本短语：值得以视觉形式呈现的原句、主张、名词、动词、数字和情感张力。
• 具体名词／实体：产品界面、文件、文件夹、命令、屏幕截图、文档、人物、模块、指标、平台或状态。
• 流程动词：编写、路由、收集、检查、发布、保存、导出、比较、折叠、恢复、增长、交接，或同类动作词。
• 视觉母题：一个核心隐喻，以及可在不同场景中反复出现的三到五类组件。
• 文本到组件映射：每个主要视觉组件都要标明它对应的源文本短语。
• 大文本框替换方案：将大段文本转换为物件、标签、图表、证明性界面、动态文字或简短说明。
• 泛化元素排除清单：除非文本明确指出，否则禁止使用可适用于任何无关产品的道具和图标。

不要把大文本框、段落卡片或通用办公室道具算作优质视觉组件。标题可以成为主视觉，但除非用户明确要求只用文字排版来制作影片，否则标题不能构成完整的视觉系统。

对于文章转视频和知识／工作流宣传片，源文本就是素材简报。如果某个视觉元素无法对应到源文本中的短语、主张、名词、动词或数字，就应删除或重新设计。如果不读段落，仅看静帧仍无法看出源材料的主题，说明这套视觉系统过于泛化。

生成的组件集必须由源文本驱动。每个获准使用的项目都必须注明源文本短语、组件类别、裁切／隔离方案、目标场景、动作设计和删除测试。应拒绝只有美观图标集、通用文具、随机 UI 卡片或混搭风格装饰的组件集。

出现以下情况时，不得交付：

• 大多数主视觉帧都被大型文本框占据，且缺乏有力的产品或源文本专属视觉呈现。
• 视觉素材是普通的办公室、办公桌、纸张、仪表盘、AI 或生产力主题图像，换到其他视频中也同样适用。
• 组件库数量丰富，却缺少统一的母题、风格规范和源文本短语映射。
• 组件只是换了标签、形状相同的卡片，而不是承担不同角色和动作的组件。
• 审核报告虽然通过了“素材底线”，却未通过源文本识别度、母题统一性或大文本替换方面的检查。

参考忠实度与叙事边界规则

当用户提供风格提示词、图像、仓库、本地路径或具名参考时，必须先检查该确切来源，再描述或生成视觉系统。Riso、编辑拼贴或高端科技等风格标签，并不能证明你理解了来源。

在 ASSET_MANIFEST.json 中记录：

• 确切来源：实际检查过的附件、文本提示词、仓库、路径、截图或品牌风格章节。
• 观察到的视觉语法：至少列出该来源中可见的三个具体属性，例如配色、材质、边缘处理、构图、字体关系、景深或转场方式。
• 叙事边界：参考控制哪些方面，以及它不能取代什么。
• 禁止偏移：会抹去产品故事的通用替代方案、相邻风格或吸引人的表现手法。

风格是一种呈现语言。产品操作、来源主张、角色、物体和证明状态仍然是故事本身。除非打印、拼贴、扫描、机械设备或其他风格手法本身就是产品主张，否则不要把产品宣传片变成对这些手法的演示。

如果用户纠正了参考来源，或指出风格已经喧宾夺主，就应在生成更多素材之前回到简报和素材清单。不要只在动画中修补错误。

背景与动效规则

对于新的视频项目，默认规划背景图像。阶段 1 定义所需内容；阶段 2 在确认后生成或寻找素材。除非用户提供了优质素材，或已确认的方向是纯动态排版，否则请使用 Codex Image Gen 生成项目专用的位图素材。

将每一帧视为四个协调的图层：

1. 背景图像作为舞台：营造氛围、景深、光线、隐喻或产品情境。
2. 字体排版作为信息：层级清晰易读，安全区固定，行数可控，避免与图像中繁杂区域意外重叠。
3. 视觉对象作为意义压缩：使用克制的符号、功能性图标、道具、画框、标记或纹理片段来替代解释、引导注意力或证明流程。
4. 动效作为注意力引导：每个场景设置一个主要动效想法，可选一个辅助动效，并在每次重要信息揭示后保持静止。

使用 references/motion-background-system.md 了解图像数量、图文叠加布局、动效语法和审核关卡。

内容推导的图像素材架构规则

不要仅凭时长决定背景或组件数量。应根据已确认的源素材、分镜和动态效果任务推导素材架构：

• 视觉世界：将能够真实共用同一空间舞台的相邻节拍归为一组。每个真正不同的世界都生成一张独立的竖版背景。高品质多场景作品通常需要多张背景，但具体数量由已批准的分析决定。
• 可移动前景素材清单：列出所有需要独立移动、证明某项主张或承载转场的源素材专属对象。此清单决定透明组件的数量。
• 素材表策略：高品质竖版生成图像作品至少使用一张组件素材表。若完整清单能在留有充足隔离空间且分辨率可用的情况下放入一张素材表，就使用一张。若一张素材表会导致素材过于拥挤或缩小，则拆分到多张素材表，或单独生成主体对象。
• 抠图规范：保留每张源素材表，将每个通过验收的项目裁切为带名称的透明 PNG，保持外围边缘完全透明，去除杂边，并在深色和浅色联系表上检查抠图效果。
• 清单文件：在第 1 阶段确定素材后编写 ASSET_MANIFEST.json，并在第 2 阶段将验收通过的本地路径更新到其中。该文件是视觉世界、背景归属、组件清单、素材表单元格、抠图、目标场景、动态效果和证明表的唯一事实来源。

第 1 阶段必须说明为何所选数量是必要的。若没有基于源素材的分析，只设定“4 张背景和 12 个组件”之类的固定目标，即属模板失误。第 2 阶段不得悄然改写已批准的数量；素材分析发生变化时，应记录修订及原因。

在为高品质竖版作品规划、生成、裁切、验证或检查位图素材之前，请先使用 references/imagegen-asset-pipeline.md。

基于动态效果角色的素材覆盖规则

不要仅凭数量评判视觉素材库。包含大量同形卡片的大型素材表仍然只表达一种视觉创意。

对于高品质多场景作品，验收通过的组件清单必须覆盖三种不同任务：

• 叙事锚点：在不同节拍间保持同一主体、文章、人物、产品表面或核心对象。
• 产品证明：将主张呈现为真实状态、结果、命令、屏幕截图、数字、选择或验证。
• 转场载体：撕裂、折叠、路由、擦除、盖章、扇开、组装、扫描，或以其他方式在场景间移动故事素材。

若映射关系明确，一个组件可以承担多个任务，但高品质多场景作品至少需要三个可独立移动的组件。这不是素材清单的目标数量，而是能够证明两种不同的双对象组合所需的最小素材库。

对于高品质多场景作品，在实施前至少记录两项不同的组合测试。每项测试都要注明组件集合、场景、编排方式、快照时间戳和删除测试。使用相同组件集合、仅更换标签，不算第二种组合。

若素材库文件很多但只承担一种动态效果任务，若所有证明界面都采用相同轮廓，或若组件只能各自独立入场、无法交接、组装、替换、揭示或共同变形，则应阻止动画制作。

在批准素材清单或组件素材表之前，请先使用 references/asset-choreography-and-render-qa.md。

纯代码例外规则

纯代码黑色舞台是例外，不是默认的生产捷径。除非用户明确要求纯排版动态研究，否则如果视频只有深色渐变、大号文字、半透明卡片和细线，就不要将其标记为高级版或已就绪。

对于文章转视频、内容系统、工作流、产品、教程、个人知识库、本地文件夹或工具对比类宣传内容，Phase 1 和 Phase 2 必须达到由内容决定的视觉素材最低要求：

• 提供足够数量的独立背景舞台、产品截图、工作区／文件树截屏、生成的隐喻画面或用户提供的图片，以覆盖所声明的视觉世界。
• 提供足够数量的场景专属证明视觉素材，而不只是文本框，以覆盖所声明的源短语、机制和证明性主张。
• 每张位图或截图都必须有本地素材路径；如果认为自定义 SVG／3D／矢量系统优于位图素材，必须说明理由并获得用户明确批准。
• 审核截图，证明画面不会退化为“黑色背景＋标题＋卡片”。

出现以下情况时，阻止最终交付：

• assets/images 中只有占位符，但报告却声称具有丰富的背景或视觉素材系统。
• 每个节拍都使用相同的深色背景舞台，且没有变化的主体、场景纵深或具体的证明载体。
• 纯代码例外的理由仅仅是方便、缺少依赖项或标注为“代码生成”。
• 当主体需要视觉环境、生成图像、产品截图或素材库时，动态效果却主要由文字／卡片的平移和透明度变化构成。

图像生成素材规范

Codex Image Gen 用于创建合成素材，而不是制作完成的海报。HyperFrames 负责最终排版、时间安排、遮罩、裁切、视差、焦点拉动和文字对比度。

生成前，为每张图片编写素材简报：

• 用途：舞台、符号、纹理、锚点或转场画面。
• 场景用途：它用于哪个节拍，必须传达什么信息。
• 宽高比和目标尺寸：新的竖屏作品通常使用竖版 9:16；转场镜头或面板则使用标准宽高比。
• 布局约定：textRect、subjectRect、安静的文字区域、安全的底部边界和动态范围。
• 焦点主体：侧边、中央、顶部、下方区域，或仅作背景。
• 留白：无需使用卡片即可放置文字的位置。
• 光线和色彩：深色基底、受控的对比度，仅在必要时使用克制的暖金色。
• 禁止内容：烘焙进图像的文字、虚假 UI、虚假徽标、标签、说明性图标、水印、装饰性杂乱元素、随机符号，以及文字区域内的高频细节。

生成后，在实现前检查实际图像：

• 只保留用途明确的素材。
• 如果文字会与细节、人脸、产品边缘、明亮接缝或平台叠加层冲突，则重新生成或裁切。
• 引用前，将最终素材移入项目素材文件夹。
• 在 DESIGN.md 或 STORYBOARD.md 中记录本地路径和采用的裁切版本。
• 如果多张额外图片重复承担相同用途，就用一张更出色的图片替换它们。

视觉对象规范

优质的动态视频通常不止需要背景和文字。只有当对象能减少解释、引导注意力、证明主张或留下记忆点时，才添加对象。

在实施之前，先定义一套精简的视觉对象系统：

• 主要对象：观众应该记住的道具、符号、产品表面、画框或材质。
• 功能性标记：1-3 个小图标、印章、括号、刻度、导轨、标签或引导标记，用来替代解释、引导注意力或展示证据。
• 纹理元素：稀疏的碎片、灰尘、纸张、颗粒、光线或深度线索，用来营造氛围，但不能变成满屏碎屑。
• 对象运动：对象如何进场、变形、交接或为关键节拍提供证明。
• 移除测试：删除对象后，会失去什么含义？

硬性规则：

• 避免图标堆砌。每个视频采用一种视觉语言就足够了。
• 避免在每行文字旁边都放小图标。
• 避免使用火箭、闪电、闪光、AI 芯片和随机勾号等泛用符号，除非简报明确要求将其作为字面元素，且确有必要。
• 避免用图标标记含义不明的隐喻。如果对象需要标签才能让人理解，就重新设计这个隐喻。
• 优先选择与项目相关的对象：源文件、胶片画格、扫描导轨、确认印章、检查括号、产品表面、时间线、镜头、光标、地图路线、封印或产物。
• 在 20 秒的竖屏宣传视频中，最多添加一套主要对象系统和三种功能性标记。
• 审核报告必须说明，添加的视觉对象是否必要、克制，以及移除后是否不会损害故事表达。

锚定连接元素规则

线条、路线、导轨、扫描线、弧线、下划线、括号和连接光效并不天然显得高级。它们是辅助对象。只有在锚定到具体对象、文字、组件边缘、节点、光标、状态标记或 CTA 时才使用。

保留任何连接元素之前，先明确：

• 起始锚点：它离开的确切对象或文字。
• 结束锚点：它抵达的确切对象、文字、节点或组件。
• 作用：揭示、引导路径、比较、聚焦、验证、交接或收尾。
• 动效：它如何改变状态，而不是悬浮着充当装饰。
• 安全区域：它不能穿过的文字、CTA、产品表面或平台覆盖层区域。
• 删除测试：移除它后，会失去什么含义、证据或注意力引导？

出现以下情况时，拒绝或替换连接元素：

• 线条在空白区域漂浮，没有清晰可见的起点和终点。
• 线条只是优雅的分隔线、修饰性曲线或花饰。
• 线条与标题或产品证据争夺注意力。
• 用卡片边缘、状态圆点、节点序列、芯片状态、画框角、进度条、光标、高亮或 CTA 边框能更清晰地表达同一连接。
• 即使没有它，观众也能同样轻松地理解场景。

高端产品宣传视频应优先使用附着在组件上的信号：卡片顶部／底部高亮、节点序列、状态圆点、短进度条、检查角标、截图勾号和 CTA 边缘光效。与自由漂浮的弧线相比，这些元素通常更显精心构建，也更少装饰感。

支持素材决策规则

不要强制要求装饰性素材。应要求进行支持素材决策。出色的动态视频通常需要不止一个背景，但每个额外的位图、SVG、标记、纹理或形状都必须具备语义角色、与视觉系统的关联以及运动用途。

每份新视频简报都应判断此方向是否需要背景舞台之外的支持素材：

• 符号：核心隐喻、产品轮廓、数字物体或视觉锚点。
• 纹理：颗粒、雾霭、材质表面、阴影底板、尘埃或光线衰减，让画面更具质感。
• 光线 / 遮罩 / 转场底板：用于揭示或衔接节拍的扫光、光圈、擦除源、遮片、焦点图层或变形源。
• 语义字形：能浓缩表达某个概念的极简标记，而非图标集。
• 产品 / UI 片段：仅在故事需要证据时使用的忠实产品、界面、图表或证明性裁剪图。
• 动态点缀：具有明确注意力引导或转场作用的线条、闪光、轨迹、路径、括号、导轨或粒子状细节。

确认后，对于无法在 HyperFrames/CSS/SVG 中更简洁地制作的支持位图素材，请使用 Codex Image Gen。只要代码生成的线条、遮罩、简易字形、矢量标记和排版更清晰、更易控制或更易制作动画，就应优先采用这些方式。

每项支持素材都必须注明：角色、来源、基于位图时的本地路径、与背景的视觉关联、安全区域、动态用途、进入 / 退出时间，以及删除条件。凡是不能增强含义、纵深、转场连贯性、产品证明或可读性的支持素材，都应删除或省略。

根据内容制定支持素材指引：

• 统计视觉世界的数量，而非秒数。相邻节拍只有在空间世界、文本安全区域和叙事作用确实相同时，才可以共用背景。
• 根据源内容中的名词、过程动词、证明性主张和转场任务，统计可移动对象。不要为了凑到预设数量而增删素材。
• 优先使用官方产品 / UI 素材。仅当声明的素材清单有此需要时，才生成氛围素材、隐喻底板、遮罩、组件图集、主视觉对象或适合证明内容的裁剪图。
• 如果简单线条、遮罩、排版和清晰的矢量标记无需位图材质加持，就应通过代码生成。

同一视频中的所有生成素材都必须遵循相同的美术方向：色彩搭配、光线方向、镜头 / 纹理语言、对比度和留白原则。只有当图集中的每个裁切元素都有明确角色，并且会在制作动画前单独隔离时，才可以使用生成的素材图集。如果单张图集会降低裁切安全性或可用分辨率，则应使用额外图集或单独生成主视觉素材。

反 PPT 动效创作规则

薄弱的动效作品往往会变成一连串只做透明度淡入淡出的静态海报。这应视为质量不达标。

开始实现前，每个包含多个节拍的视频都必须制定动效创作方案：

• 摄像机行为：推进、平移、视差、拉焦、裁切探索，或刻意静止。
• 文字行为：文字如何入场、定格、获得强调、退场，以及如何衔接到下一节拍。
• SVG/CSS3 结构：哪些遮罩、路径、扫描线、边框、下划线、裁剪路径、混合模式、滤镜或 CSS 变量负责实现转场。
• GSAP 编排：使用带标签的暂停式主时间轴，设置绝对时间、富有意义的转场，以及保持画面静止且可读的停留。
• 标志性动效：一个贴合创意、令人难忘的动作。

在决定文字转场、SVG/CSS 图层、GSAP 时间轴，或判断视频是否过于像 PPT 之前，请先查阅 references/motion-craft.md。

好的动效会改变含义。它能揭示、比较、转化、压缩、释放、引导或证明。如果移除动效后故事毫无变化，就应重新设计。

竖屏短视频的硬性要求：

• 对于时长不超过 20 秒的视频，至少有一个钩子或核心观点画面必须在画面中央或上方中央以文字制造冲击。如果没有，必须说明该区域由什么更有力的视觉主体占据，以及这样安排为何更能吸引注意力。
• 开头 0-2 秒必须明确首个视觉焦点、最大的文字或物体，以及能阻止观众继续滑动的动效。
• 如果三个或更多节拍使用相同的 textRect、相同的文字入场方式和相同的节奏，必须将分镜标记为 PPT 风险，并在实现前重新设计布局或动效。
• 至少有一个重要的文字时刻必须使用真正的转场手法：遮罩、扫描、分割、压缩、组装、路径交接或同等手法。单纯的透明度加 Y 轴位移只能作为辅助动作。
• 审查报告必须包含反 PPT 结论。如果视频缩减为截图后几乎没有损失任何含义，就说明尚未准备就绪。

动态文字接力规则

当用户要求文字、图标、酷炫转场、向左／向右推移、向上／向下推移、擦除、扫描、打字、逐词动态效果，或提及类似动态排版的参考作品时，默认采用动态文字接力宣传片，而非以背景图像为主导的电影感短片。

优秀的动态宣传片是一连串视觉事件。文字、图标、物体和转场元素将观众的注意力从一个节拍传递到下一个节拍。

在提出或实现这种风格之前，先定义接力语法：

• 关键词链：观众会记住的 4–8 个词或短语。
• 每个关键词对应的动作物体：图标、光标、波形、时间线、画框、画笔、扫描轨道、印章、产品图块、代码光标，或其他能将抽象能力转化为视觉事件的小物体。
• 每个节拍的方向：向左推移、向右推移、向上抬升、向下按压、径向爆发、裁剪揭示、扫描掠过、逐字显现、压缩、扩展、擦除、溶解，或有意的硬切。
• 接力物体：将前一个节拍传递到下一个节拍的元素。它必须清晰可见，或在逻辑上有所暗示。
• 主视觉帧和转场中点：每个节拍都需要一个清晰易读的停留帧，每次转场都需要一个可供检视的中点。
• 动态损失测试：如果去掉动态效果后故事基本不变，这个节拍的动态设计就不够充分。

每支视频只使用一种文字接力语言。避免每行都配图标，也不要堆叠装饰性贴纸。每个物体都必须推动、遮罩、扫描、揭示、压缩、分割、逐字呈现，或将下一个词传递出去。

对于 10–18 秒的动态宣传片，交付前使用以下默认评分表：

• 20 分：开头的视觉冲击力，以及最大的文字／物体能否在前 0–2 秒吸引观众。
• 20 分：重要文字是否经过精心设计，拥有淡入／平移以外的动态效果。
• 20 分：图标或小物体是否参与转场。
• 20 分：相邻节拍是否通过方向、物体、遮罩、线条、光标、扫描或摄像机运动保持接力连贯性。
• 10 分：节奏是否在动态冲击和清晰易读的停留之间交替。
• 10 分：结尾的品牌／CTA 是否干净利落，让人感觉接力链已完整结束。

目标为 100 分。低于 100 分时，必须明确指出下一步修改内容。低于 90 分时，不得最终交付。低于 70 分时，渲染前必须修改。低于 60 分时，必须重建转场图谱。

文字叠加背景布局规则

对于文字出现在背景图像上或附近的每个节拍，在生成图像或编写动画代码之前，先确定布局规范。该规范决定图像比例、主体位置、文字轴线、文字留白区、裁剪安全区域、标题字号等级、动态范围和移动端安全边界。

在规划生成图像、文字叠加图像的处理方式、分镜主视觉帧或 HyperFrames 布局 CSS 之前，请使用 references/text-over-background-layout.md。

画面下半部分的文案应留给 CTA、证据展示停留帧或主体占主导的画面。钩子、居中视点和强化关键词通常需要在中央或上方居中的位置形成视觉冲击。选择文字区域之前，先决定观众在第一秒应将目光落在哪里。

每份新的视频简报都必须列出一个候选布局策略。设计系统必须列出默认策略和允许的变体。检查生成或提供的图像后，分镜必须为每个文字叠加背景的节拍锁定一份最终布局规范。最终规范必须具体到足以在 1080x1920 画布上绘制：

Layout contract: cinematic side-title stage / 9:16 / left axis / textRect x=8% y=24% w=44% h=28% / subjectRect x=54% y=20% w=36% h=46% / quiet zone left 46% / safeBottomY<=85% / title tier main / motion stays inside textRect

规范必须包含布局意图、图像比例、文字轴线、文字矩形、主体矩形、留白区、安全底边界、标题字号等级和动态范围。对于非中文或非竖屏作品，应有意调整规范并记录覆盖项。

如果生成的图像在文字留白区内包含细节、人脸、产品边缘、UI 文字或高对比度纹理，应在添加动态效果前重新生成或重新裁剪。动态效果无法挽救构图失当的文字叠加背景画面。

渲染帧完整性关卡

浏览器预览是规划依据。渲染后的 MP4 帧是交付依据。

对于每个场景，都要在 SCENE_SCHEMA.json 中声明入场、可读停留和退场检查点。如果场景包含文本、透明素材、产品 UI、分层卡片或复合组件，就要从最终 MP4 中提取对应帧并进行检查。

硬性规则：

• 组件的容器、文本、控件、阴影、高光和装饰外壳，在变换、不透明度、裁剪和遮挡方面必须归属同一个所有者组。容器位于某个对象后方时，子元素不得越到该对象前方。
• 将透明素材与文本、边框或安全区域对齐时，应依据其可见的 alpha 边界定位。PNG 画布矩形不等于可见对象。
• 文本必须适配控件、卡片、徽章、搜索框或窄边框时，应测量导出后的字体度量。浏览器中适配良好，并不能免除对渲染帧溢出的检查。
• 要检查入场、停留和退场，而不只是主视觉停留帧。即使静帧通过审核，运动过程中也可能出现裁剪或重叠。
• 如果审核未提供渲染帧路径、时间戳和明确的断言名称，就不能作为证据。

如果浏览器与 MP4 的结果不一致，以 MP4 为准。更新布局契约、复合所有权、alpha 边界定位或字号，然后重新渲染并重新提取帧。

完整的遮挡、可见边界、导出一致性和证据工作流，请参阅 references/asset-choreography-and-render-qa.md。

设计工程契约规则

应将 SVG、CSS 和 GSAP 研究视为生产基础设施，而不是一大堆可随意组合的特效。目标是构建一个精简的动态设计编译器：

brief -> scene schema -> vector templates -> motion primitives -> GSAP timeline -> browser snapshots -> render

对于新的生产工作，应在实施前创建或更新以下契约：

• SCENE_SCHEMA.json：结构化场景、内容槽位、布局契约、时序、基础动画链、语义选择理由、可读停留和快照测试。
• VECTOR_TEMPLATES.json：获批的 SVG 场景系统，例如 quote_card、data_point 和 comparison，并定义固定槽位、安全几何、图标／装饰规则、允许使用的基础动画和拒绝测试。
• MOTION_PRIMITIVES.json：获批的动画词汇，例如 maskReveal、pathDraw、clipWipe、staggerText 和 numberCount，并定义语义用例、必需选择器、GSAP 属性、中点要求和拒绝测试。

LLM 可以选择模板、填充槽位并选择合规的基础动画。除非需求明确要求探索性艺术创作且已记录相关风险，否则不得随意为生产画面创造 SVG 几何、基础动画或时序语法。

在决定是否添加新模板、基础动画、转场手法、图标系统或批量生成模式之前，请参阅 references/design-engineering.md。

硬性规则：

• 先采用一小套获批的词汇，再逐步拓展风格范围。
• 根据语义角色选择基础动画，而不是追求视觉新奇。
• 在短促宣传视频中，遮罩、clipPath、路径、SVG 描边或 CSS 结构至少要承担一种重要的显现或转场效果。
• 最终交付前，必须通过浏览器快照测量中文文本布局。
• 转场中点必须可供检查。中点帧为空属于质量问题。
• 如果一个项目仅凭自然语言材料就能通过，而不需要任何结构化契约，它仍然是由提示词驱动的，尚不具备生产就绪条件。

GSAP 编排规范

使用 GSAP 作为高级动效的编排引擎。不要在整个合成中零散地使用独立补间动画。

每个实现的合成都应使用：

• 一个注册为 HyperFrames 控制对象的暂停主时间轴。
• hook、reveal、proof 和 cta 等时间轴标签。
• 位置参数，而不是串联使用 delay 值。
• 时间轴默认值，用于设置通用时长和缓动。
• GSAP 变换别名，例如 x、y、xPercent、yPercent、scale、rotation 和 svgOrigin。
• 隐藏／显示元素时使用 autoAlpha，而不是直接使用透明度。
• 在同一目标／属性上叠加后续 from()／fromTo() 补间动画时，设置 immediateRender: false。
• 使用插件前先注册。

仅在有助于呈现节拍时使用高级 GSAP 插件：

• 使用 SplitText 处理大号中文钩子文案、关键词串和 CTA 组合。
• 使用 DrawSVGPlugin 绘制 Logo 描边、锚定的证明连接线、扫描轨道、路线节点信号和检查括号。
• 使用 MorphSVGPlugin 呈现一种概念明显变为另一种的效果。
• 使用 MotionPathPlugin 让对象沿轨道或路径移动，以引导注意力。
• 使用 CustomEase 设计一个命名的标志性动效。

所有 GSAP 插件均来自公开的 gsap 包。不要添加旧版私有注册表、Club GSAP 或身份验证令牌相关说明。

在实现 GSAP 时间轴、插件用法、高级文字动画、SVG 路径绘制、变形、运动路径、自定义缓动或对性能敏感的动效之前，请先阅读 references/gsap-choreography.md。

默认语言和格式

除非用户明确要求其他语言或格式，否则默认将新视频作品制作成中文宣传片。此默认设置很重要，因为中文文案、竖屏构图和社交视频观看习惯会改变整体布局：

• 语言：默认使用简体中文屏幕文案。仅在英文产品名称、模型名称、代码术语或品牌词属于源素材时保留。
• 格式：默认竖屏 9:16。
• 尺寸：默认 1080x1920。
• 平台假设：默认采用抖音 / TikTok / Reels / Shorts 风格的竖屏观看方式，除非提示明确指定 YouTube 长视频、演示主题演讲屏幕、网站主视觉或桌面落地页等横屏场景。
• 时长：短宣传动效视频默认 10-15 秒；如果需要留出充足时间展示证明内容或 CTA，则使用 15 秒。
• 安全边距：为平台 UI、字幕和 CTA 预留更大的上下边距。避免将重要文字放在底部覆盖区域。
• 文案密度：中文竖屏视频每个节拍应减少字数、加强换行，并使用比横屏桌面影片更大的字号。

如果用户要求制作 YouTube 视频、网站主视觉、主题演讲或宽屏影片，请有意识地调整格式，并在简报中说明原因。避免在未说明的情况下默认改为横屏。

输出写作规范

所有产出内容都必须像直接的制作说明，尤其是 BRIEF_DESIGN_PROPOSAL.md、DESIGN.md、STORYBOARD.md 和 REVIEW_REPORT.md。

应做到：

• 使用简短、具体的句子。
• 写明项目专属的事实、决策和限制。
• 直接说明屏幕上会出现什么、什么内容会动效处理、会生成什么，以及会检查什么。
• 面向用户的提案文案使用通俗中文，除非用户要求其他语言。

避免：

• 在中文或英文中反复使用对比转折句式。
• 带有 AI 风格的自我描述、自言自语、过程旁白或内部推理。
• 空泛炒作、营销话术、口号和夸张形容词。
• 无关的视觉理论、平台评论或设计杂讯。
• 可以用一句话说明决策、规则或风险时，仍作长篇解释。

对于第 1 阶段的提案，文字应简洁。提案应帮助用户快速确认方向，内容涵盖核心概念、视觉方案、素材计划、布局、动效、风险和确认请求。提案不应写成推介幻灯片或头脑风暴记录。

两阶段规则

始终将新的视频制作拆分为两个阶段：

阶段 1：简报／设计提案

提供一份精简提案，然后暂停并等待用户确认。在此之前，不要生成图像、编写动画代码、渲染视频或构建完整的 HyperFrames 合成。

提案必须包括：

• 核心：核心观点、最大冲突、情感中心、放大的关键词、视觉隐喻。
• 相关时的产品佐证清单：现有素材、产品界面、命令、截图、输出示例、数字、模块、分类体系、提供方、检查项和缺口。
• 由源内容驱动的视觉系统：源内容中的短语、具体名词、流程动词、母题系列、文本到组件的映射、超大文本框替换方案，以及通用视觉元素排除清单。
• 结构：中心符号／超大标题／人物锚点／超大数字。
• 格式：语言、平台、宽高比、像素尺寸、时长、FPS、安全边距。除非另有指定，默认为简体中文、竖屏 9:16 和 1080x1920。
• 图像决策：是否需要生成位图图像、每项素材的用途、图像宽高比、文字留白区、禁止内容，以及哪些内容必须保留在 HyperFrames 中。
• 素材数量分析：不同视觉场景、可移动前景清单、数量依据、图集数量、单独生成的主体对象，以及计划中的 ASSET_MANIFEST.json。
• 背景方案：图像用途、布局约定、主体位置、文字安全区、裁切风险，以及确认后是否使用 Codex Image Gen。
• 文案标准：简洁、贴合项目、不自说自话、不用泛泛的炒作语，也不重复使用对比连接句式。
• 视觉对象方案：主要对象、功能性标记、纹理元素、每个对象的必要性，以及排除的对象类型。
• 辅助素材方案：视频是否需要符号、纹理、转场底板、语义字形、产品／UI 片段或动态强调元素；哪些内容由代码生成；如果变成装饰元素，必须删除什么。
• 产品宣传视频必备的视觉组件库：命令卡片、输出卡片、统计信息块、标签、佐证卡片、锚定信号、路线节点序列、截图、图标、标记、面板和 CTA 徽章，并说明其语义作用。
• 连接线／线条决策：是否需要路线、轨道、弧线、下划线、扫描线或路径；其锚点、作用、安全区、删除测试，以及附着在组件上的替代方案。
• 图标／装饰系统：所需的图标、标记、片段、辉光、面板、边框、标签或纹理层，以及它们能证明什么。
• 文案策略：痛点、机制、佐证、信心、CTA；重写任何可套用到其他产品上的泛泛文案。
• 字体排版：标题／辅助文案／CTA 的字号，标题字号等级，行高，字间距，最大行数，文本间距，溢出处理。
• 布局：主要视觉重心、布局约定、网格／对齐方式、裁切安全区、移动端叠加风险。
• 动效：主要揭示效果、背景动效、辅助素材编排、转场风格、停留时长、缓动、音效点安排、动效边界，以及必须保持静止的内容。
• 动效制作技巧：镜头行为、动态排版、文字转场模式、SVG/CSS3 图层、GSAP 时间轴结构，以及标志性动效时刻。
• 相关时的动态文字接力方案：关键词链、动作对象链、推移／擦除／扫描方向图、接力对象、转场中点画面，以及 100 分制的反 PPT 目标分数。
• 风险关卡：可能导致难以辨认、杂乱、风格不符或视觉泛化的因素。
• 反 PPT 风险：可能让作品看起来像幻灯片而非影片的因素，以及设计方向如何规避。
• 注意力地图：第一视觉落点、中心冲击的决策，以及文字为何位于中央、上方居中、侧边标题区或下方安全区。

阶段 1 结束时，明确请求用户确认。只有用户确认、提出修改或明确表示继续后，才开始制作。

阶段 2：制作

确认后，创建或更新制作文件，生成所需图像，实现 HyperFrames 合成文件，进行验证、快照和渲染，并根据任务要求编写评审输出。

适用范围

此技能适用于 HyperFrames 合成、产品发布视频、网站转视频项目、文章转视频影片、主题演讲揭晓环节、动态字体、转场丰富的文字／图标宣传片、音乐同步动态图形，以及现有 HyperFrames 视频编辑。

简单文案、静态海报、普通落地页、通用广告文案，以及不涉及代码的原始 MP4 编辑不适用。

对于新视频，先创建 BRIEF_DESIGN_PROPOSAL.md 并等待确认。确认后，创建或更新 DESIGN.md、STORYBOARD.md、所需素材、HyperFrames 合成文件、REVIEW_REPORT.md，以及可选的 REVIEW_PACK.md。

当时间安排取决于音乐、旁白或精确节拍时，使用 BEAT_MAP.json。当编排、背景运动、蒙版或转场需要单独规划时，使用 MOTION_MAP.json。时长超过 8 秒的多场景视频通常需要使用其中一个文件。

对于现有项目，先阅读项目内容；除非请求要求更改，否则保留当前视觉系统；只编辑受影响最小的文件，并重新运行相关验证。

交付后，如果用户反馈指出视觉缺陷，不要将修复视为一次性补丁。将缺陷添加到 REVIEW_REPORT.md，说明根本原因，更新导致该问题的上游约定或模板，重新运行快照／渲染检查，并判断是否需要小幅更新 SKILL.md、模板或验证脚本。

必需工作流

1. 信息收集

提取或推断以下内容：

• 来源文章、主题或产品主题。
• 目标和 CTA。
• 受众。
• 语言和平台。若未指定，默认采用适用于竖屏社交视频的简体中文宣传文案。
• 画面比例和像素尺寸。除非平台或用户另有要求，否则默认使用 9:16 和 1080x1920。
• 时长。
• 产品或优惠。
• 必需的证明要点。
• 语气和风格。
• 可用素材。
• 硬性限制。

如果信息缺失，请作出保守假设并写入简报。只有在缺失信息导致无法制作时才提问。

规划完整视频时，阅读 references/workflow.md。

1.5. 核心提炼

设计前，提炼以下内容：

• 核心观点。
• 最大冲突。
• 情感中心。
• 值得通过视觉强化的关键词。
• 一个能够贯穿整部视频的视觉隐喻。

将抽象概念转化为克制的象征。例如：AI 取代人类可以表现为被擦除的人类轮廓；焦虑可以表现为一根即将绷断的线；时间可以表现为黑暗中的倒计时；成长可以表现为裂缝中的光；信息过载可以表现为被吸入黑洞的数据碎片；长期主义可以表现为远处唯一的灯；平台迁移可以表现为黑色方尖碑或数据塔；自动化可以表现为文件进入一台无声机器。

2. 审批简报

根据 templates/BRIEF_DESIGN_PROPOSAL.template.md 创建 BRIEF_DESIGN_PROPOSAL.md，或在回复中呈现相同结构。

内容应简短明确，并将其视为制作约定。提交此提案后停止并请求确认。

3. 设计系统

根据 templates/DESIGN.template.md 创建 DESIGN.md。

设计系统必须明确字体排印、颜色、间距、密度、隐喻符号、视觉对象系统、背景图像系统、生成图像计划、图像上的文字规则以及动态效果风格。这可以防止后续步骤擅自创造新的视觉语言。

对于产品宣传片，设计系统还必须明确产品证明素材清单、由来源驱动的视觉系统、必需的视觉组件库、图标／装饰系统、素材库、文案层级以及动态交互规则。除非用户明确要求制作极简概念影片，否则仅有「一个背景加标题」的设计系统不足以支撑高端产品宣传片。

评估视觉质量、字体排印、布局或动态效果之前，请先阅读 references/visual-standard.md。 开展产品、工具、CLI、API、工作流、技能、模板或参考资料驱动的宣传片工作之前，请先阅读 references/premium-product-promo.md。 确定图像数量、背景用途、动画语法或图像上的文字处理方式之前，请先阅读 references/motion-background-system.md。 确定布局规范、图像比例、文字矩形、主体矩形、标题层级、裁切安全区或底部安全边界之前，请先阅读 references/text-over-background-layout.md。 确定动态排版、CSS/SVG 图层、场景过渡、GSAP 结构或反 PPT 质量门槛之前，请先阅读 references/motion-craft.md。 确定场景模式、矢量模板、动态原语、模板选择规则、渲染验证或批量模板之前，请先阅读 references/design-engineering.md。 实现时间轴、标签、位置参数、GSAP 插件用法、SplitText、DrawSVG、MorphSVG、MotionPath、CustomEase 或性能规则之前，请先阅读 references/gsap-choreography.md。 批准风格参考、素材角色覆盖范围、合成所有权、透明素材对齐方式或渲染帧证据之前，请先阅读 references/asset-choreography-and-render-qa.md。

4. 分镜与文案

根据 templates/STORYBOARD.template.md 创建 STORYBOARD.md。

默认的短片动作弧线：

Hook -> Tension -> Metaphor Reveal -> Proof -> CTA

制作 10 秒的无旁白动态排版视频时，文字要精简。通常每个节拍只需表达一个想法。

根据素材选择结构：

• 中心符号：趋势、洞察、AI、平台、理念。
• 巨型标题：冲突、悬念、情绪、观点。
• 人物锚点：教程、访谈、个人品牌、方法论。
• 巨型数字：增长、里程碑、数据冲击。

每个节拍都需要：

• 时间安排。
• 屏幕文字或视觉动作。
• 主视觉帧时间戳。
• 布局与视觉层级。
• 注意力地图：首要视线落点、主要焦点区域，以及文字应主导中心还是让位于主体。
• 主视觉文字区域：中心、上方中央、侧边、底部安全区或分屏，并说明理由。
• 背景图像状态与文字安全区域。
• 布局约定，包括 textRect、subjectRect、标题层级、safeBottomY 和运动边界。
• 文字转场：进入、锁定、强调、退出和衔接。
• 文字转场手法：遮罩、扫描、拆分、压缩、组装、交接，或明确说明静止的理由。
• 移除动作后会发生什么变化。
• 运动方向：摄像机、背景、符号、文字、SVG/CSS 图层和转场运动。
• 注意力目标及静止／停留要求。
• 转场退出。
• 相关的音频或节奏说明。
• 质量说明。
• 隐喻作用：此帧承载抽象概念的哪一部分。
• 相关的产品证明作用：哪些特定于产品的产物、组件、数字、截图、输出、命令、芯片、图标或标记，能让主张更可信。
• 相关的源短语与视觉转译：此节拍将哪个确切的源短语转化为组件、动作、符号或证明载体。
• 相关的组件交互：组件执行什么状态变化，例如输入、路由、扇形展开、组装、检查、锁定、发布、保存或导出。
• 相关的连接器锚定：任何线条、轨道、路径、下划线或弧线具体连接哪些对象；如果连接器悬空，则说明用什么附着于组件的信号替代。

当音乐、音效设计、旁白、节拍点或字幕很重要时，请阅读 references/audio-sync.md。

5. 设计工程约定

根据模板创建或更新制作约定：

• 根据 templates/SCENE_SCHEMA.template.json 创建 SCENE_SCHEMA.json。
• 根据 templates/VECTOR_TEMPLATES.template.json 创建 VECTOR_TEMPLATES.json。
• 根据 templates/MOTION_PRIMITIVES.template.json 创建 MOTION_PRIMITIVES.json。

约定必须锁定以下内容：

• 获准使用的场景模板及其插槽。
• 布局几何、textRect、subjectRect、safeBottomY、标题层级和光学居中容差。
• 每个场景的动作原语链。
• 每个原语的语义选择理由。
• GSAP 标签、位置参数、变换别名、插件要求和 autoAlpha 策略。
• 转场中点快照要求。
• 合成内容归属、Alpha 可见边界决策，以及进入／停留／退出导出检查点。
• 模板和原语的拒绝测试。
• 是否可以批量替换内容而不改变布局、SVG 几何或时间节奏规则。

对于新项目，不要让实现直接根据描述自行设计 SVG 几何或 GSAP 时间安排。先将分镜转换为约定，再根据约定进行实现。

运行：

node scripts/validate_design_engineering.mjs <project-dir>

6. 视觉素材计划

如果已确认的方案需要位图素材，请在 HyperFrames 实施前生成或获取这些素材。对于高品质多场景竖屏作品，请生成由内容衍生的一组独立竖屏背景和前景物件，并在 ASSET_MANIFEST.json 中声明；不要默认使用一个可重复利用的背景，也不要固定素材数量。

对于产品宣传片，不要只制作背景图。应构建一个素材库，可包含官方素材、仓库素材、截图、生成的样机、代码原生卡片、SVG 图标、芯片组、面板、锚定信号和输出预览。每项素材都必须证明一项产品主张或支持一种动态交互。没有视觉组件库的产品宣传片尚未准备好进入实施阶段。

对于内容系统、工作流、本地文件夹、知识库、教程或文章转视频宣传片，除非用户明确批准纯排版影片，否则不要默认接受空的图像素材文件夹。应推导出足够具体的视觉阶段和证明性视觉素材，覆盖每个已声明的视觉世界，以及每项需要可视证据的来源主张。真实的本地工作流素材通常比抽象卡片更有说服力：例如文件树裁剪图、草稿截图、关卡报告、指标表、工作区面板、产品界面或生成的象征性背景图。

对于每项 Codex Image Gen 请求：

• 仅生成背景阶段、中心符号、纹理、产品／人物／物件锚点、过渡画面、语义字形、产品／UI 片段或动态点缀所需的素材。
• 为每张图像或辅助素材指定一个用途和一个目标场景。
• 明确指定宽高比、目标尺寸、主体焦点位置、文字留白区、裁剪安全区、平台安全边界和禁止内容。
• 在生成前，指定辅助素材的风格锁定、安全区、动态用途、入场／退场时机和删除触发条件。
• 将精确检查过的参考风格规则和叙事边界纳入提示词；不要只依赖风格名称。
• 指明该组件的动态作用：叙事锚点、产品证明、过渡载体，或明确基于来源内容扩展的作用。
• 要求构图简洁、留有可用负空间、对比度适合深色背景，且不要预先嵌入文字，除非必须使用精确的标题文本。
• 尽可能在 HyperFrames 中处理排版、证明说明、CTA、标志、遮罩、裁剪、视差、焦点拉动和时序。

生成后：

• 根据布局规范检查返回的图像。
• 拒绝在文字留白区出现文字、伪造 UI、伪造标志、标签、水印、随机图标、繁杂细节或主体位置不清晰的图像。
• 如果图像无法容纳可读文字，请在实施前重新裁剪或生成。
• 保留组件表源文件，将每个通过审核的元素裁剪为带有明确名称的透明 PNG，检查透明外边缘和蒙版清理效果，并制作深色／浅色联系表。
• 如果所有通过审核的元素都重复同一种轮廓或承担同一种动态用途，即使组件表视觉效果丰富，也应拒绝。
• 在实施动画前运行已声明的组件组合测试。
• 在编写动画代码前运行 node scripts/validate_image_assets.mjs <project-dir>。
• 在引用通过审核的素材前，先将其保存到项目素材文件夹中。

7. 动画前先做好布局

先构建清晰易读的静止画面。添加动画前，静止画面应能清楚传达信息。

对于每个场景，请确认：

• 核心信息在目标平台尺寸下清晰可读。
• 背景图有明确作用，不会与文字争抢注意力。
• 文字位于经过设计的留白区，而不是细节密集的区域。
• 选定的布局约定与图像和信息的形态相符。
• 图像比例采用标准比例，不照搬随机来源图片的比例。
• 除非有意拆分，否则文字区域应将标题、补充说明、CTA 和证明说明放在同一个易读的组合中。
• 主体区域应确保人脸、产品边缘、UI 文字和符号不会落入不安全的裁切区域。
• 标题字号层级应符合实际字符数、语言、行数和手机观看距离。
• 底部及右侧／顶部的安全区域应确保 CTA、字幕、证明说明、补充文案和品牌组合清晰可见。
• 文字不得重叠，也不得超出安全边距。
• 文字容器应设定最大宽度、最大行数和溢出处理方式。
• 长单词、中英混排文本和 CTA 标签不得溢出文本框。
• 每个断点使用固定字号；不要根据视口宽度缩放文字。
• 层级清晰。
• 场景只有一个主导创意。
• 场景只有一个主导视觉元素，且没有无明确归属的装饰。
• 任何连接线、线条、轨道、弧线、下划线或路径都必须有清晰的锚点和明确的语义作用；否则应改为附着在组件上的视觉提示。
• CTA 或品牌组合不能在视觉上显得薄弱。
• 不借助图标标签也能理解隐喻。
• 画面符合品牌风格：黑色、简洁、电影感、白色／灰色／暖金色。

只有在布局有效后，才添加 GSAP 或其他动画。

8. 动画

添加动画前，请阅读 references/visual-standard.md 和 references/motion-background-system.md。

使用动画来明确顺序和强调重点。避免让每个元素都采用相同的 y 轴位移加透明度入场效果。为主要文字留出充足的停留时间，确保观众能够读完。

为每个场景制作动画前，请回答：

• 注意力应集中在哪里？
• 哪个背景、符号、文字或产品图层先动？
• 哪些元素必须保持静止，方便观众阅读？
• 揭示内容后，静止画面在哪里？
• 这种动画如何改变含义，而不是制造噪音？
• 哪种 CSS3/SVG 手法承载结构：遮罩、路径、裁切、扫描线、边框、下划线、透视图层还是混合效果？
• 如果使用线条、路径、轨道、弧线或下划线，具体锚定在哪个对象上？为什么它比卡片边缘、节点、状态点、进度条或 CTA 边框更合适？
• 如何让离场文字成为下一个场景的衔接，而不是消失在通用淡出效果中？

在 HyperFrames 中使用 GSAP 时：

• 使用暂停时间轴。
• 注册时间轴，以便 HyperFrames 控制。
• 使用明确的位置参数设定时间。
• 保持时间轴构建同步且具有确定性。
• 优先使用带标签的主时间轴，而不是互不相关的单元素效果。
• 对渲染关键动画使用变换、透明度、滤镜、遮罩、裁切路径和 CSS 变量；避免使用会导致布局偏移的属性。

判断动画是否足够有力之前，请阅读 references/motion-craft.md。渲染前请阅读 references/hyperframes-stability.md。

只有在选择器、标签、时间、缓动和转场难以审核时，才根据 templates/MOTION_MAP.template.json 创建可选的 MOTION_MAP.json。

9. 验证

运行项目可用的最严格检查。优先使用：

npx hyperframes doctor
npx hyperframes lint
npx hyperframes validate
npx hyperframes inspect
npx hyperframes snapshot <composition> --at <times>

如果项目或已安装的 HyperFrames 版本使用不同的命令语法，请查阅本地软件包文档或 CLI 帮助并据此调整。

最终交付必须进行验证。如果命令因缺少依赖项而无法运行，请明确说明，并仍然执行所有可用的静态检查。

进行本地确定性检查时，可在适当情况下使用随附脚本：

node scripts/check_assets.mjs <project-dir>
node scripts/validate_artifacts.mjs <project-dir>
node scripts/validate_design_engineering.mjs <project-dir>

10. 渲染

在条件允许时，使用草稿渲染进行审核，并使用更高质量的渲染或 Docker 渲染进行最终交付：

npx hyperframes render --quality draft --output renders/draft.mp4
npx hyperframes render --quality standard --output renders/review.mp4
npx hyperframes render --docker --quality high --output renders/final.mp4

调整标志，使其与已安装的 CLI 相匹配。

11. 审核报告

根据 templates/REVIEW_REPORT.template.md 创建 REVIEW_REPORT.md。

报告应包含：

• 输出文件。
• 验证状态。
• 快照时间戳。
• 按时间范围记录的观看备注。
• 问题。
• 建议的下一步编辑。

当输出文件、快照和报告均已存在时，使用 scripts/build_review_pack.mjs <project-dir> 创建 REVIEW_PACK.md。

质量门槛

在确认视频已就绪之前，请验证：

• 默认值或覆盖值已明确：简体中文、9:16、1080x1920 和垂直安全边距。
• 仅在确认 BRIEF_DESIGN_PROPOSAL.md 后，才开始制作新视频。
• 所需交付物均已生成；如有跳过的交付物，已说明原因。
• 新制作项目均包含 SCENE_SCHEMA.json、VECTOR_TEMPLATES.json 和 MOTION_PRIMITIVES.json；如有例外，已记录说明。
• 场景架构引用已批准的矢量模板和动画原语。
• 动画原语包含语义选择理由和排除测试。
• GSAP 时间线使用标签、位置参数、默认值、变换别名，并在适当情况下使用 autoAlpha。
• GSAP 插件已注册、记录，并根据语义角色选用。
• 存在已批准模板时，实现不会随意编造制作所用的 SVG 几何图形。
• 请求的构建产出了脚手架／合成源文件，而不只是文字说明。
• 静态主视觉帧在动画前即可正常显示。
• 首帧和主视觉帧的主要视觉元素在视觉上居中或有意偏移，位于边缘安全范围内，并已在浏览器快照和渲染后的 MP4 静帧中检查。
• 非纯文字视频达到视觉素材的最低要求：本地存在背景或证明素材；截图／渲染帧不只有黑色背景加文字／卡片；任何纯代码例外都已明确批准。
• 文字符合安全边距、最大行数、溢出规则、裁切安全区域和平台叠加层区域的要求。
• 文字叠加背景的画面已声明 textRect、subjectRect、safeBottomY、标题层级、静区和运动范围。
• 生成的图像在使用前均已指定用途、目标场景、文字静区和可用裁切范围，并具有已接受的本地路径。
• 产品宣传视频包含产品证明素材清单、必需的视觉组件库、图标／装饰系统、素材库、文案层级和组件交互方案。
• 产品、文章、工作流和知识宣传视频均包含由来源驱动的视觉系统：来源短语、名词、流程动词、母题系列、文字到组件的映射、大型文字框替换方案，以及通用视觉元素排除规则。
• 产品宣传视频满足已批准的、由来源驱动的组件清单要求，包括每个必需的具体界面、分类、证明素材或最终操作组件；每个主要组件均有快照证明。
• 主视觉帧能证明观众可识别来源内容。观众应能看到来源特有的物体、动作、数字或产品状态，而不只是通用办公道具、大型文字框或精美素材包。
• 产品宣传视频分镜列出来源要求的每个具体视觉组件并说明数量；不能以预设组件数量代替分析。
• 产品宣传视频文案具体明确：痛点、机制、证明、可信度和 CTA 均不能流于泛泛。
• 产品宣传视频的快照应呈现产品证明画面，而不只是标题卡。
• 产品宣传视频中的连接线应锚定在可见的产品组件上，或改为附着在卡片上的信号；不得保留悬浮弧线或装饰线条。
• 新视频均已记录是否使用辅助素材，即使决定不使用也要记录。
• 使用生成位图时，ASSET_MANIFEST.json 会记录已批准的视觉世界、背景数量决策、组件清单、图集策略、抠图路径和证明图集。
• ASSET_MANIFEST.json 会记录确切的风格来源、观察到的视觉语法、叙事边界、禁止的风格偏离、运动角色覆盖范围和不同组件组合测试。
• 高品质多场景图像制作中，每个声明的视觉世界都使用独立的竖版背景；按时长固定背景数量或只用一张背景的简化做法均不接受。
• 每个已接受的组件图集项都作为独立透明素材存在，通过深色／浅色联系表审查，并在合成中被引用。
• 辅助素材在生成或动画制作前，均已明确用途、来源、风格约束、安全区域、运动目的、进出场时机和删除条件。
• 没有辅助素材会与主要文字、符号、产品或 CTA 争夺注意力。
• 多场景作品包含有意义的场景衔接、清晰易读的停留段和运动设计方案。
• 动态文字接力作品包含关键词链、动作—对象链、方向图、接力连贯性、中点快照，且评分达到 90 分或以上。
• 已运行设计工程验证，包括场景架构、矢量模板和动画原语检查。
• 复合对象的子元素共用一个变换、不透明度、裁切和遮挡控制主体。
• 透明素材的画布留白会影响对齐时，放置位置依据可见的 Alpha 边界确定。
• 对于文字密集或分层场景，已从最终 MP4 中提取入场、清晰停留和退场检查点。
• 窄文本容器已通过导出字体测量和渲染帧溢出审查。
• 排查所得的核心要点均由排版、视觉对象、图像阶段和运动效果共同支撑。
• 作品避免重复的渐显、相同的居中布局、空荡的黑屏间隙、泛滥的通用图标和千篇一律的壁纸。
• 时序具有确定性；已运行 HyperFrames 验证或最佳可用替代方案。
• 主视觉帧快照和审查输出均已生成；如有阻碍，已报告。
• 已记录用户报告的任何视觉缺陷，包括根本原因、修改的上游产物、重新运行的证据，以及是否需要更新技能／模板／验证器规则。

首帧视觉中心检查

最初 0-2 秒决定视频是否显得用心设计。对于每条竖屏宣传视频，请检查第一个可读停留画面和第一个产品证明画面：

• 指出占据主要视觉空间的元素：标题块、数字、卡片堆叠、产品界面、屏幕截图、符号、CTA 或路径对象。
• 检查视觉中心，而不只是 CSS 中心：感知到的整体中心应位于预期轴线上，否则分镜脚本必须说明偏移原因。
• 检查边缘留白：除非裁切是有意设计的转场，否则重要卡片、屏幕截图、产品边缘、标签或 CTA 都不得被裁切。
• 检查实际渲染的 MP4 静帧，而不只是浏览器快照，因为渲染缩放、变换和透视效果可能暴露裁切问题。
• 如果主视觉元素有意偏离中心，请记录用于平衡它的补偿元素：标题、符号、光线、卡片、留白或运动方向。

稳定性硬性规则

不得使用：

• Date.now() 等墙上时钟动画状态来驱动渲染关键动画。
• 未设种子的 Math.random() 来生成渲染关键视觉效果。
• 将 setTimeout、setInterval 或 requestAnimationFrame 作为主动画计时的事实来源。
• 异步构建核心时间轴。
• 在渲染时发起必需资源的网络请求。
• 手动调用 video.play()、video.pause()，或不受控地更改媒体时间。
• 在渲染时间轴中无限重复动画。

请使用带种子的随机数、固定时长、固定 fps、固定尺寸、本地资源和明确的时间轴位置。除非需求文档注明其他目标尺寸，否则新视频的默认尺寸为 1080x1920，用于 9:16 竖屏输出。

参考资料

• 阅读 references/workflow.md，了解完整的制作工作流。
• 规划生成式背景素材集、组件图集、透明抠图、资源清单或图像资源验证时，请阅读 references/imagegen-asset-pipeline.md。
• 使用提供的风格参考、核准资源角色覆盖范围、测试组件组合、对齐透明素材或验证渲染后的 MP4 帧时，请阅读 references/asset-choreography-and-render-qa.md。
• 评判风格、排版、布局和运动效果时，请阅读 references/visual-standard.md。
• 规划布局契约、文本矩形、主体矩形、标题层级、裁切安全区和移动端安全边界时，请阅读 references/text-over-background-layout.md。
• 规划动态排版、CSS3/SVG 结构、GSAP 编排、场景转场或改进反 PPT 效果时，请阅读 references/motion-craft.md。
• 规划场景模式、SVG 模板库、运动原语目录、选择规则、浏览器验证或批量模板模式时，请阅读 references/design-engineering.md。
• 规划 GSAP 时间轴、插件注册、SplitText、DrawSVG、MorphSVG、MotionPath、CustomEase、位置参数和性能时，请阅读 references/gsap-choreography.md。
• 需要与音乐、配音或字幕同步时，请阅读 references/audio-sync.md。
• 实现或调试渲染行为前，请阅读 references/hyperframes-stability.md。

模板

请使用 templates/ 中的模板制作交付文件：

• BRIEF_DESIGN_PROPOSAL.template.md
• DESIGN.template.md
• STORYBOARD.template.md
• REVIEW_REPORT.template.md
• SCENE_SCHEMA.template.json
• VECTOR_TEMPLATES.template.json
• MOTION_PRIMITIVES.template.json
• ASSET_MANIFEST.template.json

可选模板：

• BEAT_MAP.template.json
• MOTION_MAP.template.json

本地技能检查

此技能包含确定性实用脚本：

node scripts/check-structure.mjs
node scripts/create_project.mjs <target-dir>
node scripts/check_assets.mjs <project-dir>
node scripts/validate_image_assets.mjs <project-dir>
node scripts/validate_artifacts.mjs <project-dir>
node scripts/validate_design_engineering.mjs <project-dir>
node scripts/build_review_pack.mjs <project-dir>

check-structure.mjs 用于检查技能包。其他脚本可用于搭建项目脚手架、检查本地资源、验证交付文件完整性、验证设计工程契约，以及按需生成审查包。这些脚本无法证明视觉质量；它们只能发现工作流、结构和可复现性方面的问题。