motion-graphics

插件安装： 在运行设置或检查更新命令前，如果此技能位于 HyperFrames 插件中，请遵循插件执行规则。独立安装请沿用下方的更新说明。

首先，保持此技能为最新状态——运行前请先征得用户同意： 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）会直接将请求路由到此处，不会询问运行形式；对于如此短的作品，分镜脚本和配套会话帮助不大。渲染仍需用户批准：检查和证明快照通过后，打开 Studio 预览，并提出 ../hyperframes/references/brief-contract.md 中的标准问题：“现在渲染，还是要修改什么？”如果存在 BRIEF.md，请在导演提问前阅读。

制作一段短篇、设计驱动的动态图形。素材优先：先确定素材策略并获取真实素材，再设计镜头；根据已有素材设计镜头，最后通过复用目录中的功能进行合成。所有产物均放在 PROJECT_DIR = videos/<project-name>/（在步骤 0 中创建）；下方所有路径均相对于此目录。

阶段	执行	主要产物	详细流程
初始化	Bash	hyperframes.json	步骤 0
规划	子 Agent — 决定是否搜索？ + 分类 + 素材策略	shot-plan.json（草稿：类别、asset_needs 查询、简报）	agents/director.md（第 1 部分）
获取素材 ◇	Bash — 解析媒体用途（asset_needs 为空时跳过）	assets/ + assets/index.md	phases/source/guide.md
设计	子 Agent — 围绕已解析素材设计镜头	shot-plan.json（最终版：区块 + 布局 + 动效 + 位置）	agents/director.md（第 2 部分）
构建	子 Agent — 优先复用	compositions/index.html	agents/builder.md
验证	Bash — lint、check、证明快照；失败时修复	.hyperframes/artifacts/snapshots/<id>/contact-sheet.jpg	步骤 5
批准	打开预览；询问是渲染还是修改；等待答复	明确的渲染批准	步骤 6
渲染	Bash — hyperframes render（MP4；叠加层可使用 --format webm/mov）	renders/video.mp4 或透明叠加层	步骤 6

◇ 获取素材 仅在所选类别声明了素材时运行。纯代码／文本类别（例如 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 动画／品牌标识组合（用户提供的 Logo）	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 resolve）	跳过生成／仅搜索
(asset_scout / 搜索提供方)	webpage/news/tweet + asset-fusion 真实资源搜索	类别退化为无资源模式

流程

步骤 0 — 初始化

cwd 是 Agent 工作区根目录；将所有产物写入 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 命令（主 Agent + 子 Agent）都必须在 (cd "$PROJECT_DIR" && ...) 子 Shell 中运行，绝不单独使用 cd。

步骤 1 — 规划（子 Agent：Director Part 1）

派发一个子 Agent。提示词 = 完整的 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[]（news / web / tweet / image；双极查询）。具体的搜索驱动类别（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：media-use，有条件）

如果 shot-plan.json.asset_needs 非空，则解析素材（搜索 / 生成 / 获取 → 冻结为项目本地路径 + 清单）。参见 phases/source/guide.md（封装 media-use resolve；搜索驱动类别使用 news/web/tweet/image 搜索）。如果 asset_needs 为空，跳至步骤 3。

灵活降级：如果搜索或提供方不可用，则该类别回退为不使用素材的方式（在 context.log 中注明）。

步骤 3 — 设计（子 Agent：Director Part 2）

派发一个子 Agent（提示词 = 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 — 构建（子 Agent：Builder，优先复用）

在 Builder 的派发上下文中加入共享的动作原则。对于 charts 和 stat，还要加入动态数据。Builder 在编写时间线前先阅读这些指南。

派发一个子 Agent。提示词 = 完整的 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 合约（在 window.__timelines 上暂停的 GSAP 时间线、class="clip" + 稳定的 id、tl.seek(0)、确定性）。

步骤 5 — 验证（Bash → 失败时派发修复子 Agent）

(cd "$PROJECT_DIR" && npx hyperframes check .)
(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <proof-times>)

选择能展示开场状态、标志性动作和最终定格的证明时间点。继续之前，检查生成的联系表或快照表。如果 lint、check 或快照失败，则派发修复子 Agent（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)
# transparent overlay variant: --format webm  (or 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 都依赖媒体用途搜索（新闻/网页/推文/图片），这与文档所述的 media-use RWA 演进路径一致。
• **优先复用：**生态内与 LLM 生成模板相对应的做法是“组合目录区块 + hyperframes-animation 规则”。HF 暂停的 GSAP 时间线 ≙ Remotion 的 useCurrentFrame。
• **类别模块约定：**每个类别使用一个 categories/<id>/module.md（规划 + 构建），并共享 references/motion-vocabulary.md（可选评估）。添加类别 = 放入文件夹 + 在 agents/director.md 中注册其分类器条目 + 在 catalog-map.md 中添加对应行；阶段流水线不变。
• 目录结构：

  videos/<project-name>/
    hyperframes.json  context.log
    shot-plan.json            # the IR (Director output)
    assets/  assets/index.md  # media-use output (if sourced)
    compositions/index.html   # Builder output
    renders/video.mp4
  

• **注册：**在 hyperframes 路由器中添加“设计主导的短篇动态图形”意图和工作流说明；将动态图形触发条件从 /general-video 中拆分出来；添加反向的禁止使用边。参见 motion-graphics-genre.md §5-7。