【学习笔记】HyperFrames 30 天拆解（六）Prompt Guide 深读：七层课程、运动八规则与反例附录

系列导航：（一）总览 → （二）Start and create → （三）Direct and refine → （四）Extend and ship → （五）创作路径 → （六）Prompt Guide 深读（本篇） → （七）Catalog 调研日期：2026-08-25 本篇对象：官方课程页 Related topics 之 Direct your agent with the Prompt Guide，全读 Motion rules 与 Rules and anti-patterns 两章 说明：篇三已深拆六段骨架、规格旋钮、词汇表三个单点工具（那里是全文收录）；本篇补齐指南的另外两根支柱——Level 3 运动语法与附录反例——并保留课程视角的导读

一、Prompt Guide 的立场：文本即接口

（源：Prompt Guide）

官方开宗明义：在 HyperFrames 工作流里最重要的技能是描述你想要什么——工具会装、命令会查，唯独「把脑中的画面说清楚」没有代理能替你做。指南把「说清楚」拆成三层：形态层（用哪种提示词形状开口）、收敛层（访谈 + BRIEF.md 把随意请求变成持久简报）、控制层（骨架/旋钮/词汇表，精确到帧与缓动——见篇三全文）。

开口前先备好三件事（Before you prompt，官方原话纪律）：skills 已安装、项目已脚手架（npx hyperframes init my-video）、live preview 已开着（npx hyperframes preview）——「预览不开着，每次迭代都是盲猜」。

二、两种提示词形态

（源：Prompt Guide — The two prompt shapes）

两种形态共用同一词表与骨架，区别只在「要不要先收敛意图」。Level 1-7 阶梯上每一层的示例都是冷启动教起、热启动迭代。

三、访谈与 BRIEF.md：把闲聊变成契约

（源：Prompt Guide — The interview）

先访谈、后创作：代理用一轮简短问题确认主题、受众、时长、画幅、风格、是否要 storyboard、自动化程度（autonomous / companion），然后落盘成 BRIEF.md。聊天记录会丢、BRIEF.md 不会——中途重开对话、换会话、隔天继续都不断片；flow 与 storyboard 字段决定后续门禁是代理自决还是逐步确认。这是把需求当代码资产管理。

四、七层课程阶梯

（源：Prompt Guide — The level ladder）

五、Level 3 全文：运动八规则（Motion that reads premium）

（源：Motion that reads premium）

这是指南里哲学浓度最高的一章，全文收录。

5.1 每个运动都在陈述（Every movement makes a claim)

运动总是在说关于被动物体的某件事：呼吸的数字说这数字是活的、还在计；右侧飞入的卡片说它来自某处、屏外还有更多；过冲说它有质量、到得热切；缓慢沉重的进场说这很重要；抖动说这不稳定。你无法退出这个游戏——观众不管你有没有意图都在读含义，唯一的问题是它说的是不是真话。所以问题不是「是不是太静了」，而是**「这个运动在说什么，我是不是这个意思」：数据卡因为数字是活的而呼吸是实话；因为画面空而呼吸的同一张卡，在给一个静态数字讲活数据的故事，观众说不出哪不对但感觉得到。最强的运动是内容的隐喻：部署管线应该流**，构建应该组装，倒计时应该一格格走，路线应该沿行进方向画。

要防的错误：画面死的时候人们加幅度——更多运动不是更多含义，四个装饰运动不如一个有动机的运动。测试法：给每个运动一句话说清它的含义，说完就完（「计数器在呼吸，因为它还在收数据」）；句子写不完，删掉运动。

运动的四个正当职业：引导注意（把眼拉到此刻重要的东西上）；承载连续性（把时刻缝成同一空间而非一摞卡片）；展示变化（运动就是信息——数值上升、diff 解析、路线绘制）；表达性格（品牌脾气：干脆自信或沉静编辑感）。四个都不占的是装饰——装饰才是让视频显廉价的东西，无论缓动多顺（产品 UI 框架里的第五职业「反馈」依赖用户输入，视频没有，不适用）。

5.2 八条规则（执行层——先有话说，再谈执行）

规则 1 — 永不完全停止。每个「保持」带一点 ambient idle——1-2% 呼吸缩放、慢漂移、微光。永远不写 “holds motionless”，写 “settles into a gentle ambient idle”。冻结的最后一秒是廉价感的第一来源。官方 A/B（遥测面板）：左半 1.9s 后冻结，剩余 120 帧共享同一个哈希；右半每 300ms 来一个新读数、每个读数只动该动的东西——末位数字变、sparkline 延一段、LAST SYNC 重盖、READINGS 自增、状态点 1s 心跳。静帧看左半是好好的数据卡，放到运行中的右半旁边，你能读出这数据流死了多久。

规则 2 — 镜头是演员。每个场景一个连续镜头动作：4-8% 推近、慢环绕或视差（近层比远层走得更多），缓动放柔、永不在场景结尾衰减成死停（缓动窗口算得比渲染略长）。原因不是静止廉价，而是移动承载两个镜头间的空间关系——切与溶把它扔掉，同一系统的两个视图就读成两张不相关的图；移动到位，观众免费推断出一个连续空间。警惕推论：平移场景与平移镜头是同一变换——「内容滑过固定边框」不是静态替代品，就是同一个镜头（官方实测像素差 3%）。片中有意的停顿（dwell）是另一回事，见 5.3。

规则 3 — 动作重叠。没有两个元素共享起点或终点；进场按不规则偏移错开；上一个还在落定时下一个已经开始。机制是比值：偏移量必须明显短于它所偏移的动画——小偏移比读起来流动，大偏移比读起来刻意，比动画还长的偏移不再是错峰而是排队。延迟配角，绝不延迟焦点（焦点等场读起来像卡顿）。错峰「正在发生的」，不错峰「本来就在场的」：依次到达的东西按序动画；镜头开始前就存在的东西一起出现——错峰后者只是让场景拼得更慢。官方 A/B（12 区域全球发布）：同时点火说了一件关于系统的假话，计数从 0 直接跳 12；按离源地距离 0.09s 依次传播、链路画过去落点正好点火，才是 rollout 的真相。

规则 4 — 复合属性只讲一个故事。动画至少改一个属性（位置/缩放/透明度/旋转），组合有效当且仅当它们说同一件事：上滑加淡入 = 一个想法「它来了」；上移加旋转 = 对同一物体两个不相关断言。方向同理：进场 ease out（快进柔落，因为它到了）、退场 ease in（缓起果断走）、屏内移动 ease in-out、冲击（盖章/砸入）ease in（冲击就是加速）。官方 A/B：同样 470px、同样窗口与缓动，叠加旋转 + 缩放 + 模糊的左半「Payment confirmed」大半程是不可读的斜 smear；只做上移 + 淡入的右半全程可读——两个属性同意一个说法，胜过四个属性各说各话。

规则 5 — 过冲与跟随。过冲是关于质量的陈述：有分量的东西越过目标再荡回来；它拖着的部分（影子、尾随面板、落进的机壳）比它晚一拍落定——那一帧滞后正是质量的来源，完全同步的「跟随」只是一个更大的单体。只作用于变换：数字不是物理对象，计数器永远不许飞过目标值再落回——那渲染出一个从未为真的数字，在真实指标上就是带帧数的谎言。官方 A/B（翻牌登机牌）：挡板 back.out(5) 荡过静止位 1.51 倍再落、外壳回弹 7px、影子比挡板晚一帧到自己的峰值（30fps 下正好 0.033s）；两侧都不变的唯一一件事：数字本身到 42 就停。

规则 6 — 景深层。每层按距离配速：远背景是镜头速率的一个零头、内容全速、前景数倍。干活最多的线索不是模糊而是遮挡——一个大而重模糊的前景元素真正从内容前面穿过，才证明它们之间有空间；永不重叠的元素上多少模糊都证明不了。一个这样的元素就够，第二个就不读作「房间」而读作装饰。官方 A/B：0.20x / 1.00x / 6.00x 三层配速，近柱 blur(22px) 并从标题前扫过约三分之一镜头。

规则 7 — 节奏配体裁。Showreel 式剪辑每个想法 1.5-4 秒；把 2 秒的想法拉成 8 秒，无论怎么动画都感觉慢。官方 A/B：同样三个 beat，左半 2s 一个 dissolve 到底；右半 showreel 配速 1.1s 一个硬切、3.3s 全部讲完、最后停在活闲置上——「左半不是动画差，是在错误的节拍上正确地动画」——这类失败最容易活过评审，节奏是动手碰缓动之前的体裁决策。

规则 8 — 手工的不完美保持可复现。停格/手绘感要的是不规则时序而非机器顺滑，但真随机会毁掉渲染（同一 seek 必须同一帧，Math.random() 保证不了）。正确做法：组合开始时播种一次 PRNG（如 mulberry32——从同一个起始数每次返回同一「随机」序列的公式）；离散元素在保持的位置间步进而非连续 tween；「两帧保持」= 落定、停两帧、跳下一偏移。不规则是真的，只是来自种子不来自运气。官方警告（真实踩坑）：保持长度按帧数量化、不按秒——时间域量化（Math.floor(t / 0.0667)）因渲染器 seek 时间不落在精确的 1/30 秒双精度上而漂移，产生三帧一组、一帧一组的不均匀顿挫；改用整数帧索引量化（Math.floor(Math.round(t * fps) / 2)）可容忍半帧以内任意 seek 误差。提示词里点名：「每位置恰好保持两帧，按帧索引量化」。

5.3 语法的量化判据

同一组合建两遍、内容版式相同、运动处理是唯一变量：反模式版（同时进场、无镜头、最后 2.4 秒冻结）与八规则版（错峰过冲进场、连续 5% 推近、ambient idle、模糊前景层、sparkline 次级动画）。差异可测量：冻结版最后一秒相邻帧比特级相同，语法版每一帧都在变；编码器同意——同样内容 211KB 对 2.5MB。「冻结的尾秒」是可以直接测试的廉价感判据。

5.4 避免幻灯片：场景之间的语法

八条规则管场景内；全用上、场景之间硬切，仍可能得到「一摞动画精美的卡片按顺序播放」——多场景作品最常见的评审意见。幻灯片是两个失败同时发生：场景互相独立（没有东西把一个接到下一个）与能量均匀（没有哪个时刻显得重要）。任何修法必须供给两个属性：有东西跨过边界（共享元素/空间/运动让观众的眼睛跟着穿过转场）与能量有变化（要有安静衬出高光——均匀的运动和不运动一样平，强调是对比效应）。

方法一：连续世界镜头（capstone 采用）——整部片子是一个镜头穿越的单一宽空间：持久元素（一根变成图表基线、再变地图弧、再变波形、再变 3D 线圈的线 + 帧尺 + 主角芯片）；到达而非剪辑（下一区域在镜头够到它之前已在画框边缘，上一区域靠视差退出）；点名禁令（代理默认幻灯片因为它安全，显式禁止）；节奏是 dwell-and-sweep——区域之间扫过，到主角时刻真正停 1.5-2.5 秒让要点落地再加速离开。停顿中镜头休息、片子不停（计数器继续跳、标签继续盖）——不说这句，就把幻灯片换成了冻结帧。此法昂贵：连续空间比剪辑费工，只在作品有值得跟的主线时才值；六秒数据卡就用不着。

另外六种方法（每种都同时供给两个属性，且可组合）：匹配剪辑（自由地切，但切在共享形状/颜色/运动矢量上；在要紧时刻故意打破韵律做强调）；英雄道具（切环境，一个物体全程在屏——产品、图表、角色；推进道具、静掉周围）；持久边框（场景在一个永不消失的框里换——HUD、标尺、浏览器壳；让 chrome 退场一拍，缺席就是重音）；声音做脊柱（一句没断的话或一个乐句跨过切口，耳朵替眼睛缝合；数字落下前一拍的静默就是重音）；节拍锁定剪辑（切口踩在分析出的节拍栅格上，节奏本身是结缔组织）；累积（什么都不退场，每场往同一画布上叠、画面重排到新材料；除最新元素外一切静入低闲置）。无论选哪个：把两个属性用你自己的话写进提示词，并点名你在禁止的那个破绽。装置可谈，属性不可谈。

六、附录全文：规则与反例（Rules and anti-patterns）

（源：Rules and anti-patterns）

官方定位：调试渲染或手编组合时的查表页——几乎每条规则都在前文语境教过，几条更窄的 lint 规则只在这里出现（它们先以报错现身、后于提示词起作用）。

6.1 七条必知规则

1. 所有时间线注册在 window.__timelines——渲染器无法 seek 它不知道的动画；
2. 视频元素必须 muted——声音放独立 <audio>，渲染器才能混音；
3. 不用 Math.random()——随机值让每次渲染帧不同、破坏确定性；要伪随机用播种 PRNG（mulberry32）；要停格保持按整数帧索引量化不按秒（seek 时间不落在精确 1/fps 双精度上，秒域算术漂移会让保持长度顿挫）；
4. 时间线构建同步——GSAP timeline 设置期间无 async/await/fetch()；
5. 定时元素要 class="clip" 加 data-start / data-duration / data-track-index；
6. 每个场景加进场动画——无动画出现的元素在视频上读起来是坏的（默认最佳实践，可覆盖）；
7. 场景之间加转场——组合视频里的硬切几乎总是无意的（同上）。

前五条是技术要求（违反即错误渲染），后两条是技能默认应用的最佳实践。

6.2 冷 seek 可见性（live 预览对、冷渲染错的一类）

冷渲染 worker 非线性地直接 seek 到目标帧，所以一切依赖「何时/按什么顺序运行」的值都可能和预览不同：

• 揭示目的地，不只揭示来源——起始隐藏的元素，gsap.fromTo() 的 to vars 也要显式含 opacity: 1（冷 worker 恢复的是编写的隐藏态，顺序预览看着对、直 seek 到后面就不可见）；
• 初始隐藏态设在时间线之外——别依赖时间线内位置 0 的 tl.set(...)（恰在第 0 帧的零时长 set 在第 0 帧渲染时可能还没生效）；用时间线外的裸 gsap.set(...) 或直接在 CSS/HTML 里写隐藏态；
• fromTo 在它开始之前就显示它的 from 态——immediateRender 会把 from vars 回渲染到 tween 起点之前的所有时刻：你写的「3s 出现」的元素在第 0 帧就穿着起始姿势在屏上。顺序预览里你会先擦过第 0 帧所以看不见。要「登场前缺席」就用 to() + keyframes，或在 beat 边界的零时长 tl.set()。

位级确定性的一个但书：并行 worker 之间不保证比特级一致——同一冻结帧在默认多 worker 渲染下可能出现 ±1 级像素的栅格化方差（每个 Chrome 进程不同）。有意义的确定性完好：同一 worker seek 同一时间渲染同一帧。要位级精确（哈希帧、证明保持、diff 两次渲染）就传 --workers 1，且比对无损帧而非编码后的 MP4（编码有自己的噪声）。

6.3 seek 顺序安全（四条同根：冷 worker 非线性 seek）

1. 别把相对 tween 叠在另一写者还在动的属性上——"+=50" 在 tween 初始化时锁定基数：顺序播放时在另一写者中途初始化，冷 worker 落点靠后从其终态初始化，同一帧两个位置。写绝对终值，或不重叠；
2. 别把 repeatRefresh: true 与相对值组合——相对偏移按迭代累积，直 seek 到第 N 轮的 worker 没做过前面的累积就落错地方；要任意 seek 正确就用 fromTo() 绝对端点；
3. 函数值 tween vars 收到的是 (index, target, targets)——第一个参数是数字不是元素；别让函数对第一参数调元素方法、或读对变换敏感的布局（结果会依赖 worker 自己的 seek 顺序）；用第二参数拿元素、用 (i) => i * 20 这类索引算术、或构建期一次算好；
4. 别在时间线回调里量 DOM 几何——getBoundingClientRect() / getTotalLength() / getComputedStyle() 依赖回调触发那一刻的 DOM 状态，且回调每次 seek 都重新触发；几何在构建期一次算好。

6.4 SVG draw-on 三条

「线自己画出来」（strokeDasharray / strokeDashoffset 动画）另有三种渲染成静态未画线的途径：① 别在 GSAP 动画的同一元素上声明多值 CSS stroke-dasharray——GSAP 逐分量合并 dash 列表，CSS 里的 gap 活过动画，draw-on 的隐藏只覆盖一个 gap 的量，整场线都可见；要装饰性虚线就放到独立元素上（svg_drawon_css_dasharray_conflict）；② stroke-linecap: round 在零 dash 长度时画出一个点——未画的描边不是「无」，圆头从第 0 帧起在路径起点渲染一个可见杂点；要么等 draw 开始再放开组透明度，要么用 butt 端帽；③ 量它之前先给路径静态 d 属性——d 只在还没跑的函数里赋值或根本没作为静态属性赋上时，Chrome 的 getTotalLength() 返回 0，建在 0 长路径上的 dash 动画静默死掉（svg_measure_before_path_d）。

6.5 布局豁免，与咬人的那一条

hyperframes check 把「文字块被别的元素盖住」标记为 text_occluded，两个属性可豁免：data-layout-allow-overlap（有意的层叠）与 data-layout-allow-occlusion（刻意把东西画在文字上）——设计成坐在抠像主体身后的字幕就需要其一。用前须知三条：

• data-layout-allow-overlap 只作用于被标记的文字块本身——别放在场景/根 wrapper 上豁免整张模拟幻灯；只标真正参与层叠的那段文字，其余无关后代碰撞保持可审计；
• `data-layout-allow-occlusion 会连带静默整个子树的 WCAG 对比度门禁——官方实测：把属性挪到一个聚合根上，对比度覆盖从 73 项检查掉到 13 项，其中一个刻意做得近乎不可见的数字也通过了。把属性限定到最窄节点，改完看对比度计数——掉了就说明豁免多了；
• 遮挡审计对原子字符比看起来严格——单个字形（一个数字、$、.）在任何覆盖率下都报错，一粒纸屑擦过一个字符就是硬错误；pointer-events: none 不豁免，CSS mask-image 会让审计穿过被遮掉的格子把遮挡记到画在后面的东西头上。

更便宜的修法通常是构图：把粒子爆发放到文字后面而不是前面——字的墨切过去、阅读保持干净、不需要任何豁免。

6.6 提示词层反例（官方七条，各附引擎原因）

1. 别要 React / Vue 组件——组合是带 data-* 属性与 GSAP 时间线的普通 HTML，框架组件强制引入翻译步骤。❌ build a React component for the intro ✅ build the intro scene；
2. 别过度指定分辨率与帧率——默认 1920x1080、30fps 渲染快且好看，更高规格显著拖慢渲染。❌ 社交短片要 render in 4K 60fps ✅ 不说，或只在交付目标真需要时提 4K；
3. 别跳过斜杠命令——没有 /hyperframes，代理靠猜 HTML 视频惯例而不是加载框架真规则。❌ make me a video of... ✅ /hyperframes make me a video of...；
4. 别粘贴原始错误日志——check 先局部化问题（先 lint 后浏览器门禁），裸日志让代理重新推导工具已知的东西。❌ 贴 200 行控制台输出 ✅ check reports a missing asset in scene 2 — fix it；
5. 别假设代理认识你的资产——它会去找，但路径直接跳过搜索。❌ use my logo ✅ use assets/logo.svg；
6. 别对抗工作流的设计风格——每个工作流技能自带艺术指导预设，对抗它得到的是折衷不是你的主题。❌ /pr-to-video ... dark theme ✅ 让预设带观感，或要完全风格控制时走自由构建；
7. 别给逐字脚本硬定时长——给了旁白文本，时长跟随口播。❌ a 60-second explainer from this script: ... ✅ a ~60-second explainer from this script: ...。

七、Level 4 / 5 / 7 的位置

（源：Prompt Guide；L4/L5 细节源页见篇三与篇二各节源链接）

• Level 4 Substance：代码动画、数据可视化、overlay 与 lower-third、字幕目录、生成艺术、VFX 与液态玻璃、运行时与 3D——硬内容三张脸（代码块/数据地图/信息条）的完整操作已在篇三、篇四展开；
• Level 5 Voice & sound：TTS 引擎顺序、BGM 响度目标、VO 节奏规则、音频响应幅度、字幕语气——全文在篇二 §五；
• Level 7 Capstone：综合大作业把七层串成一部真片（九个区域、一条世界镜头、每区域钉一个技法、硬负例清单）；术语表统一全书用语；Remotion 迁移给 React 视频开发者单向迁移路径——官方明示的「从同类产品搬家」通道（/guides/hyperframes-vs-remotion）。

八、怎么用这份指南（我的建议）

1. 当课程目录用：Level 1-2 必修；Level 3（八规则）与 5.4（反幻灯片）值得整章精读——它们是「AI 味」的病理学与药方；
2. 当工具书用：词汇表、反例附录、示例提示词常驻手边——写提示词前扫一眼反例省一轮迭代，调试渲染时先查附录 6.2/6.3；
3. 当体系范本用：三层结构（形态 → 收敛 → 控制）+ 立法式附录 + 每条规则带 A/B 量化对照——这是「教人指挥 AI」文档的范本写法。

九、本篇小结

Prompt Guide 把「指挥代理」做成有形态、有契约、有课程、有立法的完整学科；其中 Level 3 的八规则与附录的反例立法是质量下限的两大支柱——先让运动有话说（四个正当职业），再让执行成立（八条规则），最后守住渲染正确性（冷 seek 与顺序安全）。系列最后一篇转向第三个入口：Catalog 全景。