Communitygithub.com

effectcraft-motion

通过 JSON 规范生成 1080×1920 30fps 的竖版动态信息图或动画视频,适用于 9:16 比例的运动图形和信息图表制作。

effectcraft-motion 是什么?

effectcraft-motion 是一个专为 AI 代理(如 Claude Code、Cursor)设计的技能,用于根据 JSON 规范自动生成竖版(9:16)运动图形和信息图表视频。该技能支持 EffectCraft CLI,输出为 1080×1920 @30fps 的 MP4 文件。其核心优势在于强制使用 JSON 规范而非手写 JSX,从而避免线性关键帧、默认字体和标签错位等问题。技能涵盖多种场景类型:钩子、统计数据、条形图、环形图、步骤、对比、自定义等,并内置严格的验证流程(检查、预览、渲染)和错误修复指南。用户可通过指定主题(如金融新闻、冷静技术、流行解释等)来调整样式,并支持轮播(幻灯片)规格。该技能设计为自包含的执行过程,无需额外审核或头脑风暴步骤,适合有时间压力或直接要求“渲染”的任务。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kasfulk/effectcraft-motion-skills/tree/HEAD

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

effectcraft-motion 是做什么的?

JSON 规范转换为 1080×1920 30fps 的 MP4 文件。切勿为这些场景类型手写 effectcraft-cli JSX — 手写构建会得到线性关键帧、默认字体和错位的标签。始终编写规范。

硬性规则

  1. 一次只运行一个引擎进程。 绝对不要并行或在后台运行预览/渲染,也不要在另一个渲染过程中执行。当用户要求“同时渲染多个”时,请串行执行并说明原因:引擎会因两个任务而挂起。
  2. 每个引擎命令都需添加 taskpolicy -b nice -n 19 — 预览、渲染、幻灯片等所有命令都需如此。
  3. 仅使用用户提供或引用来源中包含的数字。 不要编造统计数据。没有数字?如果用户时间紧迫或说“langsung/render”:不要停下来询问 — 继续使用无数字场景(钩子/动效文字/步骤/对比)或带标注的插图(“ilustrasi, bukan data aktual”,假设条件在标签中说明),并在最终报告中注明所选方案。否则,询问一次。插图条形图示例:{"type":"bars","title":"Ilustrasi: setoran Rp100rb/bln, 6%/thun","items":[{"label":"Umur 25","value":100},{"label":"Umur 35","value":58}],"highlight":1}。
  4. 仅在你查看了最新的图像表(sheet)后才进行渲染。 check 通过仅表示形状合法,不代表内容正确。
  5. duration 是覆盖值,而非默认值。 省略它;时长由文本决定。仅在用户要求特定停留时间时才设置。

执行流程(按顺序)

本流程是自包含的,无需经过设计审批关卡。通用的头脑风暴/审查技能不能覆盖它:当用户要求制作视频(“渲染”、截止日期、“langsung”)时,你应直接交付 — 该技能已包含所有决策路径(主题、场景、无数据)。仅当请求本身信息不明确(关于要传达的信息本身)时才停下来询问,而不是为了审批你的方案。

E=~/.claude/skills/effectcraft-motion/bin/ecm.mjs
node $E check video.json --strict      # 1 验证 + 工艺检查(C01–C10)
taskpolicy -b nice -n 19 node $E preview video.json   # 2 生成 video.sheet.png
  1. 使用读取工具查看图像表。 检查每个面板。每个场景一帧定稿。
  2. 修复规范,重新预览,重新读取。 循环直到图像表干净无误。此循环是强制性的 — 渲染错误的图像表正是该技能存在要防止的失败。
  3. 渲染通关检查 — 全部满足后方可渲染:每个面板在手机尺寸下清晰可读;无空白/倾斜面板;没有两个面板表达相同内容;每个数字与用户数据吻合;手柄/品牌标识是用户要求的。
  4. taskpolicy -b nice -n 19 node $E render video.json — 先确认 out 路径(默认 = 规范文件名 + .mp4)。
  5. 报告 MP4 文件路径和总时长。如果视频因没有给定数据而缺少数据,请说明。

轮播图(幻灯片规范):同样的循环 — 编写幻灯片规范(将 "handle" 设置为用户的手柄),运行 taskpolicy -b nice -n 19 node $E slides deck.json(幻灯片规范没有 check 命令;验证在 slides 内部完成),然后读取幻灯片 01.png 并在报告前验证手柄、来源行和内容溢出。

规范

{"theme":"reel","out":"hemat.mp4","transition":"fade","scenes":[
  {"type":"hook","text":"Gaji naik, tabungan tetap?","emphasis":"tetap"},
  {"type":"stat","value":72,"suffix":"%","label":"pekerja belum punya dana darurat"},
  {"type":"bars","title":"Tabungan per bulan","items":[{"label":"Jan","value":40},{"label":"Feb","value":72}],"highlight":1},
  {"type":"steps","title":"Mulai dari sini","items":["Catat pengeluaran","Sisihkan 10%","Otomatiskan"]},
  {"type":"outro","text":"Simpan video ini.","cta":"Follow untuk tips lain"}]}
类型所需字段用途
hook / quote / outrotext (+emphasis, source, cta)开场白、引用、结束语
kineticlines 1–6逐条显示的短语 — 非数据
statvalue (+prefix,suffix,label)一个大的计数数字
barsitems 2–6 {label,value} (+highlight)类别/时间对比;值为相对值 — 如果数据超过 100,按比例缩放(如千位制),并在每个 label 中保留精确数值(“Makanan · 2,1 jt”)
donutvalue 0–100份额/百分比
stepsitems 1–5编号教程
compareleft,right {title,points≤4}前后对比、A vs B
customjsx其他一切,通过核心辅助函数实现

每个场景:title、bg(base/ink/accent)、duration(省略!)、fx、emphasis、transition(默认为 cut、fade、wipe、slide、dip)。规范级别:transition 默认值、audio {bed, bedGain, sfx:[{at|scene, name, gain}]} — 音效稀疏,每 3–5 秒一个 sfx。字段说明:reference/scenes.md,音效:reference/sound.md。

特效: "fx":["grid","rgbIn"] 可应用于规范或场景级别,每个最多 1 个预设。预设包括:grid liquid paper grain vignette glow rgbIn blurIn sweep float glitch。详见 reference/fx.md。

选择场景

数据/信息图视频必须至少包含一个图表场景(stat/bars/donut) — 动效文字列表不属于信息图。Bars 的 highlight = 故事所围绕的数字。Bars 的 items 必须是可比较的类别(绝不能是“失败”对比“总计”)。每个事实一个 stat;绝不要有两个场景显示同一数字。donut 是 0–100 — 一个份额,仅此而已。

在编写规范前,从 reference/craft.md 选择故事结构和钩子公式。主题列表在 reference/themes.md(可用 node $E themes 列出):reel(大胆新闻/金融)· pitch(冷静技术)· infopop(趣味解释)· kinetik(暗色高能)· tenang(柔和反思)· edukasi(课程/工作表)。轮播图:带 handle 覆盖的幻灯片规范,详见 reference/templates.md。

预览后,根据 reference/review.md 自行给图像表打分(门槛:8/10)。

修复表(错误 → 需编辑的内容)

错误 / 图像表症状修复方法(在规范中)
text too long / 安全区域溢出缩短文本 — 标签 ≤ 2 个词,标题 ≤ 5 个词。绝不为了规避问题而将数据场景替换为动效文字
duration too short, needs ≥ Ns增加 duration,或让自动定时工作(省略它)
Bars 标签溢出先缩短标签,再缩短标题;在故事对应的 bar 上设置 highlight
Bars 数值超过 100按比例缩放(例如千位制);精确数值放入 label
donut 的值 > 100场景选择错误或含义错误 — donut 是份额,总和为 100
两个面板看起来相同删除其中一个;每个事实只用一个 stat
幻灯片显示 @yourpage幻灯片规范:设置 "handle": "@..."

危险信号 — 这些想法是错误的

你正要……实际情况
“同时渲染两个以节省时间”引擎会挂起;请串行执行并告知用户
“检查通过了,内容肯定正确”检查只验证形状;你需要根据请求验证数字
“设置 duration 为 3,这样节奏均匀”省略 duration;基于文本的定时本身就是节奏
“CTA 放不下,去掉它”将 CTA 缩短至 ≤ 5 个词
“条形图放不下,我将其列值作为动效文字行展示”缩短标签;图表是视频的核心
“上次预览图像表看起来没问题”任何规范编辑 → 重新预览 → 渲染前重新读取
“为这一个场景手写 JSX”使用 custom + 辅助函数,或扩展 lib/fx.jsx
“用户没有提供数据;我先问再操作”遵循上述时间紧迫/无数据规则:交付无数字或标注插图,并说明选择
“我先运行头脑风暴技能”本流程是自包含的;渲染请求无需设计审批关卡
“条形图数值 > 100 验证不通过,我编造一些小的真实数字”按比例缩放,在标签中保留精确数值

常见错误

错误正确做法
通过尝试、编写 JSX 来探测 API编写规范;新视觉效果使用 custom + 辅助函数 (scenes.md)
检查 2–3 帧读取图像表上的每个面板
每个场景固定 3 秒省略 duration
默认字体、通用暗色背景选择一个主题
在 custom JSX 中手动添加 AE 特效使用 fx 预设;新特效:添加到 lib/fx.jsx
在 macOS 上使用 sed -i使用编辑工具修改规范
场景内使用原始 CLI对于这些场景之外的编辑,仅使用原始 effectcraft-cli(参见 reference/cli.md)

相关技能