SuperAPI AI 工具集

motion-graphics

设计与创作

查看项目

更新于 10-15 17:07

技能介绍

用途

Motion Graphics 用于 AI 视频制作,需与 remotion-best-practices 和 cinematic-camera 配合使用。该技能负责素材接收、研究、真实资产获取、参考选择、视觉质量与交付授权。

硬性执行契约

每次构建都必须通过 scripts/promptible-gate.mjs。常见路径:

  • Claude Code:.claude/skills/motion-graphics/scripts/promptible-gate.mjs
  • 其他智能体:.agents/skills/motion-graphics/scripts/promptible-gate.mjs

在脚本打印 BUILD AUTHORIZED 之前,不得编写合成代码。在脚本打印 DELIVERY AUTHORIZED 之前,不得交付渲染结果。命令失败即为硬性停止。

阶段 1 — 简洁素材接收

仅询问缺失的选项:

  • 格式:4:3 半屏 Instagram 插片(1440×1080)或 9:16 全屏 Instagram(1080×1920)。仅在明确要求时使用 16:9。
  • 表面:暖光、干净深色、浅色网格或深色网格。
  • 确切的脚本节拍、时长、指定产品、已验证声明与提供的资产。

绝不静默默认使用深色。若用户委托选择表面,使用暖光。

阶段 2 — 研究与真实资产

阅读 references/research-and-assets.md 与 references/logo-library.md。

在概念工作前运行最小有效研究流程:

  • 用户提供的资产具有权威性。精确使用,绝不重绘或替换。
  • 对于常见产品,从 assets/logos/ 复制合适的捆绑 logo 到项目中,并保留其来源。
  • 若缺失,检查 1–3 个权威页面:官方品牌套件/主页、官方文档/产品页,然后是信誉良好的精选图标源。
  • 优先使用透明 SVG。绝不使用 logo 截图、搜索结果缩略图、烘焙的棋盘/灰色背景、非官方重绘或热链接的远程资产。
  • 对于仪表盘/产品 UI,获取真实提供的截图/录屏或官方公开产品/文档截图。若不存在,询问;不要虚构仪表盘。
  • 研究可见结构、术语、品牌色以及与节拍相关的确切操作/状态。不要复制不支持的指标、私人信息或声明。
  • 将资产与笔记缓存到 .promptible/research/ 下。当产品、来源、资产哈希与参考机制未变时,复用缓存命中。
  • 仅选择节拍所需的视觉模式:logo-system、product-ui、terminal、editorial 或 abstract。不要将新闻稿、仪表盘、终端或复杂镜头运动强加到每个图形中。

编写 .promptible/research-brief.md,包含以下标题:

Product or concept

Authoritative sources

Real visual language

Closest approved mechanism

Motion plan

Avoid

然后运行:

node <skill-dir>/scripts/promptible-gate.mjs research
--project .
--research-mode authentic
--visual-mode product-ui
--product "Slack"
--reference kickbacks-same-run-editor
--brief .promptible/research-brief.md
--source https://slack.com/
--logo public/research/slack.svg
--surface public/research/slack-dashboard.png

对于未命名的概念性工作,使用 --research-mode abstract --visual-mode abstract;简报与已批准参考对比仍然适用,但不需要不必要的网络/logo 研究。

阶段 3 — 已验证参考预检

阅读 references/approved-references.md。按故事机制而非颜色选择。当新概念更贴合请求时允许使用,但必须明确继承最接近的已批准机制的镜头语法、尺度、克制与因果运动。最多组合两种机制。

运行:

node <skill-dir>/scripts/promptible-gate.mjs init
--project .
--research .promptible/research-manifest.json
--format 9:16
--background warm-light
--claim-source user
--beat "Exact visual idea being supported"
--duration 6

init 会重新验证研究/资产,通过 SHA-256 验证捆绑的已批准 MP4/联系表,并写入 .promptible/render-brief.json。

检查实际的捆绑 MP4/联系表与所研究的产品证据。编写 .promptible/reference-observations.md,包含:

Composition

Camera

Identity

Research match

Anti-pattern

然后运行:

node <skill-dir>/scripts/promptible-gate.mjs inspect
--project .
--observations .promptible/reference-observations.md

只有 BUILD AUTHORIZED 才允许实现。

阶段 4 — 构建

使用所研究的身份与所选参考的因果机制。结果应在第一遍就感觉具体,而非像等待纠正提示的模板。

硬性规则:

  • 零霓虹、发光、泛光、发光边缘、彩色阴影、渐变光球/光晕、青紫渐变、玻璃拟态、赛博朋克照明或氛围编码 AI 风格。
  • 不得使用通用收据、发票、档案、剪贴板、浮动卡片、条形码、橡皮图章、证书、定价卡、假仪表盘或断开的卡片网格作为回退。
  • 仅当基于提供或权威产品证据时,才鼓励真实仪表盘。忠实重建可见结构;绝不虚构指标、声明、控件或产品状态。
  • 不得虚构 UI、logo、价格、排名、互动、序列号或证明。
  • 不得冗余旁白文本。允许真实数据、产品 UI、命令、代码、文件名与简短结构标签。
  • 运动必须揭示因果、尺度、替换、导航或状态变化。当 logo 替换或真实 UI 操作能清晰传达节拍时,可以克制。
  • 静态居中对象加行出现加缓慢缩放不是电影级执行。
  • 使用更少、更大的焦点对象。保持当前操作居中、完全可见,并在目标尺寸下可读。
  • 深色场景需主动选择。深色意味着中性炭黑配平面强调色,绝不使用发光面板。

在概念选择前阅读 references/rejected-patterns.md。

阶段 5 — 候选证据

渲染候选。生成三帧联系表与 ffprobe JSON。六秒示例:

mkdir -p .promptible ffmpeg -y -hide_banner -loglevel error -i out/candidate.mp4
-vf "fps=3/6,scale=480:-1,tile=3x1:padding=12:margin=12:color=white"
-frames:v 1 .promptible/candidate-contact-sheet.jpg ffprobe -v error -select_streams v:0
-show_entries stream=width,height:format=duration -of json
out/candidate.mp4 > .promptible/candidate-probe.json

然后运行:

node <skill-dir>/scripts/promptible-gate.mjs candidate
--project .
--render out/candidate.mp4
--contact-sheet .promptible/candidate-contact-sheet.jpg
--probe .promptible/candidate-probe.json

阶段 6 — 独立视觉评审

构建者不能给自己的作品评分。启动一个独立的干净评审/子智能体,提供:

  • references/visual-critic.md
  • 研究简报/清单与真实资产
  • 选定的已批准 MP4/联系表
  • 候选 MP4/联系表
  • .promptible/render-brief.json

评审检查实际媒体并返回匹配 templates/critic-output.example.json 的 JSON。若无法运行独立评审,停止;绝不自我批准。

阶段 7 — 交付门禁

node <skill-dir>/scripts/promptible-gate.mjs qa
--project .
--critic .promptible/critic.json

门禁拒绝硬性失败、任何类别低于 8/10、平均低于 8.5、研究或证据被修改/缺失,或非独立评审。修订直到 DELIVERY AUTHORIZED。

技术与交付规则

  • 使用 useCurrentFrame()、spring() 与 interpolate() 驱动运动;不使用 CSS 动画。
  • 当移动有帮助时使用 hold → travel → hold。操作在保持期间完成。
  • 以稳定的编辑器保持结束。
  • 类型检查或运行最小有意义的构建验证。
  • 仅在授权后交付具有精确尺寸、时长、渲染命令与编辑器放置说明的 MP4。