AI宣传片skill，使用 Remotion 制作电影级产品视频：提供106 张镜头配方卡和可复用的视频魔板。适用于 Claude Code 与 Codex以及所有其他智能体

video-shotcraft

▶ 在 Gallery 浏览全部 150 个镜头 · 🎬 看 Showcase 成片

它做什么

对 Claude Code 或 Codex 说一句「给我的产品做一支宣传片」。agent 会抓取你的真实页面，从调校好的动效配方库里挑镜头，排分镜，用 Remotion 做动画，按音乐卡点剪辑，配上音效，逐帧检查，最后交给你一支可以继续修改的 MP4。

它不是视频生成模型。每一帧都由代码基于你自己的截图和文案绘制，画面清晰、品牌准确，也能逐项修改。

流程

8 秒循环流程动图：你的产品 → 抓取真实页面 → 镜头配方卡排分镜 → Remotion 动画 → 踩点剪辑与声音设计 → 渲染与逐帧验收 → MP4、动效工作台与剪映工程

❤️ Sponsors

APIMart

感谢 APIMart 赞助了本项目！APIMart 是专注 AI 图片/视频生成的低价 API 平台，GPT-Image-2 低至 $0.006/张，1 美元可出图 160+ 张。图片、视频一套异步 API 通吃，提交任务拿 ID、回调取结果，跑批万张不超时、换模型不改代码。按量付费、无月费，通过此注册链接注册即可开用。

PackyCode

PackyCode 是一家稳定、高效的 API 中转服务商，通过统一域名、统一密钥接入主流大模型，支持智能容灾切换，并提供专属 Codex / Claude Code 高速通道。

新用户可获 $1 免费体验额度，首充享折扣，多分组折扣低至 2 折起。支持人民币 1:1 充值，无汇率加价及额外充值手续费。

注册并开始使用 PackyCode →

AWS

Amazon Web Services（AWS）提供稳定、可扩展的云计算服务，涵盖计算、存储和 AI。

了解 AWS →

安装

为 Claude Code 和 Codex 调校。最简单的方式是把仓库链接丢给你的 agent：

帮我安装这个 skill：https://github.com/Vincentwei1021/video-shotcraft

或者用 skills CLI：

npx skills add Vincentwei1021/video-shotcraft

或者手动安装：

git clone https://github.com/Vincentwei1021/video-shotcraft.git
cd video-shotcraft
ln -s "$(pwd)" ~/.claude/skills/video-shotcraft   # Claude Code
ln -s "$(pwd)" ~/.codex/skills/video-shotcraft    # Codex

国内访问 GitHub 慢的话，可以从 AtomGit 镜像克隆： git clone https://atomgit.com/VincentWei/video-shotcraft.git。

使用

直接描述你想要的片子就行，不需要命令。

你说	会发生什么
`用 video-shotcraft 给我的产品做一支宣传片。`	agent 先介绍 Ink Press 模板并问你是否采用，然后抓取页面、做片
`用 Ink Press 模板给这个仓库做一支发布片。`	最快的路径：把你的截图、文案和标志放进已验收的模板
`用 deck-deal-flyin 和 row-embed 两张镜头卡展示这个功能。`	你按名字点镜头（名字可以直接从 Gallery 复制）
`参考 spotlight-hero-card，为这个页面设计一个产品特写镜头。`	单个镜头，按你的产品改编

镜头库

124 张配方卡，分 10 类，共 150 个镜头。可以在 Gallery 里搜索、筛选、复制卡名。

开场与品牌 · 11 个 _{text-as-mask：产品从标题字里透出来}	运镜与空间 · 13 个 _{exploded-view：页面倾斜、构件拆开}
转场 · 19 个 _{card-flock-tumble：卡片群翻滚成标题}	文字与字卡 · 25 个 _{flying-words：文字隧道收成品牌短句}
界面登场 · 22 个 _{card-stack：一叠卡片扇形发牌落位}	交互演示 · 13 个 _{palette-theme-ripple：新主题像波纹扫过界面}
数据与指标 · 9 个 _{axis-rescale-shock：数据冲破坐标轴}	光效与强调 · 23 个 _{spotlight-sweep：舞台追光找到标题}
节奏与蒙太奇 · 8 个 _{paparazzi-flash：三次闪光、三种裁切、落在一个数字上}	收尾 · 7 个 _{input-morph-assemble：聊天输入框拼成标志}

每张卡在 references/shots/<类别>/<卡名>.md，对应的 Remotion 实现在 demos/<类别>/<卡名>/ （怎么接进你的工程见 demos/README.md）。

动效工作台

交付后 skill 会在浏览器里打开一个剪映式的编辑器（node workbench/scripts/open.mjs <工程>）。成片按原始镜头拆成镜头 / 转场 / 字幕 / 音效多轨；选中任意镜头可以改文案、字号和颜色，镜头可挪、可裁、可变速，镜头库里的 150 个镜头都能直接拖上轨，改完用 Remotion 导出。预览与渲染逐帧一致。

动效工作台

工作台图文指南：各区域与功能 · 成片接入契约

你会拿到什么

产出	说明
成片	`MP4`，1920×1080、30fps、h264，含音乐和音效
Remotion 工程	整支片的源码：每个镜头都是一个 React 组件，你或 agent 都能改
动效工作台	交付后自动打开：多轨时间线、属性面板、变速、换镜头、导出（详情）
剪映工程	可选：可编辑的剪映草稿，镜头分段、字幕和音轨都能改
社交平台发布	可选，用户要求时：通过 Upload-Post 把成片发到 TikTok / Instagram / YouTube / LinkedIn / X 等；先确认文案与平台、dry-run 后再发（说明）

另外还附带：可复用的 Remotion 组件（2.5D 页面相机、字幕、闪切、数字滚动）、149 个音效和 5 首 BGM、页面素材采集脚本，以及整套制作方法（素材采集、风格定调、分镜、声音设计、节奏卡点、最终验收），见 references/。

作品展示

投稿你的作品：用 video-shotcraft 做了片子？用 Showcase 投稿表单提交，审核通过后会出现在 Showcase 页面。

环境要求

需要	用途
Node.js 和 npm	Remotion 渲染、成片模板和动效工作台
ffmpeg / ffprobe	抽帧检查与最终验收
uv	只在分析 BGM 节拍时用（跑一次性的 Python 脚本）
puppeteer	只在抓取页面时用，采集脚本会按需安装

Remotion 首次渲染时会自动下载自己的无头 Chrome。已在 macOS 上测试，Linux 参考下面的说明。

Linux 服务器 / 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 路径> 指定本地二进制。

加上这三个参数后，内置模板即可正常渲染。

项目结构

video-shotcraft/
├── SKILL.md                 # Agent 使用入口与核心制作规则
├── references/
│   ├── pipeline.md          # 完整制作流水线
│   ├── shots/               # 124 张镜头配方卡，按功能分 10 类
│   ├── sequences/           # 可复用的全片结构与桥段模板
│   ├── aesthetic-rules.md   # 视觉验收准则
│   ├── music-beat-sync.md   # BGM 节奏分析与卡点方法
│   ├── sound-design.md      # 声音设计方法与判例
│   ├── jianying-export.md   # 剪映工程导出方法
│   ├── publish-upload-post.md # 社交平台发布（可选，Upload-Post API）
│   └── workbench.md         # 动效工作台：成片接入契约 + 可编辑性规则
├── demos/                   # 镜头卡的 Remotion 参考实现（同类别目录）
├── gallery/                 # 在线样片画廊的静态站点
├── template/                # 可直接运行的完整成片模板
├── jianying-export/         # 剪映草稿安装模块（Mac 实测 / Windows 未验证）
├── publish/                 # 社交平台发布脚本（纯标准库 Python）+ 离线单测
├── workbench/               # 交付后的动效工作台（Vite + Remotion Player）
└── assets/
    ├── lib/                 # 可复制使用的 Remotion 组件
    ├── scripts/             # 页面素材采集脚本
    └── audio/               # 音频资产
        ├── bgm/             # 5 首 BGM 备选
        └── sfx/<类别>/      # 149 个音效，按场景分 16 类

完整工作流和实现要求见 SKILL.md、制作流水线与视觉验收准则。

音频与素材

音效按场景 / 材质分 16 类（transition impact riser camera ui text paper film light data scifi mech glass fluid crowd counter），找音先定类别再挑音色。类别索引与逐文件用途见 sound-design.md，来源与许可见 ATTRIBUTION.md。

模板内的产品截图为演示素材。对外发布成片前，请替换为你自己产品的截图，并确认其中的数据、客户信息和个人信息是否需要脱敏。

许可

代码与文档：Apache-2.0。
assets/audio/ 下的音频：各自按其授权使用，见 ATTRIBUTION.md。
Remotion 有自己的许可协议：个人与小团队免费，公司可能需要付费许可。

致谢

本库中许多镜头配方源自对优秀官方产品宣传片动效语言的研究学习，包括 ClickUp、Perplexity、Slack、Notion、 Figma、Framer、Bear、Raycast、Pitch、Miro、Superhuman、Loom 等产品的宣传片。镜头卡记录的是从零重新实现的动效技法（时序、缓动、编排），仓库中不包含上述影片的任何素材、画面或品牌资产。所有商标归各自所有者所有，上述公司与本项目无关联，亦未对本项目背书。

也感谢 Remotion——驱动本库全部 demo 与模板的 React 视频框架； Mixkit——库内音效与音乐素材的来源（免费授权）；游戏手感与动画社区的公开方法论，多张镜头卡受其启发；以及 Claude Code——本库自身的构建、迭代与验收都由它完成，用的正是这个 skill 教的工作流。