video-shotcraft：用 Remotion 把产品页面做成可编辑宣传片
给Claude Code和Codex用的Remotion产品宣传片技能，成片还能在Motion Workbench或JianYing里继续编辑。
GitHub Vincentwei1021/video-shotcraft 更新 2026-11-15 分支 main 星标 19.6K 分叉 1.8K
TypeScript Remotion Claude Code Codex 产品宣传视频 Motion Workbench JianYing

🧭 决策指南

为什么现在热： 无法从材料判断

适合，如果你

  • 你用Claude Code或Codex，并希望把产品页面截图和文案做成MP4宣传片。
    README 的“What it does”和“Use”章节说明代理会捕获页面、选择镜头并生成成片。
  • 你需要从124张配方卡和150个镜头中挑选UI、数据或转场效果。
    README 的“Shot library”章节列出124 recipe cards、150 shots及10个类别。
  • 你希望交付后继续修改镜头、字幕、速度或颜色，而不是只拿到不可编辑视频。
    README 的“Motion Workbench”和“What you get”章节说明可编辑轨道、镜头属性和Remotion源码。
  • 你在macOS上使用JianYing Pro 11.2，需要分镜片段、字幕和音频轨道。
    README 的“What’s new”章节说明JianYing导出已在JianYing Pro 11.2 for macOS验证。

不适合，如果你

  • 你要的是通用视频生成器，而不是由代码根据截图和文案绘制每一帧的Remotion项目。
    README 的“What it does”明确写明“It is not a video generator”。
  • 你必须在Windows上依赖JianYing导出安装器完成交付。
    README 的Repository structure注明jianying-export为“mac tested / win untested”。
  • 你的Linux渲染环境无法提供chrome-headless-shell，或无法处理remotion.media下载限制。
    README 的“Headless Linux / CI notes”说明系统Chromium会失败，CDN不可达时自动下载也会失败。

前置条件

  • Node.js和npm：用于Remotion渲染、模板和Motion Workbench。
  • ffmpeg / ffprobe：用于帧检查和最终QA。
  • uv：仅用于BGM节拍分析的一次性Python脚本。
  • puppeteer：仅用于页面捕获，捕获脚本会按需安装。
  • Remotion首次渲染会自行下载headless Chrome。
  • Linux低核心环境需使用--concurrency=1、chrome-headless-shell，并在CDN不可达时传入--browser-executable=。

第一步命令（README 原文）

npx skills add Vincentwei1021/video-shotcraft

要注意

  • 中国大陆访问remotion.media受阻时，headless-shell自动下载会失败。
    README 的“Headless Linux / CI notes”明确列出Blocked CDN问题，并要求传入--browser-executable=。
  • 低核心Linux机器使用默认并发时，remotion still/render会触发最大并发为2的错误。
    README 的“Headless Linux / CI notes”记录了“Maximum for --concurrency is 2”。
  • Motion Workbench的编辑结果与预览、渲染被要求保持frame-identical。
    README 的“Motion Workbench”章节说明Preview and render are frame-identical。
  • 页面捕获依赖puppeteer，而BGM节拍分析依赖uv和一次性Python脚本。
    README 的“Requirements”表分别说明puppeteer与uv的用途。

材料未说明

  • README未说明完整安装后的磁盘占用和首次Remotion渲染耗时。
  • README未说明Claude Code或Codex的最低版本要求。
  • README未给出单个宣传片的平均生成时长或资源消耗。
  • README未说明124张配方卡是否覆盖特定语言、行业或品牌视觉规范。
  • README未说明JianYing Pro 11.2之外版本的导入兼容性。
  • README未提供自动化测试覆盖率或生产环境故障率。

💡 深度解析

6
适合 我在 macOS 上使用 JianYing Pro 11.2，需要继续修改每个镜头、原生字幕、SFX 和 BGM，而不是只拿到一个 MP4；这个项目的 JianYing 导出是否满足我的工作流？
适合读者： 在 macOS 上使用 JianYing Pro 11.2、希望把自动生成的产品视频交给传统时间线继续编辑的视频制作者

适合，因为你的 macOS 与 JianYing Pro 11.2 正好落在 README 已验证的导出环境内，而且导出结果包含分轨结构。

  • “What’s new” 写明 JianYing（CapCut CN）导出会把最终影片变成可编辑草稿，而不是压平后的单文件。
  • 导出包含按镜头拆分的视频、原生字幕轨道，以及独立的 SFX 和 BGM 轨道，正好对应你要继续调整的编辑边界。
  • “Repository structure” 中有 jianying-export/ 安装器和 references/jianying-export.md 指南，说明它是独立的交付路径。
  • README 明确说该能力已在 JianYing Pro 11.2 for macOS 验证；Windows 仍标为未测试，因此你的平台比 Windows 更符合项目已知条件。

它适合镜头级和音频轨道级后期，但不应被理解为完整替代 JianYing 的全部高级合成功能。

  • What’s new：JianYing (CapCut CN) export；per-shot clips, native caption tracks, separate SFX/BGM tracks
  • What’s new：Verified on JianYing Pro 11.2 for macOS
  • Repository structure：`jianying-export/`；`references/jianying-export.md`
npx skills add Vincentwei1021/video-shotcraft
材料未说明：README 没有列出 JianYing 草稿导出的完整兼容版本范围。；README 没有说明导入后复杂遮罩、混音或三维效果的保真程度。
视情况 我需要在 2 核、Node 22 的无头 Linux CI 机器上渲染 Remotion 视频，而且 remotion.media 可能无法访问；video-shotcraft 是否能在不改项目架构的情况下运行？
适合读者： 在 2 核、Node 22 的无头 Linux 或 CI 环境中渲染视频、且可能受中国大陆 CDN 访问限制的工程师

视情况：README 已记录这类环境的可行路径，但你必须自行提供兼容的 Chrome headless-shell 并显式限制渲染参数。

  • “Headless Linux / CI notes” 的测试环境就是 2 cores、Node 22，说明项目确实考虑了你的硬件约束。
  • 低核机器运行 remotion still/render 会遇到并发上限，README 要求传 --concurrency=1。
  • 近期 Chrome/Chromium 移除了旧 headless 模式，不能简单指向系统 Chromium，而要使用 chrome-headless-shell。
  • 如果大陆网络无法访问 remotion.media，自动下载 headless-shell 会失败；README 指定用 --browser-executable= 指向本地浏览器。项目同时要求 ffmpeg/ffprobe 做逐帧检查和最终 QA。

所以架构无需替换，但 CI 镜像、浏览器路径和并发配置不能照默认值直接运行。

  • Headless Linux / CI notes：tested: 2 cores, Node 22
  • Headless Linux / CI notes：Pass `--concurrency=1`
  • Headless Linux / CI notes：Use a chrome-headless-shell binary instead of full Chrome
  • Headless Linux / CI notes：Pass `--browser-executable=`
材料未说明：README 没有给出 CI 镜像、headless-shell 版本和 ffmpeg 版本的固定组合。；README 没有提供完整的 CI 配置文件或可直接复制的渲染命令。
适合 我只有产品网页、截图、Logo 和几段卖点文案，希望用 Claude Code 或 Codex 通过自然语言快速做出一条可编辑的产品宣传片，而不是学习完整的视频剪辑流程；video-shotcraft 适合我吗？
适合读者： 使用 Claude Code 或 Codex、需要为 SaaS 或开发者工具快速制作产品宣传片的独立开发者

适合，因为项目的入口就是让 Claude Code 或 Codex 根据自然语言编排产品宣传片，而且输出不只是 MP4。

  • README 的 “What it does” 明确写着可以告诉代理 “make a promo for my product”，代理会捕获真实页面、挑选镜头、制作分镜、加入节拍和音效，并检查每一帧。
  • “Use” 章节提供了最快路径：使用 Ink Press 模板，把截图、文案和 Logo 放入已验证模板；也可以从 Gallery 复制镜头名称。
  • 成品由代码根据用户截图和文案绘制，不依赖随机生成画面，并可继续保留 Remotion 源代码。
  • 安装可直接通过 skills CLI 完成，但仍需要 Node.js、npm、Remotion 和 Chrome 等本地环境。

因此，它降低的是制作流程门槛，不是素材准备和产品叙事判断的门槛。

  • What it does：Tell Claude Code or Codex "make a promo for my product"
  • Use：The fastest path: your screenshots, copy and logo dropped into a validated template
  • What it does：Every frame is drawn by code from your own screenshots and copy
  • Requirements：Node.js and npm；Remotion downloads its own headless Chrome on first render
npx skills add Vincentwei1021/video-shotcraft
材料未说明：README 没有说明代理对产品定位、文案质量或素材缺失的具体容错程度。；README 没有给出从首次安装到完成渲染的平均耗时。
适合 我们要交付 1920×1080、30fps、H.264 的产品发布片，并希望营销人员能在浏览器里修改文案、颜色、位置、时长和速度，同时让开发者保留 Remotion 源代码；这个项目是否匹配我们的交付约束？
适合读者： 需要交付 1920×1080、30fps、H.264 MP4，并希望同时保留浏览器编辑和 Remotion 源代码的小型产品营销团队

适合，因为项目同时覆盖你要求的 MP4 规格、浏览器后期编辑和 Remotion 源代码交付。

  • 项目洞察列出的输出是 1920×1080、30fps、H.264 MP4，并包含完整 Remotion 项目源代码，与你的成片规格一致。
  • “What’s new” 介绍的 Motion Workbench 是类似 CapCut 的浏览器编辑器；项目洞察进一步列出可修改文案、字体、颜色、位置、时长和速度，并可替换镜头后重新导出。
  • README 的 “What it does” 说明最终 MP4 可以继续编辑；仓库结构显示 Workbench 基于 Vite 和 Remotion Player。
  • 代码化渲染让预览和成片保持帧级一致，这是同时服务营销编辑和开发维护的重要条件。

限制在于 README 没有把它描述成完整专业非线性编辑器，因此复杂遮罩、三维合成和任意时间线操作仍可能要回到 Remotion 或其他软件。

  • 项目洞察 / key_features：输出包括 1920×1080、30fps、H.264 MP4 和完整 Remotion 项目源代码
  • 项目洞察 / key_features：Motion Workbench 可修改文案、字体、颜色、位置、时长和速度
  • What’s new：Motion Workbench；Keep editing the delivered film in a CapCut-style browser editor
  • 项目洞察 / architectural_strengths：预览和渲染均基于 Remotion，二者保持帧级一致
npx skills add Vincentwei1021/video-shotcraft
材料未说明：README 未说明 Motion Workbench 是否支持多人协作、权限控制或项目版本历史。；README 未说明除 1920×1080、30fps、H.264 外的自定义输出规格。
适合 我已经使用 React、TypeScript 和 Remotion，希望从 124 张镜头配方卡和现有组件开始，并在需要时自己扩展镜头；这个仓库能作为可复用的视频代码基础吗？
适合读者： 熟悉 React、TypeScript 和 Remotion、希望复用镜头组件并继续编写自定义动效的前端或动效开发者

适合，尤其适合作为 Remotion 产品视频的镜头资产和模板基础，而不是只把它当成一次性生成器。

  • “Shot library” 列出 124 张配方卡、150 个镜头，覆盖 Opening、Camera、Transitions、Typography、UI Entrance、Data、Rhythm 等 10 类，便于按功能检索和组合。
  • 每张卡位于 references/shots/，对应的 Remotion 实现在 demos/；README 还明确说明可接入自己的项目。
  • “Repository structure” 显示 assets/lib/ 存放可复用 Remotion 组件，template/ 是完整可运行模板，workbench/ 则基于 Vite 和 Remotion Player 提供交付后的编辑能力。
  • 项目主语言是 TypeScript，且 README 明确使用代码绘制每一帧，因此适合需要版本化、复现和扩展镜头逻辑的开发者。

但镜头库会对视觉语言形成约束；非卡片式创意仍需要你自己编写新的 Remotion 镜头。

  • Shot library：124 recipe cards in 10 categories, 150 shots in total
  • Shot library：Each card lives in `references/shots/`, with its Remotion implementation in `demos/`
  • Repository structure：`assets/lib/`、`template/`、`workbench/`
  • 项目数据：main_language 为 TypeScript
材料未说明：README 没有说明这些组件是否作为独立 npm 包发布。；README 没有定义镜头 API 的长期兼容性或版本化策略。
视情况 我负责一个需要登录、权限控制和大量交互的 SaaS 产品，宣传片必须展示真实 UI；由于我不想使用 AI 生成的虚假界面，video-shotcraft 能稳定完成页面捕获吗？
适合读者： 需要从受保护或高度动态网页捕获真实产品界面的 SaaS 产品营销人员

视情况：项目强调真实网页和截图，但 README 同时明确提醒 Puppeteer 对登录、权限保护、强交互和高度动态页面的捕获可能不稳定。

  • “What it does” 说明代理会捕获用户的真实页面，并用截图和文案生成画面；这符合你拒绝虚假 UI 的要求。
  • “Requirements” 指出页面捕获依赖 Puppeteer，且捕获脚本会按需安装它。
  • 项目洞察列出的常见陷阱明确包括需要登录、受权限保护、强交互或高度动态渲染的页面，这类页面可能无法稳定捕获。
  • 即使捕获成功，页面内容仍需适合录制；项目更偏向软件产品界面宣传，而不是任意网页自动录制。

因此，真实 UI 是它的设计目标，但你这类页面的认证流程、动态状态和可复现捕获方式仍是未解决的工程条件。

  • What it does：The agent captures your real pages
  • Requirements：puppeteer；Only for page capture
  • 项目洞察 / common_pitfalls：需要登录、受权限保护、强交互或高度动态渲染的页面，可能无法稳定捕获
  • 项目洞察 / usage_limitations：项目主要优化的是软件产品宣传片和数字界面展示
npx skills add Vincentwei1021/video-shotcraft
材料未说明：README 没有说明如何配置登录态、Cookie、SSO 或多角色权限。；README 没有定义 Puppeteer 对 WebSocket、拖拽和异步数据加载等交互的支持边界。

✨ 核心亮点

  • 124张配方卡覆盖150个Remotion镜头
  • Motion Workbench支持浏览器内剪辑与导出
  • JianYing Pro 11.2可接收可编辑草稿
  • 输出1920×1080、30fps的MP4成片

🔧 工程化

  • Claude Code或Codex读取页面截图和文案，调用Remotion生成宣传片
  • Motion Workbench可编辑镜头、字幕、SFX轨道并用Remotion导出
  • 可选导出JianYing草稿，包含分镜片段、字幕和音频轨道

⚠️ 风险

  • Linux低核心机器需处理Remotion并发上限并传入--concurrency=1
  • 系统Chromium可能因旧headless模式移除而无法启动
  • JianYing导出在macOS验证，Windows安装器仍未测试
  • README要求Node.js、npm、ffmpeg和ffprobe等运行依赖

👥 适合谁？

  • 使用Claude Code或Codex制作产品宣传片的开发者
  • 需要保留React组件源码并继续编辑Remotion成片的团队
  • 使用macOS与JianYing Pro 11.2交付可编辑草稿的创作者