Communitygithub.com

pisakhov/x-motion

艺术指导并构建原创动态图形、动画解说、片头序列、产品影片和动态排版。适用于动态简报、故事板、动态分镜、确定性 HTML 动画、同步音频和渲染视频的审阅。从受众和视觉主题开始,而非模板。

x-motion 是什么?

X Motion 是一套系统化的动态设计方法论,旨在帮助 AI 智能体和开发者创建具有明确沟通意图的动态图形,而非依赖模板或偶然的美学效果。它借鉴了 LangChain 文章中关于设计智能体的讨论,但本身完全独立,不依赖于 LangChain 代码或服务。该方法强调从视觉主题出发,确保动态设计中的每个元素——包括字体、间距、图像处理、动作和声音——都作为一个统一的系统来工作,从而支持核心信息,而非与之竞争。X Motion 支持一个从简报、故事板、动态分镜到制作、审阅和交付的完整工作流程,并为 HTML 渲染器提供了明确的契约,确保帧和音频渲染的确定性,这在 AI 驱动的工作流中至关重要。该技能适用于多种平台,但核心原则——如避免虚构审美评分、保持资产本地化、以及将技术证据与美学判断分离——使其特别适用于需要艺术指导的 AI 编码环境,如 Claude Code、Cursor 和 Codex。

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

在你喜欢的 AI 中提问

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

文档

X Motion

制作能够传达特定信息的动态影像。品味取决于上下文:一个安静的技术演示和一个活泼的音乐标识需要不同的决策。一个强大的渲染器并不保证良好的设计。作品的质量通过艺术指导、执行、观察和修改来获得。

这是一种原创的、可移植的动态设计方法,灵感来源于 LangChain 的文章 中关于设计智能体的讨论。它不依赖于 LangChain 代码或服务,也不暗示任何关联。

工作契约

  • 遵循宿主项目的指示和用户的实际范围。此技能不授予发布、消费、调用模型、获取凭证或使用未经许可资产的权限。
  • 在任意给定时刻,使用一个视觉主题和一个主导焦点。复杂性可以支持主题,但不得无意中与其竞争。
  • 将字体、间距、图像处理、动态和声音作为一个系统来设计。不要用装饰来掩饰一个薄弱的想法,使其看起来复杂。
  • 根据任务和可用环境选择工具。不需要特定的模型、框架或渲染引擎。
  • 将技术证据与审美判断分开。切勿虚构品味评分、观众反应或认可。切勿在仅检查了静止帧的情况下声称观看了视频。
  • 保持资产本地化并明确其来源。锁定依赖项。除非项目特意要求,否则将生成的渲染文件排除在版本控制之外。

选择最小可用的流程

小修改: 对于文案修正、时间调整、资产替换或孤立的缓动修正,可以跳过新的简报、故事板和动态分镜。保留已批准的方向;检查受影响的节拍及其相邻节拍,重新渲染,并运行相关检查。如果更改改变了信息、层次结构或叙事,则升级到完整流程。

新构图或实质性重新设计: 遵循以下阶段。根据任务规模调整工件大小;一个六秒钟的片头不需要制作圣经。如果缺少关键意图,请提出一个有针对性的问题。当无法提问时,标记一个保守的假设,并避免进行不可逆的工作。

1. 简报 → 视觉主题

确定受众、预期收获、观看环境、时长、宽高比、交付物、必需的文案/资产、品牌约束、可访问性需求,以及声音是否可以传达意义。将硬性要求与偏好分开标记。

以以下形式撰写一个主题:

对于 [受众],通过 [视觉机制] 让 [想法] 感觉 [特定品质],以便他们理解或做到 [结果]。

命名组织隐喻、主导对象、字体角色和动态逻辑。像“高端、电影感、干净”这样的列表不是方向。解释哪些选择使这些词语变得具体可感。使用参考来识别原则,而非复制其他作品的标识。

阅读 艺术指导 以了解简报的解析、参考分析和连贯的视觉语言。

2. 故事板 → 可读的论点

在打磨画面之前先规划节拍。为每个节拍记录:

时间范围观众学到什么焦点 / 关键帧转场及其原因音频提示
开始-结束一条信息对象和层次结构发生了什么变化,以及原因事件或有意的静音

绘制或渲染带有真实文案和逼真资产比例的示例帧。给予足够的阅读和识别时间;不要习惯性地均匀分布每个节拍。确认开场的承诺、节拍之间的因果联系以及最终收获。在需要时,在昂贵的制作之前,与人类确认关键的文案或方向。

在锁定构图或文字时间之前,阅读 字体排印。

3. 动态分镜 → 低成本测试时间

构建粗糙的定时帧、区块或低细节的动态。仅在使用合法且明确标记的情况下使用临时声音。以预期速度测试完整运行时间,而不仅仅是通过拖动。

检查注意力是否与信息同时到达,文字是否可读,以及结尾是否有足够的空间收尾。在此处修正结构。将方向上的不确定性暴露出来,而不是通过打磨将其掩盖。

阅读 动画与摄像机 以了解时间设计 and 确定性场景构建;当声音是作品的一部分时,阅读 音频。

4. 制作 → 有意图的执行

使用最终的字体、资产、光照或图形处理、运动曲线、转场和声音来完善已批准的节拍。保留主题。每个添加的效果必须有明确的任务:揭示、连接、强调、引导或解决。如果做不到其中任何一点,则移除它或证明其表达角色的合理性。

可选 HTML 渲染器契约

当使用 X Motion HTML 渲染器时,每个合成暴露:

window.motion = { width: 1920, height: 1080, duration: 8, fps: 30, poster: 5.5 };
window.renderFrame = function (tSeconds) {
  // 从该时间戳和固定场景数据设置每个动画属性。
  // 重复调用,包括无序调用,产生相同的帧。
};
window.renderAudio = async function ({ sampleRate }) {
  // 可选。在 OfflineAudioContext 中构建配乐并返回其 AudioBuffer。
};

这些数字是说明性的,并非设计默认值。宽度和高度以像素为单位;duration、poster 和 tSeconds 以秒为单位;fps 是帧率。poster 是可选的,表示用作缩略图的帧。将它们与简报匹配。

  • 直接从提供的时间戳计算状态。不使用挂钟时间、自主 CSS 动画、累积模拟步骤、网络资产或非种子随机数。
  • 在捕获前加载并解码本地资产和字体。在 renderFrame 返回后,不要引入异步帧突变;验证宿主渲染器的就绪机制。
  • 定义节拍边界和活动区间之外的行为。测试重复的时间戳和反向查找。
  • 帧函数定义视觉效果,而非音频播放。声音仅来自 renderAudio:一个或两个通道,离线渲染,每次调用都相同。HTML 媒体播放永远不会被捕获。

首先解析此技能目录的实际位置,遵循任何安装符号链接进入完整的 X Motion 克隆。仓库根目录是相对于已解析的 skills/x-motion 目录的 ../..,而不是相对于用户当前工作目录。在执行这些命令之前,切换到该仓库根目录;下面的合成路径是相对于它的。

导出故事板 PNG 和 manifest.json(默认无视频)。添加 --times 0.5,2,4.25 来选择静帧,添加 --audio 来同时导出带有响度数据的 sound.wav:

node scripts/render.mjs path/to/scene.html --out renders/name-storyboard --audio

导出故事板 PNG、全帧、poster.webp、film.mp4(当存在 renderAudio 时,配乐混音为 AAC 格式)和 manifest.json:

node scripts/render.mjs path/to/scene.html --out renders/name-video --video

为每个修订版使用一个全新的输出目录。在报告成功之前,检查 manifest.json 和实际输出:它记录了帧确定性检查、音频确定性检查、综合响度、真实峰值和裁剪样本。视频编码需要 ffmpeg。在其他宿主中,保留确定性的时间戳语义并调整导出命令。

5. 审阅 → 修订 → 交付

当反馈提及已发布的视频 ID 时,阅读 作品集反馈。解析确切的影片,保留其身份和反馈,并在新的关联 ID 下发布修订版。继承范围性的经验教训,而不是将每个剪辑特定的指令作为通用规则。

检查渲染后的工件,而不仅仅是源代码。查看故事板的构图,播放视频的节奏;如果存在导出的音频,则收听它。如果无法播放或收听,请准确说明哪些部分尚未审核。

使用 审阅与交付 将可衡量的失败与主观问题分开。首先解决影响最大的问题。将审阅/修订循环限制为每个方向三次迭代。如果方向仍未解决,停止,解释相互冲突的关注点,并请人类在选择或澄清后再继续。技术通过并非美学批准。

交付工件位置、源代码位置、导出规格、验证证据、已知限制和未解决的批准问题。报告您实际观察到的情况。未经授权,不得对外发布。

参考地图

仅加载当前阶段所需的参考:

  • 艺术指导:意图、品味、参考、视觉主题。
  • 动画与摄像机:时间、舞台调度、转场、确定性渲染。
  • 字体排印:层次结构、可读的动态文字、字体处理。
  • 音频:提示映射、同步、静音、导出检查。
  • 审阅与交付:证据、有限修订、交接。
  • 作品集反馈:不可变 ID、聊天反馈、保留/改进/丢弃、以及范围性学习。

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

相关技能