前言¶
给产品做一条宣传视频，传统路径是定分镜、找素材、上剪辑软件、渲染导出，一条十几秒的片子往往要花掉一两天。用代码做是另一条路：动画可控、可复用、可嵌入页面，但要从零搭工程、调时间轴，门槛不低。这个 Skill 把中间环节压缩成一句话——把产品简介或 PRD 交给它，产出一个单文件、自包含的 HTML 宣传动画视频。
这是什么¶
「产品宣传视频制作」（坐标 @user_254f7e9e/jit-motion）是发布在 SkillHub 的社区技能，发布者 user_254f7e9e，版本 1.0.0，分类 design-media，来源 community。它解决的问题是：在没有任何视频制作工具的情况下，由 Agent 直接生成一段 15-30 秒的产品宣传动画，输出为单个 HTML 文件，浏览器打开即可播放。官方简介称其适配 Claude Code / Codex / Cursor / Qoder。
核心功能¶
以下能力均来自官方简介：
1、单文件、自包含的 HTML 视频：输入产品简介/PRD，输出一个自包含 HTML 文件，时长 15-30 秒，无需外部资源即可播放。
2、多场景 GSAP 时间轴分镜：内置基于 GSAP timeline 的多场景 storyboard，场景之间按时间轴编排过渡。
3、四种画幅切换：提供 16:9、4:3、1:1、9:16 四种画幅比例的切换能力，同一份内容适配横屏、方图与竖屏。
4、零 emoji SVG 图标系统：图标全部用 SVG 绘制，不使用 emoji，视觉风格统一。
5、品牌色抓取：从产品官网抓取品牌色并应用到动画中，保持与官网一致的视觉语言。
6、播放控制与 SEO：提供播放控件，并附带 SEO video metadata，便于在页面中作为视频内容被索引。
安装与启用¶
官方地址与 SkillHub 页面如下，在对应平台按坐标检索安装：
官方地址: https://api.skillhub.cn/user_254f7e9e/jit-motion
SkillHub 页面: https://www.skillhub.cn/skills/user_254f7e9e/jit-motion
坐标: @user_254f7e9e/jit-motion
说明几点：
- 技能标签为
requires_api_key=false，使用时不需要额外的 API key。 - 本次写作时官方页面抓取失败，未核实到具体的安装命令（如 npm/npx 或平台内安装指令），各平台的安装方式以官方页面为准。
- 官方简介称适配 Claude Code / Codex / Cursor / Qoder，但各平台的具体启用方式未在资料中逐一给出，建议安装前在对应平台内查看该技能的说明。
典型用法¶
1、准备输入：整理一段产品简介或 PRD，写清产品是什么、要突出哪几个卖点。
2、在 Agent 中触发：把简介贴给 Agent，提出制作产品宣传动画的需求，例如「用这个产品简介做一条 20 秒左右的宣传动画」。
3、接收产物：Skill 生成单文件 HTML，用浏览器打开即可预览，检查分镜顺序、画幅切换与品牌色是否正确。
4、按需调整：根据预览结果让 Agent 调整时长、场景数量或画幅，改的是同一份 HTML。
适用场景与注意¶
适合的场景：
- 产品发布、功能演示、官网或落地页内嵌的动画展示。
- 需要在交付物里附带可交互 HTML demo 的场合。
- 想快速看到宣传动画效果、再决定是否投入正式制作的场景。
注意点：
- 产物是 HTML 动画，不是 mp4 等真实视频文件；要嵌入不支持 HTML/JS 的环境时需另行导出。
- 品牌色依赖能访问产品官网，官网不可访问或没有明确品牌色时，需手动指定。
- 时长固定在 15-30 秒范围内，超出这个区间的需求需要自行扩展。
- SkillHub 页面当前显示评分 100000、下载 1110（截至本文写作时），属于平台统计，不代表动画质量。
结尾¶
这个 Skill 的价值在于把「产品宣传视频」从制作工序变成了一次生成任务：输入简介，输出可播放、可切换画幅、可嵌入页面的单文件 HTML 动画。如果你手上有 PRD 又想快速看到宣传效果，可以从上面的官方地址开始试用。
