跳转到使用指南
Video Shotcraft作者 Vincentwei1021

Video Shotcraft Skill.

将真实产品界面转化为经过编排且可检查的视频时间线。

  • 产品视频
  • Remotion
  • 动态设计
来源审查 · Video ShotcraftSKILL.md
任务 产品视频 产出 • 一个 Remotion 视频项目和渲染完成的产品影片 • 一份源自产品的设计规范、镜头映射和故事板 • 一条包含截图素材且可选导出可编辑项目的可审查时间线 开始之前 需要 Remotion/Node 环境、浏览器截图工具和 ffmpeg。部分组件需要 Three.js 相关软件包;可选的音乐分析和剪映导出还会引入额外依赖。请单独审查 Remotion 的适用许可证。
编辑摘要 · 已审查来源 2026-10-07 · 并非生成的示例

01 功能说明

Video Shotcraft

一套使用真实截图的产品视频流程,结合镜头方案、产品视觉令牌、确定性的 Remotion 实现、声音以及最终的逐帧审查。

基于来源的工作流并非执行基准测试

工作方法

Video Shotcraft 是用于制作产品视频的资源库和工作流。其主要对象是真实的网页或桌面界面:页面截图、元素抠图和坐标会成为镜头运动和功能演示的素材。该技能提供镜头方案卡、参考实现、可复用组件、音频素材和 Ink Press 模板,而不是要求智能体根据简短描述自行构思每个动作。

完整视频有三种彼此独立的模式:改编现有模板、自主创作和引导式共同创作。模式选择会改变审批流程,但不会免除理解产品的要求。视觉令牌应来自产品本身,镜头卡则提供动作结构。最终渲染、逐帧审查和声音处理都是预期制作流程的一部分;仅仅生成故事板并不能证明这些工作已经完成。

预期交付物

  • 一个 Remotion 视频项目和渲染完成的产品影片
  • 一份源自产品的设计规范、镜头映射和故事板
  • 一条包含截图素材且可选导出可编辑项目的可审查时间线
查看示例简报

从简报到审查

  1. 01
    检查并选择模式

    在不更改产品业务代码的情况下了解产品。判断现有模板是否适用、是否委托创意决策,或重大决策是否需要引导式审批。

  2. 02
    确定产品与声音方向

    从产品中提取字体、间距和材质,确定可安全演示的状态,并在为节拍同步影片制作故事板之前分析用户选择的音乐。对于现有 UI,应规划真实截图,而不是凭记忆重新创建。

  3. 03
    将功能映射到镜头

    选择镜头方案并阅读其准确的参考实现。规划时长、停顿、字幕和声音。在引导模式下,应先获得完整故事板的批准,再进行最终页面和元素截图;无论采用哪种模式,截图前都要移除或替换敏感数据。

  4. 04
    渲染并检查

    审查静帧和完整渲染结果,检查时序和数据安全,并完成文档规定的独立最终审查。使用音乐时,应保留一个不含背景音乐的替代渲染版本。

02 适用场景

适用场景

需要 Remotion/Node 环境、浏览器截图工具和 ffmpeg。部分组件需要 Three.js 相关软件包;可选的音乐分析和剪映导出还会引入额外依赖。请单独审查 Remotion 的适用许可证。

适合的场景

  • 软件产品影片适合可信度取决于展示可识别真实界面的功能叙事,而不是以电影化风格包装虚构界面的内容。
  • 特定的动态效果如果不需要完整的宣传影片,可以使用单张镜头卡完成独立的动态设计任务。

需要核查的限制

  • 运行环境与素材权利Remotion 以及提供的任何音乐、影像或字体均有各自的条款。技能可用并不意味着每项依赖的商业使用要求都已明确。
  • 截图可能泄露数据截图前必须移除客户、内部、个人及凭据信息。如果画面泄露敏感内容,即使视觉效果成功,也不可接受。

请提供这些输入

  • 产品与功能顺序提供本地项目、可访问页面或已批准的截图,以及影片需要说明的真实功能。
  • 模式与约束选择模板改编、自主创作或引导式共同创作。说明时长、宽高比、必备镜头和不可妥协的品牌约束。
  • 声音与安全数据如有需要,请提供已获授权的音乐,并明确哪些演示数据可以出现。在开始收集屏幕素材前确认替换内容。

03 关键决策

重要决策

  1. 带代码的动态方案

    方案的实际实现会保留缓动和遮罩等细节;如果智能体仅根据镜头名称即兴创作,这些细节很容易丢失。

  2. 保留产品识别特征

    将动作结构与字体和材质分离,可以在改编成熟效果时避免给产品强加不相关的宣传风格。

04 示例任务

尝试一份聚焦的简报

以下示例简报尚未经过测试。使用前请检查该技能的配置说明。

检查配置

请使用包含镜头卡、演示、组件和模板文件的完整代码库。来源中列出的渲染命令并非通用安装命令。

上游源文件
https://github.com/Vincentwei1021/video-shotcraft/blob/5ddbf521038b0a7accfb6dc1e0a9eb29c67277ab/SKILL.md

需要 Remotion/Node 环境、浏览器截图工具和 ffmpeg。部分组件需要 Three.js 相关软件包;可选的音乐分析和剪映导出还会引入额外依赖。请单独审查 Remotion 的适用许可证。

从一项交付物开始

运行该技能前,请根据实际情况调整此简报的范围、源素材和约束。

示例简报
针对所提供的项目,以引导式共同创作模式使用 Video Shotcraft。使用真实 UI 截图制作一部短片,说明搜索、已保存合集和导出功能,画面中只能使用演示数据。保留产品现有的字体和色彩。制作前提出功能到镜头的映射方案并完成故事板,随后渲染并审查结果。请勿发布影片或上传源截图。

检查结果

根据以下可观察标准检查实际输出。

  • 渲染的 UI 画面与已批准的产品状态一致,且不包含敏感数据。
  • 每个选定镜头都对应具体功能或叙事目的。
  • 交付的渲染结果已作为完整序列接受检查,而非仅检查彼此独立的静帧。

OpenDesign 为编程智能体提供本地设计工作区。此条目并不表示该技能已内置,也不表示其外部工具、凭据和软件依赖已包含在内。

05 来源与许可证

来源与许可证

本页描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。

来源所有者
Vincentwei1021
技能文件
SKILL.md
许可证
Apache-2.0
已审查快照
2026-10-07 · 5ddbf521038b
编辑来源摘要
一套使用真实截图的产品视频流程,结合镜头方案、产品视觉令牌、确定性的 Remotion 实现、声音以及最终的逐帧审查。

由 OpenDesign 根据所链接来源撰写的原创摘要。代码库 Star 数是特定日期的受欢迎程度信号,并非技能使用量或质量评分。

06 开始前的问题

开始前的问题

必须使用 Ink Press 风格吗?

不必。模板只是一种模式。自主创作和引导式创作可以建立新的方向;即使改编模板,也应使用目标产品的视觉识别特征。

可以只要求制作一个动画吗?

可以。来源支持使用单张镜头卡及其参考实现来完成聚焦的动态设计任务。

会自动导出可编辑的视频项目吗?

来源描述了一条可选的剪映导出路径。它需要自身的依赖和平台检查,因此应与主渲染分开提出请求并单独验证。

OpenDesign

为下一轮设计迭代留出空间。

将简报、源素材和设计工作集中保存在本地工作区中。将该技能加入工作流前,请检查其自身的配置说明。

上游源文件
https://github.com/Vincentwei1021/video-shotcraft/blob/5ddbf521038b0a7accfb6dc1e0a9eb29c67277ab/SKILL.md