别写 Markdown 了——用 HTML 和 Claude Code 交流
Markdown 一直是 Agent 跟我们沟通时最常用的文件格式。简单，跨平台，有一定的富文本能力，而且方便你手动编辑。Claude 甚至学会了在 Markdown 里用 ASCII 画图，画得还挺像样。
但 Anthropic Claude Code 团队的核心工程师 Thariq 最近在 X 上发表了一篇文章，直言他几乎完全停用了 Markdown。不是因为 Markdown 不好用，而是因为 Agent 越来越强之后，Markdown 的简洁变成了天花板——超过 100 行的 Markdown 文件，他承认自己根本读不下去。而且他越来越少亲自编辑这些文件了，真要改也是让 Claude 来改，这让 Markdown 最大的优势「人好编辑」基本失效。
他开始用 HTML 取代 Markdown 作为 Agent 的输出格式，这不是一个实验性的尝试，而是 Claude Code 团队内部越来越多人正在做的事。
为什么是 HTML
Thariq 总结了六个理由，每个都指向同一个结论：HTML 在表达能力上对 Markdown 是降维打击。
信息密度。 HTML 能承载的信息远超 Markdown。除了基本的文档结构（标题、加粗），它还能表达表格数据（table）、样式设计（CSS）、插图（SVG）、代码片段（script 标签）、工作流程图（SVG + HTML）、交互元素（JavaScript + CSS），甚至空间数据（绝对定位和 canvas）。几乎没有什么信息是 Claude 能读懂但 HTML 表达不了的。如果你不让模型用 HTML，它就会在 Markdown 里做各种勉强的事——用 ASCII 画图、用 Unicode 字符「估算」颜色，最终结果更像一个妥协而不是真正的信息传达。
视觉清晰度和可读性。 这可能是最直接的痛点。Claude 能做的事越来越复杂，它写出来的方案越来越长。实际使用中，超过 100 行的 Markdown 你基本不会真的去读，更别说团队里其他人了。但用 HTML，Claude 可以用 tab 分组、用插图辅助理解、加链接导航，把文档结构组织得更容易浏览。它甚至可以做响应式布局，让你在不同设备上用不同方式阅读。
方便分享。 Markdown 文件很难分享，因为大部分浏览器不原生渲染它。你通常得把它塞进邮件附件或聊天消息里。HTML 则不同，只要把文件上传到某个地方（S3、GitHub Pages 或者任何静态托管），你就可以直接甩一个链接出去。同事在哪都能打开，随时引用。一个 spec、报告或 PR 说明真正被人读到的概率，HTML 比 Markdown 高得多。
双向交互。 HTML 让你跟文档互动。Thariq 提到他经常让 Claude 加上滑块或旋钮来动态调整设计参数，或者让用户在算法不同选项之间切换看效果。你还可以加一个按钮，把在 UI 上的操作复制成 prompt，直接粘回 Claude Code 继续对话。这在纯文本的 Markdown 文档里完全做不到。
数据摄入能力。 为什么不直接用 Claude.ai 或 Claude Design 生成 HTML？Thariq 的解释很直接：Claude Code 能摄入的上下文太多了——文件系统、MCP（Slack、Linear 等）、网页浏览器、Git 历史。比如他写这篇文章时，直接让 Claude Code 扫描代码文件夹里所有他生成过的 HTML 文件，按类型分组分类，然后生成一个包含所有分类图表的 HTML 图库。这种深度是其他界面做不到的。
开心。 最后这条听起来有点任性，但 Thariq 专门提了：用 HTML 就是更好玩，让人觉得自己更投入、更参与到创作过程中。光这一条就够了。
怎么开始
Thariq 的建议出乎意料的朴素：不用做 Skill，不用写配置文件，直接跟 Claude 说「帮我做一个 HTML 文件」就行。关键是你要知道这个 artifact 想做什么，以及你打算怎么用它。时间长了你可能会摸索出自己的套路，但前期从零开始 prompt，在不同场景下慢慢试就好。
他坦言有点担心大家看完文章立刻去做一个 /html Skill——虽然有帮助，但准备工作不是重点。真正的重点是从具体的场景切入，让自然语言驱动输出格式本身。
具体用法
为了把这件事说得更具体，Thariq 做了很多不同用途的 HTML 文件，并且在 thariqs.github.io/html-effectiveness 上公开了示例集合。他归纳了五种典型用法。
Spec、规划和探索。 HTML 是一块很好的画布，让 Claude 深入探索一个问题。他现在开始做一个任务时，不会再写一份简单的 Markdown 方案，而是生成一组 HTML 文件——先让 Claude Code 做头脑风暴，对不同选项做几个探索，然后深入展开其中一个，做 mockup 或代码片段，满意了再让它写实施方案。方案确定后开一个新 session，把这些文件全部传进去让模型实施。他甚至会让验证 Agent 读入这些文件，确保对需求的上下文理解足够宽广。典型的 prompt 像这样：「I’m not sure what direction to take the onboarding screen. Generate 6 distinctly different approaches — vary layout, tone, and density — and lay them out as a single HTML file in a grid so I can compare them side by side.」
代码审查和理解。 代码在 Markdown 文件里很难读。用 HTML 可以渲染 diff 加标注、画流程图、展示模块关系。Thariq 发现这通常比 GitHub 默认的 diff 视图更好用，他现在每个 PR 都会附一个 HTML 代码解释文件。对不熟悉某个模块的人特别有用——比如让 Claude 生成一个 HTML 解释页面，专注解释 streaming/backpressure 逻辑，把实际 diff 渲染出来，用边距标注、按严重程度标颜色，帮助审查者理解核心概念。
设计和原型。 Claude Design 本身就是基于 HTML 的，因为 HTML 在设计表达上极其强大。Claude 可以先用 HTML 画出设计稿和交互原型，再转写成目标语言的代码（React、Swift 都行）。你还可以让 Claude 加上滑块、旋钮之类的控件，精调出你想要的效果，然后一键复制参数。
报告、研究和学习。 Claude Code 擅长从多个数据源综合信息生成可读性高的报告——Slack、代码库、Git 历史、互联网。输出可以是一个长 HTML 文档、一个交互式解释器，甚至是一个幻灯片。Thariq 举了一个例子：他写 prompt caching 系列帖子时，先让 Claude 读完 Git 历史里所有相关改动，然后为他准备了一份深度研究的 HTML 文件来阅读。一个典型的 prompt：「Read the relevant code and produce a single HTML explainer page: a diagram of the token-bucket flow, the 3-4 key code snippets annotated, and a ‘gotchas’ section at the bottom.」
一次性编辑器。 有些事情纯用文本很难描述清楚。Thariq 的做法是让 Claude 做一个一次性的编辑器，专门为当前这件事设计——不是产品，不是工具，就是一个 HTML 文件专门为这一份数据而做。重新排序 30 个工单、编辑 feature flag 配置、调 prompt 带实时预览、逐行标注数据集——关键永远是结尾有一个导出按钮：「复制为 JSON」或「复制为 prompt」，把你在 UI 里做的事情变回可以粘贴进 Claude Code 的文本。
用 HTML 真正改变的不是技术——是让我重新感觉到自己在 loop 里，而不是等着看 Agent 走完弯路再回来修。