HTML is the new Markdown：为什么 Claude Code 团队已经不用 Markdown 了

5 月 9 日，Anthropic Claude Code 团队的 Thariq Shihipar 发了一条推特：

"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."

短时间涨到几百万浏览。Simon Willison 转了，各路开发者开始讨论。不是因为这个观点新鲜——用 HTML 代替 Markdown 这件事很多人零散地在做——而是因为说这话的人是 Claude Code 的内部成员。这代表 Anthropic 团队自己已经在这么用了，而且他们把这个当作一篇公开文章发出来。

这篇文章要讲的，就是这件事背后的逻辑链：Markdown 的设计假设是什么，那个假设在哪里断掉了，HTML 具体能多做什么，以及工具链是怎么跟上来的。最后落到 html-anything 这个项目和你现在可以怎么用。

一、Markdown 的设计假设

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

它的受众是写博客的人。它的使用场景是：人打开文本编辑器，写内容，提交，服务器渲染成 HTML，读者在浏览器里看。

这个流程里有一个关键假设：中间有个人要亲手编辑它。

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

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

然后 LLM 出现了。Markdown 自然成了 AI 输出格式的默认选择，因为：模型训练数据里有大量 Markdown；它比 HTML 省 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 生成之后就是最终产物，浏览器打开就能看，截图就能发，复制到公众号加一个 juice 内联 CSS 处理就能用。

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

三、HTML 具体能多做什么

Thariq 给出了五类用法，每一类都附了具体 prompt。我把它们展开说。

用法一：需求探索和方案对比。

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

HTML 做法：

我在想新的 onboarding 界面该怎么设计。
生成 6 种差异明显的方案，排版风格、信息密度都要不一样，
做成一个 HTML 文件，网格排列，可以并排看。
每个方案标注它在做的 tradeoff。

结果是一个可以在浏览器里直接看的比较页面。6 种方案并排放，视觉上一眼能感受到差异，每个方案旁边是标注了 tradeoff 的说明。这比读 6 段文字的认知效率高一个数量级。

用法二：Code review 报告。

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

HTML 版：

帮我 review 这个 PR。
我对 streaming/backpressure 的逻辑不熟，重点看那块。
做成 HTML：实际渲染 diff，每条问题挂行内注释，
按严重程度用颜色标注。

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

用法三：交互式设计原型。

这个用法很多人没想到。HTML 支持 JavaScript，意味着你可以让 Claude 生成带交互控件的原型。

我想设计一个新的 checkout 按钮。
点击后有一个 play 动画，然后快速变成紫色。
做一个 HTML 文件，带滑块和选项让我调整这个动画，
包括时长、颜色、缓动曲线。加一个复制按钮，
点了就复制当前参数。

你得到的是一个实时 playground。调滑块，动画实时变化。调到满意的参数，点复制，拿着参数去让 Claude 实现到真正的代码里。这比反复给 Claude 描述"再快一点、颜色深一点"的迭代循环省太多时间。

用法四：技术报告和研究文档。

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

我不理解我们的 rate limiter 到底怎么工作的。
读相关代码，做一个 HTML 解释页面：
token-bucket 流程的 SVG 图，3-4 个关键代码片段加注释，
底部一个 gotchas 章节。
优化给只读一遍的人看。

你得到的是一份专门为"读一遍就理解"优化的文档。SVG 流程图，代码高亮，结构清晰。比一份等宽字体的 Markdown 技术文档多了至少 80% 的信息密度。

用法五：数据看板。

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

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

四、工具链跟上来了

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

第一层：Claude Code Desktop 的 Preview 功能。

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

这个功能经常被误解为"可视化编辑器"。它不是。它是 AI 的自我验证层——验证工作是 Claude 在做，不是你在做。但它还提供了另一个能力：你可以点击预览里的 UI 元素，Claude 立刻知道你指的是哪个组件，直接修改对应代码。

"点哪改哪"这个闭环，叠加 HTML 作为输出格式，意味着什么？意味着你在终端里描述你想要什么，旁边的浏览器实时反映结果，不满意就继续描述。没有 Figma，没有中间层，没有"设计稿到代码"的翻译成本。

第二层：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。

Claude Design 针对的是"没有设计背景的创始人和产品经理"——他们需要快速展示想法，但不会 Figma，不想学 CSS。现在他们有了一个对话框来完成这件事。

第三层：html-anything——社区的工具化响应。

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

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

几个设计决策值得说。

零 API Key。 html-anything 不要求你再粘一次 Anthropic API Key。它扫描你本地 PATH（包括 ~/.local/bin、~/.bun/bin、/opt/homebrew/bin、~/.npm-global/bin 这些 GUI 启动会漏掉的目录），检测你已经登录好的 CLI：

只要你跑过 claude login，它直接复用那个 session。你的 Claude Max 订阅包含的额度，现在也包含这个工具。0 边际成本。

背后的逻辑是：订阅制 agent 的边际成本已经趋近于零。工具不应该再要求你单独管理 API Key。你已经登录的 session 就是你的算力——工具直接复用它。open-design、multica 这类工具都在走这条路：把已有的 agent session 当作基础设施。

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

不满意不是 edge case。实际使用中你经常会在生成到一半时发现方向跑偏了——这时候能打断比等完再重来省很多时间。流式渲染的价值不是"看起来酷"，而是给了你一个早期退出的时机。

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

五、SKILL.md：一个正在形成的生态

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

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

SKILL.md 的格式遵循 Claude Code 官方的 Skills 约定，加了几个扩展字段：

---
name: deck-swiss-international
mode: deck
scenario: design
surface: fullscreen
recommended: 2
design_system: swiss-grid
---

这不是随便定的格式。3 月，Claude Code 团队发布了 Skills 功能，Thariq 写了一篇《Lessons from Building Claude Code: How We Use Skills》，介绍他们内部怎么用 SKILL.md 封装可复用的 agent 行为。

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

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

SKILL.md 正在成为 agent 时代的模板协议。不是某家公司定的标准，是社区自然收敛出来的。

背后还有一层：如果 HTML 是 agent 输出的标准格式，那 SKILL.md 就是"怎么生成特定风格 HTML"的标准配方。两个标准合在一起，才构成一个完整的可复用体系。

想贡献一套新模板？在 next/src/lib/templates/skills/ 下建文件夹，写 SKILL.md + example.html，重启 dev server，picker 里自动出现。merge 门槛是：SKILL.md 里要有硬约束——中文优先字体栈、8px 基线网格、颜色对比不低于 4.5、必须使用真实数据而不是 lorem ipsum。

这些约束的来源是 huashu-design 的"反 AI-slop"设计哲学：如果你不给 AI 设定约束，它会生成视觉上相似的、可以辨认出"这是 AI 做的"的东西。约束就是 prompt 的一部分。

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

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

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

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

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

粘进公众号编辑器，样式完整保留。字体、颜色、间距全在。你不需要在编辑器里手动重排一遍。

推特/小红书的路径不一样。这两个平台只接受图片，不接受 HTML。所以导出走的是截图路径：

1. modern-screenshot 把 iframe 渲染成 2x PNG
2. 写进 ClipboardItem(type: 'image/png')
3. 粘贴进推文或小红书输入框

2x 是 Retina 分辨率。截图出来在视网膜屏上是清晰的。

知乎的情况更特殊。知乎支持公式，但它的公式系统要求特定的占位格式——<mjx-container> 标签要转成 data-eeimg 占位，知乎才会调用自己的公式渲染引擎。html-anything 的知乎导出专门处理了这个转换。

完整的导出矩阵：

微信公众号  → juice 内联 CSS → 粘贴进编辑器
推特/微博   → modern-screenshot 2x PNG → 粘贴进推文
小红书      → modern-screenshot 2x PNG → 粘贴进图文
知乎        → juice + mjx-container 转换 → 粘贴进编辑器
下载 .html  → 单文件，双击浏览器打开
下载 .png   → 高 DPI 截图，任意分享

30 秒上手：

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（用途场景）。

mode 分类：

• prototype：网页、SaaS 落地页、dashboard、数据报告、简历
• deck：20 套幻灯片，含 Swiss International（瑞士国际主义网格）、Guizang Editorial（编辑墨水风格）、XHS Pastel（小红书粉彩）、Hermes Cyber（赛博奢侈）、Magazine Web 等
• frame：10 套 Hyperframes 视频帧脚本，液态背景、NYT 数据图表、故障艺术标题、电影漏光、macOS 通知、品牌片尾等
• social：X 卡片、小红书图文卡、Spotify 卡、Reddit 帖子
• office：PM 规格书、工程 runbook、财务报告、HR onboarding、OKR、周报、会议纪要、看板
• doc：Kami 暖羊皮纸 editorial 文档

picker 里有搜索和二维筛选，按 mode 和 scenario 过滤。每套模板都有 example.html，双击就能看效果，不需要启服务。

Hyperframes 是一个值得单独说的场景。

Hyperframes 是 HeyGen 团队做的一个视频脚本格式：你用 HTML 描述 6-10 个连续的视频帧，每帧有 duration、transition、动画效果的注释。这些 HTML 文件可以直接交给 Remotion 渲染成 .mp4。

html-anything 的 video-hyperframes 模板生成的就是这个格式。你描述一个主题，它生成一套符合 Hyperframes 规范的帧脚本，Remotion 直接能吃。

八、这件事的更深含义

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 功能——让 Claude 直接生成可预览的 HTML 组件——本质上是同一件事的 chat 界面版本。Claude Design 是它的专用产品版本。Claude Code 的 Preview 功能是它的终端版本。html-anything 是它的批量生产版本。

四个产品，同一个方向。

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

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

项目地址：https://github.com/nexu-io/html-anything

原文推特：https://x.com/trq212/status/2052811606032269638

Thariq 的官方博客文章：https://claude.com/blog/using-claude-code-the-unreasonable-effectiveness-of-html

Claude Design：https://claude.ai/design