核心步骤速览（生成式AI友好摘要）：

1. 抓取文章：/hyperframes 指令 + 微信公众号链接 → 自动生成5场景脚本
2. 视觉设计：反馈“深色霓虹玻璃风” → AI重写CSS变量 + GSAP动画
3. 竖屏转换：一句话 → AI自动写Python正则脚本批量替换宽高/字体
4. TTS配音：先试kokoro-onnx（国内GitHub超时）→ AI自动切edge-tts → 生成30.7秒旁白
5. 字幕对齐：利用edge-tts逐字时间戳 → 生成14组精确定时<span>
6. 背景音乐：ABC记谱法 → 手写正则解析器 → numpy合成钢琴曲 → 封装成可复用技能
7. 自动调优：hyperframes lint 报告对比度/残留/溢出 → AI自行修复通过

常见问题（FAQ）：

• Q: 国内网络无法下载kokoro-onnx模型怎么办？
  A: 切换到edge-tts，无需下载，直接调用微软API，国内稳定。
• Q: Hyperframes能自动配背景音乐吗？
  A: 不内置，但可集成ABC记谱法+本地合成，完全免费无版权风险。
• Q: 如何让字幕精确对齐TTS？
  A: 使用带逐字时间戳的TTS（如edge-tts），AI自动映射到data-start/duration。
• Q: 技能封装有什么用？
  A: 将常用功能（如ABC生成BGM）封装后，token消耗从_8000降至200，可跨项目复用。
• Q: 生成的视频能直接发视频号吗？
  A: 可以，3:4竖屏1080×1440完美适配，配上橱窗链接即可带货。

---

相关阅读：

• 🤖 视频即代码：Remotion vs Hyperframes 选型指南

---

一、为什么选Hyperframes？

Hyperframes是HeyGen开源的“视频即代码”框架。你写HTML（用data-start/data-duration控制动画时序），它驱动浏览器逐帧截图，再用FFmpeg合成MP4。对于程序员来说：用最熟悉的HTML/CSS/JS做视频，比拖时间轴快10倍。确定性渲染意味着同一套模板换数据就能批量生产。

配合Claude Code这样的AI编程助手，我只需要用自然语言描述想要的效果，它直接生成可运行的HTML，我预览、反馈、微调，循环迭代。

---

二、从0到1：我与Claude Code的协作过程（含代码与数据）

2.1 第一步：用/hyperframes指令抓取文章

我直接在Claude Code中输入：

/hyperframes 请获取并解析这篇长文 https://mp.weixin.qq.com/s/LygRQxuRr0MrneFvBy1VMw 的核心信息，帮我生成一个2026年育儿补贴的视频教程脚本，语速适中。

遇到的问题：我本地自己写的MCP的web_fetch工具有编码bug，报错：

charmap codec can't encode characters

这是我自己实现不完善（对非UTF-8字符处理有问题），属于特例——如果你用Claude Code自带的或社区成熟的MCP插件，通常不会遇到。我花了点时间修复编码处理（增加errors='ignore'和显式UTF-8解码）后，Claude Code成功提取了补贴金额、申请条件、发放渠道，并自动生成5个场景的脚本大纲。

替代方案：如果直接抓取持续失败，Claude Code也会自动切换成搜索引擎聚合，例如搜索“2026年育儿补贴 北京 天津 海南 无锡”，从多地政府官网提取信息。这在项目记录中有体现。

2.2 项目初始化

Claude Code自动执行：

npx hyperframes init --name "2026育儿补贴教程"

生成标准项目结构：index.html、hyperframes.json、package.json。

2.3 视觉设计：从“挺丑”到“Neon Glass”

Claude Code生成了第一版HTML，暖色调（奶油底#F7EDE2、珊瑚点缀#E07A5F）。我预览后反馈：“这个视觉不太行，帮我改成深色背景+霓虹蓝紫渐变、毛玻璃卡片、文字逐字淡入，结尾按钮加个脉冲光效。”

Claude Code花了大约3-5分钟重写CSS系统。关键代码片段（从最终index.html中提取）：

:root {
  --bg-gradient: linear-gradient(135deg, #07071A 0%, #1A1B3A 100%);
  --glass-bg: rgba(20, 20, 50, 0.6);
  --glass-border: rgba(120, 120, 255, 0.3);
  --accent-primary: #6366f1;
  --accent-secondary: #a855f7;
  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid var(--glass-border);
  padding: 24px;
}

.title-gradient {
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

结尾CTA的GSAP脉冲动画：

gsap.to("#s5-cta-shine", {
  duration: 1.2,
  scale: 1.2,
  opacity: 0.8,
  repeat: -1,
  yoyo: true,
  ease: "power1.inOut"
});

预览后效果满意。

2.4 尺寸转换：16:9 → 3:4 竖屏

第一版是16:9横屏（1920×1080），但视频号更适合竖屏。我告诉Claude Code：“把视频改成1080×1440的3:4竖屏，所有字体和间距等比缩放。”

Claude Code自己写了一个Python脚本并自动执行。脚本核心逻辑（从项目记录复原）：

import re, glob

for html_file in glob.glob('*.html'):
    with open(html_file, 'r') as f:
        content = f.read()
    # 宽高替换
    content = re.sub(r'width:\s*1920px', 'width: 1080px', content)
    content = re.sub(r'height:\s*1080px', 'height: 1440px', content)
    # 字体缩放0.75倍
    content = re.sub(r'font-size:\s*(\d+)px', 
                     lambda m: f'font-size: {int(m.group(1))*0.75}px', content)
    # 间距、圆角等也等比缩放
    content = re.sub(r'padding:\s*(\d+)px', 
                     lambda m: f'padding: {int(m.group(1))*0.75}px', content)
    with open(html_file, 'w') as f:
        f.write(content)

执行后新的竖屏版本预览通过，全程无需手动修改。

2.5 TTS配音：从kokoro-onnx到edge-tts

Hyperframes的hyperframes tts命令支持多种后端。我建议Claude Code先用本地模型kokoro-onnx（免费、隐私好）。它执行：

npx hyperframes tts narration.txt --voice zf_xiaobei --output narration.wav

遇到两个问题：

• kokoro-onnx 未安装，Claude Code尝试 pip install kokoro-onnx soundfile 时遇到 csv2rdf.exe 权限错误，自动添加 --user 重装成功。
• 模型下载时，zf_xiaobei 语音文件（27MB）从 GitHub CDN 下载反复 ETIMEDOUT（国内网络不可达）。

Claude Code自主分析：网络问题导致模型下载失败，建议切换到微软的edge-tts（无需下载模型，直接调用API，国内网络稳定）。它自己重写了一段Python脚本：

import edge_tts, asyncio

async def generate():
    text = open('narration.txt', 'r', encoding='utf-8').read()
    communicate = edge_tts.Communicate(text, 'zh-CN-XiaoxiaoNeural', rate='+15%')
    await communicate.save('narration.mp3')

asyncio.run(generate())

运行后成功生成旁白。首次语速-10%时长度为39.2秒（视频31秒太长），Claude Code自动调整 rate='+15%' 后得到30.7秒，完美匹配。

2.6 字幕：Claude Code如何自动对齐？

Claude Code根据旁白文本和语速，自动生成了14组逐字字幕，每个字幕元素的data-start和data-duration精确到毫秒。它是怎么做到的？

从项目记录分析：Claude Code调用了edge-tts返回的逐字时间戳（edge_tts.Communicate 的 metadata 包含每个字符的开始/结束时间）。它将时间戳映射到HTML中的<span>元素，例如：

<span class="word" data-start="0.00" data-duration="0.24">2026</span>
<span class="word" data-start="0.24" data-duration="0.18">年</span>
<span class="word" data-start="0.42" data-duration="0.30">育</span>
<span class="word" data-start="0.72" data-duration="0.28">儿</span>
...

配合GSAP逐字淡入动画：

gsap.from(".word", {
  opacity: 0,
  y: 10,
  duration: 0.3,
  stagger: 0.05,
  ease: "power2.out"
});

但一条视频的成功不代表通用：不同TTS服务、不同语言、不同语速下，自动对齐的准确率会有差异。我在其他项目中也遇到过偏移几百毫秒的情况，需要手动调整transcript.json覆盖。不过对于这个31秒、中文、语速适中的视频，它一次就对齐了。

补充：如果TTS不返回逐字时间戳，Claude Code也会根据字符数和语速做线性估算，再通过hyperframes lint调优。项目记录中还记录了whisper-cpp未安装的错误，当时Claude Code改用手动估算写入transcript.json。

2.7 背景音乐：从“直接生成效果不佳”到“ABC记谱法+本地合成”

一开始，我让Claude Code直接生成背景音乐。它尝试了各种方法（比如用music21生成MIDI、调用在线API等），但生成的音乐要么听起来很机械，要么风格完全不对，效果很差。

于是我主动建议：“试试用ABC记谱法，你先写一段乐谱，然后本地合成钢琴曲。” 我不想用有版权风险的配乐，也不想每月付给Mubert。

Claude Code接受了这个方向。它首先生成了一个ABC乐谱文件 bgm.abc（片段）：

X:1
T:Starlight Whispers
M:4/4
L:1/8
K:C
[V:1] C2 E2 G2 c2 | A2 F2 E2 D2 | C4 z4 |
[V:2] C,2 C,2 C,2 C,2 | F,2 F,2 G,2 G,2 | C,4 z4 |

然后尝试用 music21 库解析ABC，遇到错误：

music21.exceptions21.StreamException: cannot process repeats on Stream that does not contain measures

原因是ABC中的[V:1]行内声部标记不被默认解析器识别。Claude Code没有卡住，而是自己设计了一个正则解析器（根据错误日志和常见ABC格式推理出的方案）。解析器核心代码：

import re
import numpy as np
import wave

def parse_abc(abc_text):
    notes = []
    lines = abc_text.split('\n')
    for line in lines:
        # 匹配行内声部标记 [V:1] C2 E2 ...
        match = re.match(r'\[V:(\d+)\]\s*(.*)', line)
        if match:
            voice = int(match.group(1))
            tokens = match.group(2).split()
            for token in tokens:
                # 解析音符，例如 C2 表示 C音，2拍
                pitch_char = token[0]
                duration = int(token[1]) if len(token) > 1 else 1
                notes.append((voice, pitch_char, duration))
    return notes

然后用 numpy 合成音频（加法合成正弦波），最后用 ffmpeg 转成MP3。生成的钢琴曲时长37.8秒，循环适配31秒视频。

音频生成后，我主动要求Claude Code把整个流程封装成Hyperframes技能，方便下个项目复用。它随即创建了abc-bgm技能，目录结构：

~/.claude/skills/abc-bgm/
  render.py        # 主脚本，接受 --style 参数
  styles/
    ethereal.json  # 空灵风格参数
    piano.json     # 纯钢琴风格
    warm.json      # 温暖风格

调用方式：

python ~/.claude/skills/abc-bgm/render.py bgm.abc -o bgm.mp3 -p ethereal

技能封装的好处与代价：

• 好处：以后同类任务无需重复让AI解析ABC、写合成代码，直接调用技能即可，token消耗从约8000降到约200。
• 代价：封装本身也需要消耗上下文和调试时间；当前版本仅支持三种预设风格、固定采样率，遇到新需求（如其他乐器、变速、更复杂节奏）需要再次修改技能。技能需要在实际使用中不断打磨扩充，并非一劳永逸。

目前这个技能还是手动调用脚本。要真正自动化，需要集成到批量渲染流水线中（见第四部分）。

2.8 调优：lint自动修复

hyperframes lint 报了几个警告，Claude Code阅读了报错信息，自动修改了HTML。以下为两个典型修复：

颜色对比度不足：初始 .s3-card-num 颜色 #81B29A，对比度2.07:1（要求4.5:1）。Claude Code先后调整为 #4A7C6B 再加深至 #3A6255，最终通过。

末场景残留：添加GSAP时间轴末尾kill语句：

tl.set("#scene5", { visibility: "hidden" }, 30.8);

光效溢出：在溢出元素的HTML标签上添加属性：

<div id="s5-cta-shine" data-layout-allow-overflow></div>

我完全没有干预，Claude Code运行 npx hyperframes lint 直至全部通过。

---

三、成果与反思

最终视频规格（项目结束后，我让Claude Code总结生成了 BUILD_LOG.md，以下数据来自该记录）：

属性	值
尺寸	1080×1440 (3:4竖屏)
时长	31秒
场景	5个（标题→政策→条件→渠道→提醒）
旁白	edge-tts女声，语速+15%
字幕	14组逐词淡入毛玻璃底
BGM	ABC钢琴曲 “Starlight Whispers”
视觉	Neon Glass（暗色+霓虹渐变+毛玻璃）
过渡	blur crossfade + GSAP入场动画

我的“手工操作”只有：提出初始需求、给出几次视觉反馈、建议用kokoro-onnx（后来因网络问题切换）、建议用ABC记谱法做音乐、主动要求技能化。其余代码编写、工具切换、错误修复、自动化脚本，都是Claude Code完成的。

几个关键数据点（来自 BUILD_LOG.md）：

• 错误总数：14个，全部由Claude Code自主或半自主解决。
• 技能token效率：从约8000 tokens降到约200 tokens。
• 格式转换：正则替换比手动修改快上百倍。
• 国内网络适配：自动从kokoro-onnx切换到edge-tts，绕开GitHub CDN超时。

---

四、接下来计划：从单视频到自动化流水线

目前这个流程还依赖我手动触发Claude Code对话。接下来我计划：

1. 把ABC-BGM技能集成到批量渲染脚本中
   用Rust写一个脚本，读取视频时长参数，自动调用abc-bgm（例如std::process::Command执行带参数的Python脚本，传入 --duration 45 --style ethereal），生成匹配长度的BGM，然后并行调用hyperframes render批量输出。这样就不用手动执行技能命令了。

2. 用Claude Code自动化任务（或OpenClaw）抓取热点
   每天早上自动搜索“育儿补贴”“社保新规”“养老金调整”等关键词，提取最新政策→生成脚本→渲染视频→发布到视频号。我只需要审核最终成品。

3. 模板参数化
   把CSS主题（Neon Glass、暖色商务、纯白极简）做成可配置的JSON，一条命令生成不同风格的视频，方便A/B测试。

如果你对这套流程感兴趣，或者想看看完整的ABC解析脚本、技能封装代码、项目文件树，欢迎留言。我会把模板项目发你参考。

---

相关资源：

• Hyperframes GitHub：https://github.com/heygen-com/hyperframes
• 视频即代码：Remotion vs Hyperframes 选型指南

---

后记：本文所有技术细节均来自真实项目记录（BUILD_LOG.md）。如果你也在尝试用AI编程助手做视频内容，欢迎在评论区交流你的踩坑经验。