返回博客2026年5月13日3 分钟阅读

Agent 输出 HTML 的时代到了

AI AgentClaude CodeAgent SkillsHTML

摘要

Anthropic 工程师 Thariq Shihipar 5 月初发了一条“HTML is the new markdown”，附了 20 个由 Claude Code 产出的单文件 HTML 示例。Simon Willison 第二天宣布放弃用了三年的 Markdown 默认值。这件事值得跟一跟 - 不是 HTML 全面胜出，而是 agent 输出三年前和现在已经是两回事。

5 月 7 号，Anthropic 的 Claude Code 团队工程师 Thariq Shihipar (@trq212) 发了一条推 - “HTML is the new markdown”，附了一个网站，上面是 20 个由 agent 产出的单文件 .html，按 9 类工作场景分组。第二天，Simon Willison 写了一篇短文 Using Claude Code: The Unreasonable Effectiveness of HTML，公开说“GPT-4 时代我开始默认让模型输出 Markdown，是因为 8192 token 的上限让 Markdown 的 token 效率非常划算 - 但 Thariq 这篇让我重新思考”。

48 小时内两个有分量的 AI 圈名字同时调转方向，背后并不是有什么新模型，而是大家终于意识到 agent 输出的本质和三年前不一样了。这篇我会聊聊 Thariq 那条推的实际论点、为什么是 2026 年才发生、以及一个最常被忽略的细节 - input 和 output 完全是两回事。

Markdown 是 report，HTML 是 interface

Thariq 在示例站点上写的那行框架特别简洁：

Twenty self-contained .html files an agent produced instead of a wall of markdown. Each one trades a document you'd skim for one you'd actually read.

把这句话拆开看：一边是 a wall of markdown - 你扫一眼就关掉的那种长 .md 文件；另一边是 self-contained .html - 一个本地双击就能打开、能筛选能折叠的页面。它们解决的不是同一件事。Markdown 是 report，HTML 是 interface。

那 20 个示例按 9 类组织，每一类都对应一种 Markdown 撑不住的场景：

  • Exploration & Planning - 三种方案的对照，左右并排
  • Code Review - 把 diff 渲染出来，每个 issue 一张卡，按 severity 筛
  • Design - 把 design tokens、组件变体直接渲染成可视化
  • Prototyping - 可点击的功能原型
  • Illustrations & Diagrams - 嵌 SVG
  • Decks - 用方向键翻的本地 slide
  • Research & Learning - 可搜索可折叠的研究报告
  • Reports - 周报、事故时间线，有视觉重点
  • Custom Editing Interfaces - 比如 ticket triage 板、feature flag 编辑器

这 9 类有个共同点 - 都是 agent 产出之后，人要在上面继续做事的东西，不是产出之后丢进 PR 让队友 review 的文档。Markdown 适合后者，HTML 适合前者。

Thariq 推荐的 prompt 改动也很轻 - 在原本的请求末尾加一句：

Do not only output Markdown. Generate a single-file HTML report with an executive summary, risk levels, collapsible details, action items, and next-step recommendations.

或者更具体一点，比如让 Claude Code 帮你做 PR review：

Help me review this PR by creating an HTML artifact that describes it. I'm not very familiar with the streaming/backpressure logic so focus on that. Render the actual diff with inline margin annotations, color-code findings by severity and whatever else might be needed to convey the concept well.

Simon 试了一下，拿 copy.fail 那个 Linux 漏洞的 PoC 代码喂给 GPT-5.5，让它输出“neatly styled, using capabilities of HTML and CSS and JavaScript to make the explanation rich and interactive and as clear as possible”。结果是一个深色主题、带 syntax highlight、按 severity 颜色编码 callout、能折叠展开技术细节的单文件 HTML。比对照组（Markdown 版本）的“一坨长解释”要明显好用。

为什么这件事 2026 年才发生

把时间往前拨三年 - 2023 年的 GPT-4 第一次上线时，单条对话上限是 8K token。那时候让模型输出 HTML 是奢侈的：标签本身就吃 token，外层 <html> <body> 加几段 CSS 一不小心就把空间占完了，正文反而被截断。Markdown 在那个语境下是合理选择 - token 效率高 20% 到 40%，主流模型训练语料里 Markdown 也比 HTML 多。

三年里有三件事悄悄把这个前提搬走了：

第一，context window 长到不在乎那点标签开销。Claude Sonnet 4.5、Opus 4.7 都是 200K 起步，企业版能上到 1M。让 Claude 输出 800 行 HTML 还是 400 行 Markdown，已经不是一个 token 预算决定生死的问题。

第二，agent 的输出从“被读”变成“被用”。三年前模型的输出大多是一段聊天、一份解释、一个 README - 文本本质。今天 Claude Code 一次性产出的东西更可能是：一份 PR review 报告、一份 incident timeline、一个 implementation plan 的多方案对照、一个可点击的 prototype。这些东西的最佳形式不是给人扫读的文档，而是给人继续操作的界面。

第三，Claude 的 HTML 生成能力够好了。Claude Code 团队自己显然把内部用例摸得很熟 - Thariq 的 20 个示例都是单文件、内联 CSS、必要时嵌一点 vanilla JS，几乎没有外链依赖，本地双击能开。能稳定产出这种“自包含 .html”的模型，三年前没有。

input 仍然是 Markdown 的天下

这是中文跟进文最常漏掉的一条：HTML 替代 Markdown，只发生在 output 这一侧。

方向推荐格式原因
input（给 LLM 喂的上下文）Markdown标签少 token 少；RAG 准确率高约 35%；主流模型见 Markdown 远多于 HTML
output（agent 产给人用的工件）HTML长 context 不再卡 token；HTML 自带视觉/交互/单文件可部署

证据是两边的轮子还在加速：

  • 微软的 MarkItDown 把 29 种格式（Word、PDF、PPT、HTML、Excel......）统一转 Markdown 给 LLM 吃
  • Jina 的 Reader-LM 是个 0.5B/1.5B 的小模型，专门干一件事 - 把脏 HTML 清洗转成干净 Markdown，再喂给大模型
  • 一堆 RAG 工具默认都在做 HTML → Markdown 的预处理

也就是说，喂给模型读 的方向上，整个生态在更努力地把 HTML 压成 Markdown；让模型生成给人看 的方向上，又开始让 Markdown 走向 HTML。看上去矛盾，其实是两个不同的优化目标：input 优化 token 和模型理解，output 优化人的使用体验。

把这条想清楚，会避免一个常见的错误 - 看到 Thariq 那条推就改 RAG pipeline 也改成 HTML。不需要，不该这么做。

把它写成一个 Claude Skill

每次 prompt 末尾贴一段“output HTML, with collapsible......”很烦。Claude Code 的 Skills 机制刚好适合这种“特定场景下自动改变行为”的需求 - 写一个 html-artifacts skill，在任务匹配（PR review、implementation plan、status report、custom editor 等）时自动触发输出 HTML，不匹配（短回复、纯代码、几行 patch）时不干预。

社区已经有人在做了 - dogum/html-artifacts 是一个公开的 Claude skill，作者把 Thariq 9 类用例每一类都写了一份 reference 文档（exploration、code review、design、diagrams、reports、decks、custom editors......），让 skill 在不同场景下用不同的 HTML 模板。SKILL.md 里专门写了 recognition heuristic，关键判断是：

  • ✅ 触发：comparisons、implementation plans、code reviews、design systems、diagrams、status reports、slide presentations、custom editors
  • ❌ 不触发：short conversational replies、code-only outputs、minimal content

这是把“什么时候用 HTML”这一层判断从 prompt 里挪到 skill 里 - 你不需要每次都想要不要加一句，skill 自己识别场景。

什么时候还是 Markdown 更好

不能一刀切的几个场景 - 我自己也试过几次 HTML，回头发现还是 Markdown 更合适：

  • 工件要进 git repo 长期保存、要被 review。HTML 单文件几百行，diff 看起来一塌糊涂，没法做 code review。文档放 Markdown，让阅读时再用工具渲染。
  • 工件只是几行结论、几条 TODO。HTML 模板套上去，正文 5 行、外壳 200 行，纯属浪费。
  • 工件要在终端 / 命令行环境里读。HTML 是浏览器载体，CLI 用户不可能为了看一份 5 行的报告先打开 Chrome。
  • 工件要直接发给非技术读者。HTML 文件双击打开是会有人不会用的，一封 markdown 邮件反而稳。

简单判据 - 工件的下一步动作是“读”还是“用”。读 → Markdown，用 → HTML。

跑起来

如果想立刻试一下，最低成本的方式：

  1. 打开 Claude Code，挑一个最近的 PR
  2. 输入：帮我做这个 PR 的 code review，输出一个单文件 HTML 报告，按 severity 把 finding 渲染成可筛选的卡片，diff 用 syntax highlight 显示，复杂逻辑给个 collapsible 展开
  3. 拿到那个 .html，本地双击打开看效果

不满意？把 prompt 再细化，加一句 “include a summary section at the top with overall risk level”，再跑一次。HTML 这种产物因为是自包含的，每次重生成成本极低 - 这正是 Thariq 9 类用例的共同前提：单文件、单次生成、可丢弃可重生，所以可以肆无忌惮地迭代它。

如果想长期用，把这个流程封装成 skill。可以从 dogum/html-artifacts 的 SKILL.md 起步，参考它的 9 份 reference，按自己的工作流改。

链接合集：

相关文章

最近一封 · Sample

把 GSC 站点导入 Bing Webmaster：5 分钟打开 AI 搜索的后门

“做 SEO 的人通常会问 'Bing 在 2026 年还值得做吗'。这是个错的问题。Bing 自己 5-8% 的份额其实不是重点 - 重点是 ChatGPT search、Microsoft Copilot、DuckDuckGo、Yahoo、Ecosia、Perplexity 部分查询都吃同一份 Bing 索引。一份索引 = 整个非 Google 的搜索生态 + 大半个 AI 助手生态的入口。这件事 5 分钟可以做完，免费，没有下行风险，是当下被严重低估的一个 SEO 动作。”

—— william

Letters

来信

里面装的是

  • 新文章 — 写完一篇就寄一封，不攒货
  • 这周读到的、看到的、好用的工具
  • 正在折腾的实验，附带翻车记录

约莫 1–2 周一封 · 随时退订

合作伙伴

CompeteMap — 英国及爱尔兰学生竞赛一站式搜索

数学、编程、科学、写作等各类竞赛信息汇总，支持按年龄和科目筛选，再也不错过报名截止日。

准备开始了吗？

先简单说明目标，我会给出最合适的沟通方式。

预约 30 分钟邮件联系