ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

向 claude-motion 社区贡献作品:加入画廊与改进品味规则的指南

向 claude-motion 社区贡献作品:加入画廊与改进品味规则的指南

【免费下载链接】claude-motion

A motion design toolkit for coding agents.

项目地址:https://gitcode.com/gh_mirrors/cl/claude-motion
点击查看免费下载

claude-motion 是一个面向编码 Agent 的动效设计工具包(motion design toolkit),它用可量化的"品味规则"教会 AI 做出有质感的动态视频。本文将带你完成两条贡献路径:把用 claude-motion 制作的视频加入官方 Gallery 画廊,以及向.claude/skills/中的品味规则提交改进 PR。无需设计背景,只需会用命令行。

为什么值得向 claude-motion 贡献

与其他动效项目不同,claude-motion 的核心资产不是代码,而是写进技能文件里的设计品味:缓动曲线用bezier(0.16, 1, 0.3, 1)这样的具体数字描述,声音由纯 Python 合成器实时生成,Agent 还能通过逐帧截图自检画面。贡献一个作品或一条规则,等于让所有使用者的 Agent 产出都变好一档。

贡献入口在 CONTRIBUTING.md,官方目前只收了两类贡献:Gallery 作品和规则改进。

四步把视频加入官方 Gallery 画廊

官方画廊位于主 README.md 的 "Gallery" 表格,目前只有第一个示例,你的作品可能就是第二行:

  1. 把合成放进src/。可以新建独立文件夹,然后在 src/Root.tsx 中注册你的<Composition>,参考现有的EffortVideo写法。
  2. 创建示例说明页examples/NN-short-name/README.md。直接照抄 examples/01-effort/README.md 的结构:预览 GIF、你给出的完整 Prompt、耗时、所用模型与 effort 级别、Agent 自主完成的过程。
  3. 在 README 的 Gallery 表格加一行,链接到你的示例目录。
  4. 提交 PR。只想展示而不想合入?官方也欢迎开 Showcase issue 分享。

💡GIF 要控制在 ~4 MB 以内。项目里npm run gif的 ffmpeg 参数(12 fps、420px 宽、调色板量化)就是官方推荐起点,见 package.json。

官方示例 examples/01-effort/ 的说明页就是一个满分模板:22 秒成片,一条 prompt + 一次修改,还附上了从分镜到响度母带的完整过程表格。

先读品味规则,做出合格的动效作品

Gallery 审核看的不只是"能动",而是是否遵循了这套可量化的动效设计规范。核心规则都在.claude/skills/下:

技能文件管什么
motion-design/SKILL.md时间轴、缓动、弹簧、字体、色彩、质感、转场
review-loop/SKILL.md渲染草稿 → 逐帧截图 → 对照清单自检 → 修改的循环
sound-design/SKILL.md用sfx/引擎写 cue sheet,声音与画面共用 timeline.json
web-sims/SKILL.md粒子/3D 仿真类视频的第二条管线

几条最常踩的品味要点(完整版见 motion-design 技能):

  • 时间只存在于timeline.json。组件里禁止硬编码起始时间,重排节奏 = 改 JSON 后重跑npm run sfx,声音自动跟随。
  • 出场比入场快一倍:出场 0.35–0.55 s、入场 0.7–1.25 s,出场用easeIn。
  • 阅读停顿(hold):每个可读状态至少停留 1 s,结尾金句 ≥ 2 s。
  • 每帧只有一个焦点,内容距画面边缘保留约 60 px 安全区,第 0 帧不能是黑屏(它会被当作缩略图)。

Agent 的自检靠"联系表"(contact sheet):每个时间轴节拍渲染一帧,拼成一张带时间戳的图供逐格检查。这就是 media/sheet.png 展示的画面:

对应命令:npm run sheet生成节拍联系表,npm run sheet -- --from 3 --to 5 --every 0.2可逐 0.2 s 细查某个转场。声音侧用npm run wave检查波形,每个瞬态音应落在时间轴节拍线上,响度自动母带到 −14 LUFS。

如何改进品味规则:带数字的 PR

.claude/skills/是 claude-motion 的心脏。CONTRIBUTING 对规则类 PR 只提了两句要求,但很具体:

  • 规则尽量带数字——不写"更顺滑一点",而是写"入场用bezier(0.16, 1, 0.3, 1)""词与词 stagger 0.09 s"这类可执行的参数;
  • 附上npm run sheet产出的 before/after 联系表,让评审直接看到改进前后的画面差异。

一个好的改进 PR 通常是这样的闭环:你在自己的视频里发现某条规则明显提升了成片质量 → 定位到具体参数 → 用联系表证明前后差异 → 提交 PR。完整的声音设计示例可参考 sfx/cues/effort.py(128 个声音 + 一个铺底 pad,全部时间来自时间轴)。

快速上手:本地环境与构建命令

贡献前先跑通示例,确认工具链无误:

git clone https://gitcode.com/gh_mirrors/cl/claude-motion && cd claude-motion npm install npm run build # 声音 + 渲染 + 混流 → out/effort.mp4

环境要求:Node 20+、Python 3、ffmpeg。做完作品后常用命令速查:

命令作用
npm run studio实时预览所有合成
npm run sheet生成节拍联系表,用于视觉自检
npm run wave波形 + LUFS + 真峰值检查
npm run gif导出符合 Gallery 体积要求的预览 GIF
python3 -m sfx --list查看声音生成器清单

如果做的是仿真类视频(粒子群、3D 飞越镜头),走sims/管线:每个作品一个 HTML 页面,render(t)是时间的纯函数,再由无头 Chromium 逐帧捕获成 60 fps 视频。详见 sims/README.md 与三个可拆解的示例(sims/crawlers/、sims/dossier/、sims/engine/)。

提交 PR 前的小结清单

  • 合成已注册进 src/Root.tsx,npm run build能出完整成片
  • 示例页包含:预览 GIF(< 4 MB)、原始 Prompt、耗时、模型与 effort 级别
  • 主 README 的 Gallery 表格已加行
  • 规则类改动:参数具体 + before/after 联系表齐全
  • 声音响度 −14 LUFS ±1,真峰值 ≤ −1 dBFS(npm run wave确认)

claude-motion 的画廊在等第二个作品,品味规则在等下一个数字。现在就 clone 下来,跑通npm run build,开始你的第一条 PR。

【免费下载链接】claude-motion

A motion design toolkit for coding agents.

项目地址:https://gitcode.com/gh_mirrors/cl/claude-motion
点击查看免费下载

相关推荐

上一篇:Seraphine:免费英雄联盟战绩查询工具,自动 B/P 加一键符文,免配置即装即用
下一篇:15分钟定制你的Obsidian界面:Blue Topaz 完全指南

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进