Communitygithub.com

截图动效视频制作

利用六种预设模板(卡片聚光灯、暗色启动胶片、轨道画廊、动态图形、棱镜折叠或翻页故事书),将截图生成可编辑的产品宣传视频,支持文案修改、可选授权音频及便携式桌面编辑包。

截图动效视频制作 是什么?

该技能允许用户从一组截图中生成高质量、可编辑的产品宣传视频,支持六种不同的视觉模板:spotlight(卡片聚光灯)、launch(暗色启动胶片)、orbit(轨道画廊)、kinetic(动态图形)、prism(棱镜折叠)和storybook(翻页故事书)。每个模板都有特定的时长和视觉效果,例如spotlight模板精确需要5张截图,生成12秒的视频;storybook模板则支持1-12张截图,时长可配置。 技能的核心工作流程包括:检查本地依赖、读取配置参考、编写项目JSON、使用`motion.py prepare`命令准备隔离作业、在作业内安装npm依赖、渲染预览帧进行视觉检查、最终渲染无声视频,并通过`motion.py mix`命令混合音频。用户可以通过自然语言提出修改请求,技能会自动更新项目并重新渲染。 支持的平台包括所有运行Python 3、Node.js 22+和Chrome/Chromium的环境。技能本身是MIT许可的开源扩展库,但Remotion和媒体文件有单独的许可。该技能特别强调:不要将用户截图存储在技能目录内、不要捏造UI元素或产品声明、不要静默将草稿安装到应用程序库中。

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

在你喜欢的 AI 中提问

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

文档

截图动效视频制作技能

使用六种预设模板之一制作真实、可编辑的视频:

模板效果截图数量时长
spotlight五张卡片展开,中间截图成为主角,然后恢复排列恰好5张12秒
kinetic粗体字、分屏和图形擦除恰好5张16秒
prism手风琴式屏幕、分层玻璃揭示和光扫恰好5张18秒
orbit霓虹轨道画廊、深度旋转和最终排列恰好5张18秒
launch暗色编辑风格宣传片,包含拼贴、功能特写、大标题和行动号召恰好5张20秒
storybook精装书打开、插图跨页翻动、封面合上1-12张可配置的停留时间;5页默认32秒

在安排截图前,请阅读模板选择与映射。遵循明确选择的效果。否则,根据用户意图推荐/选择最接近的匹配,保留以前的选择;不要将所有请求默认设为书籍。权威模板注册表是templates.json。这是一个可扩展的库,而不是捆绑的成片演示视频。

输入与决策

从请求中识别被推广的产品、提供的截图顺序以及输出语言。保留以前的选择。如果产品不明确,则在撰写推广文案前进行澄清;否则使用合理默认值并继续。默认:1920×1080,30 fps,故事书每页停留4秒,英文解释性文字,无画外音。

在撰写文案前检查截图。使用真实的UI,不要捏造控件、客户数量、性能声明、价格或下载地址。解释性文案是一个独立的可编辑层;嵌入截图中的文字无法通过更改标题来改变。使用用户提供或适当许可的媒体。将私有截图和生成的任务保留在已安装的技能目录之外。

面向用户的交互

将调用视为生成视频的请求。仅在缺少截图和产品详情时要求提供;当工具可用时,自行编写配置并执行准备、渲染和混合。不要向用户提供Python命令或要求他们以正常工作流的方式编写JSON。检查本地依赖并报告具体的缺失要求。尊重执行权限;当您的环境无法执行某些操作时,解释用户必须采取的行动。

接受自然语言的修订请求,更新生成的项目,并渲染修订后的结果。对于截图或故事书时长的更改,准备一个新任务以保持合成元数据的一致性。将技术命令保留在代理执行或开发者故障排除中,除非用户明确要求。有关手动使用,请参阅开发者渲染命令。

创建视频

  1. 阅读配置参考。在用户资产旁边编写一个项目JSON,以examples/中的匹配示例为起点。编写简短、具体的说明,每张截图一个功能。选择--template spotlight、--template launch、--template orbit、--template kinetic、--template prism或--template storybook;下面的命令以storybook为例。遵守验证过的行数限制。
  2. 准备一个隔离的任务:
    python3 /path/to/screenshot-motion-skill/scripts/motion.py prepare --template storybook --config /path/to/project.json --out /path/to/new-job
    
    prepare不会覆盖现有任务。任务包含自己的渲染器、复制的截图和标准化配置;准备后除了辅助CLI外,不依赖技能本身。
  3. 在任务内部使用npm install安装依赖。需要Node.js 22+和Chrome/Chromium。在该任务中使用npm run studio进行交互式预览。
  4. 首先为所选模板渲染有代表性的静止帧:
    python3 /path/to/screenshot-motion-skill/scripts/motion.py render --job /path/to/new-job --frame 150 --browser /path/to/chrome
    
    检查生成的PNG。在全渲染前修正文案、裁剪或布局。有用的预览帧:spotlight 105/190/330;launch 60/150/250/355/450/550;orbit 45/170/270/380/490;kinetic 35/100/170/245/320/430;prism 70/150/240/330/470;storybook 150和首次翻页中点处的90 + holdFrames + 21。选择任务时长内的帧。
  5. 不带--frame参数渲染。这会创建out/video-silent.mp4。如果自动发现失败,则显式提供现有浏览器;脚本不会下载浏览器。
  6. 运行motion.py mix --job /path/to/new-job以创建out/video.mp4。如果没有音频输入,则生成无声副本。对于音乐、过渡音效或纸张音效,请阅读音频与许可。除非请求并存在合适的授权语音服务,否则不要添加画外音。
  7. 遵循输出检查,检查渲染后的文件而不仅仅是源代码,然后返回实际视频和任务路径。准确说明是否执行了画外音、收听或实时回放。如果渲染被阻止,报告具体的缺失依赖;不要用静态图像替代并称之为视频。

桌面编辑交付

当请求时,遵循编辑导出与兼容性。渲染纯净模式并导出便携式包,包含可编辑的SRT字幕、独立的音频轨、原始截图和镜头片段。说明动态图形仍然被固定,导入的字幕需要编辑器样式设置。保留最终的样式化MP4作为参考。在声称支持原生草稿前验证用户的应用/版本;可选的旧版剪映适配器是实验性的,未在当前的macOS/Windows或CapCut上验证。不要静默将草稿安装到应用的库中。

稳定的实现细节

以下翻页说明适用于storybook。对于spotlight,保留绘制屏障和屏幕空间标签。对于launch,仅在可见UI支持的地方使用标准化的region裁剪;切勿重复使用以前产品的像素坐标。

  • 正在翻动的右页正面是旧截图,背面是下一个说明。不要对整个跨页进行淡入淡出或镜像反转文字。
  • 所有几何图形遵循帧号;切勿引入挂钟动画或未种子的随机性。
  • Canvas2D条带网格避免了嵌套浏览器3D合成问题。保持平面快速路径、小条带重叠和连续光照覆盖:每个条带的反走样着色会跨文字创建可见线条。
  • 相机距离3000可使翘起的页尖保持在1080p帧内。在更改相机或页面大小后重新检查完整的翻转包络。
  • 默认渲染器在不裁剪的情况下适配图像。支持横向截图;不要将其拉伸为纵向宽高比。
  • 默认顺序渲染。增加并发需要另一次捕获帧的视觉检查。

包的原始代码是MIT许可的。Remotion和媒体有单独的许可;请参阅THIRD_PARTY_NOTICES.md。该技能不授权发布、上传用户资产、更改账户设置或自行全局安装。

扩展库

当要求添加其他效果时,请遵循扩展合同。添加渲染器、注册表项和示例,而不是替换现有模板。验证新效果和相关现有模板。

相关技能