两个免费开源 AI Skills：快速制作电影感项目演示视频

Tue, 28 Jul 2026 15:04:00 +0800

制作一个像样的项目演示视频，通常需要完成脚本、录屏、动画、架构图、音效和剪辑等多个步骤。

现在可以借助两个开源 AI Skills，简化其中最耗时间的两个环节：

video-shotcraft：生成电影感产品演示和项目开场动画
Archify：将代码仓库或系统描述转换成技术架构图

它们可以配合 Claude Code、Codex 等 AI 编程助手使用，比较适合开发者制作产品发布视频、GitHub 项目介绍、SaaS 功能演示和技术方案展示。

video-shotcraft：生成电影感项目演示视频

video-shotcraft 是一个面向 Claude Code 和 Codex 的 AI 视频制作 Skill。

它基于 Remotion 工作流，将项目页面、产品截图和功能素材组合成具有镜头运动、节奏切换和音效设计的演示视频。

项目内提供了：

106 个镜头设计方案
161 个动态效果预览
可直接修改的 Remotion 视频模板
页面截图与界面展示方案
2.5D 镜头移动效果
节奏同步剪辑与音效设计方法

使用时，可以让 AI 分析项目特点，生成分镜方案，再通过 Remotion 渲染为视频。

它适合制作：

GitHub 开源项目介绍
SaaS 产品发布视频
网站首页功能演示
软件更新宣传片
应用功能预告片

需要注意的是，video-shotcraft 提供的示例项目和默认模板包含作者自己的产品界面。

正式制作时，应替换以下内容：

产品截图
网站页面
项目名称
功能演示素材
配色与视觉元素
音效和背景音乐

不要直接使用默认素材，否则最终视频可能更像原项目的宣传片，而不是你自己的项目演示。

Archify：把代码仓库转换成架构图

Archify 是一个面向 Cursor、Claude Code、Codex CLI 和 OpenCode 的技术架构可视化 Skill。

你可以向它提供：

一个代码仓库
一段系统结构说明
服务之间的调用关系
产品业务流程
数据流和生命周期描述

Archify 会将这些信息整理成可交互的技术架构图。

目前支持的主要图表类型包括：

系统架构图
工作流程图
时序关系图
数据流图
生命周期图

生成结果可以导出为：

HTML
PNG
SVG
WebM
社交媒体分享图

与普通静态架构图相比，Archify 更强调结构验证、节点关系、上下游路径和架构变更对比，适合用于技术文档、项目汇报和代码评审。

注意：Archify 当前没有把“自动解析 Mermaid 代码”列为支持范围。更稳妥的方式是直接提供代码仓库或用自然语言描述系统结构。

两个 Skill 如何组合使用

可以按照下面的流程制作一条完整的项目演示视频：

分析项目
   ↓
整理核心功能和演示重点
   ↓
使用 Archify 生成项目架构图
   ↓
准备网站截图和功能录屏
   ↓
使用 video-shotcraft 设计分镜与动画
   ↓
替换默认项目素材
   ↓
通过 Remotion 渲染视频
   ↓
检查字幕、节奏、音效和项目名称

Archify 负责把项目结构讲清楚，video-shotcraft 负责把项目展示得更有电影感。

例如，一条开源项目介绍视频可以这样安排：

使用 video-shotcraft 制作项目 Logo 或首页的开场动画。
展示项目解决的问题和核心功能。
插入 Archify 生成的系统架构图。
展示真实页面截图或功能操作过程。
用简短总结说明项目适用场景。
在结尾展示 GitHub 项目地址。

安装方式

两个项目都属于命令行工具，需要先准备 Node.js、Git 和相应的 AI 编程助手。

Archify 可以使用 Skills CLI 安装：

`1`	`npx skills add tt-a1i/archify -g`

安装完成后，可以向 AI 助手输入：

`1`	`Use archify to map this repository's runtime architecture.`

video-shotcraft 可以通过仓库说明中的 Skills CLI、克隆仓库或手动链接方式安装。

对于不熟悉命令行的用户，可以直接把 GitHub 仓库地址交给 Claude Code、Codex 或其他具有终端操作能力的 AI 助手，并要求它：

1
2

请阅读这个项目的 README，检查本地环境，完成安装并运行示例。
遇到错误时先分析原因，再逐步修复，不要跳过依赖检查。

使用建议

第一次使用时，不建议直接让 AI 生成完整视频。

更稳定的流程是：

先生成视频脚本。
确认需要展示的功能。
准备真实项目截图。
单独生成架构图。
再制作分镜和动画。
最后统一渲染成片。

这样可以避免出现界面与项目无关、架构图信息错误、镜头节奏混乱以及默认模板没有替换等问题。

总结

video-shotcraft 和 Archify 解决的是项目演示中的两个不同问题：

video-shotcraft：让产品展示更有镜头感和视觉节奏。
Archify：让系统架构和技术流程更容易理解。

它们不会自动替代完整的视频制作流程，但可以明显减少架构图绘制、镜头设计和动画开发中的重复工作。

对于需要经常发布 GitHub 项目、SaaS 产品、开发工具或技术方案的开发者，这套组合值得尝试。

项目地址

video-shotcraft：https://github.com/Vincentwei1021/video-shotcraft
Archify：https://github.com/tt-a1i/archify

Remotion：用 React 批量生成固定栏目、排行榜和数据周报

Tue, 28 Jul 2026 13:38:00 +0800

每周都要制作相似的视频内容，例如固定栏目、产品排行榜、行业数据周报，如果每次都重新改文字、换图片、调整动画，不仅耗时，还容易出现排版不一致的问题。

Remotion 提供了一种更适合批量生产的方式：使用 React、CSS、SVG、Canvas 等网页技术编写视频模板，再把标题、图片、排名、价格、数据和字幕作为参数传入，自动生成不同版本的视频。

Remotion 能做什么？

Remotion 的核心不是“自动剪辑”，而是用代码创建可重复使用的视频模板。

例如，可以先制作一个排行榜视频模板，然后只替换数据：

const rankingData = [
  { name: "项目 A", stars: 52000 },
  { name: "项目 B", stars: 43000 },
  { name: "项目 C", stars: 38000 },
];

当排行榜数据发生变化时，不需要重新设计视频，只需要更新数据，就可以再次渲染生成新的 MP4 文件。

适合哪些内容？

Remotion 特别适合结构固定、需要持续更新的视频内容，例如：

GitHub 热门项目排行榜
AI 工具推荐栏目
每周科技新闻速览
网站流量数据周报
电商产品榜单
股票或行业数据动画
批量商品宣传视频
个性化年度总结视频

对于这类内容，模板通常保持不变，变化的只是标题、图片、排名和数据，因此非常适合自动化生成。

为什么它能减少重复工作？

传统制作方式中，每一期视频都需要手动复制工程、修改文字、替换图片并重新检查动画。

使用 Remotion 后，可以把整个流程拆成三部分：

视频模板：负责画面布局、动画和转场。
内容数据：保存标题、图片、排行榜和统计数据。
渲染脚本：自动读取数据并输出 MP4 视频。

以后更新栏目时，只需要修改 JSON、表格或接口数据，就能生成新的视频内容。

Remotion 的主要优势

使用 React 编写视频，前端开发者容易上手
支持 CSS、SVG、Canvas 和 WebGL
视频中的文字、图片和数据都可以动态替换
可以连接 API、数据库或 JSON 文件
支持批量生成多个不同版本
最终可渲染为 MP4 视频
适合接入自动化内容生产流程

使用前需要注意

Remotion 更适合有一定前端或 JavaScript 基础的用户。它不是传统的拖拽式剪辑软件，第一次使用时仍需要编写模板和配置渲染环境。

另外，Remotion 采用特殊许可证。个人项目和部分小型项目通常可以使用，但企业在正式投入生产前，应查看官方最新许可证说明。

总结

Remotion 最有价值的地方，不是帮你做一条视频，而是帮你建立一套可以反复使用的视频生产系统。

固定栏目、排行榜、数据周报和批量营销视频，只需要设计一次模板，后续更新数据即可重新生成，能够明显减少重复剪辑和排版工作。

项目地址

GitHub：https://github.com/remotion-dev/remotion

Remotion on 拾光集

两个免费开源 AI Skills：快速制作电影感项目演示视频

video-shotcraft：生成电影感项目演示视频

Archify：把代码仓库转换成架构图

两个 Skill 如何组合使用

安装方式

使用建议

总结

项目地址

Remotion：用 React 批量生成固定栏目、排行榜和数据周报

Remotion 能做什么？

适合哪些内容？

为什么它能减少重复工作？

Remotion 的主要优势

使用前需要注意

总结

项目地址