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 无法表达颜色，无法做 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 技术文档信息密度高得多。

数据看板。

让 Claude Code 通过 MCP 拉 Slack 记录、codebase、git history，生成可交互的 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。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 套幻灯片）、frame（10 套 Hyperframes 视频帧脚本）、social（X 卡片、小红书图文卡、Spotify 卡）、office（PM 规格书、工程 runbook、财务报告、HR onboarding、OKR、周报、会议纪要、看板）、doc（Kami 暖羊皮纸 editorial 文档）。

幻灯片 20 套里包括 Swiss International（瑞士国际主义网格）、Guizang Editorial（编辑墨水风格）、XHS Pastel（小红书粉彩）、Hermes Cyber（赛博奢侈）、Magazine Web 等。

picker 里有搜索和二维筛选。每套模板都有 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 从一开始就是给读者在浏览器里看的。用它当输出格式，少一层渲染，少一次转换，结构语义也更清楚。

Claude 的 Artifacts 功能、Claude Design、Claude Code 的 Preview 面板、html-anything，做的是同一件事，只是入口不同。

html-anything 把这个选择变成了工具。

项目地址：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