用 HTML（HyperFrames）把 Agent 的工作“讲清楚”：让 Codex 给你做一条解说视频

你有没有这种经历：

Agent 跑完一堆步骤，你打开输出，满屏 Markdown。
标题、列表、代码块混在一起。
你想搞清楚“它为什么这么做”，要翻半天。

我更偏向用 HTML 来写 Agent 的过程展示。不是为了“炫技”。是为了 让人一眼看懂，也更适合后面让 Codex 产出视频脚本。

这篇就聊一件事：

用 HTML 的“帧（Frame）”结构，把 Agent 的任务链路做成可读、可解释、可复用的素材，再交给 Codex 变成解说视频。🎬

为什么我觉得 HTML 比 Markdown 更适合讲 Agent 的工作？

Markdown 的问题：信息会“糊”在一起

Markdown 很适合写文章。但拿来展示 Agent 的工作流，常见问题是：

层级容易塌：一会儿标题一会儿列表，读者得自己脑补结构。
状态不直观：进行中 / 已完成 / 失败 / 回滚，全靠文字描述。
证据和结论挤一团：比如“搜索结果”和“最终决策”混在同一段里。
跨步骤跳转难：你想从“决策”跳到“引用证据”，不方便。

HTML 的优势：你可以强制结构化

HTML 的强项是：

你能明确划分“区块”。
你能给每块加 id，做跳转。
你能用 data-* 标注元信息（状态、耗时、工具、置信度）。
你能用 CSS 让“证据/决策/输出”视觉分离。

一句话：

HTML 适合当 可交互的工作台，Markdown 更像 最终稿。

HyperFrames 是啥？别被名字吓到

我说的 HyperFrames，不是啥玄学。就一个朴素思路：

把 Agent 的每一步都做成一个“帧（Frame）”，每帧只讲一件事。

每个 Frame 建议固定包含这些槽位：

目标（Goal）：这一帧要解决什么
输入（Input）：它拿到了什么
动作（Action）：调用了哪个工具 / 做了什么操作
证据（Evidence）：依据是什么（引用、截图、链接、日志）
决策（Decision）：为什么选 A 不选 B
输出（Output）：这一帧交付了什么

你会发现：这东西天然适合拿去做视频。

因为视频就是：

这一段要讲啥
有什么画面
为什么这样做
结果是什么

完美对齐。

你可以直接抄的 HyperFrames HTML 模板

把下面保存成 hyperframes.html，后面所有内容都往里填。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Agent HyperFrames</title>
  <style>
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; margin: 24px; line-height: 1.5; }
    .frame { border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; margin: 12px 0; }
    .meta { display: flex; gap: 10px; flex-wrap: wrap; color: #6b7280; font-size: 12px; }
    .badge { background: #f3f4f6; padding: 2px 8px; border-radius: 999px; }
    .grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
    .slot { background: #fafafa; border-radius: 10px; padding: 12px; }
    .slot h4 { margin: 0 0 6px 0; font-size: 14px; }
    code, pre { background: #0b1020; color: #e5e7eb; border-radius: 8px; padding: 10px; overflow: auto; }
    a { color: #2563eb; }
  </style>
</head>
<body>

<h1>Agent HyperFrames</h1>
<p>把每一步拆成 Frame。读起来像看“操作回放”。</p>

<section class="frame" id="f-001" data-status="done" data-tool="browser" data-seconds="42">
  <div class="meta">
    <span class="badge">Frame #001</span>
    <span class="badge">状态：done</span>
    <span class="badge">工具：browser</span>
    <span class="badge">耗时：42s</span>
  </div>

  <div class="grid">
    <div class="slot">
      <h4>Goal</h4>
      <p>确认目标用户想看的内容结构。</p>
    </div>
    <div class="slot">
      <h4>Input</h4>
      <pre><code>用户需求：做一个解释 Agent 工作流程的短视频</code></pre>
    </div>
    <div class="slot">
      <h4>Action</h4>
      <p>检索同类视频脚本结构，整理分镜常用模板。</p>
    </div>
    <div class="slot">
      <h4>Evidence</h4>
      <ul>
        <li><a href="#">参考链接A</a></li>
        <li><a href="#">参考链接B</a></li>
      </ul>
    </div>
    <div class="slot">
      <h4>Decision</h4>
      <p>采用「问题-过程-结果」三段式，镜头更好剪。</p>
    </div>
    <div class="slot">
      <h4>Output</h4>
      <pre><code>分镜结构草案 v0.1</code></pre>
    </div>
  </div>
</section>

</body>
</html>

你后面要做的，就是不断复制 <section class="frame">...</section>。

每一帧只写一件事。别贪。

把 HyperFrames 喂给 Codex：直接生成“解说文案 + 分镜”

你想要的结果一般是三件套：

解说词（人能听懂）
分镜表（每镜头画面要啥）
镜头对应素材（截图/录屏/代码片段/关键证据）

HyperFrames 的好处是：Codex 不用猜你在讲啥。帧里已经把“证据”和“决策”切开了。它只要按帧翻译成镜头语言。

一个能直接用的提示词（Prompt）

把你的 hyperframes.html 内容贴给 Codex，然后加这段指令：

你是视频脚本导演。
我会给你一份 HTML（HyperFrames），每个 frame 表示 Agent 的一步。

任务：
1) 输出 60-90 秒中文解说文案，口语化，少形容词，多动作。
2) 输出分镜表：镜头号 / 画面内容 / 屏幕元素建议（高亮什么）/ 对应 frame id。
3) 标出哪些句子有“AI味”，给出更像人说话的改写版本（两种备选）。

硬性要求：
- 逐帧覆盖，不要跳步骤。
- 证据必须从 Evidence 槽取，不要编。
- 决策理由只能来自 Decision 槽。
- 输出用 Markdown 表格。

开始处理：
【粘贴 HTML 全文】

你原文里提到“文案有点 AI 味”。这一步就专门用来治这个毛病。让它自己指出“AI味句子”，再给人话版本。

视频怎么落地？给你一条省事流程

你不需要一口气搞大制作。按这个节奏走，基本能在一个晚上出片。

1）素材准备

每个 Frame 对应一张素材：截图或录屏片段
Evidence 里的链接、引用，截成图备用
工具调用结果（搜索页、终端输出、图表）尽量留痕

小建议：

录屏时别鼠标乱飞，看得人烦。
每帧停顿 2-3 秒，后期好剪。

2）脚本定稿

Codex 生成脚本后，你自己只做两件事：
- 删废话
- 把长句砍短

判断标准很简单：

你读一遍，自己都想快进，那就得改。

3）剪辑拼装

每个镜头只突出一个信息点
画面高亮 Evidence 里的关键字
决策段落加一个“因为…”的字幕，观众立刻懂

避坑清单（血压升高预警）

一帧塞三件事：你以为信息量大，观众只会记不住。
Evidence 只放“我觉得”：证据要可引用。链接、截图、日志都行。
Decision 写成口号：别写“为了更好”。写真实理由，比如“这个方案少 2 次请求，失败率更低”。
工具输出不留痕：没有证据的视频，看起来像编故事。
全程旁白无画面引导：观众听着听着就走神。字幕高亮、框选、箭头要用起来。

一个你马上能用的“最小可行版本”

你赶时间就这么做：

只写 5 个 Frames
- 需求澄清
- 信息检索
- 方案选择
- 执行生成
- 结果校验
每帧配一张截图
让 Codex 出 60 秒脚本
剪成竖屏，做成口播 + 屏幕录制

发出去，效果通常比你想的好。因为“讲清楚过程”的内容，天然就有人爱看。

你会喜欢 HTML 的另一个原因：它能变成团队协作的界面

Markdown 更像写给“读者”。 HTML 的帧结构更像写给“队友”。

产品看 Goal
研发看 Action
审核看 Evidence
老板只看 Output

大家各取所需，不用互相折磨。

如果你手头有一段 Agent 输出（Markdown 或日志），也可以丢给我。我能帮你把它整理成 HyperFrames 结构，顺便给一套适合 Codex 的脚本提示词。