HTML的不可思议的有效性：为什么你应该让Claude Code输出HTML，而不是Markdown

阅读时间6分钟

多年来，AI编码助手的默认输出格式一直是Markdown。它轻量、可读、节省token。但Markdown把能力留在了桌上。

在一篇今天登上Hacker News第一名的发人深省的文章中，Thariq Shihipar（Anthropic的Claude Code团队成员）提出了一个令人信服的观点：切换到HTML。他的论点是：当你要求Claude输出HTML而不是Markdown时，你得到的输出质量和丰富度会有惊人的提升。

Simon Willison在他的博客上提到了这一观点，称这是"发人深省的文章"，改变了他对AI输出格式的思考。HN社区也同意——帖子在几小时内获得了超过138个积分。

让我来告诉你为什么这很重要以及如何正确使用。

仅输出Markdown的问题

Markdown是为简单文本格式化而设计的——标题、列表、链接和偶尔的代码块。它对README很好。但当Claude试图解释复杂内容时，Markdown迫使它采用扁平的线性格式。

想象一下当你让Claude解释一个PR diff时会发生什么：

这种差异不是增量式的，而是变革性的。

⚡ 核心洞察：HTML是通用运行时。每个现代LLM都能完美地编写它，每个浏览器都能即时渲染它。无需构建步骤。无需依赖。只有原始能力。

HTML解锁了什么

当Claude生成HTML时，它可以包含：

  • SVG图表 —— 内联渲染的架构流程图、序列图、状态机
  • 交互式控件 —— 可折叠部分、标签面板、带排序的实时数据表格
  • 页面内导航 —— 带链接的目录、锚点跳转、浮动侧边栏
  • 丰富的标注 —— 代码边距注释、工具提示定义、颜色编码的严重性标记
  • CSS布局 —— 网格、列、响应式设计，让复杂信息可浏览

你得到的不仅仅是文本，而是一个完全样式化的、可导航的文档——而Claude在一次生成中完成所有这些。

有效的提示模板

以下是一些能有效解锁HTML输出的特定提示：

带丰富标注的PR审查

帮我审查这个PR，创建一个描述它的HTML artifact。
我对流式/背压逻辑不太熟悉，所以重点讲这个。
渲染实际的diff，加上内联边距注释，用颜色编码
标出严重程度，以及任何有助于传达这个概念的内容。

带交互图表的代码深入分析

详细解释这段代码。重新格式化它，展开令人困惑的部分，
深入讲解它的功能。输出HTML，用CSS精美样式化，
用SVG制作图表，让解释可视化和可交互。

架构文档

将这套系统架构记录为单个HTML页面。
包含SVG架构图、组件依赖关系图，
以及颜色编码的服务边界。让它自包含。

Simon Willison尝试用这种方法分析一个复杂的Linux内核漏洞（copy.fail），结果令人印象深刻：GPT-5.5生成了一个完整的HTML解释器，带有精美样式的代码块、可展开部分和清晰的视觉层次。

何时使用HTML vs Markdown

使用Markdown 使用HTML README文件 PR审查解释 快速笔记和摘要 复杂代码分析 GitHub/GitLab文档 架构深入分析 内部评论 安全漏洞讲解 Token受限上下文 调试会话总结

经验法则：如果你能从图表、布局或交互性中受益，就要求HTML。

实用技巧

1. 明确要求丰富度

不要说"输出HTML"。告诉Claude你想要哪种丰富度：SVG图表、可折叠部分、颜色编码、标注等。你的要求越具体，输出就越好。

2. 使用HTML Artifact功能

Claude Code和Claude.ai都支持HTML artifacts——在聊天界面内的渲染预览。当Claude生成HTML时，你可以实时预览。这使得反馈循环更快。

3. 通过curl进行批量处理

Simon Willison展示了一个专业技巧：通过curl直接将内容输入LLM，并附带HTML输出指令：

curl https://example.com/exploit.py | llm -m gpt-5.5 -s   '详细解释这段代码。输出HTML，精美样式化，
   利用HTML和CSS的能力让解释丰富且交互性强。'

4. 记住：Token成本 vs 价值

HTML输出比Markdown使用更多token——对于相同内容大约多40-60%。但每个token的价值要高得多。一个142行的SVG图表传递的理解比几页文字更多。把token花在能带来洞察的地方。

如果你的上下文窗口有限（比如旧GPT-4的8K时代），Markdown的token效率很重要。现代模型有200K+的上下文窗口。这个权衡已经不再是问题了。

为什么这是2026年的趋势

几个因素使这一转变正当其时：

  • 大上下文窗口 —— 在200K下，HTML的token溢价可以忽略
  • 代码生成质量 —— 模型现在能像写Markdown一样流畅地编写HTML/CSS/JS
  • Artifact预览 —— Claude Code和其他工具在聊天中内联渲染HTML
  • 自包含文件 —— 单个包含内嵌CSS+SVG的HTML文件替代了多个截图、图表和文档

我们正从"用文本聊天"走向"用文档聊天"。HTML是AI代理原生生成、人类原生消费的文档格式。

总结

Thariq Shihipar的洞察——HTML是AI编码代理不可思议有效的输出格式——是那种事后看来显而易见的思想。Markdown从来都是一种妥协。HTML才是真正的格式。我们只是需要足够好的模型来让它变得实用。

我们已经到了那一步。要求HTML。你会对得到的结果感到惊讶。

资源链接