如何用AI+IDE和自然语言驱动视频创作

Posted on

核心结论：

产品人员可以通过 “自然语言描述需求 → AI生成视频代码 → 增量迭代验证” 的工作流，将想法直接转化为高质量视频内容，无需学习 AE、DaVinci、Final cut pro 等专业剪辑软件。

一、为什么要用 AI+IDE 做视频？

传统视频制作的痛点

痛点 描述
工具门槛高 AE、DaVinci、Premiere 等专业软件学习成本极高
时间成本高 一个 1 分钟的产品介绍视频，专业剪辑需要 3-5 天
协作困难 产品想法需要反复传递给设计师，容易失真
修改成本高 调整一个动画细节，可能需要重新渲染整个视频

AI+IDE 视频创作的优势

  1. 零学习成本：用自然语言描述即可，无需掌握时间轴、关键帧等概念
  2. 代码即视频：所有动画都用代码描述，版本可控，可追溯
  3. 增量迭代：小步快跑，随时调整，即时预览
  4. 一键渲染：代码写完后，一键生成 MP4 视频

二、方法论：自然语言 → 代码 → 视频

核心思维链

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

graph LR

A[自然语言需求] --> B[AI生成视频代码]

B --> C[本地运行预览]

C --> D[验证效果]

D -->|不满意| E[追加指令调整]

E --> B

D -->|满意| F[渲染输出MP4]

实践案例：Wealth Copilot 产品介绍视频

背景：需要将一份 HTML 格式的 PPT 演示文稿（7 页 slides）转换为产品宣传视频。

完整工作流程：

Step 1: 需求描述

向 AI 提供清晰的需求：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

我需要用 Remotion 制作一个产品介绍视频。
素材来源：solutions/presentation_market.html
这是一个关于 "AI-Native Wealth Insight Copilot" 的演示文稿，包含 7 个 slides：

1. 标题页 - 展示产品名称和关键指标
2. 核心价值 - 客户价值与业务价值
3. SOP 设计 - 工作流程图
4. 合规框架 - 4层合规架构
5. 零幻觉策略 - 安全保障措施
6. 真实案例 - 两个使用场景
7. 总结 - 4个核心要点

要求：
- 视频尺寸 1920x1080
- 每个 slide 展示 6 秒
- 添加平滑的转场动画
- 使用红色主题色 #dc001c
- 动画风格：专业、简洁

Step 2: AI 生成项目框架

AI 会自动创建 Remotion 项目结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
movie/
├── package.json # 项目配置
├── tsconfig.json # TypeScript 配置
├── remotion.config.ts # Remotion 配置
├── src/
│ ├── index.tsx # 入口文件
│ ├── Video.tsx # 视频主组件
│ └── components/ # Slide 组件
│ ├── TitleSlide.tsx
│ ├── CoreValueSlide.tsx
│ ├── SOPDesignSlide.tsx
│ ├── ComplianceSlide.tsx
│ ├── AntiHallucinationSlide.tsx
│ ├── ExamplesSlide.tsx
│ ├── SummarySlide.tsx
│ └── Transition.tsx
└── out/
└── video.mp4 # 最终输出

Step 3: 增量迭代开发

第一轮：先让 AI 创建基础框架和第一个 slide

1
2
3
4
5
6
7
请先帮我：
1. 初始化 Remotion 项目
2. 创建 Video.tsx，定义 7 个 slide 的时间轴
3. 先实现 TitleSlide 组件，包含：
- 标题 "AI-Native Wealth Insight Copilot"
- 副标题高亮框
- 4 个关键指标卡片（带动画）

第二轮：验证效果，继续添加其他 slides

1
2
3
TitleSlide 看起来不错！请继续创建：
- CoreValueSlide：左右两栏布局，展示 For Customers / For Business
- SOPDesignSlide：顶部流程图 + 底部两个信息卡片

第三轮：添加转场效果

1
2
3
4
请在每个 slide 之间添加转场动画：
- 使用红色主题色的滑入效果
- 奇数 slide 从左滑入，偶数从右滑入
- 转场时长 0.5 秒

Step 4: 本地预览与调整

1
2
3
4
# 启动 Remotion Studio 实时预览
npm run dev
# 或直接渲染视频
npm run build

Step 5: 最终渲染输出

45 秒后，得到 out/video.mp4：

  • 1920x1080 高清分辨率
  • 7 个 slides，每个 6 秒
  • 流畅的 spring 动画
  • 专业的红色主题转场

三、核心技巧与指令模板

1. 视频描述的最佳实践

好的描述：

1
2
3
4
5
6
7
8
9
10
生成一个产品介绍视频，要求：
- 尺寸：1920x1080
- 时长：45秒（7个slides，每个6秒）
- 主题色：#dc001c（红色）
- 动画要求：
* 标题从下方弹性滑入
* 卡片依次弹出，间隔0.5秒
* 使用 spring 动画曲线
* 列表项从左侧滑入
- 转场：红色背景滑入滑出，交替方向

差的描述：

1
做个产品介绍视频，好看一点。

2. 常用的动画指令模板

效果 指令模板
弹性滑入 “从下方滑入，使用 spring 动画，damping: 15, stiffness: 150”
依次弹出 “元素依次出现，每个延迟 15 帧，使用 scale 从 0.8 到 1”
淡入 “透明度从 0 到 1，持续 20 帧”
列表滑入 “从左侧滑入，每个元素延迟 10 帧”
转场 “红色背景从左侧滑入覆盖，0.5 秒后从右侧滑出”

3. 增量迭代的沟通策略

不要一次性要求太多：

1
2
3
4
5
6
错误："请帮我创建所有 7 个 slides，每个都要有复杂的动画"
正确：
1. "先创建项目框架和第一个 slide"
2. "验证 OK 后，再创建第 2-3 个 slides"
3. "继续添加剩余的 slides"
4. "最后添加转场效果"

4. 处理 AI 生成错误

当渲染出错时，使用 **”删除法”**：

1
2
3
4
5
渲染时报错：Minified React error #130
请帮我：
1. 先删除复杂动画，用最简单的静态布局测试
2. 确认能正常渲染后，再逐步添加动画
3. 每次只添加一个动画效果，验证后再继续

四、工具链选择

工具 适用场景 优势
Remotion + React 数据驱动型视频、产品演示、宣传视频 代码可控、版本管理、React 生态
Motion/Framer Motion 简单的 UI 动画录屏 学习成本低、React 原生支持
HTML/CSS + 录屏 一次性简单视频 无需框架、快速原型

推荐技术栈

对于产品宣传视频，强烈推荐 Remotion：

1
2
3
4
5
6
7
8
9
{

 "dependencies": {
 "remotion": "^4.0.421",
 "react": "^18.2.0",
 "typescript": "^5.3.0"
 }
}

为什么选择 Remotion？

  1. React 友好：使用熟悉的 JSX 语法描述视频
  2. 时间精确：帧级别的动画控制
  3. 参数化：可以通过 props 调整视频内容
  4. 可编程：数据驱动，可以从 API 获取内容生成视频
  5. 高质量：渲染输出为 H.264 编码的 MP4

    进阶工具：Remotion Skills

Remotion Skills 是官方提供的最佳实践检查工具，可以自动分析你的代码并提供优化建议。
安装方式：

1
2
3
4
# 方式 1：使用 Skill.sh 命令行（推荐）
npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices
# 方式 2：从 GitHub 仓库下载
# 下载 https://github.com/remotion-dev/remotion/tree/main/packages/skills

示例输出：

1
2
3
4
✓ 使用 spring 动画替代线性动画，提升视觉效果
✓ 建议使用 Sequence 组件管理时间轴
⚠ 发现未使用的 import，建议清理
✓ 图片建议使用 @remotion/media-utils 进行预加载

这个工具特别适合在项目完成后或遇到性能问题时使用，能够帮助你写出更专业、更高效的 Remotion 代码。

五、从实践总结的方法论

核心心法

“视频创作的未来不是剪辑，而是描述。”

传统流程：

1
2
3
4
想法 → 画分镜 → 找素材 → 剪辑 → 渲染 → 修改 → 重新渲染
↑___________________________________________↓

（循环多次，耗时数天）

AI+IDE 流程：

1
2
3
想法 → 自然语言描述 → AI生成代码 → 预览 → 追加指令 → 渲染
↑______________↓
（分钟级迭代）

关键成功因素

  1. 需求描述要具体
  • 明确尺寸、时长、颜色
  • 描述动画的起止状态和持续时间
  • 提供参考示例或截图
  1. 采用增量开发
  • 先框架，后细节
  • 先静态，后动画
  • 先单页，后多页
  1. 建立反馈循环
  • 每完成一个阶段就预览验证
  • 发现问题立即调整，不累积
  • 使用版本控制（git）管理代码
  1. 理解动画原理
  • 掌握基本的动画概念：opacity、transform、spring、easing
  • 知道如何描述时间：帧 vs 秒（30fps 下 30 帧 = 1 秒）
  • 学会使用 spring 物理动画替代简单的线性动画

六、完整指令模板

项目初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
请帮我创建一个 Remotion 视频项目：

项目需求：
- 视频主题：[描述视频内容]
- 尺寸：1920x1080
- 帧率：30fps
- 总时长：[X 秒]
- 包含 [N] 个场景/页面

请创建完整的项目结构：
1. package.json（包含 remotion 依赖）
2. tsconfig.json
3. remotion.config.ts
4. src/index.tsx（入口）
5. src/Video.tsx（主组件）
6. src/components/ 下的各个 Slide 组件

转场效果

1
2
3
4
5
6
7
8
请在 slides 之间添加转场效果：

要求：
- 类型：滑入滑出
- 颜色：[主题色]
- 方向：交替从左/右滑入
- 时长：0.5 秒（15 帧）
- 实现方式：使用 Remotion 的 Sequence 组件

写在最后

通过 Wealth Copilot 视频的实践，我验证了这套方法的可行性：
从需求到视频，45 分钟完成：

  • 5 分钟：描述需求，AI 生成项目框架
  • 20 分钟：增量开发 7 个 slides
  • 10 分钟：添加动画和转场
  • 10 分钟：调试优化
  • 45 秒：最终渲染输出

相比传统方式的优势：

  • AE/DaVinci：学习 1 个月，制作 3-5 天
  • AI+Remotion：描述 5 分钟，制作 40 分钟

终极心法：
**”你的指令越精准，AI 的视频越可靠；你的描述越清晰，视频的传播力越强。”**
视频创作不再是设计师的专利，产品人员用自然语言也能创作出专业级的产品宣传视频。

参考资源：