企业官网建设流程全解析

3步安装video-shotcraft：手把手教你做出第一支产品宣传片

【免费下载链接】video-shotcraftAI video skill for Claude Code & Codex — cinematic product videos with Remotion: 152 shot recipe cards, 209 motion previews, a production-ready template项目地址: https://gitcode.com/gh_mirrors/vi/video-shotcraft

video-shotcraft 是一款让 Claude Code / Codex 变身"动效工作室"的 AI 视频技能（skill）：3 步安装完成后，告诉它你的产品，它就能自动分镜、做动画、配电影级音效，产出一支 1920×1080 的电影感产品宣传片。

它替你打包了哪些"导演能力"：

• 🎬 152 张镜头配方卡 · 209 条动态样片，覆盖开场、运镜、转场、文字动效等 10 大类别
• 📼 一支已验收的完整成片模板Ink Press（墨压）：36.2 秒、30fps、10 个镜头
• 🖼️ 真实页面截图 + 2.5D 运镜 + 节奏卡点，而不是"PPT 感"动画
• 🔊 149 个免费授权音效，按 16 个场景分类，开箱即用
• ✂️ 成片可导出剪映工程，继续改字幕、变速、调色

⏱️ 安装前 30 秒准备清单

💡 不需要会写前端代码：Remotion 动画工程由 agent 编写和调整，你只负责提供素材、确认方向、验收效果。

🚀 第 1 步：安装 video-shotcraft（三种方式任选）

方式 A：让 agent 一句话装好（推荐）

在 Claude Code / Codex 里直接说：

帮我安装这个 skill：https://gitcode.com/gh_mirrors/vi/video-shotcraft

agent 会克隆仓库并链接到 skills 目录，全程不用你动手。

方式 B：手动克隆 + 符号链接

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

方式 C：一行命令（skills CLI）

npx skills add Vincentwei1021/video-shotcraft

装完不用做任何额外配置。验证方法：对 agent 说"用 video-shotcraft 给我的产品做一支宣传片"，它能认出这个 skill 并给出模式选择，就代表安装成功。agent 的入口与核心制作规则在 SKILL.md 中定义。

📣 第 2 步：说出你的第一个需求

安装后，需求怎么说直接决定出片方式。从最省心到最有创意，共三档：

① 模板模式（最快出片，强烈推荐新手）

用 video-shotcraft 的 Ink Press 模板给我的产品做一支宣传片。

agent 会按 template/TEMPLATE.md 里的结构，把演示产品换成你的截图、文案和品牌色，复现同等质感。模板本身是一支纸墨琥珀风宣传片：真实页面 2.5D 运镜、衬线字卡、暖白闪转场、钉到逐帧的电影感 SFX——这是质量最有保障的出片路径。

② 单镜头模式（只要一个动效）

用 deck-deal-flyin 和 row-embed 两张镜头卡展示这个功能。

从 152 张 镜头配方卡 里抽卡，每张卡都写明了用途、能量、建议时长、参数和"已知坑"，并附调校过的 demo 源码。

③ 自由创作 / 共同创作（完整新风格）

不指定模板时，agent 会按 references/pipeline.md 的八阶段流水线推进：产品理解 → 视觉方向 → 功能到镜头映射 → 分镜 → 素材采集 → 逐镜头实现 → 声音设计 → 验收。选"共同创作"的话，关键节点会停下来等你确认，适合想参与决策的新手。

📸 还没想好用哪些镜头？先翻 gallery/media/poster/ 下的 209 张动效封面挑一挑，看中哪张就把对应镜头卡名告诉 agent。

🎞️ 第 3 步：预览、验收并渲染成片

agent 交付前会自己做静帧自检，你也可以在本地跑起来亲手验收：

# 进入模板工程（template/ 目录） npm install && npx remotion studio src/index.ts # 浏览器实时预览 npx remotion render src/index.ts AiflPromo out/promo.mp4 # 渲染成片

• 单个镜头改完先出静帧：npx remotion still ... --frame=150，比反复渲染整片快得多
• 配了 BGM 的片子固定交付两版：带 BGM 版 + 无 BGM 版（保留音效），方便你后期自配音乐
• 🖥️ 低配机器 / 无显示器服务器渲染的三个救命参数：--concurrency=1、使用 chrome-headless-shell 二进制、--browser-executable=<本地路径>指定浏览器（详见 README_CN.md 的 Headless 注意事项）

🧰 进阶玩法：从"能出片"到"专业级"

❓ 新手常见问题

Q：我完全不会前端/Remotion，真的行吗？行。整个仓库的设计目标就是"agent 干活、你把关"：代码、缓动参数、音效钉帧都由 agent 按方法论完成，你的角色是提供真实截图、确认视觉方向、验收成片。

Q：只想学一个动效，不做完整视频可以吗？可以，这就是单镜头模式：指定任意一张镜头卡名，agent 会读卡全文、定位调校过的 demo 源码，把它适配到你的素材上。

Q：渲染报 "Maximum for --concurrency is 2" 怎么办？低核机器的典型问题，加--concurrency=1即可；CDN 下载浏览器失败时，再用--browser-executable指向本地 chrome-headless-shell。

Q：素材安全吗？模板内置截图是虚构演示数据。对外发布前，agent 会提醒你把整套素材替换成自己产品的截图，并核对页面里的客户信息、个人数据是否需要脱敏。

📖延伸阅读：完整功能与仓库结构见 README_CN.md，动手前建议通读 SKILL.md 的核心理念——那 8 条规则（真实截图、从产品生长视觉语言、每个镜头只讲一个动效……）正是成片"电影感"的来源。祝你的第一支产品宣传片早日上线 🎬

【免费下载链接】video-shotcraftAI video skill for Claude Code & Codex — cinematic product videos with Remotion: 152 shot recipe cards, 209 motion previews, a production-ready template项目地址: https://gitcode.com/gh_mirrors/vi/video-shotcraft