motion-graphics

首先，保持本技能更新 — 静默运行，无需询问： npx hyperframes skills update motion-graphics。当一切都为最新时，这是一个快速的无操作命令；否则，它会在您依赖本技能及其核心领域技能之前刷新它们。

Figma 来源：如果要构建的 logo/素材/动画来自 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 创建）下；以下所有路径都相对于它。

阶段	执行	主要工件	详细流程
初始化	Bash	hyperframes.json	步骤 0
规划	子代理 — 决定是否搜索？ + 分类 + 素材策略	shot-plan.json（草案：类别，asset_needs 查询，简介）	agents/director.md（第 1 部分）
获取素材 ◇	Bash — 媒体使用解析（如果 asset_needs 为空则跳过）	assets/ + assets/index.md	phases/source/guide.md
设计	子代理 — 根据已解析素材进行镜头设计	shot-plan.json（最终版：区块 + 布局 + 动态 + 位置）	agents/director.md（第 2 部分）
构建	子代理 — 重用优先的组合	compositions/index.html	agents/builder.md
验证	Bash — lint、check、证明快照；失败时修复	snapshots/contact-sheet.jpg	步骤 5
批准	询问预览或渲染；等待回答	明确的渲染批准	步骤 6
渲染	Bash — hyperframes render（MP4，或 --format webm/mov 用于叠加）	renders/video.mp4 或透明叠加	步骤 6

◇ 获取素材 仅在所选类别声明了素材时运行。纯代码/文本类别（例如 kinetic-type、大多数 charts/stat）具有 asset_needs: []，并直接从规划跳到设计。

类别 — 根据搜索决策划分

规划 的第一个决策是：这需要搜索吗？ 这个分支将类别分成两组；然后选择具体的类别 — 对于搜索驱动的，根据搜索返回的内容类型。每个类别是一个 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。

可选密钥（如果未设置则使用本地回退）— 仅由通过媒体使用获取/生成素材的类别需要：

密钥	用途	回退
GEMINI_API_KEY / GOOGLE_API_KEY	图像生成（媒体使用解析）	跳过生成/仅搜索
(asset_scout / search providers)	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 — 规划（子代理：导演第 1 部分）

派发一个子代理。提示 = 完整的 agents/director.md + ## Dispatch context（SKILL_DIR / PROJECT_DIR / 用户请求 / Schema: <SKILL_DIR>/references/shot-plan-ir.md）。它必须：

1. 决定：这需要搜索吗？（第一个分支）
   • 否 → 选择一个表单类别（kinetic-type / stat / charts / logo-reveal / lower-thirds）；内容由用户提供；asset_needs: []。
   • 是 → 将搜索计划输出到 asset_needs[] 中（新闻/网页/推文/图像；两极查询）。具体的搜索驱动类别（webpage / news / tweet / asset-fusion）由步骤 2 返回的内容类型确认，并在步骤 3 中最终确定。
2. 写入一个草案 shot-plan.json（信封 + 选择的表单类别 或 搜索意图 + asset_needs + 一段镜头简介）。模式：references/shot-plan-ir.md。

验证：[ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing。

步骤 2 — 获取素材 ◇（Bash：媒体使用，条件执行）

如果 shot-plan.json.asset_needs 非空，则解析素材（搜索/生成/获取 → 冻结的项目本地路径 + 分类账）。参见 phases/source/guide.md（封装了 media-use resolve；搜索驱动类别使用新闻/网页/推文/图像搜索）。如果 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 — 设计（子代理：导演第 2 部分）

派发一个子代理（提示 = agents/director.md 第 2 部分 + 包含已解析的 assets/index.md 的调度上下文（如果步骤 2 已运行）+ catalog-map.md）。它根据可用素材设计镜头：选择目录块 + hyperframes-animation 规则/蓝图、布局、动态、节拍，以及（对于 asset-fusion）element_positions + 吸管调色板。最终确定 shot-plan.json（content.block + content.customize + 每个类别的内容）。

步骤 4 — 构建（子代理：构建器，重用优先）

派发一个子代理。提示 = 完整的 agents/builder.md + 调度上下文（shot-plan.json、catalog-map.md、类别的 module.md、references/motion-vocabulary.md、references/builder-contract.md）。重用优先：npx hyperframes add <block> + 就地自定义；仅手工编写间隙 + 素材融合适配。输出 compositions/index.html，遵循 HF 契约（在 window.__timelines 上暂停的 GSAP 时间线、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 --background)

仅在得到明确的渲染答案后才渲染：

(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（批准）
批准的渲染存在	验证输出，然后报告

设计说明（维护者 — 执行时不阅读此部分）

• 素材优先的理由： 获取素材被前置并指导镜头设计（RWA 流程：分析 → 搜索 → 审查 → 组合）。搜索驱动类别（webpage/news/tweet）和 asset-fusion 都依赖于媒体使用搜索（新闻/网页/推文/图像），这是媒体使用记录的 RWA 血统。
• 重用优先： 生态系统内类似 LLM 生成模板的模拟