企业官网建设流程全解析

• AI 应用
• 人工智能
• AI Agent
• AI 写作
• 媒体生成

本文围绕 HTML Anything 内置的video-hyperframes技能，完整拆解一条「视频化内容」生产链路：先用 Markdown 写出按帧拆分的视频脚本，再让 AI 依据模板规则生成可自动播放的 Hyperframes HTML 帧动画，最后借助项目自带的解析与导出管线，一键得到可直接喂给 Remotion 渲染成 mp4 的工程文件。读完你将掌握该技能的三件套结构（example.md输入脚本 →SKILL.md模板规则 →example.html渲染产物）、帧元数据的三种携带方式，以及从编辑器「导出 → 解压 → 渲染」的完整实操路径。

一、技能定位：video-hyperframes是什么

在 HTML Anything 的模板体系里，每个技能（Skill）都是一个目录，包含SKILL.md（模板规则 + frontmatter 元数据）、可选的example.md（示例输入）与example.html（预渲染预览），统一由 模板加载器 扫描src/lib/templates/skills/<id>/目录读取。

video-hyperframes的 frontmatter 给出了它的完整定位（见 SKILL.md）：

该技能要解决的问题很具体：写一段带叙事节奏的短视频脚本，并把它变成可预览、可导出的逐帧动画 HTML。其源头来自 heygen-com/hyperframes 的帧动画思路，但在 HTML Anything 中已经演化为一套完整的「脚本 → HTML → Remotion 工程」工作流。

二、输入侧：读懂 8 帧视频脚本（example.md）

example.md是一段真实可用的短视频脚本示例，主题是「AI workflow 三件套」，共 8 帧，每帧标注了时长。它演示了该技能要求的脚本写法：每帧 = 一个镜头 + 一句话。

完整脚本如下（原文逐字保留，来自 example.md）：

# Hyperframes 视频脚本: AI workflow 三件套 ## 帧 1 (hook, 3s) 80% 的 AI 工具用户, 都没用对 prompt。 ## 帧 2 (3s) 不是因为 prompt 难写。 ## 帧 3 (3s) 是因为他们一直在重写。 ## 帧 4 (4s) 真正高效的人, 用模板。 ## 帧 5 (4s) 模板 = 提示词 + 设计 system + 输出格式 ## 帧 6 (5s) HTML Anything 把这三件事打包好了。 ## 帧 7 (5s) 9 套模板, 一个动作: ⌘+Enter ## 帧 8 (CTA, 3s) github.com/nexu-io/html-anything

这段脚本直接体现了 SKILL.md 规定的叙事骨架：第 1 帧是 hook（一个反常识断言：「80% 的 AI 工具用户没用对 prompt」），第 2～7 帧是论证链（递进式抛出观点、公式、产品价值、行动指令），最后是结论 + CTA。总时长 3+3+3+4+4+5+5+3 = 30 秒，恰好是一段适合短视频平台的口播/字幕动画长度。

三、模板规则：SKILL.md 的七条硬性约束

把上面的脚本喂给 AI 后，SKILL.md会约束生成 HTML 的行为，这七条规则是整个技能的灵魂：

1. 帧结构：输出 N 个连续的<section class="frame">，每个固定w-[1920px] h-[1080px]；N 由内容信息密度决定，短脚本 6～10 帧起步，每帧只承载一个镜头/概念。
2. 单帧单义：每帧表达一个镜头/概念，文字 + 视觉构图（中央构图 / 黄金分割 / 三分法三选一）。
3. 隐藏标记：每帧底部写<!-- frame:N duration:3000 transition:fade -->注释，供后续 Remotion / Hyperframes 渲染脚本读取。
4. 自动播放：顶部加一段 JavaScript，每 3 秒切到下一帧，同时支持点击 / 方向键控制，角落显示进度条。
5. hook 结构：帧 1 是 hook（数据 / 反常识 / 问题），中间是论证，结尾是结论 + CTA。
6. 极简排版：字号巨大（text-9xl级别），一句话即可，不堆砌文字。
7. 统一配色：一套电影感配色——深色背景 + 1 个霓虹强调色。
8. 元数据注释：输出末尾附带<!-- HYPERFRAMES_META: ... -->，内含每帧 duration / transition / sceneSummary 的 JSON，用于后续转 Remotion。

对照 example.html 可以逐条验证规则的落地：8 个<section class="frame">均未写死w-[1920px] h-[1080px]类（代码以position:fixed; inset:0撑满视口），但 Remotion 导出端固定按 1920×1080 画布装载；配色统一为深黑背景 +#e9b94a（琥珀黄）强调色 +#c96442（橙红）辅助色；第 5 帧采用了三分法式的三行公式构图。

四、渲染侧：example.html 的自动播放实现

example.html 是一个可独立打开的自包含页面（Tailwind CDN + 内联<style>），其播放核心分三块：

1. 帧切换状态机

<section class="frame active hook"><script> const frames = Array.from(document.querySelectorAll('.frame')); // ... function show(n) { i = (n + total) % total; frames.forEach((f,k)=>f.classList.toggle('active', k===i)); counter.textContent = String(i+1).padStart(2,'0') + ' / ' + String(total).padStart(2,'0'); frameStart = Date.now(); if (playing) schedule(); } function schedule() { clearTimeout(timer); const d = Number(frames[i].dataset.duration) || 3000; timer = setTimeout(()=> show(i+1), d); } function tick() { const d = Number(frames[i].dataset.duration) || 3000; const pct = Math.min(1, (Date.now()-frameStart)/d) * 100; progress.style.width = pct + '%'; requestAnimationFrame(tick); } </script>

show()负责循环切帧（(n + total) % total实现首尾循环），schedule()读取当前帧data-duration决定下一次切帧的间隔，tick()用requestAnimationFrame驱动顶部 3px 高的进度条。控制条提供‹/⏸/›三键，并监听方向键与空格键。

3. 帧元数据 JSON

文件末尾的注释是关键的下游接口：

<!-- HYPERFRAMES_META: {"frames":[ {"i":1,"duration":3000,"transition":"fade","scene":"Hook: 80% 的人没用对 prompt"}, ... {"i":8,"duration":3000,"transition":"fade","scene":"CTA: github.com/nexu-io/html-anything"} ]} -->

注意一个细节：这里scene字段的值（如「Hook: 80% 的人没用对 prompt」）是对应 example.md 中各帧文案的摘要。AI 在生成 HTML 时会把脚本逐帧翻译进 HTML 结构，并把每帧语义同步写进HYPERFRAMES_META，这是脚本与最终视频一一对应的关键。

五、源码级解析：hyperframes.ts 如何读懂帧

hyperframes.ts 是前端的解析层，负责从任意 HTML 中识别「这是一份 Hyperframes 文档」并抽出帧数据：

• 识别：isHyperframes()用正则<section\b[^>]*\bclass\s*=\s*["'][^"']*\bframe\b...检测是否存在frame类 section；
• 元数据提取：META_RE = /<!--\s*HYPERFRAMES_META\s*:\s*([\s\S]*?)-->/i抓取 META JSON；解析失败时（Agent 偶发输出不合法 JSON）会优雅降级，回退到每帧的data-duration和行内注释标记；
• 时长优先级：META JSON >>npm install npx remotion render Hyperframes out/video.mp4

  预览与微调：

  npx remotion studio

  然后打开 Hyperframes 合成，直接修改src/Video.tsx中的FRAMES数组即可调整帧时长或转场。

  七、实操路径：在编辑器里走通全流程

  结合上述源码，在 HTML Anything 中的完整使用路径是：

  1. 选择技能：打开模板选择器，找到「Hyperframes 视频脚本」（recommended: 5使其位于推荐区靠前位置），可悬停加载example.html预览；
  2. 写脚本：按example.md的格式撰写 Markdown 视频脚本，标注每帧时长与 hook / 论证 / CTA 结构；
  3. 生成：⌘+Enter 触发 AI 生成，得到带自动播放脚本、进度条与HYPERFRAMES_META的帧动画 HTML，右侧预览区可直接播放查看（FRAME 01 · OPENING之类的帧指示会显示在预览区顶部）；
  4. 导出：打开导出菜单，Hyperframes 分区出现「Remotion Zip」动作（export-menu.tsx），点击后浏览器下载 zip；
  5. 渲染：本地解压，执行npm install && npx remotion render Hyperframes out/video.mp4得到成片。

  八、实用注意事项

  从 remotion.ts 生成的 README 注释中，可以提炼出两个实操雷区：

  • 单线程渲染是默认值：remotion.config.ts设置了Config.setConcurrency(1)，因为每个帧 iframe 挂载时会重新请求cdn.tailwindcss.com。渲染耗时大致与「帧数 ×（CDN 加载 + 截图）」成正比。加速手段有二：调高并发数，或把各帧 HTML 里的 CDN<script>换成预编译样式表。
  • 帧内相对资源会 404：每帧 HTML 从public/frames/frame-NN.html提供服务，<img src="logo.png">会解析到/frames/logo.png。解决方式是：把资源放进public/frames/、转成>赞分享

• Hermes Studio HyperFrames 技能实战：用 HTML/CSS/JS 合成并渲染 AI 视频（MP4）

  Hermes Studio HyperFrames 技能实战：用 HTML/CSS/JS 合成并渲染 AI 视频（MP4） 本篇技术指南围绕 Hermes St

  AI 应用人工智能AI Agent本地部署前端后端工作流自动化

• 终极指南：3分钟掌握MouseClick鼠标连点器，轻松实现自动化点击

  终极指南：3分钟掌握MouseClick鼠标连点器，轻松实现自动化点击 还在为重复的鼠标点击操作烦恼吗？无论是游戏中的挂机升级、办公软件的批量处理，还是日常工作

  AI 应用人工智能AI AgentAI 写作媒体生成

• Huashu Design 视频导出完整指南：HTML 动画转 MP4/GIF 的脚本工具链与最佳实践

  Huashu Design 视频导出完整指南：HTML 动画转 MP4/GIF 的脚本工具链与最佳实践 动画 HTML 跑通之后，如何把它变成能交付、能上传、能

  AI 技能