Anthropic 工程师停了写 Markdown 了，他公开 20 个 HTML 例子告诉你为啥

这两天 AI 圈有一件挺值得放大看的事。

Anthropic Claude Code 团队的工程师 Thariq Shihipar 发了一条推文 + 一篇文章 + 一个 showcase 网站。标题叫 《Using Claude Code: The Unreasonable Effectiveness of HTML》。

第一句就是：

HTML is the new markdown. I’ve stopped writing markdown files for almost everything and switched to using Claude Code to generate HTML for me.

直译：HTML 是新的 markdown。我已经基本不写 markdown 了，全部让 Claude Code 给我生成 HTML。

然后他放了 20 个 self-contained 的 .html 文件作为证据。每个文件都是日常工作中本来会用 markdown 写、现在用 HTML 写出来的产物。从 PR 审查到模块地图，从设计系统到 incident 时间线，覆盖大半个工程师工作流。

这件事值得放大看，因为信号源不是外部观察者，是 Claude Code 团队内部工程师。Anthropic 的人在用 Claude Code 给自己干活，他们的”今天我不再用 markdown 了”是真实工作流的迁移，不是观点之争。

下面把他这套主张拆开讲——为什么 markdown 撑不下去了，HTML 接什么班，以及 20 个例子里你今晚就能照着抄的几个。

一、Markdown 被它的本性反噬

Markdown 2004 年由 John Gruber 发明，设计目标只有一个：让人像写纯文本一样写格式化文档。语法极简，写起来不打断思路。

但它有一个内置假设：信息天然是线性的。从上到下读，从前往后写。绝大部分人写的东西也确实是一维流，所以这个假设撑了很多年。

直到 AI 进来。

你让 Claude review 一个 PR，它输出 30 个发现，每个带 severity、相关文件、修复建议。让它出项目计划，给你时间线、依赖、风险表、负责人。让它讲分布式系统概念，配示意图、代码、对比表。

这些东西天然不是线性的。它们是空间信息——有 layout、有相互引用、有 hover 才显现的细节。

Thariq 那句论断点透了核心：

markdown flattens spatial information.

markdown 把空间信息拍扁了。拍扁的代价就是读者扫到第 300 行就走神，AI 输出的 80% 价值被格式吃掉。这不是 AI 不会写，是 markdown 这个容器装不下了。

二、为什么 HTML 接得住

20 年前你不会想用 HTML 做日常笔记格式，因为它要写 <div>、要写 <style>、要打开浏览器看效果。手写 HTML 是一件费手的事。

但现在你不手写。你让 AI 写。

AI 写 HTML 跟写 markdown 一样轻松，输出长度差别不大（多 30-50% token）。生成时间稍长（3-5 秒变 8-15 秒）。但读取体验差距是十倍以上。

HTML 给你三件 markdown 没法给的事：

第一件，spatial layout。

你能说”这个表格放左边、流程图放右边、注释悬浮在图上”。markdown 没有这个能力——它只有上下，没有左右。HTML 不仅有左右，还有 z-index、有 anchor、有 anchor 跳转。

第二件，interactivity。

可点击。可拖拽。可滑动。可展开折叠。这些不是花瓶，它们是信息的过滤层——读者能”先扫概览，再点开细节”。markdown 强迫你一次性看完所有，HTML 给你做选择的权利。

第三件，living artifacts。

HTML 文件是活的。打开就跑，不需要任何 viewer，不需要装 plugin，不需要 markdown renderer 的版本兼容。点开 .html，浏览器直接给你展示最终态。

这三件事加在一起，就是 Thariq 那句话里的”unreasonable effectiveness”——不可思议的有效性。很多原本不可能在文档里表达的信息，突然变得可以了。

三、20 个例子里挑 4 个值得抄

Thariq 的 showcase 网站 上 20 个例子分得挺杂，但仔细看其实分四大类。每类挑一个最能讲透”HTML 强在哪”的，给你抄。

类 A：决策类——并列对比

最值得抄的：Three Code Approaches，三个实现方案并排对比。

markdown 干不好的原因：它强迫顺序写”方案 A / B / C”，看到 C 时已经忘了 A。HTML 直接三栏并列，相同的关注点（性能 / 复杂度 / 依赖）视觉对齐，两秒看出关键差异。

prompt：

对比 [题目] 的三个实现方案。Self-contained HTML，
三栏并列，每栏 TL;DR + 核心代码片段 + trade-off 表。

棒棒的是，这 HTML 直接发同事，浏览器一打开就能 review，不装任何东西。

类 B：协作类——agent 边栏注释

最值得抄的：Annotated Pull Request，带 inline margin annotation 的 diff。

GitHub 网页 review 注意力曲线很差，因为它不让你用空间——评论全堆下面，看 diff 来回跳。Thariq 这套是把 AI review 注释画在 diff 旁边的边栏，每个发现一个 severity 色标，点击展开。

Review 这个 PR。Self-contained HTML：
- diff 含 syntax highlighting
- 每个发现 inline margin annotation，按严重度配色
- TL;DR 顶部、文件级摘要右栏 sticky

在 GitHub 上 review 100-file PR 是一晚上的活，这种 HTML 是 30 分钟。

类 C：设计系统——HTML 作为双向格式

最值得抄的：Living Design System，把设计 token 渲染成可视化色板。

Thariq 原文里那句最漂亮：

Tokens become swatches, components become contact sheets that you can feed straight back into the next prompt.

token 变成色板，组件变成 contact sheet，可以直接喂回下一轮 prompt。

这句话点透了——HTML 不只是输出格式，是 AI 的输入格式。这轮让 AI 出 design system HTML，下轮把它当上下文给 AI 让它基于”刚才那批 swatches”做新设计。markdown 做不到——“主色 #2563EB”在下一轮仍然是文字，AI 凭想象用；HTML 里的色板就是色板，渲染出来就那个颜色，是真实的视觉锚点。

类 D：教学解释——live demo 嵌入

最值得抄的：Concept Explainer——带 live ring 的一致性哈希教学页。

讲 consistent hashing，markdown 只能写”想象一个圆环…”加一个 ASCII art。HTML 直接把圆环画出来，节点能拖动，加节点看 key 怎么 rebalance。

读者不再需要”想象”，能”看到”。教学效率不是几倍差距，是质变。

四、最被忽视的一点：HTML 让 AI 协作有了”渐进沉淀”

接着第三节那句”HTML 是输入格式”再多说几句——这是 markdown 永远到不了的高度。

用 AI 协作久了都会遇到一个反复痛点：上下文丢失。这次谈好的色彩、上次确认的架构、再上次决定的风格，每开新窗口都要重新铺垫。“那个我跟你讨论过的设计系统”就是空话，AI 访问不到之前的决议。

上一轮如果是 markdown 输出，再次粘进 prompt 它仍然是字符流，AI 解析它跟解析任何一段文字没区别。

上一轮如果是 HTML 设计系统页，里面有具体的色板、字号、间距，AI 把它当上下文时，是带着具体数值锚点在工作。下一轮做的设计跟上一轮严丝合缝。

好家伙，markdown 的产出是”说明书”，HTML 的产出是”组件”——一个是参考，一个是积木。每一轮的积木可以喂回下一轮，loop 一直在收紧。

五、今晚就能做的最小动作

最小可行迁移就一句话——你下一个 prompt 末尾加：

Output as a self-contained HTML file with embedded CSS. Include interactive elements where it helps comprehension.

哪怕完全不改 prompt 主体，只加这句，AI 输出会立刻发生质变。

第一次试，挑你最讨厌读 markdown 的任务先做。给三个具体场景，照着抄就行：

场景一：技术调研对比

帮我对比 Postgres / MySQL / SQLite 在中等规模 OLTP 场景的表现。
输出 self-contained HTML，三栏并列，每栏顶部 TL;DR、
中间核心特性 bullet、底部一行典型 query 性能数字。
共享一个 trade-off 表放最底部。

以前你需要看完三篇博客 + 一份对比表 才能下决定；现在一份 HTML 一目了然。

场景二：项目计划落地

我接到一个新项目：[一句话描述]。帮我出一份 self-contained HTML 项目计划：
- 顶部 TL;DR 三句话
- 中部 timeline（Gantt 风），任务按优先级颜色标注
- 右侧浮动 risk table（按概率 × 影响排序）
- 底部资源依赖图（boxes & arrows）

以前一份 markdown 大纲读完还要自己脑补结构；HTML 直接看出哪儿能砍、哪儿要加人。

场景三：临时学习一个概念

帮我做一个 [概念] 的 HTML 教学页：
- 顶部 TL;DR + 一句话类比
- 中间 live demo（关键参数能拖动 / 能交互）
- 底部对比表 + 易错点 list
- 浮动 glossary，hover 关键词显示定义

这种用法对学新概念最猛——读者不再需要”想象”，能”看到”。consistent hashing、HyperLogLog、CRDT 这种本来 markdown 讲不清的概念，HTML 一次过。

试三次之后就回不去 markdown 了。

写在最后

Thariq 这篇文章在 HN 上有 200+ 评论，Simon Willison 写了篇详细解读 表态认同。这件事不是单一工程师的小众实践，是 AI 协作生态从”markdown 默认”向”HTML 默认”迁移的早期信号。

markdown 不会消失，git diff 友好、纯文本归档这些场景仍然是它的主场。但 AI 输出的默认目标格式正在变。

回头看十年后，markdown 时代会被记住为”AI 还没准备好为它服务的时候”——纯文本是当时唯一的妥协。HTML 才是给 AI 这个新作者准备的格式：能放下空间信息，能反馈给下一轮，能直接打开就用。

那个上次只让 AI 出 markdown 文件的我们，下次记得加上那句魔法咒语：

Output as a self-contained HTML file.

Anthropic 内部已经这么干一阵了。我们这些外面的，跟上吧。