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 HyperFramesHyperFrames 是 HeyGen 开源的 HTML 转视频框架。它把视频定义为 HTMLCSSJS用无头 Chrome 逐帧渲染FFmpeg 编码成 MP4。LLM Video Maker 是基于 HyperFrames 的 Claude Code 技能Skill把文本 → 视频的整条流水线自动化了。你只需要在 Claude Code 里说一句话。三、环境准备系统要求Node.js ≥ 22FFmpegChrome / ChromiumHyperFrames 首次运行时自动下载 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-videoGoldLegendW80/llm-video-maker一句话出片/edit-videoGoldLegendW80/llm-video-maker修改已生成视频的单个章节/faceless-explainerheygen-com/hyperframes6 步流水线精细控制/hyperframesheygen-com/hyperframes入口 路由可选中文旁白# Edge TTS推荐免费中文质量好pipinstalledge-tts# Kokoro 离线 TTS备选无需联网中文语速偏慢pipinstallkokoro-onnx soundfile misaki四、三种使用方式方式一/make-video最简单推荐/make-video 把 lesson-07-prompt-engineering.md 生成 65 秒视频 youtube 16:9dark-premium 配色中文无旁白。Agent 自动完成读文本 → 分镜 → 写 HTMLGSAP → 渲染 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--exampleblankcdmy-video# 2. 编辑 index.html替换为以下内容# 3. 检查 渲染npx hyperframes lint.npx hyperframes render.-ooutput.mp4!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/metanameviewportcontentwidth1920, height1080/scriptsrchttps://cdn.jsdelivr.net/npm/gsap3.14.2/dist/gsap.min.js/scriptstyle*{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/headbodydividrootdata-composition-idmaindata-start0data-duration10data-width1920data-height1080dividtitleclassclipdata-start0data-duration10data-track-index1stylefont-size:80px;color:#fff;text-align:center我的视频标题/div/divscriptwindow.__timelineswindow.__timelines||{};vartlgsap.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:9dark-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 是博客→视频的甜点区间。内容多就砍不要拉时长audiencetone⭐⭐⭐⭐驱动字体大小、节奏和视觉风格style.preset⭐⭐⭐dark-premium科技/AIclean-corporate教程bold-energetic产品发布narration.mode⭐⭐⭐ttsAI 旁白none无旁白纯画面user-audio自己录音可用 style.presetpreset适合dark-premiumAI、技术、金融、电影感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\--voicezh-CN-YunyangNeural\--rate15%\--text提示工程是 AI Agent 开发的最后一课。\--write-media assets/audio/s1.mp3# 转为 WAVHyperFrames 推荐格式ffmpeg-iassets/audio/s1.mp3 assets/audio/s1.wavWindows PowerShell 用户将python3替换为py将\换行替换为换行。在index.html中加入audioidnarration_s1classclipsrcassets/audio/s1.wavdata-start0data-duration7data-track-index90/audioKokoro离线备选pipinstallkokoro-onnx soundfile misaki中文模型约 380MBkokoro-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)CPU13th Gen Intel Core i5-13400F (10 核 16 线程)内存32 GBGPUNVIDIA GeForce RTX 3060 Ti (D3D11 硬件加速)Claude Codev2.1.168底层模型DeepSeek V4 Pro通过 API Key 接入Node.jsv24.2.0npm10.8.1FFmpeg6.0-full_buildHyperFrames0.7.48LLM Video Makerv1.0.0 (2026-06-17)测试输入时长帧数渲染耗时大小备注产品 Demo手动 HTML15s45020.3s1.8 MB纯画面GPU 硬加速Lesson 01MD (324行)60s180064.2s5.1 MB纯画面6 workersLesson 07 v1MD (324行)65s195065.3s5.6 MB纯画面Lesson 07 v2MD (324行)65s195066.6s7.0 MB含 7 段 Edge TTS 中文旁白本机RTX 3060 Ti D3D11 硬件加速实测渲染速度约 1:160 秒视频 ≈ 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分辨率适用youtube1920×1080B站、YouTubetiktok/shorts1080×1920抖音、Reelssquare1080×1080微信、InstagramQ: 无法访问 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 CMDnpm 建议配镜像加速安装npmconfigsetregistry https://registry.npmmirror.comnpminstall-ghyperframesQ: 数据安全和成本如何博客内容通过 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 就能出片。首次环境配置和复杂修改仍需开发基础纯文本驱动视频是 HTMLCSSJS可版本管理、diff、code review和代码工程无缝衔接渲染可复现同一份 HTML时钟信号 → 每次渲染结果完全一致适合批量生成和 CI/CD本地离线渲染Chrome FFmpeg 均在本地运行。依赖全部本地化后GSAP 用本地副本、旁白预生成 WAV渲染阶段完全离线框架免费HyperFramesApache 2.0和 LLM Video Maker SkillMIT开源免费。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-videoOpenCode邀请链接官网 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:9dark-premium中文。或使用桥接技能自动发现免复制npx skillsadddifferent-ai/openwork--skillopencode-bridge--yesSKILL.md 格式通用npx hyperframes render等 CLI 命令完全一致。唯一差异是 Step 5 的并行帧构建Claude Code 用Agent工具OpenCode 用task工具。参考HyperFrames GitHubLLM Video Makerskills.sh离线 Skill 包GitCode 本文基于 2026-07-10 实测撰写。技能版本HyperFrames 0.7.48LLM Video Maker v1.0.0 (commit6ed5e43)。版本迭代可能改变部分行为以官方文档为准。如果您觉得有用欢迎点赞、转发、评论、关注。