用Claude Code把一篇文章自动做成视频，全程不用碰剪辑软件

大强同学2026-05-01 9:26

引言

做短视频最烦的是什么？写文案、找素材、调时间轴、配音乐、导出......每一步都是手动操作。

今天分享一个骚操作：直接丢一篇 Markdown 文章给 Claude Code，它自动帮你生成一个带动画、配乐的视频 MP4 文件。

整个过程我全程没碰任何剪辑软件，全靠一条命令搞定。

用到的工具叫 HyperFrames，开源免费

GitHub 地址：

https://github.com/heygen-com/hyperframes

一、HyperFrames 是什么

简单说，它是一个 用 HTML 写视频 的框架。

  • 视频的每一帧都是 HTML + CSS

  • 动画用 GSAP（前端最流行的动画库）控制

  • 时序用 data-* 属性标记

  • 最终渲染成 MP4

配合 Claude Code 的 AI 能力，你只需要告诉它"我要什么风格的视频"，它就能自动写出 HTML、配好动画、加上音乐，然后渲染出成品。

二、安装步骤

前置条件

  • Node.js ≥ 22

  • FFmpeg

  • Claude Code（或任意 AI 编程工具）

安装 HyperFrames 技能

在终端执行：

bash 复制代码 
   
npx skills add heygen-com/hyperframes

执行后会列出 6 个 skill，首次建议全选（按空格键勾选全部，回车确认）：

|

技能名

|

核心用途

|

| --- | --- |

| gsap |

GSAP 动画语法参考

|

| hyperframes |

核心技能：创建视频合成、动画、标题卡

|

| hyperframes-cli |

命令行工具：初始化、检查、预览、渲染

|

| hyperframes-registry |

安装官方组件库/预设模块

|

| remotion-to-hyperframes |

将 Remotion 项目转为 HyperFrames 格式

|

| website-to-hyperframes |

抓取网页并自动生成视频

|

安装完成后，重启 Claude Code 即可使用。

三、实操：把一篇文章做成视频

下面是我完整的操作流程，从一篇 Markdown 文章到一个 MP4 视频，全程自动化。

第一步：给 Claude Code 发指令

我有一篇自我介绍文章，路径是：

bash 复制代码 
   
D:\project2026\fuwari\src\content\posts\Xenia\自我介绍.md

直接在 Claude Code 对话框发送：

bash 复制代码 
   
把这个文章使用HyperFrames做个视频
第二步：选择风格和用途

Claude Code 会问你两个问题：

问题一：视觉风格

  • 科技感/暗色 --- 深色背景，霓虹高亮，适合技术博主

  • 简约/明亮 --- 白色背景，干净排版，适合品牌展示

  • 活力/彩色 --- 多彩渐变，适合社交媒体

问题二：视频用途

  • 短视频/社交媒体 --- 15-30 秒，竖屏 9:16

  • 个人介绍/B 站片头 --- 30-60 秒，横屏 16:10

  • 完整自我介绍视频 --- 1-2 分钟，横屏 16:9

我选了「科技感/暗色」+「完整自我介绍视频」。

第三步：自动初始化项目

Claude Code 会自动执行 npx hyperframes init，生成项目结构：

bash 复制代码 
   
dqtx-self-intro/├── assets/                # 静态资源（图片、音乐等）├── AGENTS.md              # AI 协作文档├── CLAUDE.md              # Claude 技能配置├── DESIGN.md              # 视觉设计方案（颜色、字体、规范）├── hyperframes.json       # 项目配置├── index.html             # 核心！视频的源文件就是这个 HTML└── meta.json              # 项目元数据

其中 index.html 是最重要的文件------整个视频的画面、动画、时序全写在这里面。

第四步：自动创建视频内容

Claude Code 会根据你的文章内容，自动做这些事：

  1. 创建 DESIGN.md --- 定义配色方案、字体、视觉风格

  2. 分析文章结构 --- 把文章拆分成多个场景（Scene）

  3. 编写 HTML --- 每个场景是一个 <div>

    ，用 data-start 和 data-duration 控制出现时间

  4. 添加 GSAP 动画 --- 元素入场、退出、过渡效果

  5. 运行 lint 检查 --- 自动检查 HTML 是否有错误

我的自我介绍视频被拆成了 7 个场景：

|

场景

|

时间

|

内容

|

| --- | --- | --- |

|

  1. 标题

|

0-5s

|

"大强同学" 品牌开场

|

|

  1. 关于我

|

5-16s

|

个人介绍 + 正在做的事

|

|

  1. 项目展示

|

16-30s

|

8 个网站 + 开源项目

|

|

  1. 服务社群

|

30-44s

|

商业服务 + 社群列表

|

|

  1. 社交媒体

|

44-56s

|

粉丝数据 + 平台矩阵

|

|

  1. AI 工具链

|

56-68s

|

AI Agent + API 供应商

|

|

  1. 结尾

|

68-80s

|

联系方式收尾

|

第五步：本地预览

Claude Code 会启动一个本地预览服务器：

bash 复制代码 
   
npx hyperframes preview

浏览器打开 http://localhost:3002 就能看到视频效果。修改 HTML 后会自动刷新，所见即所得。

第六步：反馈优化

这一步很关键。我看第一版后觉得：

  • 节奏太慢 --- 80 秒太长了
  • 没有音乐 --- 需要加 BGM

直接告诉 Claude Code，它会自动修改：

  • 把总时长从 80 秒压缩到 55 秒

  • 动画从 0.5 秒缩短到 0.35 秒

  • 卡片入场间隔从 0.08 秒压缩到 0.06 秒

  • 问我要音乐文件，然后自动添加到项目中

第七步：渲染导出 MP4

确认效果没问题后，执行渲染：

bash 复制代码 
   
npx hyperframes render

渲染完成后，MP4 文件在：

bash 复制代码 
   
项目目录/renders/dqtx-self-intro_2026-04-30_15-09-53.mp4

我的成品：1920×1080、55 秒、3.8 MB，带背景音乐，可以直接上传社交媒体。

已关注

关注

重播 分享 赞

关闭

观看更多

更多

退出全屏

切换到竖屏全屏**退出全屏

大强同学已关注

分享视频

，时长00:55

0/0

00:00/00:55

切换到横屏模式

继续播放

进度条，百分之0

播放(javascript:😉

00:00

/

00:55

00:55

倍速(javascript:😉

全屏

倍速播放中

0.5倍(javascript:😉 0.75倍(javascript:😉 1.0倍(javascript:😉 1.5倍(javascript:😉 2.0倍(javascript:😉

超清(javascript:😉 流畅(javascript:😉

您的浏览器不支持 video 标签

继续观看

用Claude Code把一篇文章自动做成视频，全程不用碰剪辑软件

观看更多

原创

,

用Claude Code把一篇文章自动做成视频，全程不用碰剪辑软件

大强同学已关注

分享点赞在看

已同步到看一看写下你的评论(javascript:😉

视频详情(javascript:😉

四、核心概念速览

HTML 就是视频源文件

整个视频就是一个 HTML 文件，核心结构：

bash 复制代码 
   
<div id="root" data-composition-id="main"      data-start="0" data-duration="55"     data-width="1920" data-height="1080">    <!-- 每个场景是一个 clip -->  <div id="scene1" class="clip scene"        data-start="0" data-duration="3.5" data-track-index="1">    <!-- 你的内容 -->  </div></div>
  • data-start --- 这个元素从第几秒出现
  • data-duration --- 持续几秒
  • data-track-index --- 轨道编号（决定层级）
动画用 GSAP 控制
bash 复制代码 
   
const tl = gsap.timeline({ paused: true });// 入场动画：从下方滑入 + 淡入tl.from("#title", {  opacity: 0, y: 40,  duration: 0.5, ease: "power3.out"}, 0); // 0 = 在第 0 秒开始// 退出动画：向上滑出 + 淡出tl.to("#title", {  opacity: 0, y: -25,  duration: 0.25, ease: "power2.in"}, 2.8); // 在第 2.8 秒退出
视觉方案在 DESIGN.md 中定义
bash 复制代码 
   
## Colors| 角色       | 色值      | 说明              ||-----------|----------|------------------|| 背景      | #0a0e1a  | 深蓝黑，不是纯黑    || 强调色    | #3b82f6  | 电光蓝            || 辅助色    | #06b6d4  | 青色             || 文字      | #e2e8f0  | 暖白色            |

Claude Code 会严格遵守这个配色方案，不会乱用颜色。

五、踩坑记录

1. 视频还没渲染出来

预览只是本地 HTML 渲染，要生成 MP4 必须手动执行 npx hyperframes render。

2. 第一版节奏大概率偏慢

AI 生成的视频默认节奏都比较保守，建议：

  • 直接告诉它"节奏加快，总时长控制在 X 秒"

  • 每个场景的动画时长建议 0.3-0.4 秒

3. 背景音乐需要自己提供

HyperFrames 支持添加音频，但音乐文件需要你自己准备。支持 mp3、wav、m4a 格式。

4. 字体加载需要联网

渲染时会从 Google Fonts 加载字体，首次渲染会慢一些。之后有缓存就快了。

5. 大文件渲染时间较长

55 秒的视频渲染大约需要 1-2 分钟，取决于你的电脑配置。

总结

整个流程的核心思路就是：用自然语言描述你想要的视频 → AI 自动生成 HTML → 渲染成 MP4。

你不需要学 PR、不需要学剪映、不需要手动对齐时间轴。写一篇文章，跑一条命令，等几分钟，视频就出来了。

效果可能不一定完美，但你只需要先出第一版，之后让 AI 根据你的建议优化就行。整个过程耗时至少半小时，但全程不用你动手------你可以去忙别的，等它完成后再提修改意见。

以上，既然看到这里了，如果你觉得内容不错，随手点个赞、在看、转发三连吧！如果想第一时间收到推送，可以给我点个星标⭐～

谢谢你看我的文章，我们，下次再见。

参考资料

相关推荐
EasyDSS18 小时前
私有化音视频系统/视频高清直播点播EasyDSS重构多元化社交娱乐互动新生态
重构·音视频·娱乐
辣香牛肉面1 天前
B站油管抖音视频下载器vidDown
音视频
GIS数据转换器1 天前
基于3D GIS的监控视频精准标定平台
人工智能·物联网·3d·音视频·无人机·知识图谱
换个昵称都难1 天前
webrtc 视频传输Flexfec模块
音视频·webrtc
Kang.lee1 天前
2026.6.4【MIPI C-PHY】C-PHY v2.1协议阅读后问题总结
音视频·soc·asic
dualven_in_csdn1 天前
h265视频的播放问题
音视频
企业老板ai培训1 天前
2026中小企业AI应用落地白皮书：从AI短视频矩阵到数字人获客的破局增长趋势
人工智能·矩阵·音视频
换个昵称都难1 天前
webrtc视频Ulpfec介绍
音视频·webrtc
MegaSig美格信1 天前
非处方气导助听器音频测试解决方案
音视频·音频·健康医疗
CoderIsArt1 天前
声纹识别与音频AI领域
人工智能·音视频
热门推荐
01《置身钉内》原文-可播放阅读02Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析03GitHub 镜像站点04【AI】2026 年具身智能模型和世界模型总结05AI科技热点日报 | 2026年6月1日062026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？072026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？082026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf09Codex 下载安装指南：Windows 和 macOS 官方版下载10【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法