今天我在 X 上看到一条帖子，直接改变了我跟 Claude 的交互方式。

Anthropic Claude Code 团队的 Thariq Shihipar 写道："HTML is the new markdown. 我已经停止为几乎所有工作编写 Markdown 文件，改用 Claude Code 帮我生成 HTML。"

swyx 随即转发，这条消息迅速在开发者圈子里炸开了锅。

我第一反应是：这不是在开玩笑吧？我们都用 Markdown 用了这么多年，现在要换 HTML？

然后我仔细读完了他的文章，试了一下，才意识到——他说的是真的。

---

Markdown 的局限，你其实早就感受到了

先说说为什么我们一直用 Markdown。

原因很简单：Claude（以及 GPT-4 时代的所有模型）的 Token 有限，Markdown 比 HTML 省 Token，渲染结果也够用——粗体、代码块、列表，该有的都有。

但"够用"跟"好用"之间，差距有多大？

Markdown 本质上是纯文本格式。它能描述内容，但无法控制呈现方式。你想要一个折叠展开的 FAQ？不行。想要一张带交互 tooltip 的架构图？不行。想要代码 diff 里每行都有颜色标注的严重性分级？也不行。

你只能用文字堆叠，然后自己在脑子里构建视觉结构。

Thariq 的观点是：这个时代已经变了。

现在的 Claude 拥有 200K 乃至百万级别的上下文窗口，Token 效率早就不是瓶颈了。而 HTML 能做的事，Markdown 根本无法比拟。

---

HTML Artifact 到底能做什么？

先看 Thariq 在文章里给的一个真实 Prompt：

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.

想想这个 Prompt 要求什么：

• 渲染真实的代码 diff

• 每行有内联的边注（margin annotations）

• 用颜色区分问题严重等级（红色 = 严重 bug，黄色 = 注意，绿色 = OK）

• 根据概念复杂度自适应展示深度

这些在 Markdown 里全部做不到。但 Claude 生成的 HTML 可以做到——因为 HTML + CSS + JS 本身就是完整的前端能力。

文章里还列举了更多场景：

技术概念解释：让 Claude 生成一个带 SVG 图解的交互文档，点击某个模块可以展开详细说明。比死板的文字列表直观 100 倍。

安全漏洞分析：Simon Willison（知名开发者博主）看到这篇文章后立刻去试了——他把 copy.fail 的 Linux 内核漏洞 POC（一段混淆的 Python 代码）喂给模型，让它生成 HTML 格式的分析报告，结果代码反混淆、漏洞路径高亮、执行流程图全都有，一个文件搞定。

数据分析报告：不再是一堆数字 + Markdown 表格，而是带筛选器、能展开细节、带颜色编码的交互式仪表盘。

研究归档：Omar Sar（AI 研究员）更是把整个工作流都 HTML 化了——他用 LLM Wikis 管理知识库，用 HTML Artifact 作为交互前端，连收件箱管理和研究监控都包了进去，称之为"疯狂强大的工作流"。

---

怎么用？几个可以直接上手的 Prompt 模式

分享几个我自己试了有效的模式：

① 代码评审 HTML 报告

请帮我评审以下代码，以 HTML 格式输出评审报告。
要求：
- 用颜色标注每处问题的严重等级（红=bug，橙=优化，绿=可接受）
- 每条建议都有折叠/展开的详细说明
- 最顶部有一个总分和摘要仪表盘

[粘贴代码]

② 技术概念图解

用 HTML 帮我解释 [某个技术概念]。
要求：包含 SVG 流程图，可以点击节点展开详细说明，
配色参考 Material Design，适合在手机浏览器直接查看。

③ 文档/会议纪要可视化

把以下文字整理成一个 HTML 页面，要有目录导航（点击跳转），
关键决策用高亮卡片展示，Action Items 做成可勾选的 checklist。

[粘贴内容]

④ 数据分析报告

根据以下数据，生成一个 HTML 分析报告。
包含：柱状图/折线图（用 Chart.js 或纯 SVG），
关键指标大字展示，支持按维度筛选。

[粘贴数据]

这些 Prompt 一个共同点：你给出的不是"告诉我 X"，而是"帮我做一个可以展示 X 的工具"。这个视角的转变，才是核心。

---

这不是小技巧，是工作流的范式迁移

我觉得 Thariq 这篇文章真正有价值的地方，不是"HTML 比 Markdown 好"这个结论，而是它背后的思维方式转变：

从「让 AI 生成内容」，变成「让 AI 生成界面」。

当你要求 Claude 输出 Markdown，你是在让它当一个写作工具。当你要求它输出 HTML，你是在让它当一个全栈开发者——内容、结构、交互、视觉，一次性交付。

而 Claude 本来就有这个能力，只是大多数人没有启用它。

Omar Sar 说得很到位："HTML 不是要替代 Markdown，而是两者结合威力更大。" 他的做法是：用 Markdown 维护知识库和结构化信息，用 HTML Artifact 作为这些信息的展示和操作界面。

这个组合拳，其实就是一个微型的「个人信息系统」。

---

我的实际体验

我试了两天，说几点实际感受：

好用的地方：代码评审和概念解释效果是真的好，特别是当内容复杂、需要分层展示的时候，HTML 的优势非常明显。生成的文件直接用浏览器打开，不需要任何工具依赖。

需要注意的地方：输出的 HTML 质量取决于你的 Prompt 精确度。如果只说"给我 HTML 格式"，Claude 可能给你一个简单的 <p> 堆砌，和 Markdown 没区别。你需要明确告诉它你想要哪些交互功能。

小坑：生成的 HTML 有时候引用了外部 CDN 资源（比如 Chart.js），在没网络的情况下渲染会出问题。提示里加一句"尽量使用内联实现，避免外部依赖"会好很多。

---

总结

Thariq 这篇文章让我重新思考了一件事：我们用 Claude 的方式，很多时候还停留在"升级版搜索引擎"的阶段——问问题、拿答案、复制粘贴。

但它其实可以直接给你一个「可用的东西」，不只是信息。

HTML 只是这个方向的一个入口。下次遇到需要整理、呈现、共享某个复杂信息的时候，不妨多想一步：与其让 AI 告诉我，不如让 AI 给我做一个。

试试看，说不定你也会停止写 Markdown 文件。

---

你最近有没有用 Claude 生成过 HTML 报告或工具？效果怎么样？欢迎评论区聊聊你的玩法。

我是顾北，关注我，获取更多好玩好用的 Claude Code 实用技巧！

谢谢你阅读我的文章~

我们下期再见！

PS：本文部分内容由AI辅助创作