code-video-showcase：使用 Claude Code 通过代码生成卡点展示视频

一、项目介绍

平时制作产品宣传片、技术演示视频或个人博客介绍视频，通常需要使用专业的视频剪辑软件，或者借助 AI 视频生成工具。

有没有一种方式，可以直接通过代码绘制动画、使用程序合成音频，再将它们组合成一支完整的视频？

code-video-showcase 就是一个值得关注的开源项目。它提供了一个面向 Agent 的 Skill，利用 HTML、Canvas、SVG、Three.js、Python 和 FFmpeg 等技术，制作具有节奏感的展示视频。

它的核心思路是：让 AI 编写视频画面代码，再通过程序化渲染和音频合成，生成最终的 MP4 文件。

项目不依赖 AI 图像、视频或音乐生成模型，主要依靠代码实现画面、动画和音频。

GitHub 仓库：Moessif/code-video-showcase

二、它能用来做什么？

这个项目更适合制作以动态文字、图形、数据可视化和程序化动画为主的视频。

1. 技术产品宣传片

例如制作个人博客、开发工具或 SaaS 产品的介绍视频：

• 动态展示产品名称和品牌标识。
• 使用科技网格、粒子、光效和动态文字。
• 展示技术栈、产品功能与核心卖点。
• 配合音乐节奏切换画面。

2. 技术知识科普视频

对于前端开发者而言，也可以利用它制作技术知识动画。

例如：

• Vue 响应式原理。
• JavaScript 事件循环。
• 浏览器渲染流程。
• HTTP 请求与网络通信。
• AI Agent 的工作流程。

这类内容可以通过代码绘制流程图、节点关系、时间轴和动态示意图。

3. 创意展示与视觉实验

项目还提供了多种视觉风格的参考方案，包括：

• 极简产品发布风格。
• 手绘白板风格。
• 赛博故障风格。
• 水墨国风。
• 数据可视化。
• 8-bit 像素风格。
• Three.js 三维动画。
• 代码演示与竖屏短视频风格。

这些风格为视频设计提供了起点，但具体效果仍然取决于实际编写的画面代码和动画设计。

三、项目的技术原理

这个项目不是传统意义上的视频编辑器，也不是直接生成视频文件的大模型。它将视频制作拆分为几个可以由程序完成的环节。

1. 整体架构

用户描述视频需求
       |
       v
Claude Code + code-video-showcase Skill
       |
       v
分析需求，规划视频结构和时间轴
       |
       +----------------------+
       |                      |
       v                      v
HTML / Canvas / SVG       Python 音频合成
Three.js 动画             NumPy / SciPy
       |                      |
       v                      v
Playwright + Chromium     WAV 音频文件
逐帧渲染画面                  |
       |                      |
       +-----------+----------+
                   |
                   v
             FFmpeg 合成编码
                   |
                   v
                MP4 视频

2. 使用 HTML、Canvas、SVG 和 Three.js 绘制画面

对于前端开发者来说，这部分应该比较容易理解。

视频中的画面本质上可以看作一个随时间变化的网页。通过 HTML 和 CSS 构建布局，利用 Canvas 绘制粒子和图形，使用 SVG 绘制矢量图形，或者通过 Three.js 创建三维场景。

例如，下面是一个简单的时间驱动动画：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      width: 1920px;
      height: 1080px;
      overflow: hidden;
      display: grid;
      place-items: center;
      background: #090d18;
      color: white;
      font-family: Arial, sans-serif;
    }

    h1 {
      font-size: 96px;
      opacity: 0;
      transform: translateY(40px);
    }
  </style>
</head>
<body>
  <h1 id="title">Code the Future</h1>

  <script>
    function renderFrame(t) {
      const title = document.querySelector("#title");

      const progress = Math.max(
        0,
        Math.min(1, t / 1.2)
      );

      title.style.opacity = progress;
      title.style.transform =
        `translateY(${40 * (1 - progress)}px)`;
    }

    // 测试：渲染时间为 0.8 秒的画面
    renderFrame(0.8);
  </script>
</body>
</html>

这里的 renderFrame(t) 根据传入的时间决定画面状态。项目的实际模板会在此基础上组织动画，并配合浏览器逐帧渲染。

需要注意，这只是演示原理的简化代码，并不是可以直接替代项目模板的完整视频片段。

3. 为什么强调确定性渲染？

传统网页动画通常依赖浏览器的动画循环，例如 requestAnimationFrame、CSS Animation 或实时计时器。

但在视频制作中，如果需要渲染第 100 帧，就应该能够直接计算出第 100 帧对应的画面，而不必从第一帧开始播放。

因此，项目强调让画面状态由时间参数决定：

renderFrame(timeInSeconds);

例如，在 30 FPS 的视频中：

• 第 0 帧对应 0 秒。
• 第 30 帧对应 1 秒。
• 第 60 帧对应 2 秒。

只要动画逻辑和输入一致，就可以独立渲染指定时间点的画面，也方便重复渲染、定位错误和检查输出。

这也是项目避免使用依赖真实时间的动画逻辑、非固定随机数等方式的重要原因。

4. 使用 Python 合成音频

项目通过 Python、NumPy 和 SciPy 等工具生成程序化音频。

这种方式可以根据 BPM、节拍位置、音符、音效和时间轴设计音乐，使声音与画面切换保持一致。

需要注意，程序合成音频并不等于生成完整的商业配乐。音色、编排和听感仍然需要设计与调整。

另外，项目当前提供的 synth_audio.py 示例主要用于生成短音频演示。要制作完整的长视频配乐，需要进一步配置音频编排。

5. 使用 FFmpeg 合成视频

当画面和音频准备完成后，使用 FFmpeg 进行视频编码和音画合成。

最终输出可以是常见的 MP4 文件，并根据需要设置：

• 分辨率：1920 × 1080。
• 帧率：30 FPS。
• 视频编码：H.264。
• 像素格式：yuv420p。
• 音频编码：AAC。
• 音频采样率：48 kHz。

这些是项目文档中介绍的目标规格，实际输出参数应以最终编码命令和文件检查结果为准。

四、安装 code-video-showcase

1. 安装前准备

项目主要依赖以下工具：

依赖	用途
Claude Code	理解任务、编写代码、执行 Skill 工作流
Node.js 20+	运行渲染脚本
Playwright	控制浏览器并渲染画面
Chromium / Chrome / Edge	提供网页渲染能力
Python 3.10+	执行音频合成脚本
NumPy / SciPy	数值计算与音频处理
FFmpeg / ffprobe	视频编码、合成和文件检查
本地字体	确保文字渲染效果符合设计要求

建议先确认这些工具的安装状态。浏览器、FFmpeg、Python 及字体缺失，都可能影响后续渲染。

2. 克隆项目

打开终端，执行：

git clone https://github.com/Moessif/code-video-showcase.git

进入项目目录：

cd code-video-showcase

3. 安装到 Claude Code

如果希望在个人的多个项目中使用，可以安装到用户级 Skill 目录。

Windows PowerShell 示例：

$skillDir = "$HOME\.claude\skills\code-video-showcase"

New-Item -ItemType Directory `
  -Force `
  -Path (Split-Path $skillDir) | Out-Null

Copy-Item `
  -Recurse `
  -Force `
  ".\*" `
  $skillDir

执行前，需要确认当前终端位于仓库根目录。

也可以直接将仓库克隆到用户级目录：

git clone `
  https://github.com/Moessif/code-video-showcase.git `
  "$HOME\.claude\skills\code-video-showcase"

如果只想在单个项目中使用，可以将 Skill 放在该项目的 .claude/skills/code-video-showcase/ 目录下。

安装完成后，确认目录中存在 SKILL.md。

提示：如果 Claude Code 已经打开，安装后建议重新启动会话，并让它检查是否能够识别这个 Skill。不要只根据目录存在就认定 Skill 已经成功触发。

五、安装之后如何使用？

安装 Skill 后，最重要的是理解它的使用方式。

它不是一个拥有独立图形界面的软件。通常的工作流程是：在 Claude Code 中描述你要制作的视频，让 Agent 阅读 Skill 的指引，再根据任务创建画面代码、音频脚本和渲染流程。

1. 先检查环境

在 Claude Code 中输入：

请检查 code-video-showcase Skill 是否已正确安装。

阅读 SKILL.md，检查 Node.js、Python、Playwright、
Chromium、FFmpeg 和 ffprobe 是否可用。

请列出已满足的依赖和缺失的依赖。
暂时只检查，不要生成视频。

这一步可以提前发现环境问题，避免后续渲染失败。

2. 让 Claude Code 制作第一支视频

第一次使用时，建议选择短视频作为测试目标。

例如：

请使用 code-video-showcase Skill，
制作一支 3 秒的前端技术展示视频。

要求：
1. 使用 1920×1080、30 FPS。
2. 使用深色背景和蓝色科技风格。
3. 展示 Vue、TypeScript、Nuxt 三个技术名称。
4. 使用动态文字和简洁的几何动画。
5. 画面使用 HTML、Canvas 或 SVG 编程绘制。
6. 不使用 AI 图像、视频或音乐生成模型。
7. 先渲染几张静帧供我检查。
8. 再生成完整的 3 秒 MP4。
9. 输出到当前工作区的 out/ 目录。

请实际执行渲染和视频检查。
如果遇到依赖或脚本错误，请先定位问题再修复。
最后报告视频的输出路径、时长、分辨率和帧率。

这里的关键不是提示词有多长，而是明确提出了制作目标、输出格式、检查步骤和最终交付要求。

3. 检查生成结果

视频生成后，不要只看 Claude Code 是否报告成功，还需要确认：

• MP4 文件是否真实存在。
• 文件能否正常播放。
• 视频时长和帧率是否正确。
• 中文字体和文字排版是否正常。
• 动画是否存在跳帧、闪烁或突然消失。
• 音频是否存在，以及是否与画面同步。

如果需要检查视频信息，可以使用：

ffprobe -v error \
  -show_entries format=duration \
  -show_entries stream=codec_name,width,height,r_frame_rate \
  -of default=noprint_wrappers=1 \
  out/01.mp4

这条命令用于查看视频时长、编码、分辨率和帧率等信息。

4. 再逐步扩展到完整视频

短片验证成功后，再让 Claude Code 增加场景、动画、转场和音频编排。

可以继续提出这样的需求：

请在当前视频项目基础上扩展到 15 秒。

要求：
1. 保留当前视觉风格。
2. 将视频拆分为多个独立片段。
3. 为每个片段定义明确的开始时间和结束时间。
4. 设计开场、主体展示和结尾。
5. 统一动画时间轴，避免片段之间出现时间跳跃。
6. 重新渲染所有片段并合成 MP4。
7. 检查最终视频时长、画面连续性和音画同步。

需要注意，Skill 提供的是制作框架和模板，并不意味着任意时长的视频都已经有完整的现成编排。Agent 仍然需要根据实际需求编写和调整代码。

六、手动运行渲染模板

如果希望进一步理解项目，或者需要独立调试，可以绕过自然语言工作流，直接运行模板脚本。

以下命令基于仓库 README 中的 Quick Start。实际使用时，应以仓库当前版本的文件结构和脚本参数为准。

1. 创建工作目录

在仓库根目录执行：

mkdir -p my-showcase/segments \
  my-showcase/shared \
  my-showcase/fonts \
  my-showcase/audio \
  my-showcase/out

cp templates/* my-showcase/
cp scripts/* my-showcase/

cd my-showcase
cp segment.html segments/01.html
cp common.js segments/

Windows 环境如果没有 Bash，可以使用 Git Bash 或 WSL 执行这组命令。

2. 安装 Playwright

npm install playwright

还需要确保 Playwright 能够启动可用的 Chromium 浏览器。具体安装方式应根据本机浏览器和 Playwright 的配置进行调整。

3. 渲染静帧

node render-segment.mjs \
  --page /segments/01.html \
  --still 0.2,0.8,1.4,2.0,2.6 \
  --outdir out/stills

这一步用于检查指定时间点的画面。

建议先查看静帧，确认布局、字体、颜色和动画状态符合预期，再执行完整视频渲染。

4. 渲染短视频

node render-segment.mjs \
  --page /segments/01.html \
  --out out/01.mp4 \
  --duration 3

如果输出成功，可以使用播放器检查视频，也可以使用 ffprobe 检查编码参数。

5. 音频合成与视频合成

项目提供 Python 音频脚本：

python3 synth_audio.py --out audio/demo.wav

它可以生成短音频演示，但不代表完整的 61 秒音频编排已经完成。

最终合成需要准备好片段清单、对应的音频文件和正确的路径，再调用：

./concat-and-encode.sh segments.txt audio/mix.wav out/final.mp4

其中 segments.txt、audio/mix.wav 和片段文件都必须按照脚本预期准备好。不要在没有检查脚本参数和清单格式的情况下，直接假设命令可以完成任意视频的合成。

七、项目的优势与局限

优势

1. 画面可控

与直接生成视频相比，代码绘制的文字、布局、图形和动画具有更高的可控性，适合技术演示、品牌展示和数据可视化。

2. 方便迭代

修改 HTML、CSS 或动画逻辑后，可以重新渲染指定时间点的画面，不必每次从头生成全部内容。

3. 不依赖生成式视频 API

核心工作流依赖本地代码、浏览器和 FFmpeg，不需要调用云端视频生成模型。

4. 适合前端开发者学习

如果熟悉 HTML、CSS、JavaScript 和 TypeScript，就可以利用已有的开发经验理解画面构建和动画逻辑。

局限

1. 不是一键生成成片的成熟编辑器

Skill 提供工作流和模板，但具体的视频内容仍然需要设计、编写、渲染和调试。

2. 不擅长复杂的真实影像

如果需求是人物表演、真实场景、电影级自然景观或复杂的实拍镜头，纯代码绘制通常不是最合适的方案。

3. 环境依赖较多

Node.js、Python、浏览器、FFmpeg 和字体等依赖需要正确配置，尤其是在 Windows、WSL 等不同环境中。

4. 画面质量取决于设计与实现

AI 可以协助编写动画代码，但不代表生成结果天然具备专业的构图、节奏和视觉层次。实际输出仍然需要检查和调整。

八、哪些人适合使用？

使用者	适合的用途
前端开发者	技术动画、程序化视觉实验、个人作品展示
独立开发者	产品宣传片、功能介绍视频
技术博主	编程原理、技术架构和数据流程演示
AI 工具研究者	探索 Agent 如何操作代码工具完成多步骤任务
视频创作者	制作动态文字、几何动画和节奏型视觉片段

如果你主要制作真人视频、实拍内容或复杂的影视作品，那么传统视频编辑软件或 AI 视频生成工具可能更加合适。

九、总结

code-video-showcase 展示了一种有意思的视频制作思路：将 AI Agent 的代码生成能力与前端动画、程序化音频和视频编码结合起来，让视频制作变成一个可以通过代码持续迭代的工程流程。

它的价值不只是生成一支视频，更在于提供了一套可研究、可修改、可扩展的程序化视频制作工作流。

对于前端开发者而言，学习成本相对可控：先从 HTML、CSS 和 Canvas 动画入手，再逐步理解逐帧渲染、音频时间轴与 FFmpeg 编码即可。

如果准备实际使用，建议从一个 3 秒的简单片段开始，验证整个链路，再逐步增加动画复杂度和视频时长。

项目地址： https://github.com/Moessif/code-video-showcase

参考资料：

• GitHub 仓库与 README
• 项目 Skill 定义文件