联系作者
扫码添加，欢迎交流 jit-motion 与产品宣传动画
jit-motion —— 工具无关的 Agent Skill
输入一份产品简介，产出一支 15–30 秒、多场景 GSAP 时间轴、单文件自包含的宣传动画视频。四种画幅比例自动重排，零 emoji 的纯 SVG 图标，品牌色从官网抓取。无需剪辑软件，无需渲染农场。
单文件产品宣传动画
8 个场景原型自动编排，逐个入场
数字滚动、路径描边、图表生长
协作场景的原生动效呈现
不是又一个模板堆砌，而是把三次真实产品发布沉淀下来的通用模式，做成可复用、可校验的工程化能力。
全部 CSS/JS 内联，仅 GSAP（CDN）与 logo 为外部引用。丢进浏览器就能放，塞进邮件、内网、离线包都无损。
16:9 / 4:3 / 1:1 / 9:16 一套动画全适配，布局自动回流。竖屏下文案与图形始终成组，绝不上下分离。
24×24 描边 <symbol> 图标系统，任意缩放都锐利。杜绝跨平台 emoji 渲染不一致的廉价感。
主色、渐变、logo 一律从产品官网抓取，绝不臆造。默认禁用紫/洋红渐变，让画面干净、专业、可信。
validate.py 纯标准库，10 项静态检查一次跑完：死 CSS 选择器、emoji 泄漏、时长漂移、禁用色一网打尽。
纯 Markdown + 一个骨架 + 一个校验器。Claude Code、Codex、Cursor、Qoder 或任意网页大模型都能直接用。
Agent 会沿着这条流水线推进——每一步都有明确产物，最后一步不过校验绝不交付。
提取产品名、能力清单、时长与硬约束
从官网取主色、渐变与 logo 真值
能力映射为 8 场景与固定时间标记
基于 skeleton.html，替换全部占位符
按 DOM 契约搭建每屏文案与图形
单条 GSAP 时间轴串联入场与节拍
validate.py 跑到 OK，再浏览器走查
默认节奏：8 场景 / ~26s，时间标记 0 · 2.6 · 6.0 · 9.4 · 12.8 · 16.2 · 19.4 · 22.4；短时长可裁剪到 6 场景。
切换画幅不是裁切，而是布局重排——文案与图形智能重组，任何比例都保持专业构图。
从品牌开场到能力收尾，每个原型都有成熟的视觉配方与动画节拍——按需取用、自由改名与重排。
Logo 入场 + 粒子 + 产品名与 slogan
把主打功能具体、可视化地演出来
招牌「wow」流程，如拖拽即搭建
标签页在多种模式间无缝流转
中心辐射式连接，展示开放生态
提问 → 结果 → 智能建议的链路
多人光标、批注与在线状态
Logo 呼吸 + slogan + 能力 chips + CTA
纯 Python 标准库、零依赖，10 项静态检查一次跑完。诊断信息中英双语，支持 --lang zh|en，也能按系统 locale 自动识别。
.copy，HTML 实际类名却是 .left-copy——规则静默失效、动画不出现。校验器会揪出这类隐蔽缺陷。纯 Markdown + 一个骨架 + 一个校验器，不绑定任何平台。选择你的工具，复制对应命令即可。
# 自动发现：整个目录拷入技能目录即可 git clone https://github.com/jitOffice/jit-motion mkdir -p .qoder/skills cp -r jit-motion .qoder/skills/ # 或个人级：cp -r jit-motion ~/.qoder/skills/
之后直接说「帮我为 XX 产品做一个宣传动画」，Skill 会被自动匹配调用。
# 依据 frontmatter description 自动加载 SKILL.md git clone https://github.com/jitOffice/jit-motion mkdir -p .claude/skills cp -r jit-motion .claude/skills/ # 或个人级：cp -r jit-motion ~/.claude/skills/
Claude Code 会在相关任务时自动加载，并按需读取 references/ 细节。
# ~/.codex/prompts/promo-animation.md 阅读并严格遵循 <jit-motion>/SKILL.md（及 references/、skeleton.html）， 为下面的产品生成单文件 HTML 宣传动画， 完成后用 scripts/validate.py 校验到「OK」。 产品简报： $ARGUMENTS # 在 Codex 中调用： /promo-animation <粘贴简报或简报文件路径>
也可在仓库根 AGENTS.md 登记该技能，实现团队共享。
# .cursor/rules/jit-motion.mdc --- description: 生成单文件 HTML 产品宣传动画（GSAP 多场景、四画幅、零 emoji） globs: alwaysApply: false --- 当任务涉及「产品宣传动画 / 营销视频 / HTML 动画演示」时， 先阅读并严格遵循 <jit-motion>/SKILL.md， 从 assets/skeleton.html 起步，交付前跑 scripts/validate.py 到「OK」。
Cursor 在相关任务时把规则作为上下文注入，Agent 随后自行去读 SKILL.md。
# 任意网页大模型（ChatGPT / Claude / Gemini） 1. 把 SKILL.md 全文作为首条消息 / 系统提示 2. 附上 references/architecture.md、scene-recipes.md、assets/skeleton.html 3. 给出产品简报（名称、官网、能力、时长、禁用项） 4. 让模型替换 {{TOKEN}} 并输出完整 HTML 5. 本地校验： python3 scripts/validate.py <output>.html
网页版无法自动跑校验器——把 HTML 下载到本地再执行第 5 步。
MIT 许可，中英双语文档齐全。克隆下来，让你的 Agent 几分钟内产出第一支产品宣传动画。