作者的数据动效案例：图表数值增长并突破原有刻度。
项目截图关于这个 Skill
说明你的产品和希望制作的影片，video-shotcraft 帮助 Agent 采集真实页面、选择镜头配方、设计分镜、用 Remotion 实现动画、加入音乐与音效、检查渲染帧，交付 MP4 和可编辑源码。可使用 Ink Press 模板、自主自由创作、共同创作，或单独适配某个镜头。
为什么推荐
适合用自己的网站或应用素材制作产品发布片与功能演示。项目将可复用的镜头实现、完整制作流程和后续编辑工具放在同一个 Skill 中。本页两张动画均来自作者官方预览，经过压缩用于展示。
适合用来做什么
- 根据已有网站或前端项目制作产品发布片与功能演示。
- 复用已调校的运镜、文字编排、转场、界面入场或数据动效。
- 保留 Remotion 源码，通过动效工作台修改文案、时长、颜色、镜头与音频。
- 按需导出剪映草稿，继续编辑镜头片段、字幕和音频轨。
安装并选择制作方式
运行官方 Skills CLI 安装命令，再让 Agent 使用 video-shotcraft 制作产品片。可点名 Ink Press 复用模板，授权自主创作，共同确定创意方案，或指定画廊中的某个镜头。
| 命令 | 用途与使用时机 |
|---|---|
npx skills add Vincentwei1021/video-shotcraft | 按作者提供的安装方式安装原始 Skill。 |
镜头配方与参考实现
本次查阅的 README 介绍了 124 张配方卡、150 个镜头，分为开场与品牌、运镜、转场、文字、界面入场、交互、数据、光效与强调、节奏、结尾十类。画廊可浏览动态预览并复制镜头名；配方卡关联已调校的 Remotion 实现，由 Agent 适配你的产品。
从产品页面到成片
制作流程从产品的实际视觉与功能重点开始。Agent 采集页面纹理和元素，安排叙事与分镜，用代码实现动画，加入节拍时机与声音设计，再检查渲染帧。上方作者提供的流程动画展示了这些步骤。
使用可以公开发布的截图和文案，将模板中的演示产品替换为自己的素材。页面包含客户或内部信息时，先准备脱敏或虚构数据。
交付物与后续编辑
作者的标准输出是 1920 × 1080、30 fps 的 H.264 MP4，并提供 Remotion 工程。动效工作台将已编排的镜头、转场、字幕和音效显示为轨道，可在可视化界面中调整支持的属性，再通过 Remotion 导出。
当前 Skill 说明要求：使用背景音乐的影片交付带 BGM 版与无 BGM 但保留音效的版本，两者来自同一条时间线。
按需导出剪映工程
剪映导出将成片保留为按镜头切分的视频片段，并提供原生字幕轨与独立音频轨。镜头内部运镜和动效烘焙进视频层；字幕、时间、片段顺序和音频按导出指南继续编辑。作者说明已在 macOS 的剪映专业版 11.2 上测试。
依赖与素材使用条款
Skill 的代码与文档采用 Apache-2.0，可从原始仓库安装。项目使用 Remotion 和音频素材前，应分别查阅渲染引擎许可及逐文件音频来源记录。所选 Agent 或模型服务可能收取使用费。
使用前需要了解
- 作者针对 Claude Code 和 Codex 制作与调校此 Skill。提供前端项目、产品公开页面，或适用的截图与品牌素材。
- Remotion、模板和动效工作台需要 Node.js 与 npm；抽帧和最终检查需要 FFmpeg 与 ffprobe。
- BGM 节拍分析使用 uv 和 Python 脚本；页面采集使用 Puppeteer。Remotion 首次渲染会下载无头浏览器，官方指南提供无显示器 Linux 的配置说明。
- 代码与文档采用 Apache-2.0。Remotion 与内置音频另有使用条款；音频来源记录中有部分较早音效需在商用前核实来源。
支持的 Agent
常见问题
成片可以继续修改吗？
可以。保留 Remotion 源码，并通过动效工作台调整其支持的属性与轨道。按需导出的剪映草稿提供镜头片段、字幕和音频轨；已渲染片段内部的动画保留在该片段中。
可以只使用一个镜头吗？
可以。向 Agent 提供画廊镜头名和适用素材。Skill 提供了单独适配镜头或动效的使用方式。
资料与来源
原始资料见下方链接；文中的上手建议由 SkillHey 编辑整理。
