motion-graphics

插件安装： 在运行设置或更新命令之前，如果此技能位于 HyperFrames 插件内，请遵循插件执行规则。独立安装则保留下面的更新说明。

首先，保持此技能为最新版本——运行前请与用户确认： 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）直接路由至此，无需询问运行形状问题；对于这么短的作品，故事板和配套会话意义不大。渲染仍由用户控制：在检查和验证快照通过后，打开 Studio 预览并询问经典的“现在渲染，还是需要修改？”问题（参见 ../hyperframes/references/brief-contract.md）。当存在 BRIEF.md 时，请在导演提问之前阅读它。

一个简短的设计主导动态图形。资产优先：在设计镜头之前决定资产策略并获取真实素材，然后围绕你拥有的资源设计镜头，最后通过重用目录能力进行合成。所有成品放入 PROJECT_DIR = videos/<project-name>/（在步骤 0 创建）；以下所有路径均相对于此目录。

阶段	执行方式	主要成品	详细流程
init	Bash	hyperframes.json	步骤 0
plan	子代理 — 决定是否搜索？ + 分类 + 资产策略	shot-plan.json（草稿：类别，asset_needs 查询，简介）	agents/director.md（第一部分）
source ◇	Bash — media-use 解析（如果 asset_needs 为空则跳过）	assets/ + assets/index.md	phases/source/guide.md
design	子代理 — 围绕已解析资产进行镜头设计	shot-plan.json（最终版：区块+布局+动效+位置）	agents/director.md（第二部分）
build	子代理 — 优先复用合成	compositions/index.html	agents/builder.md
verify	Bash — lint, check，验证快照；失败则修复	snapshots/contact-sheet.jpg	步骤 5
approve	打开预览；询问渲染或修改；等待回答	明确渲染批准	步骤 6
render	Bash — hyperframes render（MP4，或 --format webm/mov 用于叠加）	renders/video.mp4 或透明叠加	步骤 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 上的最新版本一致，并更新过时的全局集。

约束： 切勿在工作区根目录运行 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）。它必须：

1. 决定：是否需要搜索？（第一个分支）
   • 否 → 选择一个形式类别（kinetic-type / stat / charts / logo-reveal / lower-thirds / maps）；内容由用户提供；asset_needs: []。
   • 是 → 将搜索计划输出到 asset_needs[] 中（新闻/网页/推文/图片；两极查询）。具体的搜索驱动类别（webpage / news / tweet / asset-fusion）由步骤 2 返回的内容类型确认，并在步骤 3 中最终确定。
2. 编写草稿 shot-plan.json（信封 + 所选形式类别_或_搜索意图 + asset_needs + 一段镜头简介）。Schema：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；搜索驱动类别使用新闻/网页/推文/图片搜索）。如果 asset_needs 为空，则跳到步骤 3。

优雅降级：如果搜索/提供商不可用，类别将回退到无资产模式（在 context.log 中注明）。

步骤 3 — 设计（子代理：导演第二部分）

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

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

在构建器的分发上下文中包含共享的动效原则。对于 charts 和 stat，还要包含数据动效。构建器在编写时间线之前阅读这些指南。

分配一个子代理。提示 = 完整的 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 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（批准）
已批准渲染存在	验证输出，然后报告