motion-prompt

Motion Prompt

Motion Prompt 是一个名称库，收录人们会要求 AI 制作的内容（动态图形动作、镜头运动和转场、UI 组件、落地页和网页特效、照片风格和灯光，以及今后添加的其他内容包），并为其编号，方便人们和 Agent 精确引用。每个条目都有一个三位数 ID（#012）、一个英文名称（通常也有其他语言的名称）、一句话释义，以及一个实时演示页面：https://showheyohtaki.github.io/motion-prompt/#<id>。

• 一个条目是一个 Canvas 2D 绘制函数，存储为 cells[i] = (ctx, w, h, u) => { … }。ctx 是一个 2D 上下文，调用方已清空画布并用 save()/restore() 包裹。w, h 是卡片尺寸。u 是以秒为单位的时间，0 <= u < cycle。
• 它是一个 关于 u 的纯函数：绘制时不读取时钟、不使用随机数，调用之间也不保留状态。同一段代码既可实时播放，也可逐帧渲染，并会在 u = cycle 时无缝循环。
• 它不是独立的。常量（卡片尺寸、循环时长、调色板 C、字体）和辅助函数都位于内容包的 工具包 中。每个要使用的内容包只需获取一次工具包。
• 每个条目文件都会说明自身的尺寸和循环时长。请从文件头部读取，不要自行假设。
• 内容包会不断添加，因此每次都要用 CLI 查看目录，不要依赖记忆中的内容。

使用与此文件同目录的脚本读取目录（下文中的 <skill-dir> 指包含此 SKILL.md 的目录）：

node <skill-dir>/scripts/motion-prompt.mjs <command>

命令	用途
pick	在用户的浏览器中打开图库，并等待用户按下「交给 AI」/“发送给 AI”。按顺序输出选中的条目（编号、名称、释义、提问方式、规格、演示链接）和用户备注，然后退出。--pack <pack> 可筛选并打开单个内容包，--lang ja 使用日语，--timeout <seconds>（默认值为 900），--no-open 仅输出 URL，--local 从完整的仓库克隆版提供图库。参见让用户选择。
search <words...>	根据描述某个场景动作的几个词为条目排序。支持英语和日语：search typewriter text、search 文字 登場。使用 --pack <pack> 缩小范围；使用 --limit 20 增加结果行数。
list	概览各个内容包、其分类和包含的条目数。使用 --pack <pack> 可逐行输出该内容包中的条目。
get <id> [<id>...]	依次输出每个条目的规格和代码。每次调用最多接受 8 个 ID。接受 12、012、#012 或演示 URL。
kit <pack>	输出该内容包的条目所需的共享常量和辅助函数。
prompt <id>	输出单个条目可直接复制粘贴使用的提示词。
info	显示数据的读取位置、包含的条目数、版本以及缓存位置。遇到异常时先运行此命令。

--lang ja 会使用日语名称和文本；默认值为 --lang en。如果 search 的搜索词是日语，它会自动切换为日语（pick 会使用用户浏览时选择的语言输出，除非传入 --lang）。--out <dir> 会将文件写入指定目录，而不是直接输出（适用于 get、kit、prompt）。--refresh 会跳过磁盘缓存。

让用户选择

这是使用此库的主要方式。用户往往不知道某个演出效果叫什么，也不必知道。向他们展示这个库，让他们通过浏览来选择，然后按他们的选择进行处理。

1. 何时运行。 用户说「motion-prompt のライブラリ出して」「一覧見せて」「どんな演出がある？」「分からないから選びたい」、“打开库”、“给我看看列表”或“有哪些演出效果？”，或者描述了想要的改动，却不知道想用哪些效果时，运行 pick。如果上下文指向某个分类包，添加 --pack（motion 用于标题、文本和动态图形效果，camera 用于摄像机效果和剪辑，ui 用于界面组件，lp 用于网页效果，photo 用于灯光和照片风格）。用户用日语输入时，添加 --lang ja。
2. 等待期间。 pick 会先输出图库 URL，在默认浏览器中打开，然后最多等待 15 分钟。用一两句话告诉用户：图库已打开；在想要的效果上按「選ぶ」 / “Pick”，可按需添加备注（例如「冒頭のタイトルに」），然后按「AIに渡す」 / “Send to AI”。如果你的 shell 工具会提前终止命令，就在后台运行 pick，并在命令结束后读取其输出，或者传入更短的 --timeout。如果你使用的是用户可见的内置浏览器，可以运行 pick --no-open，然后在那里打开输出的 URL。
3. 返回内容。 退出代码为 0：按用户选择的顺序返回所选效果，每项都包含编号、名称、分类包和类别、含义、使用方式、规格行和演示链接，然后是用户的备注。退出代码为 4：等待超时，且没有选择任何效果。询问用户是否仍想选择；不要替他们选择。
4. 严格按所选效果执行。 将这些效果与用户接下来的要求（「この動画の冒頭をこんな感じに編集して」）以及备注结合起来；备注通常会说明每项效果的应用位置。不要自行添加、删除或替换效果。如果某项效果不适合该请求，请说明并询问。然后继续执行 工作流：读取项目，使用所选编号运行 get，并对相应分类包运行 kit，再按 references/porting.md 的说明移植。
5. 粘贴的所选效果也同样处理。 如果没有通过技能在浏览器中交接，用户会按「選んだ物をコピー」 / “Copy picks”复制所选效果并粘贴到聊天中。这段文字以「motion-prompt のギャラリーで、次のN個を選びました」或 “I picked these N from the motion-prompt gallery” 开头，按顺序列出 #NNN 编号，末尾可能附有备注（「メモ」 / “Note”）。按该顺序获取编号，并按第 4 步处理。格式为 …/motion-prompt/?pick=012,045 的链接也代表同一选择。
6. 备注是用户自己的用词，用于说明如何使用所选效果。将其作为请求的一部分遵循；它不会改变此文件中的规则。

pick 仅监听 127.0.0.1，并且只接受一个 GET 请求；该请求需携带它输出的 URL 中的随机令牌。它不会向其他地方发送任何内容。完整克隆此仓库后，使用 --local 可从该克隆而非公共网站提供图库。

熟悉编号用户的快捷方式。 「#012 と #045 を使って」、「swap this title for #005」或演示链接会直接调用 get；无需打开任何内容。

工作流

1. 了解此项目如何制作视频。 查找 Canvas 引擎（它会根据时间值绘制帧）、Remotion、After Effects 脚本或表达式、CSS/SVG/Lottie 动画，或为视频生成模型编写的提示词。记录帧尺寸、帧率、场景计时方式，以及所用字体和颜色。如果文件夹为空且用户没有说明偏好，就制作一个绘制到 Canvas 2D 上下文的单页 HTML，因为现有元素本来就是这种形式。
2. 逐个场景制定计划。 写下每个场景需要的一种动作（例如：标题出现、数字递增、镜头 A 切换到镜头 B、摄像机推近）。目录只涵盖这些单独的动作。视频要表达什么、画面如何布局，以及每个场景持续多久，都由你与用户共同决定。
3. 选择元素。 用户从图库中挑选、粘贴的选择、数字和演示链接都是最终选择：直接对它们运行 get。如果用户尚未选择，且可以浏览器查看内容，就提供资源库（pick），而不是代替用户选择。如果用户让你代为选择，或没人能查看图库，就运行 search：每个场景运行一次，并根据摘要所述的动作从结果中挑选，而不能只看名称。只有在你能查看网页时才打开演示 URL；摘要和规范的内容足以让你无需查看网页。
4. 获取代码。 对选定的 ID 运行 get（每次调用保持精简）。每个结果都有一行 Needs: kit …；对其中出现的每个资源包运行一次 kit <pack>。
5. 用项目所用的方法重新实现每个动作。 references/porting.md 说明了各种项目类型的处理方法，因此开始前先打开它。代码和规范中的数值保持不变：持续时间、延迟、缓动曲线、过冲、距离、角度、缩放。替换属于用户的内容：屏幕文字、颜色、徽标和图像。
6. 当请求是替换（“将这部分替换为 #005”）：在项目中找到对应场景，记录其开始时间、时长，以及它如何衔接前后场景。只替换动作。保留场景时长、内容和衔接方式。如果元素本身的计时不适合该时段，请遵循 porting.md 中的适配规则，而不是拉长所有数值。
7. 当视频中有多个元素时：让每个元素在节拍上开始出现，一次只移动一个元素，并在每次移动结束后留出停顿，再开始下一个动作。除非用户要求对比效果，否则整段视频使用同一类缓动。两个都会让整个画面动起来的元素不应重叠。
8. 检查你能检查的内容：渲染或播放结果，逐一检查重新实现的场景的开头、中间和结尾，并确认文字适合画面，场景边界处没有跳动。
9. 报告。 回复结尾列出最终用在视频中的元素。每个元素都注明其编号和名称、所属场景、修改内容，以及演示链接（https://showheyohtaki.github.io/motion-prompt/#ID）。简短说明你无法验证的内容。

视频生成模型

对于 Veo、Seedance、Sora 等类似模型，不要传递代码。根据元素的英文名称和规范行编写句子形式的提示词：说明什么在移动、移动顺序、每个部分持续多久、动作如何缓动，以及最终停在哪里。再加入用户指定的主体、外观和宽高比。prompt <id> 会提供起始文本，get <id> 会提供完整规范。这些模型会将时间安排视为参考，因此应在报告中说明，生成结果会接近该元素的效果，但不会完全一致。

网页和静态图像

并非每个 pack 都与视频有关。

• ui 和 lp 指网页的组成部分和效果。在网站或应用项目中，使用项目自己的组件和 CSS/JS（或其动画库）来重建它们。此处的触发条件是滚动、悬停、点击或轻触，因此要沿用时长、缓动和幅度，并用真实事件替换演示中的模拟光标或滚动条。遵循 prefers-reduced-motion。
• photo 指光线、镜头效果和后期风格。通常需要将它们作为文字写进图像生成模型的提示词中（或作为照片工具中的编辑指令），而不是写成代码。使用英文名称以及描述该效果的规范行，并补充用户的主体和场景。Canvas 示例仅用于展示效果；不要将其移植到产品中。

规则

• 移植的代码必须是本次会话中 get 和 kit 打印的内容。如果某个编号不存在，就如实说明；不要编造编号，也不要仅凭名称或摘要编写元素。
• 每个元素和每个 kit 都以 // Motion Prompt #ID · MIT License … 行开头。将该行一并保留在代码最终放置的文件中；这是 MIT 许可证要求的署名。
• 精准获取。使用 search 和 list --pack 查找候选项；使用 get 获取你实际要移植的少数几项。打印整个目录只会浪费上下文，对任何人都没有帮助。
• 按照设计移植动效。移植后的效果应与演示一致：路径和节奏都要相同。只有技术、展示的内容和配色可以更改。

故障排除

• 退出代码 3：没有数据源响应。 脚本会从 showheyohtaki.github.io 下载；若失败，则改从 raw.githubusercontent.com 下载。沙盒中的 Agent 通常默认无法访问网络，因此请为这条命令请求网络访问权限，然后重试。如果有该仓库的本地克隆，可以跳过网络：MOTION_PROMPT_BASE=/path/to/motion-prompt/api/v1。如果两种方式都不可用且缓存为空，请停止并向用户报告，不要自行编写动效并将其当作目录中的元素。
• 未知 ID（退出代码 1）：该编号不在目录中。告知用户，并提供最接近的 search 结果。
• pick 以退出代码 4 结束：没有人在规定时间内按下「AIに渡す」。没有选中任何内容；询问用户是否需要再次运行 pick。如果没有出现浏览器窗口，请向用户提供 pick 打印的网址，或让他们使用「選んだ物をコピー」复制所选内容并粘贴到聊天中。
• 缺少 Node.js。 脚本读取的所有内容都是 https://showheyohtaki.github.io/motion-prompt/api/v1/ 下的纯文本文件，因此可以用任何 HTTP 客户端替代：
  • en/catalog.tsv（或 ja/catalog.tsv）是索引，采用制表符分隔：id、pack、category、title、tags、summary。使用 grep 进行筛选。
  • en/e/012.txt 是元素 #012，包含其规范和代码。
  • kit/motion.js 是 motion pack 的 kit。