mcpField
M
motion-graphics

motion-graphics

github.com/liamrjohnston创意与媒体1461.1k 次安装14 周前更新
代码仓库

关于 motion-graphics

motion-graphics 是面向 AI 视频制作的技能，负责需求确认、素材研究、视觉参考、质量检查和交付授权。它通过强制门禁控制从调研到独立审片的流程，并要求使用真实素材，避免虚构界面与数据。

主要功能

  1. 01确认画幅、背景与脚本需求
  2. 02研究产品并收集真实素材
  3. 03选择并检查已批准的视觉参考
  4. 04通过门禁授权构建与交付
  5. 05要求独立审片和视频验证

适用场景

  1. 01依据产品资料制作动态视频
  2. 02为视频选择适合故事机制的参考作品
  3. 03检查候选视频并在通过授权后交付

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/liamrjohnston/remotion-motion-graphics-skill --skill motion-graphics

安装后在 Claude Code 中输入/motion-graphics确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

assets/logos/
claude-mark.svg
cursor.svg
deepseek.svg
github.svg
google-gemini.svg
linear.svg
notion.svg
playwright.svg
references/
approved-references.md
logo-library.md
rejected-patterns.md
research-and-assets.md
visual-critic.md
scripts/
promptible-gate.mjs
templates/
critic-output.example.json

详细介绍

AI 视频动态图形

与 remotion-best-practices 和 cinematic-camera 配合使用。此技能负责需求收集、研究、真实素材、参考选择、视觉质量和交付授权。

严格执行约定

每次构建都必须通过 scripts/promptible-gate.mjs。

常见路径：

  • Claude Code：.claude/skills/motion-graphics/scripts/promptible-gate.mjs
  • 其他 Agent：.agents/skills/motion-graphics/scripts/promptible-gate.mjs

在脚本打印 BUILD AUTHORIZED 之前，不要编写合成代码。在脚本打印 DELIVERY AUTHORIZED 之前，不要交付渲染结果。命令失败即必须停止。

阶段 1 — 简洁收集需求

仅询问尚未明确的选项：

  1. 格式：4:3 Instagram 半屏插入画面（1440×1080）或9:16 Instagram 全屏画面（1080×1920）。仅在用户明确要求时使用 16:9。
  2. 表面风格：暖色浅色、简洁深色、浅色网格或深色网格。
  3. 准确的脚本节拍、时长、产品名称、已核实的声明以及提供的素材。

切勿默认使用深色风格。若用户将表面风格选择交由你决定，则使用暖色浅色。

阶段 2 — 研究与真实素材

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

在构思前，开展最精简且有用的研究：

  • 用户提供的素材具有权威性。应原样使用，绝不重绘或替换。
  • 对于常见产品，从 assets/logos/ 中复制合适的捆绑 Logo 到项目中，并保留其来源信息。
  • 若未找到，则查看 1–3 个权威页面：官方品牌资料包／主页、官方文档／产品页面，然后是可靠的精选图标来源。
  • 优先使用透明 SVG。切勿使用 Logo 截图、搜索结果缩略图、带有棋盘格／灰色背景的图片、非官方重制图，或通过远程链接引用的素材。
  • 对于仪表板／产品界面，获取真实的用户提供截图／录屏，或官方公开的产品／文档截图。如果没有，请先询问；不要编造仪表板。
  • 研究可见结构、术语、品牌颜色，以及与该节拍相关的确切操作／状态。不要复制缺乏依据的指标、私人信息或声明。
  • 将素材和笔记缓存到 .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、徽标、价格、排名、互动数据、序列号或证明材料。
  • 不得添加多余的旁白文字。允许使用真实数据、产品 UI、命令、代码、文件名和简短的结构性标签。
  • 动画必须展现因果关系、缩放、替换、导航或状态变化。如果徽标切换或真实的 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 — 独立视觉评审

构建者不能为自己的作品打分。启动一个独立、干净的评审器／子 Agent，并提供：

  • 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 动画。
  • 在移动有帮助时，采用静止 → 移动 → 静止的节奏。操作应在静止阶段完成。
  • 结尾应保持稳定的编辑器画面。
  • 执行类型检查，或运行最精简但有意义的构建验证。
  • 只有获得授权后，才交付 MP4，并注明精确尺寸、时长、渲染命令和编辑器放置说明。

评论

支持 Markdown