起因：研究 Pixelle-Video 时发现它用了一个挺反直觉的方案——用浏览器截网页当视频帧。一开始觉得很怪，搞清楚之后发现这其实是个相当聪明的设计。本文把这套思路和"纯 AI 生图"做个对比，给做短视频自动化的朋友参考。
一、问题背景
要做 AI 短视频，画面是怎么来的？目前主流就三条路：
- 纯 AI 生图：每一帧整张图都让模型画（FLUX、SDXL、MJ 等）
- 纯 AI 生视频：用 T2V/I2V 模型直接出视频片段（Sora、Kling、WAN）
- HTML 模板 + AI 生图（混合方案）：模板做版式 + AI 画其中的"那张图" + 浏览器截图当帧
第 3 种就是 Pixelle-Video 走的路。下面重点对比 1 和 3。
二、先纠正一个误区
很多人第一反应：「HTML 不就是画网页吗，能画人物吗？画不了吧，那它怎么做视频帧？」
这是把它当成"替代 AI 生图"了。实际上它是和 AI 生图分工合作，不是二选一。
一帧画面的真实组成：
最终一帧 PNG ≈ HTML 模板（壳子） + AI 生成的图片（嵌进壳子里）举例，知识科普视频的一帧：
┌────────────────────────────────────┐
│ 📚 中国历史冷知识 ← HTML 画的标题
│ ───────────────── ← HTML 画的分隔线
│ ┌──────────────────┐
│ │ │ ← AI 生图（嵌在这里）
│ │ 长安城风貌图 │
│ │ │
│ └──────────────────┘
│ 「长安城在唐代有百万人口…」 ← HTML 画的字幕卡片
│
│ @YourBrand Page 03/10 ← HTML 画的水印 / 页码
└────────────────────────────────────┘- AI 生图只负责"中间那张画"
- HTML/CSS 负责整个壳子：背景、标题、字幕卡片、水印、排版、字体、风格
- Playwright 把整体截图成一张 PNG = "一帧"
三、谁负责画什么
HTML 负责"非画面内容"，AI 生图负责"画面内容"。
| 类别 | 谁来画 |
|---|---|
| 人物 / 场景 / 物体 | AI 生图（FLUX / Qwen-Image / SDXL） |
| 真实地图 / 文物照 / 引用图 | 真实素材（你上传的 jpg） |
| 标题 / 字幕 / 文案文字 | HTML / CSS |
| 背景色 / 渐变 / 纹理 | HTML / CSS |
| 卡片 / 装饰元素 / 二维码 / 水印 | HTML / CSS |
| 布局 / 字体 / 配色风格 | HTML / CSS |
HTML 能不能画人物？不能（也不该）。
- HTML/CSS 本质是排版语言，不是绘图语言
- 极限是 emoji、纯色形状、SVG 图标、装饰元素
- 想要"长安城百姓"这种画面 → 必须 AI 生图
- 想要"真实历史人物照" → 用真实素材
四、混合方案 vs 纯 AI 生图整帧
按几个关键维度对比：
| 维度 | HTML 模板 + AI 生图（混合方案） | 纯 AI 生图做整帧 |
|---|---|---|
| 成本 | 文字部分零成本（HTML 不要钱），只 AI 那块插图花钱/算力 | 整帧都要 AI 算力，贵 |
| 速度 | 文字部分毫秒级，瓶颈在 AI 那张图 | 整帧都要等 AI 出，慢 |
| 文字精度 | 100% 精确，你写啥就是啥 | AI 经常写错字、漏字、字体丑 |
| 布局可控性 | 像素级，CSS 想怎么排怎么排 | AI 布局飘忽，元素位置不可控 |
| 风格一致性 | 系列视频用同套模板，风格 100% 统一 | 每帧风格随机，跨帧不一致 |
| 改文案 | 改 HTML 变量秒级重渲 | 整帧重新生成，又慢又贵 |
| 多语言 | i18n 文本一改即可 | 要重新生图 |
| 真实素材融入 | <img src> 直接嵌入，零损失 |
不可能直接用真实素材 |
| 人物 / 复杂画面 | 依赖 AI 那块的能力（与纯 AI 等同） | 由整图模型决定 |
| 画面自由度 | 受模板"槽位"限制 | 自由度更高 |
| 二次开发 | 会 HTML 就能加模板 | 改不动 |
一句话总结
HTML + AI 生图：贵的事情交给 AI（画图），便宜的事情交给浏览器（排版）。
纯 AI 整帧：所有事情都交给 AI 来做，包括它根本不擅长的"写字"和"排版"。
五、各维度展开说
5.1 成本
假设一条 10 帧的科普视频：
- 混合方案：10 次 AI 生图 + 10 次 HTML 渲染（≈ 免费）
- 纯 AI 方案：10 次 AI 整帧生图
如果整帧分辨率是 1080×1920（竖屏），AI 模型要画的像素是混合方案 AI 部分的 3-5 倍（因为整帧比模板里那块插图大得多）。算力成本可能差 3-5 倍以上。
5.2 速度
- HTML 模板渲染 + Playwright 截图：单帧毫秒级
- AI 生图：单帧秒到十秒级
HTML 这层在总耗时里基本不占比例。瓶颈仍在 AI 出图——但混合方案让 AI 只画一小块，比让 AI 画整帧更快。
5.3 可控性 —— 这是最大的差距
AI 生图有几个"治不好的病"：
- 写不准字：让 SDXL 写"中国历史冷知识"，出来八成是天书或错字
- 布局飘忽：让它"左上角写标题，右下角写水印"，AI 自己发挥
- 风格随机：每张图都有微妙差异，10 帧拼起来风格不统一
- 字体丑陋：AI 画的字体没法选
HTML 把这些全部解决：文字 100% 精准，布局像素级，字体随便选，10 帧用同套 CSS 风格完全一致。
5.4 改文案 / 多语言
这点经常被低估。
- 客户说"标题改一下"——
- 混合方案：改一个变量，秒级重渲
- 纯 AI 方案：整帧重新生成，等几分钟，画面里其他东西可能还变了
- 要做英文版——
- 混合方案：i18n 文件加一份英文，重渲
- 纯 AI 方案：每帧重画一遍
对需要快速迭代/多语言/批量出片的场景，差距是数量级的。
5.5 真实素材的处理
历史地理类、人物纪录、商品广告等场景常有真实素材（真实地图、文物照、产品图）。
- 混合方案：
<img src="map.jpg">直接放进 HTML，零损失 - 纯 AI 方案：不可能直接用，最多让 AI 模仿一张（精度会大打折扣）
六、混合方案的代价 / 限制
也不是没缺点：
- 画面自由度受模板槽位限制
- 一套模板就一套布局，AI 那块只能填进固定区域
- 解决：多做几套模板按场景切换
- 依赖 HTML/CSS 能力
- 二开门槛是"会写 HTML"，对纯 AI 团队是个加分项也是负担
- Playwright 是单机重组件
- 要装无头 Chromium，Linux 还要装一堆字体/库
- 多 worker 并发渲染需要工程化
- 动效有限
- 静帧 OK，想做"Ken Burns 推拉 + 文字动效"需要前端做 CSS 动画，但帧渲染时还是截图，所以HTML 的动画在最终视频里看不到——需要做成"逐帧不同状态截图"或者把动画交给 ffmpeg
七、什么场景用什么方案
按场景给建议：
| 场景 | 推荐方案 |
|---|---|
| 知识科普 / 资讯 / 语录 / 书摘 | ✅ 混合方案（甜点） |
| 历史地理类口播 | ✅ 混合方案（真实地图+AI 意境图+HTML 字幕） |
| 营销号图文视频 | ✅ 混合方案 |
| 电商商品介绍 | ✅ 混合方案（产品真图+卖点 HTML） |
| 教程类（带步骤、要点） | ✅ 混合方案 |
| 追求"作品级"纯视觉视频（MV、短片） | ❌ 用 AI 视频模型（Sora/Kling） |
| 写实人物口播 | ❌ 用数字人方案 |
| 每帧画面差异极大且无文字 | ❌ 直接 AI 生图整帧 |
混合方案不是万能的，它的甜点是"信息密度高、有文字、要快、要稳"的场景。对"画面即一切"的纯视觉视频不合适。
八、为什么这套思路反直觉但其实很聪明
很多人第一反应是"AI 时代不就该 AI 来做一切吗"。但分析下来：
- AI 不擅长写字，HTML 擅长 → 文字交给 HTML
- AI 不擅长精确排版，HTML 擅长 → 排版交给 HTML
- AI 不擅长重复一致，HTML 模板是死的天然一致 → 一致性交给 HTML
- AI 擅长画画，HTML 一点都不擅长 → 画画交给 AI
- 真实素材 AI 无法生成，HTML 能直接嵌入 → 素材交给 HTML
每个环节都用它最擅长的工具，整体成本/速度/可控性全方位优于"AI 包办整帧"。
类比：
这就像做杂志。你不会让插画师手画整本杂志（包括标题、目录、页码、广告位）。
正确做法是：排版交给设计师（用 InDesign），插画交给插画师，照片交给摄影师。
现在只不过是把"设计师"换成 HTML/CSS，"插画师"换成 AI 生图模型。
九、对自动化短视频架构的启示
如果你在搭自己的短视频自动化系统，可以借鉴的设计原则：
- 把"画面"拆成"版式 + 内容"两层，分别用最擅长的工具
- 可替换的内容层：插图槽既可以塞 AI 生图、也可以塞真实素材、也可以塞外部 API 出的图
- 模板就是产品：模板设计是这套架构的核心资产，做好几套模板 = 做好半个产品
- 文字相关坚决不让 AI 做：标题、字幕、文案、水印一律 HTML，杜绝错字
- Playwright 渲染层做成独立 worker：方便扩展，方便复用
十、结语
"用浏览器截网页做视频帧" 听起来像 hack，实际上是一个把传统前端能力和 AI 能力最优搭配的设计。
对做 AI 短视频量产的团队，这套思路（不一定非用 Pixelle，自己实现也行）几乎是当前阶段的最优解之一——直到 AI 生图能稳定写对中文、精确控制布局为止。
而那一天什么时候到，没人知道。
附：实现要点（如果你想自己搭）
最小可行版本所需组件：
- HTML 模板：纯静态 HTML/CSS，预留若干
{{ variable }}槽位（标题、文案、图片路径） - 模板渲染：Jinja2 / 任何模板引擎，把变量填进去生成临时 HTML
- 浏览器截图：Playwright 起无头 Chromium，
page.goto(file://临时.html)+page.screenshot() - AI 生图：调任意生图 API/模型，产出 jpg，写入临时目录，路径塞进模板变量
- TTS 配音：edge-tts 等
- 合成：ffmpeg 把帧 + 音频拼成 mp4
核心代码不超过 200 行就能跑通最小版本。
Pixelle-Video 的代码可以作为参考实现，重点看 [pixelle_video/services/frame_html.py]