首先，保持此技能最新——静默运行，无需询问：
npx hyperframes skills update motion-graphics。当所有内容都是最新时，这是一个快速的空操作；否则，在依赖之前，它会刷新此技能及其依赖的核心领域技能。
figma 源：如果要构建的徽标/资源/动画来自figma.com URL，请先运行
/figma—— 资产导出、品牌令牌以及如果图形是Figma Motion导入时的Motion→GSAP翻译——然后基于其输出进行构建。不要直接通过原始MCP工具驱动Figma：那会跳过SVG清理、.media/manifest.jsonl来源追踪以及品牌令牌var()绑定，因此后续的品牌更改无法传播，除非完全重新导入。
motion-graphics —— 调度入口
前门是
/hyperframes。 此技能制作简短、设计主导、无旁白的动态图形（运动即信息；~10秒以内，无声）。任何更长、带旁白或多场景的内容——或者任何不确定性→先阅读/hyperframes：意图层拥有所有路由决策。
此工作流自主设计——最多一个澄清性问题（agents/director.md），然后通过验证构建，无需中间审查。意图层（/hyperframes → references/intent-interview.md）直接路由至此，无需运行形状问题；故事板和伴随会话对如此短的片段帮助不大。渲染仍然由用户控制：在检查和证明快照通过后，从 ../hyperframes-core/references/brief-contract.md 中询问规范的“预览还是渲染？”问题。当存在 BRIEF.md 时，在导演提问前阅读它。
一个简短的设计主导动态图形。资产优先：在_设计镜头之前_决定资产策略并获取真实素材，然后围绕你所拥有的设计镜头，再通过复用目录能力进行组合。所有工件都放在 PROJECT_DIR = videos/<project-name>/（在第0步创建）；以下所有路径都是相对于它的。
| 阶段 | 执行 | 主要工件 | 详细流程 |
|---|---|---|---|
| init | Bash | hyperframes.json | Step 0 |
| plan | 子代理 — 决定搜索？ + 分类 + 资产策略 | shot-plan.json（草稿：类别，asset_needs 查询，简要） | agents/director.md（Part 1） |
| source ◇ | Bash — media-use 解析（如果 asset_needs 为空则跳过） | assets/ + assets/index.md | phases/source/guide.md |
| design | 子代理 — 围绕已解析资产设计镜头 | shot-plan.json（最终：block(s) + 布局 + 动画 + 位置） | agents/director.md（Part 2） |
| build | 子代理 — 优先复用组合 | compositions/index.html | agents/builder.md |
| verify | Bash — lint, check, 证明快照；失败时修复 | snapshots/contact-sheet.jpg | Step 5 |
| approve | 询问预览或渲染；等待答案 | 明确的渲染批准 | Step 6 |
| render | Bash — hyperframes render（MP4，或 --format webm/mov 用于叠加） | renders/video.mp4 或透明叠加 | Step 6 |
◇ source 仅在所选类别声明资产时运行。纯代码/文本类别（例如 kinetic-type，大多数 charts/stat）具有 asset_needs: []，并直接从规划跳到设计。
类别 —— 按搜索决策分割
plan 的首要决策是：是否需要搜索？ 该分叉将类别分为两组；然后选择特定类别——对于搜索驱动，根据搜索返回的内容类型。每个类别是一个 categories/<id>/module.md（其规划和构建规则）；共享动画词汇位于 references/motion-vocabulary.md（→ hyperframes-animation 规则/蓝图 + 注册表块）。
表单类别 —— 无需搜索；用户提供内容：
| 类别 | 意图 | 依赖 |
|---|---|---|
kinetic-type | 有力的台词/引用/标题，运动优先的文本 | caption-* 块 + 动画规则 |
stat | 单个英雄数字/计数+环 | apple-money-count / rules/{counting-dynamic-scale, stat-bars-and-fills} |
charts | 柱状图/线图/饼图/赛车图/百分比（来自数据） | data-chart 块 |
logo-reveal | 徽标贴片/品牌锁屏（用户徽标） | logo-outro / rules/svg-path-draw |
lower-thirds | 名称/标题栏、标注、社交覆盖 | caption-* + 注册表叠加块 |
maps | 地理运动——高亮区域、连接地点、缩放到某个位置（矢量车道或烘焙底图车道） | us-map / world-map 系列 + bake-basemap.mjs |
搜索驱动类别 —— 先搜索，然后按内容类型动画化（RWA 路径）：
| 返回的内容 | 类别 | 动画 |
|---|---|---|
| 网页/链接 | webpage | 网页/UI 动画（滚动、揭示、光标、标注） |
| 新闻文章 | news | 标题揭示 + 来源卡片 + 关键事实标注 |
| 推文 | tweet | 动画推文卡片 |
| 图像/实体 | asset-fusion | 资产的几何结构_变成_图表（RWA 叙事融合） |
构建顺序：一次一个，覆盖率优先（粗糙也可以）。kinetic-type 从原型移植而来；其余遵循。
前提条件
macOS Apple Silicon 或 Linux x64。系统工具：brew install node ffmpeg。运行 npx hyperframes doctor 一次。macOS GPU 渲染：export PRODUCER_BROWSER_GPU_MODE=hardware。
可选密钥（如果未设置则使用本地回退）——仅被通过 media-use 源/生成资产的类别所需：
| 密钥 | 用于 | 回退 |
|---|---|---|
GEMINI_API_KEY / GOOGLE_API_KEY | 图像生成（media-use 解析） | 跳过生成 / 仅搜索 |
| (asset_scout / 搜索提供商) | webpage/news/tweet + asset-fusion 真实资产搜索 | 类别降级为无资产 |
流程
第 0 步 —— 初始化
cwd 是代理工作区根目录；将所有工件写入 PROJECT_DIR = videos/<project-name>/。<project-name>：使用用户提供的目录，否则根据意图使用一个简短的 kebab-case 名称（<subject>-motion）。不是工作区基本名称或时间戳。
仅当 $PROJECT_DIR/hyperframes.json 不存在时：
PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<project-name>}"
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank --skill=motion-graphics
init 检查已安装的技能是否与 GitHub 上的最新版本一致，并在任何技能过时后更新全局集合。
约束： 永远不要在 workspace 根目录执行 hyperframes init；永远不要在 PROJECT_DIR 内嵌套另一个 hyperframes/；每个 Bash 命令（主代理 + 子代理）都是一个 (cd "$PROJECT_DIR" && ...) 子 shell——永远不要裸 cd。
第 1 步 —— 规划（子代理：导演第一部分）
调度一个子代理。提示 = 完整的 agents/director.md + ## Dispatch context（SKILL_DIR / PROJECT_DIR / 用户的请求 / Schema: <SKILL_DIR>/references/shot-plan-ir.md）。它必须：
- 决定：是否需要搜索？（第一个分叉）
- 否 → 选择表单类别（kinetic-type / stat / charts / logo-reveal / lower-thirds）；内容由用户提供；
asset_needs: []。 - 是 → 将搜索计划输出到
asset_needs[]（news / web / tweet / image；两极查询）。具体的搜索驱动类别（webpage / news / tweet / asset-fusion）将通过第 2 步返回的内容类型确认，并在第 3 步最终确定。
- 否 → 选择表单类别（kinetic-type / stat / charts / logo-reveal / lower-thirds）；内容由用户提供；
- 编写草稿
shot-plan.json（信封 + 选择的表单类别 或 搜索意图 +asset_needs+ 一段镜头简要）。架构：references/shot-plan-ir.md。
验证：[ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing。
第 2 步 —— 获取来源 ◇（Bash：media-use，条件性）
如果 shot-plan.json.asset_needs 非空，则解析资产（搜索/生成/获取 → 冻结的项目本地路径 + 分类账）。参见 phases/source/guide.md（包装 media-use resolve；搜索驱动类别使用 news/web/tweet/image 搜索）。如果 asset_needs 为空，跳到第 3 步。
# 说明性 —— 参见 phases/source/guide.md
(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)
优雅降级：如果搜索/提供商不可用，类别回退到无资产（在 context.log 中记录）。
第 3 步 —— 设计（子代理：导演第二部分）
调度一个子代理（提示 = agents/director.md Part 2 + 调度上下文，包括已解析的 assets/index.md（如果第 2 步运行过）+ catalog-map.md）。它围绕可用资产设计镜头：选择目录 block(s) + hyperframes-animation 规则/蓝图、布局、动画、节拍，以及（对于 asset-fusion）element_positions + 取色器调色板。最终确定 shot-plan.json（content.block + content.customize + 每个类别的内容）。
第 4 步 —— 构建（子代理：Builder，优先复用）
调度一个子代理。提示 = 完整的 agents/builder.md + 调度上下文（shot-plan.json, catalog-map.md, 该类别的 module.md, references/motion-vocabulary.md, references/builder-contract.md）。优先复用：npx hyperframes add <block> + 原地自定义；仅手动编写间隙 + asset-fusion 辅助功能。输出 compositions/index.html，符合 HF 合约（暂停的 GSAP 时间线在 window.__timelines，class="clip" + 稳定 ID，tl.seek(0)，确定性）。
第 5 步 —— 验证（Bash → 失败时修复子代理）
(cd "$PROJECT_DIR" && npx hyperframes lint .)
(cd "$PROJECT_DIR" && npx hyperframes check .)
(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <proof-times>)
选择显示开场状态、标志性动作和最终保持的证明时间。在继续之前检查生成的联系表或快照表。在 lint、check 或快照失败时，调度修复子代理（agents/finalize.md）进行一次原地修复，然后重新运行失败的关卡。永远不要仅仅为了隐藏缺陷而更改固定的持续时间。
第 6 步 —— 批准和渲染（Bash）
问一个问题：“预览还是渲染？”如果用户选择预览，打开 Studio 并在修改后返回到同一批准关卡：
(cd "$PROJECT_DIR" && npx hyperframes preview)
仅在收到明确的渲染回答后渲染：
(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q high -o ./renders/video.mp4)
# 透明叠加变体：--format webm （或 mov）
验证输出存在、非空且具有预期的持续时间。最终交接命名工件、实际持续时间、合成或帧 ID、证明时间以及检查的联系表或快照表。标志位于 /hyperframes-cli → references/preview-render.md。
恢复表
| 状态 | 从何处继续 |
|---|---|
无 shot-plan.json | 第 1 步（规划） |
shot-plan.json 有 asset_needs，无 assets/ | 第 2 步（获取来源） |
shot-plan.json 最终版，无 compositions/index.html | 第 3/4 步（设计+构建） |
compositions/index.html 存在，证明快照缺失 | 第 5 步（验证） |
| 检查和证明快照通过，无批准的渲染 | 第 6 步（批准） |
| 批准的渲染存在 | 验证输出，然后报告 |