video-shotcraft
让 agent 帮你制作电影感产品视频的 skill：104 张镜头配方卡 · 161 个样式 · 161 条动态样片 · 已验收成片模板
video-shotcraft 是一个把 Claude Code / Codex 变成动效工作室的 AI agent skill： 把你的产品交给它，它会用 Remotion 完成分镜、动画 和声音设计，产出一支电影感的宣传片 / 营销视频 / 发布视频 / 功能演示—— 真实页面截图、2.5D 运镜、节奏卡点和电影级 SFX 全部包含。
🖼️ 在线 Gallery：浏览全部 161 条动态样片 »
🎬 效果预览
下面这支 38 秒的 Gallery 介绍片，本身就是用这个 skill 制作的—— 从分镜、镜头实现到声音设计，全部由 agent 按库内方法论完成：
https://github.com/user-attachments/assets/cba2df8a-4b2e-4247-bace-d0b1dea9c2bd
在线浏览全部镜头卡与动态样片：Gallery —— 支持搜索、筛选、切换样式和多选复制镜头卡名称。
🚀 快速开始
最直接的方式：把仓库链接丢给你的 agent。 在 Claude Code / Codex 等 agent 里说：
帮我安装这个 skill：https://github.com/Vincentwei1021/video-shotcraft
agent 会克隆仓库并链接到 skills 目录。也可以用 skills CLI 或手动安装：
npx skills add Vincentwei1021/video-shotcraft
git clone https://github.com/Vincentwei1021/video-shotcraft.gitcd video-shotcraftln -s "$(pwd)" ~/.claude/skills/video-shotcraft # Claude Code# 或ln -s "$(pwd)" ~/.codex/skills/video-shotcraft # Codex
装好后直接提需求：
用 video-shotcraft 给我的桌面产品做一支宣传片。用 deck-deal-flyin 和 row-embed 两张镜头卡展示这个功能。参考 spotlight-hero-card，为这个页面设计一个产品特写镜头。
如果没有指定镜头卡，skill 会先介绍现成成片模板并询问是否采用； 也可以先在 Gallery 里挑好镜头再开始。
📼 成片模板：Ink Press（墨压）
skill 内置 Ink Press（墨压） 模板——一支已验收的完整宣传片： 36.2 秒、1920×1080、30fps、10 个镜头的纸墨琥珀风，含 2.5D 真实页面运镜、 字卡、转场和配好的电影感 SFX：
https://github.com/user-attachments/assets/4cf5af51-98f3-4af2-8ab2-7267f470513d
使用方式：直接告诉你的 agent——
用 video-shotcraft 的 Ink Press 模板给我的产品做一支宣传片。
agent 会替换成目标产品的截图、文案和品牌信息，复现同等质感—— 这是最快、质量最有保障的出片路径。
后续会持续更新更多模板。
Headless / CI 注意事项
在无显示器的 Linux 服务器上渲染（实测环境：2 核、Node 22）会遇到三个坑， 都可以一个参数解决：
- 并发上限 —— 低核机器上
remotion still/render会报 "Maximum for --concurrency is 2"。解决：加--concurrency=1。 - 旧版 Headless 被移除 —— 新版 Chrome/Chromium 已删除旧 headless 模式， 让 Remotion 指向系统 chromium 会启动失败。解决：改用 chrome-headless-shell 二进制，而不是完整版 Chrome。
- CDN 被墙 —— 如果 remotion.media 无法访问，headless-shell 的自动下载
会失败。解决：用
--browser-executable=<本地 chrome-headless-shell 路径>指定本地二进制。
加上这三个参数后，内置模板即可正常渲染。
📦 项目包含什么
| 内容 | 说明 |
|---|---|
| 104 张镜头配方卡 | 记录用途、能量、建议时长、参数、实现要点与已知坑 |
| 161 条动态样片 | 覆盖 161 个样式，可在在线 Gallery 中直接预览、搜索和筛选 |
| Remotion 参考实现 | 每张卡对应经过调校的 TSX demo，包含实际缓动和时序参数 |
| 完整成片模板 | 36.2 秒、1920×1080、30fps、10 镜头的纸墨琥珀风产品宣传片 |
| 组件与素材 | 2.5D 页面相机、字幕、闪切、数字滚动、音效和素材采集脚本 |
| 制作方法论 | 从素材采集、风格定调和分镜，到声音设计、节奏卡点与最终验收 |
当前主要面向 Web 与桌面产品宣传片，但镜头卡也可以单独用于功能演示、 品牌短片、发布视频或其他动态设计项目。
🗂 项目结构
video-shotcraft/├── SKILL.md # Agent 使用入口与核心制作规则├── references/│ ├── pipeline.md # 完整制作流水线│ ├── shots/ # 104 张镜头配方卡│ ├── sequences/ # 可复用的全片结构与桥段模板│ ├── aesthetic-rules.md # 视觉验收准则│ ├── music-beat-sync.md # BGM 节奏分析与卡点方法│ └── sound-design.md # 声音设计方法与判例├── demos/ # 镜头卡的 Remotion 参考实现（同类别目录）├── gallery/ # 在线样片画廊的静态站点├── template/ # 可直接运行的完整成片模板└── assets/ ├── lib/ # 可复制使用的 Remotion 组件 ├── scripts/ # 页面素材采集脚本 └── audio/ # 音频资产 ├── bgm/ # 5 首 BGM 备选 └── sfx/<类别>/ # 149 个音效，按场景分 16 类
完整工作流和实现要求见 SKILL.md、 制作流水线 与 视觉验收准则。
🔊 音频与素材说明
assets/audio/ 中的音效可按各自授权条件使用，来源与许可信息见
ATTRIBUTION.md。
音效按场景/材质分 16 类（transition impact riser camera ui text
paper film light data scifi mech glass fluid crowd counter），
找音先定类别再挑音色；类别索引与逐文件用途见
sound-design.md。
模板内的产品截图为演示素材。对外发布成片前，请替换为目标产品自己的截图， 并确认其中的数据、客户信息和个人信息是否需要脱敏。
📝 更新记录
| 日期 | 更新 |
|---|---|
| 2026-07-27 | 音频库重构为 bgm/ + sfx/<类别>/ 两层，音效按场景/材质分 16 类；扩充音效库至 149 个（新增纸张/印刷、打字机、书写、放映机胶片、计数器仪表、墨水流体、玻璃碎裂等此前缺失的质感层）；md5 全库去重，补回 7 个音效的原始授权 URL |
| 2026-07-27 | 画廊卡片支持多类别标签；All 视图改为平铺、按字母排序；补回 GridWaveFlip 与 WireframeDrawOn 源码 |
| 2026-07-26 | 画廊自动部署到 GitHub Pages；样片 mp4 移出 git 改存 release，仓库瘦身 |
🙏 致谢
本库中许多镜头配方源自对优秀官方产品宣传片动效语言的研究学习——包括 ClickUp、Perplexity、Slack、Notion、Figma、Framer、Bear、Raycast、 Pitch、Miro、Superhuman、Loom 等产品的宣传片。镜头卡记录的是从零重新 实现的动效技法（时序、缓动、编排）；仓库中不包含上述影片的任何素材、 画面或品牌资产。所有商标归各自所有者所有，上述公司与本项目无关联、 亦未对本项目背书。
特别感谢：
- Remotion —— 驱动本库全部 demo 与模板的 React 视频框架。请注意 Remotion 有自己的 许可协议 （个人与小团队免费，公司可能需要付费许可）。
- Mixkit —— 库内 SFX 与音乐素材的来源 （免费商用授权）。
- 游戏手感与动画社区的公开方法论（如 Vlambeer 的 screenshake 演讲、 经典动画时序原则），多张镜头卡受其启发。
- Claude Code —— 本库自身的构建、迭代与验收全程由 AI coding agent 完成，用的正是这个 skill 所传授的工作流。