用HTML替代Markdown：提示工程中被忽视的AI输出格式优化技巧

从Markdown到HTML：一个被忽视的提示工程技巧

长期以来，当我们与大语言模型交互时，Markdown几乎是默认的输出格式。这个习惯可以追溯到GPT-4时代——当时8192个token的上下文限制，使得Markdown相比HTML的token效率优势显得极为重要。然而，Anthropic Claude Code团队成员Thariq Shihipar最近发表的一篇文章，正在动摇这个根深蒂固的默认选项。

知名开发者Simon Willison在读完这篇文章后坦言，这让他重新审视了自己多年来的习惯。核心观点很简单但极具启发性：当你要求AI用HTML格式输出时，它能做到的事情远比Markdown丰富得多。

Markdown与HTML：理解两种格式的技术本质

在深入讨论之前，有必要理解这两种格式的根本差异。Markdown由John Gruber于2004年创建，其设计哲学是让纯文本具备可读性的同时能转换为HTML。它本质上是HTML的一个极度简化子集——Markdown最终仍需被解析为HTML才能在浏览器中渲染。这意味着Markdown从诞生之日起就是HTML的"有损压缩"版本，它牺牲了HTML的绝大部分能力（如CSS样式、JavaScript交互、SVG矢量图形）来换取书写的简洁性。当AI模型直接输出HTML时，实际上是跳过了这个"有损压缩"步骤，直接使用了Web的原生表达语言。

理解了这一点，我们就能更清楚地看到：要求AI输出Markdown，本质上是在要求它用一种受限的语言来表达自己。

HTML输出比Markdown强在哪里

超越纯文本的表达能力

Markdown本质上是一种简化的文本标记语言，擅长处理结构化文本——标题、列表、代码块、链接。但当我们需要AI解释复杂概念时，纯文本的表达力往往捉襟见肘。

HTML则打开了一个全新的维度。当你在提示词中要求Claude以HTML格式输出时，它可以：

• 内嵌SVG图表：直接在输出中绘制流程图、架构图、数据可视化。SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，可以直接嵌入HTML文档中而无需外部文件。与位图不同，SVG用数学公式描述图形，因此可以无损缩放。对于AI模型而言，生成SVG本质上是生成一段描述几何形状和文本位置的代码，这与生成自然语言文本的过程高度一致——这使得LLM能够在HTML输出中直接"绘制"复杂图表，而无需调用任何外部绘图工具或API。
• 交互式组件：折叠面板、标签页切换、悬停提示等交互元素
• 页内导航：为长文档自动生成目录和锚点跳转
• 色彩编码：用颜色区分不同级别的信息，比如代码审查中的严重性分级
• 内联注释：在代码diff旁边添加边距注释

这些能力在Markdown中要么完全无法实现，要么需要借助扩展语法且兼容性堪忧。

一个令人印象深刻的实际案例

Thariq在文章中给出了一个极具说服力的提示词示例：

"帮我审查这个PR，创建一个HTML artifact来描述它。我对streaming/backpressure逻辑不太熟悉，请重点关注这部分。渲染实际的diff并添加内联边距注释，按严重性对发现的问题进行颜色编码，以及其他任何有助于传达概念的方式。"

这里提到的streaming/backpressure（流式处理/背压）是分布式系统和异步编程中的核心概念。当数据生产者的速度超过消费者的处理能力时，backpressure机制允许消费者向上游发出信号，要求降低数据发送速率，从而防止内存溢出或系统崩溃。这类概念涉及多个组件之间的动态交互，用纯文本描述往往难以直观呈现数据流向、缓冲区状态和信号传递过程，而HTML配合SVG动画或交互式图表则能将这些抽象概念可视化——这恰恰说明了为什么HTML输出在解释复杂技术概念时具有不可替代的优势。

想象一下这个提示词的输出效果：一个带有颜色编码的代码审查页面，关键代码行旁边有清晰的注释气泡，严重问题用红色标记，建议用黄色标记，信息性说明用蓝色标记。这种输出的信息密度和可读性，远非一段Markdown文本所能比拟。

值得注意的是，这里提到的"HTML artifact"与Anthropic在2024年为Claude推出的Artifacts功能密切相关。Artifacts允许Claude在对话侧边栏中生成独立的、可预览的内容块，包括HTML页面、SVG图形、React组件和Mermaid图表等。用户可以直接在浏览器中查看渲染效果，而非阅读原始代码。这一功能为HTML输出提供了天然的展示环境，使得AI生成的富媒体内容可以即时呈现，大幅降低了用户将HTML代码手动保存并打开的摩擦成本。

Thariq还在 thariqs.github.io/html-effectiveness 上收集了大量类似的示例，展示了HTML输出在代码审查、概念解释、数据分析等场景下的实际效果。

为什么2025年是转变的最佳时机

上下文窗口的扩展消除了token顾虑

回到2023年初，GPT-4的8K token限制意味着每一个token都弥足珍贵。要理解这个限制的实际影响，需要了解token的概念：token是大语言模型处理文本的基本单位，通常一个英文单词被拆分为1-3个token，中文每个字约1.5-2个token。HTML标签如<div class=\"container\">相比Markdown的简洁语法会消耗显著更多的token。在8K token的上下文窗口下，输入和输出加在一起不能超过约6000个英文单词，每个token的边际成本极高。同样的内容，HTML的标签开销可能比Markdown多出30-50%的token消耗。在那个时代，选择Markdown是理性的经济决策。

但今天的情况已经截然不同。Claude的上下文窗口已经扩展到200K token，GPT-4o也达到了128K。主流模型的上下文窗口已扩展了15-25倍，加之token单价因市场竞争和技术进步持续下降，HTML额外消耗的token在成本和容量上都已变得微不足道。当token不再是稀缺资源时，我们应该重新思考：用额外的token换取更丰富的表达形式，这笔交易是否划算？

答案几乎是肯定的。

从工具构建到知识呈现的思路跃迁

Simon Willison此前已经在探索HTML与AI的结合，但他的关注点主要在交互式工具的构建上——比如他在 tools.simonwillison.net 上发布的各种实用小工具。Thariq的文章启发了一个新方向：HTML不仅适合构建工具，更适合作为知识解释和信息呈现的载体。

这意味着，即使是一个临时的、一次性的问答，用HTML输出也可能比Markdown更有价值。

实践指南：如何用HTML提升AI输出质量

五类特别适合HTML输出的场景

并非所有场景都需要HTML输出。以下是切换格式收益最大的情况：

1. 复杂概念解释：涉及流程、架构、多层关系的内容
2. 代码审查与分析：需要在代码旁添加注释和标记
3. 数据对比与可视化：多维度信息的并排展示
4. 教学材料：需要交互式探索的学习内容
5. 技术文档：带有导航结构的长文档

写好HTML输出提示词的三个要点

在请求HTML输出时，不要只写"用HTML格式输出"。更有效的做法是描述你期望的视觉和交互体验：

• 明确视觉需求：指出需要图表、颜色编码还是交互组件
• 说明信息层次：告诉模型信息的优先级和组织方式
• 留出创意空间：加上"whatever else might be needed to convey the concept well"这类开放性指令，让模型自主发挥

Markdown仍然是更好选择的场景

当然，Markdown并没有过时。在以下场景中，它依然是首选：

• 需要进一步编辑和版本控制的文档
• 将输出嵌入到GitHub、Notion等Markdown生态中
• 简单的文本回答和列表
• 需要严格控制token消耗的场景

重新审视AI交互中的默认习惯

这个话题的真正价值不仅在于"用HTML替代Markdown"这个具体建议，更在于它提醒我们：很多AI交互中的默认做法，可能只是早期技术限制下的权宜之计，而非最优解。

随着模型能力的快速迭代，我们的使用方式也应该同步升级。从token节约型思维转向表达丰富型思维，从被动接受默认格式到主动选择最佳呈现方式——这或许是2025年提示工程领域最值得关注的范式转变之一。

核心要点

• Anthropic Claude Code团队成员提出用HTML替代Markdown作为AI输出格式，可获得SVG图表、交互组件、颜色编码等远超纯文本的表达能力
• Markdown作为默认输出格式的习惯源于GPT-4时代的token限制，但在200K上下文窗口时代，这一约束已不再成立
• HTML输出特别适合复杂概念解释、代码审查、数据可视化等需要丰富视觉呈现的场景
• 有效的HTML输出提示词应描述期望的视觉和交互体验，而非简单要求格式转换
• 这一转变反映了AI交互从token节约型思维向表达丰富型思维的范式演进