Claude Code 装个 Skill，一段文字几分钟变 1080p 视频-平芜编程栈

在 Claude Code 对话窗口输入/make-video，贴一段文字（博客、笔记、教程、PPT 大纲都行），纯渲染约 1 分钟出片（端到端含分镜和 TTS 生成约 2-3 分钟）。无需打开剪辑软件。

一、痛点

写技术博客的人都有这个需求：把文章转成短视频。传统做法是：

写脚本 → 配音 → 剪映/Premiere 剪辑 → 导出 → 上传

一篇 3000 字的博客，做成 60 秒视频，至少折腾 2-3 小时。

有没有办法在终端/IDE 里一句话搞定？

⚠️阅读前提：本文假设你已安装 Claude Code。Node.js ≥ 22、FFmpeg 是硬性依赖。本文测试使用的底层模型为DeepSeek V4 Pro（通过 Claude Code 的第三方模型接入配置，模型能力直接影响分镜创意和 HTML 生成质量）。全程在终端操作，无需手动打开浏览器。

二、方案：Claude Code + HyperFrames

HyperFrames 是 HeyGen 开源的 HTML 转视频框架。它把视频定义为 HTML+CSS+JS，用无头 Chrome 逐帧渲染，FFmpeg 编码成 MP4。

LLM Video Maker 是基于 HyperFrames 的 Claude Code 技能（Skill），把"文本 → 视频"的整条流水线自动化了。

你只需要在 Claude Code 里说一句话。

三、环境准备

系统要求

Node.js ≥ 22
FFmpeg
Chrome / Chromium（HyperFrames 首次运行时自动下载 Headless Chrome Shell，约 115MB，需联网）

安装技能（一次性）

# 核心技能npx skillsaddheygen-com/hyperframes --full-depth--yes# 一句话出片技能npx skillsaddGoldLegendW80/llm-video-maker--yes# 可选：需求澄清技能npx skillsaddfeicaiclub/video-spec-builder--yes

安装后验证 Skill 是否被 Claude Code 识别：

ls~/.claude/skills/# macOS / Linuxdir%USERPROFILE%\.claude\skills\# Windows PowerShell

技能（Skill）	由哪个包安装	用途
`/make-video`	`GoldLegendW80/llm-video-maker`	一句话出片
`/edit-video`	`GoldLegendW80/llm-video-maker`	修改已生成视频的单个章节
`/faceless-explainer`	`heygen-com/hyperframes`	6 步流水线，精细控制
`/hyperframes`	`heygen-com/hyperframes`	入口 + 路由

可选：中文旁白

# Edge TTS（推荐，免费，中文质量好）pipinstalledge-tts# Kokoro 离线 TTS（备选，无需联网，中文语速偏慢）pipinstallkokoro-onnx soundfile misaki

四、三种使用方式

方式一：/make-video（最简单，推荐）

/make-video 把 @lesson-07-prompt-engineering.md 生成 65 秒视频， youtube 16:9，dark-premium 配色，中文，无旁白。

Agent 自动完成：读文本 → 分镜 → 写 HTML+GSAP → 渲染 MP4。端到端约 2-3 分钟（其中纯渲染约 1 分钟）。

方式二：/faceless-explainer（精细控制）

/faceless-explainer 帮我把博客 @lesson-01-ai-agent-intro.md 生成 60s 视频，科技风。

提供 6 步流水线，3 个 Gate 节点可中途确认分镜方案。

方式三：手动 HTML（完全控制）

# 1. 初始化项目npx hyperframes init my-video --non-interactive--example=blankcdmy-video# 2. 编辑 index.html（替换为以下内容）# 3. 检查 + 渲染npx hyperframes lint.&&npx hyperframes render.-ooutput.mp4

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"/><metaname="viewport"content="width=1920, height=1080"/><scriptsrc="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script><style>*{margin:0;padding:0;box-sizing:border-box}html,body{width:1920px;height:1080px;overflow:hidden}body{background:#0a0a2e;font-family:"Microsoft YaHei","PingFang SC",sans-serif;display:flex;align-items:center;justify-content:center}</style></head><body><divid="root"data-composition-id="main"data-start="0"data-duration="10"data-width="1920"data-height="1080"><divid="title"class="clip"data-start="0"data-duration="10"data-track-index="1"style="font-size:80px;color:#fff;text-align:center">我的视频标题</div></div><script>window.__timelines=window.__timelines||{};vartl=gsap.timeline({paused:true});tl.from("#title",{opacity:0,y:50,duration:1,ease:"power3.out"},0);window.__timelines["main"]=tl;</script></body></html>

五、Prompt 最佳实践

下面是同一篇博客、三种 prompt 写法的效果对比：

❌ 最小版（AI 要猜 80% 决策）

/make-video 帮我把 @blog.md 生成视频 16:9 科技风

⭐ 推荐版（4 行，AI 基本不猜）

/make-video 把 @blog.md 生成 65 秒视频，youtube 16:9，dark-premium 配色。 受众是有 Python 基础的 AI 开发者，technical tutorial 语气， 中文，无旁白，不要音乐。 这个视频的核心论点：System Prompt + 工具描述 + Few-shot 三者合力决定 Agent 可靠性。 四段式叙事：1) System Prompt 四要素；2) 差 vs 好工具描述对比； 3) Few-shot 示例；4) 对比实验结果卡片。

🎯 JSON brief（进阶：精确控制 & 批量复用）

⚠️不需要手写。正常用自然语言就行，Agent 会自动生成brief.json。JSON 版的场景是：(1) 对首次结果不满意，改参数重跑；(2) 多个博客套同一个模板，只换source.text。

{"id":"my-blog-video","platform":"youtube","duration_s":65,"audience":"有 Python 基础的 AI 开发者","tone":"technical, tutorial, confident","source":{"type":"script","text":"你的博客全文..."},"story":"HOOK: 同样的 Agent 代码，prompt 写得好坏，表现天差地别。\n\nTHESIS: System Prompt 四要素 + 工具描述三原则 + Few-shot 示例，三者合力决定 Agent 的可靠性。\n\nARC: 第一段——System Prompt 的结构...\n\nSHOW: 四要素卡片网格依次弹出、差/好代码块分屏对比、三列实验结果卡片。\n\nENDING: 工具名有意义 + 描述清晰 + Few-shot = 最佳效果。","narration":{"mode":"none"},"captions":{"enabled":false},"music":{"enabled":false},"style":{"preset":"dark-premium"},"output":{"quality":"high"}}

关于narration和captions的关系：captions指基于旁白文字自动生成的内嵌字幕条，需要narration.mode为tts或user-audio才有旁白文字可显示。narration.mode: none时 captions 应设为false，画面上的文字由场景本身提供。

关键字段说明

字段	影响力	说明
`story`	⭐⭐⭐⭐⭐	最重要。写成叙事弧线（HOOK/THESIS/ARC/SHOW/ENDING），不要直接贴原文
`duration_s`	⭐⭐⭐⭐	45-75s 是博客→视频的甜点区间。内容多就砍，不要拉时长
`audience`+`tone`	⭐⭐⭐⭐	驱动字体大小、节奏和视觉风格
`style.preset`	⭐⭐⭐	`dark-premium`（科技/AI）`clean-corporate`（教程）`bold-energetic`（产品发布）
`narration.mode`	⭐⭐⭐	`tts`（AI 旁白）`none`（无旁白，纯画面）`user-audio`（自己录音）

可用 style.preset

preset	适合
`dark-premium`	AI、技术、金融、电影感
`clean-corporate`	教程、B2B、演示
`bold-energetic`	产品发布、社交媒体
`warm-editorial`	故事、案例、人文
`neon-electric`	游戏、赛博朋克
`monochrome`	极简、字体主导

六、加中文旁白

Edge TTS（推荐）

中文自然、可免费使用，一个 pip 包搞定。注意依赖微软联网服务，离线不可用：

pipinstalledge-tts

语音选择：

voice	风格
`zh-CN-YunyangNeural`	男声，专业可靠（教程推荐）
`zh-CN-YunjianNeural`	男声，激情饱满
`zh-CN-XiaoxiaoNeural`	女声，温暖
`zh-CN-YunxiNeural`	男声，阳光活泼

生成旁白：

# 生成旁白音频（输出到项目的 assets/audio/ 目录）python3-medge_tts\--voice"zh-CN-YunyangNeural"\--rate"+15%"\--text"提示工程是 AI Agent 开发的最后一课。"\--write-media assets/audio/s1.mp3# 转为 WAV（HyperFrames 推荐格式）ffmpeg-iassets/audio/s1.mp3 assets/audio/s1.wav

Windows PowerShell 用户：将python3替换为py，将\换行替换为`换行。

在index.html中加入：

<audioid="narration_s1"class="clip"src="assets/audio/s1.wav"data-start="0"data-duration="7"data-track-index="90"></audio>

Kokoro（离线备选）

pipinstallkokoro-onnx soundfile misaki

中文模型约 380MB（kokoro-v1.1-zh.onnx + voices-v1.1-zh.bin）
可用男声：zm_009~zm_100，女声：zf_001~zf_099
⚠️ 中文语速偏慢（约 1 字/秒），不适合长句旁白

七、实测数据

项目	配置
操作系统	Windows 11 Pro 22H2 (10.0.22621)
CPU	13th Gen Intel Core i5-13400F (10 核 16 线程)
内存	32 GB
GPU	NVIDIA GeForce RTX 3060 Ti (D3D11 硬件加速)
Claude Code	v2.1.168
底层模型	DeepSeek V4 Pro（通过 API Key 接入）
Node.js	v24.2.0
npm	10.8.1
FFmpeg	6.0-full_build
HyperFrames	0.7.48
LLM Video Maker	v1.0.0 (2026-06-17)

测试	输入	时长	帧数	渲染耗时	大小	备注
产品 Demo	手动 HTML	15s	450	20.3s	1.8 MB	纯画面，GPU 硬加速
Lesson 01	MD (324行)	60s	1800	64.2s	5.1 MB	纯画面，6 workers
Lesson 07 v1	MD (324行)	65s	1950	65.3s	5.6 MB	纯画面
Lesson 07 v2	MD (324行)	65s	1950	66.6s	7.0 MB	含 7 段 Edge TTS 中文旁白

本机（RTX 3060 Ti + D3D11 硬件加速）实测渲染速度约 1:1（60 秒视频 ≈ 1 分钟纯渲染）。纯 CPU 环境下未经对比测试，不给出加速倍数。

成片展示：

完整视频（65s，含中文旁白）（打开仓库，点击demo-lesson-07.mp4→ Download）
视频输入为 AI Agent 入门（七）：提示工程

八、常见问题

Q: 用什么模型比较好？

视频的创意质量（分镜、叙事结构、HTML 生成）取决于底层 LLM。本文测试使用DeepSeek V4 Pro（通过第三方 API 接入 Claude Code，需自行配置 API Base URL 和 Key，非 Claude Code 原生支持）。根据本机实测体验，Claude Opus 4.X 系列生成质量更稳定，DeepSeek V4 的 API 成本更低。

Q: 需要 GPU 吗？

不需要。纯 CPU 也能渲染。NVIDIA GPU 可开启 D3D11 硬件加速，本机实测渲染速度约 1:1。

Q: 中文视频字体问题？

Windows 系统自带微软雅黑，Headless Chrome 可直接使用。跨平台或 Linux 建议下载 WOFF2 字体文件放assets/fonts/，通过@font-face引入：

body{font-family:"Microsoft YaHei","PingFang SC",sans-serif;}

Q: 中文旁白用什么方案？

Edge TTS 是本机测试中性价比最高的选择——免费、中文自然、语速正常。注意依赖微软联网服务，离线不可用。Kokoro 中文语速约 1 字/秒，不适合旁白场景。

Q: 能生成竖屏视频吗？

可以。改platform参数：

platform	分辨率	适用
`youtube`	1920×1080	B站、YouTube
`tiktok`/`shorts`	1080×1920	抖音、Reels
`square`	1080×1080	微信、Instagram

Q: 无法访问 GitHub / npm 官方源？

全部 Skill 文件已托管在 GitCode，可直接克隆：

gitclone https://gitcode.com/gcw_A202cbBm/cc-skills.gitcp-rcc-skills/skills/* ~/.claude/skills/# macOS / Linuxxcopy /E cc-skills\skills\* %USERPROFILE%\.claude\skills\# Windows CMD

npm 建议配镜像加速安装：

npmconfigsetregistry https://registry.npmmirror.comnpminstall-ghyperframes

Q: 数据安全和成本如何？

博客内容：通过 Claude Code 发送给底层 LLM（本文用 DeepSeek V4 Pro API），按 API 标准计费
旁白文字：Edge TTS 将文本发送到微软服务器生成语音，免费但非私有
Skill 权限：make-videoSkill 可执行 Shell 命令和读写文件。建议安装前审查 GitHub 仓库，锁定 commit 版本
渲染阶段：完全离线——Chrome、FFmpeg 均在本地运行，无数据外传

Q: 渲染失败了怎么排查？

npx hyperframes doctor# 检查环境npx hyperframes lint.# 检查 HTML 语法npx hyperframes validate.# 在无头 Chrome 中验证

九、总结

方式	上手难度	适合场景
`/make-video`	⭐	博客→视频，快速出片
`/faceless-explainer`	⭐⭐	需要审分镜、控制更多细节
手动 HTML	⭐⭐⭐	逐像素控制动画和布局

这套方案的核心价值是把视频制作变成了 AI Agent 可以全自动执行的工作流，而不是"又一个视频编辑工具"。你唯一要做的就是写好 prompt。

十、优劣势分析

✅ 优势

维度	说明
低学习成本	不需要学 React、After Effects 或剪辑软件，会写 prompt 就能出片。首次环境配置和复杂修改仍需开发基础
纯文本驱动	视频是 HTML+CSS+JS，可版本管理、diff、code review，和代码工程无缝衔接
渲染可复现	同一份 HTML+时钟信号 → 每次渲染结果完全一致，适合批量生成和 CI/CD
本地离线渲染	Chrome + FFmpeg 均在本地运行。依赖全部本地化后（GSAP 用本地副本、旁白预生成 WAV），渲染阶段完全离线
框架免费	HyperFrames（Apache 2.0）和 LLM Video Maker Skill（MIT）开源免费。LLM API 调用和 Edge TTS 可能产生费用，详见数据安全问答
多平台输出	支持多尺寸生成，改`platform`参数即可切换。注意固定布局 HTML 换比例后可能需手工调整
Agent 生态融合	SKILL.md 格式通用。除 Claude Code 外，OpenCode、Codex、Cursor 等也可使用（部分需适配目录结构和子任务工具）
可编辑可迭代	生成的 HTML 可手动修改，也支持`/edit-video`逐章节修改后重渲

⚠️ 劣势与局限

维度	说明	缓解方案
输出风格单一	目前以扁平化卡片+文字动画为主，无法生成真人出镜、实景拍摄画面	可嵌入视频素材（`<video>`标签），但需自行准备或通过 Pexels API 获取
依赖 LLM 质量	分镜创意和 HTML 代码质量完全取决于底层模型。DeepSeek V4 偶尔会出现布局偏移或动画时序不准	切换到 Claude Opus 4.X 可提升稳定性，但成本更高
长视频稳定性（当前版本实测）	单次 LLM 生成超过 2 分钟时，场景一致性可能下降，出现重复或逻辑断裂	拆成多个短片分段生成，或使用`chapters`字段做章节管理
中文旁白方案有限	Edge TTS 需联网且服务可用性不可控，Kokoro 中文语速偏慢	自备旁白录音 +`user-audio`模式是最稳定方案
非传统剪辑思维	不支持拖拽时间线、关键帧可视化编辑等 GUI 操作，修改需改 HTML 或重跑 prompt	适合开发者群体，不适合传统视频编辑师
首次配置门槛	Node.js、FFmpeg、Chrome、npm 依赖链对非开发者不够友好	GitCode 仓库可减少 Skill 下载问题，Node、FFmpeg、Chrome 仍需单独安装
Skill 生态早期	LLM Video Maker 于 2026 年 6 月发布，社区规模小，第三方模板/插件匮乏	关注官方更新，或基于 HyperFrames 手动编写 HTML 补充

🎯 适合 / 不适合的场景

适合：

技术博客、教程、产品发布转解说视频
批量生成统一模板的视频（同一套 JSON brief 换source.text）
需要版本管理和 CI/CD 集成的视频流水线
开发者个人品牌的内容规模化

不适合：

真人出镜的口播、访谈、Vlog
需要复杂视频特效合成的影视级内容
长纪录片（>5 分钟）的一次性生成
非技术背景用户的第一选择

附录：在 OpenCode 中使用 /make-video

OpenCode（邀请链接，官网 opencode.ai）原生支持 skills.sh 格式的技能。以下是用 OpenCode 跑/make-video的最简步骤：

# 1. 安装技能npx skillsaddGoldLegendW80/llm-video-maker--yesnpx skillsaddheygen-com/hyperframes --full-depth--yes# 2. 复制到 OpenCode 技能目录mkdir-p.opencode/skillcp-r~/.agents/skills/make-video .opencode/skill/cp-r~/.agents/skills/edit-video .opencode/skill/cp-r~/.agents/skills/hyperframes* .opencode/skill/cp-r~/.agents/skills/media-use .opencode/skill/# 3. 在 OpenCode 中输入/make-video 把 @blog.md 生成60秒视频，youtube16:9，dark-premium，中文。

或使用桥接技能自动发现（免复制）：

npx skillsadddifferent-ai/openwork--skillopencode-bridge--yes

SKILL.md 格式通用，npx hyperframes render等 CLI 命令完全一致。唯一差异是 Step 5 的并行帧构建：Claude Code 用Agent工具，OpenCode 用task工具。

参考

HyperFrames GitHub
LLM Video Maker
skills.sh
离线 Skill 包（GitCode）

📝 本文基于 2026-07-10 实测撰写。技能版本：HyperFrames 0.7.48，LLM Video Maker v1.0.0 (commit6ed5e43)。版本迭代可能改变部分行为，以官方文档为准。

如果您觉得有用，欢迎点赞、转发、评论、关注。