开源项目 jit-motion 将"制作产品宣传动画"的完整流程封装为一个 AI Skill，只需提供一份 PRD，就能自动生成可播放、支持横竖屏切换、自带质量校验的单文件 HTML 动画。解决了传统剪辑门槛高、AI 视频生成文字易糊、手写 GSAP 重复造轮子等痛点。
jit-motion 是什么
jit-motion 是面向 AI 编程助手（Agent）的 Skill，将产品宣传动画的生产流程（叙事结构、视觉规范、基础设施、质量校验）打包成一份能被 AI 自动发现并执行的说明书。触发方式极其简单：在支持 Skill 的 AI 工具中说"基于这份 PRD 做一支产品宣传动画"，它自动接管，最终产出一个单文件 HTML——15~30 秒、GSAP 时间轴驱动的多场景故事板、四种画幅一键切换、零 emoji 的 SVG 图标、从官网抓取的品牌色、完整的播放控制条，以及 SEO 视频元数据。
产出的 .html 双击即可在浏览器播放，能挂官网、丢 GitHub、或录屏发短视频平台。该 Skill 已发布到 WorkBuddy 技能广场，搜索 "jit-motion" 即可直接使用。
核心设计亮点
1. 单文件自包含
整支动画就是一个 .html 文件，CSS 和 JS 全内联，外部只依赖 GSAP 库和一张 logo 图。head 里内置了 JSON-LD 的 VideoObject 和 Open Graph 标签，可被搜索引擎当视频收录。
2. 一条时间轴，四种画幅
16:9、4:3、1:1、9:16 四种画幅一键切换：横屏给 B 站和官网，竖屏给视频号、抖音、朋友圈。切换不是简单拉伸，而是布局从"左右两栏"重排成"上下堆叠"，文案和图形始终绑定在一起。实现上 setAspect 只改一个 data-aspect，CSS 负责重排，fitStage 再等比缩放到视口。
3. 零 emoji + 品牌色抓取
全片不允许出现 emoji，所有图标都是 24×24 的描边 SVG symbol（stroke=currentColor，能随主题换色）。主色和 logo 必须从产品官网抓取，绝不允许凭空捏造。校验器内置了 9 个禁用色值（紫色/洋红色），避免 AI 自动生成廉价感渐变。
4. 8 场景叙事骨架
骨架是 8 个场景：品牌开场 → 核心能力 → 构建创造 → 多视图切换 → 生态集成 → AI 智能 → 实时协作 → 品牌收尾，约 26 秒。配一组固定时间标记（0 / 2.6 / 6.0 / 9.4 / 12.8 / 16.2 / 19.4 / 22.4），让"节奏"这件事可复现。可按产品能力裁成 6~8 个场景，重命名、调顺序均可。
5. 确定性校验器
交付前必须跑一遍 validate.py，共 10 项静态检查：占位符是否残留、结构是否平衡、有没有 emoji、有没有禁用色、时长四处是否一致、有没有引用 GSAP、有没有 JSON-LD、logo 文件是否存在、场景数和 MARKS 是否相等。杀手锏是"死选择器检测"：把 CSS 中定义的类与 HTML/JS 中真实用到的类做差集，揪出写了却永远不会生效的样式规则。
6. 跨工具 + 双语 + MIT
Qoder 和 Claude Code 直接丢进 skills/ 目录即可自动发现；Codex 走 AGENTS.md 或 ~/.codex/prompts；Cursor 建 .cursor/rules 指向 SKILL.md。文档中英双语（SKILL、README、architecture、scene-recipes、quality-checklist 都有 .zh-CN 配对），采用 MIT 许可，商用友好。
三层架构
- 指令层（SKILL.md + references/）：讲清楚流程、规范和 8 个场景的视觉配方
- 资产层（assets/skeleton.html）：提供经过验证的基础设施骨架，全是 {{TOKEN}} 占位符
- 校验层（scripts/validate.py）：在交付前兜底，确保每次产出都合格
7 阶段工作流
读懂简报 → 抓取品牌 → 设计分镜 → 复制骨架 → 构建场景 → 编排时间轴 → 校验交付。其中第 2 步"抓取品牌"是灵魂：主色、渐变、logo 都从产品官网取真值，而非让 AI 猜测。品牌一致性是宣传物料的生命线。
横向对比
| 方案 | 优势 | 劣势 |
|---|---|---|
| 传统剪辑（AE/剪映） | 表现力天花板高 | 门槛高、改一处重渲染、"死视频" |
| AI 视频生成（Sora/可灵） | 快、惊艳 | 文字易错、品牌色不可控、无法交互/SEO |
| 手写 GSAP + HTML | 完全可控、可交互、可 SEO | 每次从零搭建、质量不稳定 |
| jit-motion（Skill） | 手写的可控 + AI 的效率 | 需 AI 编程助手 |
适用场景
- 独立开发者/开源作者：GitHub 项目 README 顶部动效演示、Release 发布动画
- 产品/市场/运营：功能上新、活动预热、一键出竖屏发视频号/抖音/小红书
- 技术博主/自媒体：把产品架构、工作原理讲成可视化动画
- 售前/BD/投标：客户演示方案中嵌入产品动画
