HTML is the new Markdown：Claude Code 团队为什么让 AI 直接输出 HTML

Anthropic 的 Thariq Shihipar 最近发了一条推特，说"HTML is the new markdown"，迅速刷到几百万浏览。这不是一句口号，而是 Claude Code 团队自己在用的工作方式。他们不再让 AI 生成 Markdown，而是直接生成 HTML。

这个转变背后是完整的逻辑链：Markdown 为什么赢了 LLM 格式战争，它的设计假设在哪里断掉了，HTML 能比 Markdown 多做什么，以及工具链怎么跟上。这篇文章把这件事拆开讲清楚。

Markdown 的设计假设

Markdown 是 John Gruber 2004 年设计的。目标很简单：让写作者用纯文本写出"看起来像 HTML 的东西"，然后转成 HTML 发布。

它的关键假设是：中间有个人要亲手编辑它。

**粗体** 比 <strong>粗体</strong> 好打，# 标题 比 <h1>标题</h1> 好看。Markdown 是为人类编辑体验优化的。写的人知道自己在写什么，能控制格式，能修改。

这个假设在 GitHub 时代继续成立。开发者写 README、写 issue、写 PR description，都是自己写、自己改。Markdown 在 Git 仓库里存着方便，diff 友好，成了开发者文档的标准格式。

LLM 出现后，Markdown 自然成了 AI 输出格式的默认选择：训练数据里多、省 token、渲染成本低、和 GitHub 兼容。

但问题是，LLM 的使用场景和"人类写博客"完全不一样。

假设断掉的三个地方

Thariq 说了一句很实在的话：Markdown 文件超过 100 行，他就不看了。同事更不看。

这不是个人习惯，是信息密度问题。Markdown 的排版是平的，重要和不重要的内容在视觉上几乎没有区别。你打开一份 Claude 生成的 Markdown 分析报告，得自己扫描、自己过滤、自己判断哪里重要。这个认知成本是读者承担的。

现在看 Claude Code 的实际用法：你让它分析一个 PR，输出安全审查报告；让它读 git history，整理模块变更记录；让它扫描依赖，列过期包和风险等级。这些输出你拿来干什么？你不会手动编辑它们。你要么直接读，要么发给同事看，要么传给下一个 agent session 作为上下文。

Thariq 点出了转变的本质：他已经不编辑 Claude 生成的文档了。他把它们当作 spec、参考文件、下一个 session 的输入。Markdown 的核心优势——人类容易编辑——在这个工作流里消失了，但 Markdown 的限制还在。

断裂有三层。

第一层，视觉表达力。 Markdown 无法表达颜色，无法做 SVG 图表，无法做交互控件，无法按重要程度做视觉分级。一份 code review 报告，高、中、低危问题在 Markdown 里只能靠 ### 和缩进区分。在 HTML 里可以标红、标黄、挂 diff 片段、做可折叠的细节面板。

第二层，交付链。 Markdown 生成之后还需要"渲染"。GitHub 能渲染，VS Code 能渲染，但复制到微信公众号里格式全丢。HTML 生成之后就是最终产物，浏览器打开就能看，截图就能发，复制到公众号内联 CSS 处理后就能用。

第三层，机器可读性。 这是 agent 工作流特有的。把 Markdown 传给下一个 agent session，它读的是文本；传 HTML 时，它可以理解结构——哪里是表格，哪里是代码块，哪里是摘要，哪里是操作建议。HTML 作为 agent 之间的信息容器，语义比 Markdown 更丰富。

HTML 具体能多做什么

Thariq 给了五类用法，每一类都附了 prompt。展开说。

需求探索和方案对比

传统做法是让 Claude 列几个方案，每段文字描述。你读完靠想象力感受差异。

HTML 做法是让它直接生成一个 HTML 文件，网格排列 6 种差异明显的方案，排版风格和信息密度都不一样，每个方案旁边标注 tradeoff。结果可以在浏览器里并排看，视觉上一眼能感受到差异，认知效率高一个数量级。

Code review 报告

Markdown 版的 code review 是一堆 - 列表，按文件名分组。你读完不知道整体风险在哪，也不知道优先修哪个。

HTML 版是一份颜色编码的报告：红色立刻修，黄色建议改，绿色是风格问题。每条问题旁边是对应的代码片段。直接发给同事，他们在浏览器里打开就能看，不需要 GitHub 账号。

交互式设计原型

HTML 支持 JavaScript，所以可以生成带交互控件的原型。

比如设计一个新的 checkout 按钮，点击后有播放动画，然后快速变成紫色。让 Claude 生成一个 HTML playground，带滑块调整时长、颜色、缓动曲线，再加一个复制按钮，点了就复制当前参数。调到满意，拿着参数去让 Claude 实现到真正的代码里。

技术报告和研究文档

Claude Code 配合 MCP 最能发挥的场景。

让 Claude 读相关代码，生成一个 HTML 解释页面：token-bucket 流程的 SVG 图，3-4 个关键代码片段加注释，底部一个 gotchas 章节。优化给"只读一遍的人"看。

数据看板

让 Claude Code 通过 MCP 拉 Slack 记录、codebase、git history，生成可交互 dashboard。可折叠章节、可筛选表格、可点击趋势图。

这五类用法指向同一件事：输出物不再是"给人读完就丢掉的文字"，而是有交互、有结构、有视觉层级的工作界面。

工具链跟上来了

认知转变之后，工具也跟上了。2026 年上半年三个层次。

Claude Code Desktop 的 Preview 功能

2 月随 Desktop 版上线。核心机制是在 Desktop 里嵌入一个浏览器面板。每次 Claude 修改代码，autoVerify 模式自动截图，Claude 看截图检查渲染结果，发现问题继续改，直到视觉上正确再停。

这个功能不是可视化编辑器，是 AI 的自我验证层。但它还提供了另一个能力：你可以点击预览里的 UI 元素，Claude 立刻知道你指的是哪个组件，直接改对应代码。"点哪改哪"这个闭环，叠加 HTML 作为输出格式，意味着你在终端里描述需求，旁边的浏览器实时反映结果。

Claude Design 上线

4 月 17 日，Anthropic Labs 在 claude.ai/design 上线 Claude Design。Figma 当天股价跌了 7%。

Claude Design 是独立入口：描述你想要什么，Claude 在画布上生成可交互的 HTML 原型。然后通过 tweaks 面板调整——滑块、切换、直接点击元素修改——不需要重新生成整个页面。

最重要的功能是 design-to-code handoff。满意一个原型后，Claude Design 打包成一个实现包：组件树、设计 token、Tailwind 类、交互说明。把这个包粘进 Claude Code，Claude Code 写出对应技术栈的生产代码。

完整流程：Claude Design 出原型 → tweaks 面板调满意 → handoff bundle → Claude Code 实现 → Preview 面板验证。从想法到可部署代码，全程 Claude。

html-anything：社区的工具化响应

Claude Design 是官方层面的工具化，html-anything 是社区层面的。

这个项目做的事情很直接：本地跑一个 Next.js 服务，粘贴任何内容——Markdown、CSV、JSON、SQL、草稿——选一个模板，按下 ⌘+Enter，Claude Code 帮你输出一份可交付的 HTML。

几个设计决策值得说。

零 API Key。 html-anything 不要求你再粘一次 Anthropic API Key。它扫描你本地 PATH，检测你已经登录好的 CLI：claude、codex、cursor-agent、gemini、copilot、opencode、qwen、aider。只要你跑过 claude login，它直接复用那个 session。订阅制 agent 的边际成本已经趋近于零，工具直接复用已登录 session。

SSE 流式渲染。 生成过程走 Server-Sent Events，agent 的 stdout JSON-line 流实时抽出 text，append 进 iframe[srcdoc]。你能看着 HTML 一行一行被写出来。不满意可以中途打断，不浪费一整次生成。

沙箱隔离。 用户 HTML 放在 iframe[sandbox="allow-scripts allow-same-origin"] 里运行。第三方脚本可以跑，cookie 和 localStorage 走 iframe 自己的 origin，不污染宿主页面。打开 devtools 是 iframe 自己的 DOM，调试体验和开独立 HTML 文件一样。

SKILL.md 正在形成的生态

html-anything 的 75 套模板，每一个都是一个文件夹：

text

deck-swiss-international/
├── SKILL.md
├── example.html
└── assets/
    └── references/

SKILL.md 遵循 Claude Code 官方的 Skills 约定，加了几个扩展字段，比如 mode、scenario、surface、recommended、design_system。

Skills 的核心思路是：把"怎么让 agent 做某件事"的知识，封装成可分发、可安装、可复用的文件。 以前这些知识散落在每个人的 system prompt 里，每次新开 session 都要重新填。Skills 让它变成了一个文件夹，放进 .claude/ 就生效。

多个开源项目在围绕这个格式建生态。op7418 的 guizang-ppt-skill 是一套编辑风格 PPT 的 skill，被 html-anything 引用为 deck-guizang-editorial 模板。html-anything 自己的 75 套模板覆盖从 keynote 幻灯片到数据报告的九个场景。

SKILL.md 正在成为 agent 时代的模板协议。如果 HTML 是 agent 输出的标准格式，那 SKILL.md 就是"怎么生成特定风格 HTML"的标准配方。两个标准合在一起，构成完整的可复用体系。

一键发布：公众号场景的完整链路

说实操，公众号场景最典型。

公众号编辑器不支持外链 CSS。普通 HTML 粘进去样式全丢。解决方案是 juice：把 CSS 内联到每个元素的 style 属性里。

html-anything 的"微信公众号"导出按钮做的就是这件事：

拿到 iframe 里的 HTML
跑 juice 把所有 CSS 内联
加 data-tool 标记
写进 ClipboardItem

粘进公众号编辑器，样式完整保留。

推特/小红书只接受图片，导出走截图路径：modern-screenshot 把 iframe 渲染成 2x PNG，写进 ClipboardItem(type: 'image/png')。知乎支持公式，需要把 <mjx-container> 转成 data-eeimg 占位，html-anything 的知乎导出专门处理了这个转换。

30 秒上手：

bash

git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm -F @html-anything/next dev
# → http://localhost:3000

打开浏览器，顶栏自动显示本机已登录的 CLI，选模板，粘内容，⌘+Enter。

模板覆盖的场景

75 套模板按 mode（形态）和 scenario（用途场景）两个维度组织。

prototype：网页、SaaS 落地页、dashboard、数据报告、简历
deck：20 套幻灯片，含 Swiss International、Guizang Editorial、小红书粉彩、赛博奢侈等
frame：10 套 Hyperframes 视频帧脚本，液态背景、NYT 数据图表、故障艺术标题等
social：X 卡片、小红书图文卡、Spotify 卡、Reddit 帖子
office：PM 规格书、工程 runbook、财务报告、HR onboarding、OKR、周报、会议纪要、看板
doc：暖羊皮纸 editorial 文档

Hyperframes 值得单独说。这是 HeyGen 团队做的视频脚本格式：用 HTML 描述 6-10 个连续视频帧，每帧有 duration、transition、动画效果注释。这些 HTML 文件可以直接交给 Remotion 渲染成 .mp4。html-anything 的 video-hyperframes 模板生成的就是这个格式。

更深含义

Thariq 文章里有一句话：

Markdown won the LLM format war because it's simple, portable, and it predates the rise of agents.

"在 agent 时代之前就存在"这件事，现在变成了一个包袱。

但这只是表层。更深的是：输出格式的选择，决定了谁是文档的真正受众。

Markdown 的受众是编写者自己——打开编辑器，实时渲染，边写边看。它是为"写"这个动作优化的。当 agent 代替人来"写"时，这个优化方向就不对了。agent 写文档不是为了自己看，是为了让人看，或者让下一个 agent 看。受众变了，格式就应该跟着变。

HTML 的受众是读者。它从设计之初就是"给人在浏览器里看的"。agent 作为写作者，天然应该用这个格式——因为它的受众恰好是"人"或"下一个需要理解结构的系统"。

这个转变的信号早就在了。Claude 的 Artifacts 功能是 chat 界面版本，Claude Design 是专用产品版本，Claude Code 的 Preview 功能是终端版本，html-anything 是批量生产版本。四个产品，同一个方向。

html-anything 做的事情就是把这个判断变成工具。agent 是写的，读的是人，那就让 agent 直接输出人想看的东西。不用 Markdown 作为中间层，不用再做一次渲染，不用手动重排。

从草稿到公众号，中间只有一个 ⌘+Enter。