video-shotcraft
给 AI 助手的视频制作 Skill：把网页、截图和素材编排成带镜头运动、配音与音效的产品演示片。
中文简介经编辑校订 · 视频 Skill / 产品演示 / 镜头编排
README / 项目原文
What it does
Tell Claude Code or Codex "make a promo for my product". The agent captures your real pages, picks shots from a library of tuned motion recipes, storyboards the film, animates it with Remotion, cuts it to the beat, adds sound design, checks every frame and hands you a finished MP4 you can keep editing.
It is not a video generator. Every frame is drawn by code from your own screenshots and copy, so the result is sharp, on-brand and fully editable.
How it works
What's new
[!IMPORTANT]
🎬 2026-10 · Shot library refresh
All 216 demos were polished and reviewed. The best versions now make up 124 cards / 150 shots, with fresh Gallery previews and video-shotcraft branding.
- 2026-09 · Motion Workbench. Keep editing the delivered film in a CapCut-style browser editor.
- 2026-08 · video-talkcraft, the narration-video sibling: script + voiceover in, every motion beat locked to the voice (78 narration previews).
- 2026-08 · JianYing (CapCut CN) export. The final film becomes an editable JianYing draft: per-shot clips, native caption tracks, separate SFX/BGM tracks. Verified on JianYing Pro 11.2 for macOS (guide).
❤️ Sponsors
 APIMart |
Thanks to APIMart for sponsoring this project! APIMart is a low-cost API platform for AI image & video generation — GPT-Image-2 from $0.006/image, 160+ images per dollar. One async API covers both image and video: submit a task, get an ID, fetch results via polling or callback. Batch tens of thousands of images without timeouts, switch models without changing code. Pay-as-you-go with no monthly fee — sign up here to get started. |
 PackyCode |
Access leading AI models through PackyCode with one API endpoint and one API key. Enjoy fast, reliable access with automatic failover and dedicated high-speed routes for Codex and Claude Code. Get started with $1 in free credits, a discount on your first top-up, and savings of up to 80% on eligible routes. Pay in RMB with no currency conversion markups or extra top-up fees. |
 AWS |
Amazon Web Services (AWS) offers reliable, scalable cloud computing services, including compute, storage and AI. |
Install
Built and tuned for Claude Code and Codex. The simplest way is to hand your agent the link:
Install this skill for me: https://github.com/Vincentwei1021/video-shotcraft
Or with the skills CLI:
npx skills add Vincentwei1021/video-shotcraft
Or by hand:
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
In mainland China, clone from the AtomGit mirror if GitHub is slow:
git clone https://atomgit.com/VincentWei/video-shotcraft.git.
Use
Just describe the film. No command needed.
| Say | What happens |
|---|---|
Use video-shotcraft to make a promo for my product. |
The agent introduces the Ink Press template and asks whether to use it, then captures your pages and builds the film |
Make a launch film for this repo with the Ink Press template. |
The fastest path: your screenshots, copy and logo dropped into a validated template |
Use the deck-deal-flyin and row-embed shot cards to present this feature. |
You pick the shots by name (copy names straight from the Gallery) |
Design a product close-up inspired by spotlight-hero-card. |
One shot, adapted to your product |
Shot library
124 recipe cards in 10 categories, 150 shots in total. Search, filter and copy card names in the Gallery.
Opening & Brand · 11 shots text-as-mask: the product shows through the title |
Camera · 13 shots exploded-view: the page tilts and comes apart |
Transitions · 19 shots card-flock-tumble: a flock of cards becomes the headline |
Typography · 25 shots flying-words: a word tunnel resolves into the motto |
UI Entrance · 22 shots card-stack: a fan of cards deals into place |
Interaction · 13 shots palette-theme-ripple: a new theme ripples across the UI |
Data · 9 shots axis-rescale-shock: the spike breaks the axis |
Light & Emphasis · 23 shots spotlight-sweep: a stage light finds the title |
Rhythm · 8 shots paparazzi-flash: three flashes, three crops, one number |
Outro · 7 shots input-morph-assemble: the chat box builds the logo |
Each card lives in references/shots/<category>/<card>.md, with its Remotion implementation in
demos/<category>/<card>/ (see demos/README.md for how to wire one into your project).
Motion Workbench
After delivery the skill opens a CapCut-style editor in your browser
(node workbench/scripts/open.mjs <project>). The film is split into shot, transition, caption and SFX tracks
exactly as authored. Select any shot to edit its copy, font sizes and colours, move, trim or speed-ramp clips,
drag in any of the 150 library shots, then export with Remotion. Preview and render are frame-identical.
Workbench guide, every panel with screenshots (Chinese) · Integration contract
What you get
| Output | Details |
|---|---|
| Final film | MP4, 1920×1080, 30 fps, h264, with music and sound design |
| Remotion project | The full source of your film: every shot is a React component you or the agent can change |
| Motion Workbench | Opens after delivery: tracks, inspector, retime, swap shots, export (details) |
| JianYing draft | Optional: an editable JianYing (CapCut CN) project with per-shot clips, captions and audio tracks |
| Social publishing | Optional, when you ask: publish the finished film via Upload-Post to TikTok, Instagram, YouTube, LinkedIn, X and more. Confirm caption and platforms, then dry-run before posting (guide) |
Also in the box: reusable Remotion components (2.5D page camera, captions, flash cuts, digit rolls), 149 SFX and 5 BGM tracks, page-capture scripts, and the production method itself (capture, visual direction, storyboarding, sound design, beat sync, final QA) in references/.
Showcase
Share your film. Made something with video-shotcraft? Submit it with the Showcase issue form. After review it appears on the Showcase page.
Requirements
| Needs | For |
|---|---|
| Node.js and npm | Remotion rendering, the template and the workbench |
| ffmpeg / ffprobe | Frame checks and final QA |
| uv | Only for BGM beat analysis (runs a one-off Python script) |
| puppeteer | Only for page capture; the capture script installs it on demand |
Remotion downloads its own headless Chrome on first render. Tested on macOS; Linux works with the notes below.
Headless Linux / CI notes
Rendering on a headless Linux box (tested: 2 cores, Node 22) hits three walls:
- Concurrency cap.
remotion still/renderfails with "Maximum for --concurrency is 2" on low-core machines. Pass--concurrency=1. - Old headless removal. Recent Chrome/Chromium dropped the old headless mode, so pointing Remotion at system Chromium fails to launch. Use a chrome-headless-shell binary instead of full Chrome.
- Blocked CDN. If remotion.media is unreachable (common in mainland China), the automatic headless-shell
download fails. Pass
--browser-executable=<path-to-local chrome-headless-shell>.
With these three flags, frame renders from the bundled template work.
Repository structure
video-shotcraft/
├── SKILL.md # Agent entry point and core production rules
├── references/
│ ├── pipeline.md # End-to-end production workflow
│ ├── shots/ # 124 shot recipe cards in 10 functional categories
│ ├── sequences/ # Reusable full-video structures and sequence patterns
│ ├── aesthetic-rules.md # Visual QA criteria
│ ├── music-beat-sync.md # BGM analysis and beat-sync methodology
│ ├── sound-design.md # Sound-design guidance and examples
│ ├── jianying-export.md # JianYing (CapCut CN) project-export guide
│ ├── publish-upload-post.md # Optional social publishing (Upload-Post API)
│ └── workbench.md # Motion workbench: manifest contract + editability rules
├── demos/ # Remotion reference implementations (same categories)
├── gallery/ # Static motion-preview Gallery
├── template/ # Runnable complete video template
├── jianying-export/ # JianYing draft installers (mac tested / win untested)
├── publish/ # Optional social publisher (stdlib-only Python) + offline tests
├── workbench/ # Post-delivery motion workbench (Vite + Remotion Player)
└── assets/
├── lib/ # Reusable Remotion components
├── scripts/ # Page-asset capture scripts
└── audio/ # Audio assets
├── bgm/ # 5 BGM options
└── sfx/<category>/ # 149 SFX across 16 scene categories
For the full workflow see SKILL.md, the production pipeline and the visual QA criteria.
Audio and assets
SFX are organized into 16 scene and material categories (transition impact riser camera ui text
paper film light data scifi mech glass fluid crowd counter): pick the category first, then
the timbre. See sound-design.md for the index and per-file usage, and
ATTRIBUTION.md for sources and licenses.
Product screenshots bundled with the template are demonstration assets. Replace them with screenshots of your product before publishing, and check whether any product, customer or personal data needs to be anonymized.
License
- Code and docs: Apache-2.0.
- Audio under
assets/audio/: each file under its own license, see ATTRIBUTION.md. - Remotion has its own license: free for individuals and small teams, companies may need a paid license.
Acknowledgements
Many recipes were distilled by studying the motion language of outstanding official product films, including promos from ClickUp, Perplexity, Slack, Notion, Figma, Framer, Bear, Raycast, Pitch, Miro, Superhuman and Loom. The cards document techniques (timing, easing, choreography) re-implemented from scratch; no footage, artwork or brand assets from these films are included. All trademarks belong to their owners, and none of these companies are affiliated with or endorse this project.
Thanks also to Remotion, which powers every demo and template here; Mixkit, the source of the bundled SFX and music under its free license; the game-feel and animation communities whose published principles inform several cards; and Claude Code, with which this library was built, iterated and QA'd using the same workflow the skill teaches.
Follow me
Star history
它做什么
对 Claude Code 或 Codex 说一句「给我的产品做一支宣传片」。agent 会抓取你的真实页面，从调校好的动效配方库里挑镜头， 排分镜，用 Remotion 做动画，按音乐卡点剪辑，配上音效，逐帧检查，最后交给你一支 可以继续修改的 MP4。
它不是视频生成模型。每一帧都由代码基于你自己的截图和文案绘制，画面清晰、品牌准确，也能逐项修改。
流程
最近更新
[!IMPORTANT]
🎬 2026-10 · 镜头库更新
全库 216 个镜头经打磨与评审，择优保留 124 张卡 / 150 个镜头。 Gallery 样片已重新渲染，并统一采用 video-shotcraft 品牌素材。
- 2026-09 · 动效工作台：成片交付后，在剪映式的浏览器编辑器里继续改。
- 2026-08 · 系列新成员 video-talkcraft：口播视频版， 给它口播稿和成品配音，所有动效节拍都钉在人声上（78 条口播动效样片）。
- 2026-08 · 剪映工程导出：成片可导出为可编辑的剪映草稿——底片按镜头切段、字幕重建为原生文本轨、 SFX/BGM 独立音轨。Mac 剪映 11.2 实测验收（方法）。
❤️ 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 充值，无汇率加价及额外充值手续费。 |
|
AWS |
Amazon Web Services（AWS）提供稳定、可扩展的云计算服务，涵盖计算、存储和 AI。 |
安装
为 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 类
音频与素材
音效按场景 / 材质分 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 教的工作流。
关注我