运动图形（motion-graphics）

插件安装： 在运行 setup 或 freshness 命令之前，当此技能位于 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）会直接路由至此，而不会询问运行样式的相关问题；对于如此简短的作品，故事板和同伴会话几乎不会增加价值。渲染仍由用户控制：在检查和证明快照通过后，按照 ../hyperframes/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 — 媒体使用解析（如果 asset_needs 为空则跳过）	assets/ + assets/index.md	phases/source/guide.md
design	子代理 — 围绕已解析资源进行镜头设计	shot-plan.json（最终版：block(s) + layout + motion + positions）	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。

可选密钥（如果未设置则使用本地回退）——仅被那些通过媒体使用解析来获取/生成资源的分类所需：

密钥	用途	回退
GEMINI_API_KEY / GOOGLE_API_KEY	图片生成（媒体使用解析）	跳过生成 / 仅搜索
(asset_scout / search providers)	webpage/news/tweet + asset-fusion 真实素材搜索	分类降级为无资源版

流程

第 0 步 —— 初始化

当前工作目录是代理工作空间的根目录；所有产物均写入 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）；内容由用户提供；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：媒体使用，条件执行）

如果 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 步 —— 设计（子代理：导演第二部分）

调度一个子代理（提示词 = agents/director.md Part 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 契约（暂停的 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 --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 流程：分析 → 搜索 → 审查 → c

…

[为翻译截断]