【Claude Code】实践【HTML】输出格式的卓越效果——为什么你该停止用 【Markdown】让 LLM 输出写在前面2026 年 5 月Anthropic Claude Code 团队的 Thariq Shihipar 发了一条推文标题是《The Unreasonable Effectiveness of HTML》。他的核心论点只有一句让 Claude 输出 HTML 而不是 Markdown你会得到完全不同级别的结果。这条推文引发了广泛讨论连长期习惯 Markdown 的 Simon Willison 都公开反思“Thariq 的文章让我重新审视了这个习惯。” 今天我们深入拆解这个看似简单、实则深刻的观点——为什么 HTML 输出格式对 LLM 来说不合理地有效它到底能做什么 Markdown 做不到的事以及什么时候该用 HTML什么时候该坚持 Markdown 文章目录 一、一条推文引发的范式反思⚡ 二、HTML vs Markdown四个维度的代际差距 三、五大实战场景HTML 输出的真实威力 四、闭环工作流输出即界面界面即输入 五、范式转移Markdown 惯性的本质 六、实践指南何时用 HTML何时用 Markdown 一、一条推文引发的范式反思1.1 Thariq 的核心论点Thariq Shihipar 在推文中写道“I’ve started preferring HTML as an output format instead of Markdown and increasingly see this being used by others on the Claude Code team, this is why.”他不是在说HTML 比 Markdown 好——这是一个更精确的论点在 LLM 输出场景下HTML 的表达力远超 Markdown而且这个差距在 Claude 时代被放大了。他还创建了一个示例网站thariqs.github.io/html-effectiveness/展示了各种 HTML 输出的实际效果——从交互式安全漏洞解释页面到带 SVG 图表的代码审查报告到可拖拽的设计原型。1.2 Simon Willison 的反思Django 创始人、LLM 领域知名博主 Simon Willison 在他的博客中写道“I’ve been defaulting to asking for most things in Markdown since the GPT-4 days, when the 8,192 token limit meant that Markdown’s token-efficiency over HTML was extremely worthwhile. Thariq’s piece here has caused me to reconsider that, especially for output.”这段话精准地指出了问题的本质Markdown 惯性不是选择而是路径依赖。GPT-4 时代8K Token 限制下HTML 的标签开销不可接受Markdown 是被迫选择。但到了 Claude 时代200K Token 限制下这个约束已经消失了——习惯却还在。1.3 一个具体的例子Thariq 以 GPT-5.5 生成一个 Linux 安全漏洞的交互式 HTML 解释页面为例。这个页面包含SVG 流程图展示漏洞利用链、可折叠的详细说明区域、页内导航跳转到不同章节、颜色编码的严重性标注。如果用 Markdown 输出同样的内容你只能得到一堆纯文本——没有图表没有交互没有导航只有一堵文字墙。⚡ 二、HTML vs Markdown四个维度的代际差距2.1 维度一视觉丰富度Markdown 能做什么标题、列表、代码块、粗体、斜体、表格。这些是文档的基本元素。但当你需要解释一个复杂的安全漏洞时你需要什么流程图、颜色编码、有样式的 callout 框、SVG 图表。这些 Markdown 统统做不到而 HTML CSS SVG 可以轻松实现。Thariq 特别强调了 SVG 的价值LLM 可以直接生成 SVG 代码无需外部工具无需图片生成 API。一个简单的流程图只需要几十行 SVG 代码但它的信息传达效率远超几千字的纯文本描述。这种用代码画图的能力是 HTML 输出最被低估的优势之一。2.2 维度二信息架构长 Markdown 文档是一维的——从头到尾线性排列。HTML 文档可以是多维的页内锚点导航、可折叠区域、标签页切换、侧边栏目录。这意味着读者可以按自己的路径探索信息而不是被迫按作者的顺序阅读。Thariq 指出长 Markdown 文档在组织中几乎没人读——太长、太枯燥、没有导航。但同样的内容用 HTML 呈现加上目录导航和可折叠区域被阅读的概率大大增加。“The likelihood that colleagues will actually open planning documents, reports and PR manuals becomes much higher.”2.3 维度三易分享性Markdown 不是浏览器原生渲染的格式——你需要专门的编辑器或渲染器。分享 Markdown 文件意味着发送附件对方需要打开特定工具才能阅读。HTML 则是浏览器原生格式——上传到 S3 或任何静态托管一个链接即可分享。同事点击链接就能看到完整的、渲染好的页面无需安装任何东西。这个差异看似微小实则关键分享的摩擦力决定了文档被阅读的概率。附件的摩擦力远高于链接。2.4 维度四双向交互这是 HTML 最革命性的优势。在 HTML 文档中你可以添加滑块、按钮、拖拽组件——用户调整参数后直接复制结果回 Claude Code。这意味着输出不只是输出还是输入——形成了生成→交互→反馈→迭代的闭环。Markdown 是单向的LLM 输出人类阅读结束。HTML 是双向的LLM 输出人类交互结果回写 LLMLLM 再输出。这个闭环在 Markdown 中完全不可能实现。 三、五大实战场景HTML 输出的真实威力3.1 场景一规划文档在项目规划阶段Thariq 会把多个方向的草案并排放在一个 HTML 文件中一目了然地对比。HTML 的 CSS Grid 布局让并排对比变得极其自然——两列、三列、甚至四列方案同时展示每列有独立的颜色标识和交互区域。如果用 Markdown你只能用表格或分隔线勉强模拟效果天差地别。3.2 场景二代码审查Thariq 认为用 HTML 制作的代码审查指南比 GitHub 默认的 diff 视图更好。他会在每个 PR 上附带一个 HTML 审查指南包含带行内边距标注的实际 diff、按严重性颜色编码的发现红色必须修复黄色建议改进绿色做得好、可折叠的详细说明区域。他的 Prompt 模板是这样的Help me review this PR by creating an HTML artifact that describes it. Im 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.3.3 场景三设计原型HTML 可以直接生成可交互的设计原型——可拖拽的卡片、表单式的设置编辑器、实时预览的布局调整。Thariq 总是在 HTML 原型末尾添加一个复制结果按钮让用户调整完参数后一键复制回 Claude Code形成闭环。3.4 场景四技术报告复杂的技术报告需要图表、流程图、数据可视化。HTML SVG 可以直接在文档中嵌入这些元素无需外部工具。读者可以在同一个页面中阅读文字、查看图表、展开详细数据——所有信息在一个上下文中呈现不需要在多个工具之间切换。3.5 场景五幻灯片演示Thariq 甚至用 HTML 生成幻灯片——键盘导航、SVG 图表、动画过渡全部在一个 HTML 文件中实现。比 PowerPoint 更灵活比 Keynote 更可编程比 Markdown 幻灯片更美观。 四、闭环工作流输出即界面界面即输入4.1 传统工作流单向输出传统 LLM 工作流是单向的用户写 Prompt → LLM 输出 Markdown → 用户阅读 → 如果不满意修改 Prompt 重新生成。这个循环的反馈路径很长——用户需要重新描述需求LLM 需要重新理解上下文。4.2 HTML 闭环工作流HTML 输出创造了一种全新的工作流用户写 Prompt → LLM 输出 HTML → 用户在浏览器中交互调参数、拖拽、选择→ 复制结果回 Claude Code → LLM 基于反馈继续迭代。这个循环的反馈路径极短——用户不需要重新描述需求只需要在界面上操作结果自动回写。4.3 为什么这很重要闭环工作流的核心价值是降低反馈成本。在传统工作流中每次迭代的成本是写一段新 Prompt。在闭环工作流中每次迭代的成本是点一个按钮或拖一个滑块。成本降低了一个数量级迭代速度提升了一个数量级。这不是渐进式改进而是范式级变化。 五、范式转移Markdown 惯性的本质5.1 路径依赖的三个阶段Markdown 惯性的本质是约束条件变化后的路径依赖可以分为三个阶段阶段一GPT-4 时代8K Token 限制下HTML 的标签开销不可接受。一个div classcontainerh1Title/h1pContent/p/div比# Title\n\nContent多消耗 3-4 倍 Token。Markdown 不是选择而是生存必需。阶段二Claude 时代200K Token 限制下HTML 的标签开销不再是瓶颈。但习惯已经形成——所有 Prompt 模板默认用 Markdown 输出所有教程默认 Markdown所有思维惯性指向 Markdown。阶段三觉醒时刻Thariq 的文章打破了惯性——他指出约束已经消失但习惯还在。Simon Willison 的反思代表了整个社区的觉醒“我一直在默认用 Markdown但现在我需要重新考虑了。”5.2 不合理有效性的含义Thariq 用Unreasonable Effectiveness不合理有效性这个标题致敬了 Eugene Wigner 的经典论文《The Unreasonable Effectiveness of Mathematics in the Natural Sciences》。他的意思是HTML 在 LLM 输出中的效果好到了不合理的程度——你只是换了一个输出格式结果却从一堵文字墙变成了交互式可视化页面这种提升幅度远超预期。5.3 所有还在用纯文本解释复杂代码的人都该换个思路这是本文最核心的观点。当你需要解释一个复杂的算法、一个安全漏洞、一个系统架构时纯文本Markdown的表达力是有限的。HTML SVG CSS 可以把同样的信息呈现为交互式流程图、可折叠的详细说明、颜色编码的严重性标注——读者可以按自己的路径探索信息而不是被迫按你的顺序阅读。不是 Markdown 不好而是 HTML 能做到 Markdown 做不到的事。 六、实践指南何时用 HTML何时用 Markdown6.1 应该用 HTML 的场景需要图表/流程图的可视化解释需要交互式参数调整需要并排对比多个方案需要分享给非技术同事需要代码审查的标注视图需要可探索的长报告需要双向交互闭环6.2 不必用 HTML 的场景简单的问答/对话代码片段输出快速笔记/备忘API 响应/数据交换终端/CLI 输出Token 预算极度紧张时6.3 关键 Prompt 模板# PR 审查 Help me review this PR by creating an HTML artifact that describes it. Render the actual diff with inline margin annotations, color-code findings by severity and whatever else might be needed. # 安全漏洞解释 Explain this Linux security vulnerability as an interactive HTML page with SVG diagrams, in-page navigation, and collapsible sections. # 设计原型 Create an HTML prototype with draggable cards, add a button at the end to copy the results back. # 技术报告 Generate an HTML report with SVG charts, interactive data tables, and a sidebar table of contents for navigation. 总结速查卡HTML vs Markdown 四维对比维度MarkdownHTML视觉丰富度标题/列表/代码块SVG 图表/颜色编码/交互组件信息架构一维线性多维导航/折叠/标签页易分享性需附件/需渲染器链接即分享/浏览器原生双向交互单向输出滑块/按钮/回写闭环一句话总结Thariq Shihipar 的HTML 不合理有效性论点本质上是在说GPT-4 时代的 Markdown 惯性已经过时了。200K Token 限制下HTML 的标签开销不再是瓶颈而 HTML SVG CSS 的表达力远超 Markdown——流程图、交互组件、页面导航、双向闭环这些都是 Markdown 做不到的事。Simon Willison 的反思代表了社区的觉醒不是 Markdown 不好而是 HTML 能做到 Markdown 做不到的事。所有还在用纯文本解释复杂代码的人都该换个思路——下次让 Claude 输出 HTML你会惊讶于结果的差异。参考链接Thariq Shihipar 原始推文HTML Effectiveness 示例网站Simon Willison 博客评论Tech Insight: Stop using Markdown, move to HTML