# Claude Code的HTML输出：非凡的有效性

- 来源：Claude：Blog（网页）
- 发布时间：2026-05-20 05:45
- AIHOT 分数：73
- AIHOT 标记：精选
- AIHOT 链接：https://aihot.virxact.com/items/cmpd5x0qo0179slk1f2ze49et
- 原文链接：https://claude.com/blog/using-claude-code-the-unreasonable-effectiveness-of-html

## 精选理由

Claude Code 团队的人亲自告诉你为什么用 HTML 而不是 Markdown，从设计原型到可交互报告全在一个文件里搞定。附带的模板和提示词，开发者可以直接抄。

## AI 摘要

Claude Code团队正从Markdown转向HTML作为主要输出格式。Markdown虽简洁，但在信息密度、阅读性、分享和交互方面存在局限。HTML能支持表格、CSS样式、SVG图表和JavaScript交互，提供更清晰的视觉结构和高信息密度。由于HTML文件可通过浏览器直接打开和分享，便于团队协作审阅。Claude Code利用其广泛的上下文获取能力生成实用的HTML制品，适用于项目规划、文档编写和验证等多种场景，显著提升了AI生成内容的可读性与实用性。

## 正文

Claude Code 团队成员为何以及如何使用 HTML 替代 Markdown，以生成更丰富、更易读且便于分享的输出内容。

分类

Claude Code

产品

Claude Code

日期

2026 年 5 月 20 日

阅读时间

5

分钟

https://claude.com/blog/using-claude-code-the-unreasonable-effectiveness-of-html

Markdown 已成为智能体与人类沟通时使用的主流文件格式。它简单、可移植，具备一定的富文本能力，且易于编辑。Claude 甚至已经相当擅长在 Markdown 文件中使用 ASCII 字符绘制图表。

但随着智能体变得越来越强大，我发现 Markdown 逐渐成为一种限制越来越多的格式。具体来说，我觉得阅读超过一百行的 Markdown 文件很困难；我希望用 Claude 生成更丰富的可视化效果、色彩和图表；我还希望能够更轻松地分享这些输出内容。

此外，我现在越来越少亲自编辑这些文件，而是将它们作为规范和参考文件来使用。当我确实需要编辑时，通常也是让 Claude 来代劳，这反而消除了 Markdown 的一大优势。

因此，我开始倾向于使用 HTML 而非 Markdown 作为输出格式，并且越来越多地看到 Claude Code 团队的其他成员也在采用这种方式。在这篇文章中，我将分享我们团队为何以及如何使用 HTML 来生成更丰富、更易读的 Claude Code 输出。如果你想跟着实践，也可以开始将这些 HTML 文件模板用于常见的用例。

视频 · 前往原文观看

为什么使用 HTML？

有几个原因使得 HTML 比 Markdown 更适合我现在用 Claude Code 所做的工作，包括那些需要或涉及以下方面的任务：

信息密度

与 Markdown 相比，HTML 可以传达更丰富的信息。当然，它能实现标题和格式等简单的文档结构，但它还能表示各种其他信息，例如：

使用表格呈现的表格数据

使用 CSS 呈现的设计数据

使用 SVG 呈现的插图

使用 script 标签呈现的代码片段

使用 HTML 元素结合 JavaScript 和 CSS 实现的交互

使用 SVG 和 HTML 呈现的工作流程

使用绝对定位和画布呈现的空间数据

使用图片标签呈现的图像

在我看来，几乎没有任何 Claude 能读取的信息，是你无法用 HTML 高效呈现的。这使得 HTML 成为模型向你传达深度信息、以及你对其进行审阅的一种极为高效的方式。

我发现，如果无法做到这一点，模型可能会在 Markdown 中采用更低效的方式，比如 ASCII 图表，或者我最喜欢的——用 Unicode 字符来估算颜色。

视觉清晰度与阅读便捷性

随着 Claude 能够处理更复杂的工作，它也能编写越来越庞大的规格说明和计划。我发现，我实际上很少会去阅读超过 100 行的 Markdown 文件，而且我肯定无法让组织里的其他人去阅读它。

但 HTML 文档更容易阅读，因为 Claude 可以在视觉上组织结构，使其非常适合通过标签页、插图和链接进行导航。它甚至可以做到移动端响应式，让你根据不同的设备形态以不同方式阅读。

易于分享

Markdown 文件相当难以分享，因为大多数浏览器无法很好地原生渲染它们。你通常需要将它们作为附件添加到电子邮件或消息中。

只要你上传了 HTML 文件，就可以轻松分享链接。你的同事可以在任何地方打开它，并轻松地引用。

如果使用 HTML 格式，有人实际阅读你的规格说明、报告或 PR 描述的可能性会高得多。

双向交互

HTML 还可以让你与文档进行交互；例如，你可能希望它添加滑块或旋钮来调整设计，或者允许你调整算法中的不同选项以观察效果。你还可以让它允许你将这些更改复制到提示词中，再粘贴回 Claude Code。

在有用的情况下，这可以让你为你正在处理的特定问题创建独立的编辑环境。

数据导入

使用 Claude Code 而非 Claude.ai 或 Claude Design 制作 HTML 文件的最大原因之一，在于 Claude Code 能够摄入大量上下文。例如，在撰写本文时，我让 Claude Code 读取我的代码文件夹，找出我生成的所有 HTML 文件，对其进行分组和分类，然后制作一个包含各类别示意图的 HTML 文件。你在本文中看到的图表正是由此直接生成的。

除了文件系统，Claude Code 还可以通过你的 MCP（如 Slack、Linear 等）、你的网页浏览器（配合 Chrome 中的 Claude）以及你的 git 历史记录来查找额外的上下文。

快速上手

有一点值得注意：要让 Claude 生成这样的 HTML，你不需要做太多准备工作。你只需直接提示它“制作一个 HTML 文件”或“制作一个 HTML 制品”。关键在于你要清楚这个制品需要实现什么功能，以及你将如何使用它。随着时间的推移，针对重复出现的模式构建一个技能可能是有意义的，但一开始从零开始提示是了解它在不同用例下如何工作的好方法。

使用场景

为了让这种方法更具体，下面列举了一些我认为使用 HTML 文件比 Markdown 更合适的示例场景。你也可以在 GitHub 上查看这些用例的图库，链接在此。

规格说明、规划与探索

HTML 是 Claude 深入探究问题的丰富画布。当我开始处理一个问题时，我期望制作一个 HTML 文件网络，而不是一个简单的 Markdown 计划。例如，我可能会先让 Claude Code 进行头脑风暴，创建一些探索不同选项的内容。然后我会要求它更深入地展开其中一个方向，也许制作一些界面类型的模型或示例。最后，当我感觉良好时，我会让它编写一个实施计划。当我对计划满意后，我会创建一个新的会话，并将所有这些文件传递给它来实施。

在验证时，我也会让验证代理读取这些文件，这样它就能对所需内容有更广泛的了解。

示例提示词：

我不太确定引导页该往哪个方向设计。请生成六种截然不同的方案——在布局、风格和信息密度上有所变化——并将它们以网格形式放在一个 HTML 文件中，方便我并排对比。为每个方案标注其权衡取舍。

请在一个 HTML 文件中创建一份详尽的实施计划，务必包含一些模拟图，展示数据流，并添加我可能需要审阅的重要代码片段。要使其易于阅读和理解。

用于以下场景：

探索代码实现的其他方式

同时尝试多种视觉设计方案

代码审查与理解

代码在 Markdown 文件中可能难以阅读，但借助 HTML，我们可以渲染差异对比、注释、流程图和模块。使用 HTML 来理解智能体编写的代码、审查代码，或向审查你代码的人解释一个 PR。

示例提示词：

请帮我审查这个 PR，创建一个描述它的 HTML 制品。我对流式/背压逻辑不太熟悉，所以请重点讲解这部分。渲染实际的差异对比，并在页边距添加内联注释，按严重程度对发现的问题进行颜色编码，以及任何有助于清晰传达概念的内容。

用于以下场景：

创建 PR

审查 PR

理解代码中的某个主题

设计与原型

Claude Design 基于 HTML，因为即使你的最终界面不是 HTML，HTML 在设计方面也具有极强的表现力。Claude 可以用 HTML 勾勒出设计草图，然后用你选择的语言（如 React、Swift 等）来实现。

你还可以制作交互原型，例如动画、动作等。可以考虑让 Claude 制作滑块、旋钮等控件，来精确调整你想要的参数。

示例提示词：

我想制作一个新的结账按钮原型，点击时它会播放一个动画，然后快速变为紫色。创建一个 HTML 文件，包含多个滑块和选项，让我可以尝试这个动画的不同效果，并提供一个复制按钮，用来复制效果最佳的参数。

用于以下场景：

创建设计系统制品

调整组件

可视化组件库

制作动画原型

报告、研究与学习

Claude Code 在跨多个数据源综合信息并将其转化为可读报告方面非常高效。你可以提示 Claude 搜索你的 Slack、代码库、Git 历史记录或互联网，并利用这些信息生成易于阅读的报告。

你可以将其整理成一份长 HTML 文档、一个交互式讲解页面，甚至是一个幻灯片/演示文稿。让 Claude 使用 SVG 制作图表来帮助可视化。

示例提示词：

我不理解我们的速率限制器实际是如何工作的。请阅读相关代码并生成一个单页 HTML 讲解页面：包含令牌桶流程的图表、3-4 段带注释的关键代码片段，以及底部的一个"注意事项"部分。优化为适合一次性阅读。

适用于：

编写功能总结

生成讲解页面

起草周报

创建事故报告

制作 SVG 插图、流程图和技术图表

自定义编辑界面

有时很难仅通过文本框来描述你想要的东西。针对这种情况，我经常让 Claude 为我正在处理的具体任务构建一个一次性的编辑器：不是产品，也不是可复用的工具，而是一个专为这一份数据量身定制的单页 HTML 文件。

诀窍始终是加上一个导出功能：一个"复制为 JSON"或"复制为提示词"按钮，将我在 UI 中所做的操作转换回可以粘贴到 Claude Code 或提交到文件中的内容。你始终保持在循环中，但循环变得更加紧凑。

示例提示词：

我需要重新排列这 30 个 Linear 工单的优先级。请为我制作一个 HTML 文件，将每个工单作为可拖拽卡片，分布在"现在/下一步/稍后/放弃"列中。按你的最佳判断预先排序。添加一个"复制为 Markdown"按钮，导出最终排序结果，并为每个分组附上一行理由说明。

这是我们的功能开关配置。请为其构建一个基于表单的编辑器，按区域对开关进行分组，显示它们之间的依赖关系，如果我启用了一个其前置条件处于关闭状态的开关，请发出警告。添加一个"复制差异"按钮，只输出发生变化的键。

我正在调试这个系统提示词。做一个并排编辑器：左侧是可编辑的提示词，变量插槽高亮显示；右侧是三个示例输入，实时渲染填充后的模板。添加一个字符/模型 token 计数器和一个复制按钮。

用于以下场景：

对任何内容进行重新排序、分类或分桶（工单、测试用例、反馈）

编辑结构化配置（功能开关、环境变量、带约束的 JSON/YAML）

调试提示词、模板或文案，并实时预览

整理数据集——批准/拒绝数据行、标记示例、导出所选内容

对文档、转录文本或差异对比进行标注，并导出标注结果

选取那些难以用文字表达的值：颜色、缓动曲线、裁剪区域、cron 调度表达式、正则表达式

常见问题

以下是我在使用 HTML 与 Claude Code 配合时最常被问到的问题，以及我在日常实践中总结出的实用习惯：

这样效率不是更低吗？

虽然 Markdown 通常使用的模型 token 更少，但我发现 HTML 更强的表现力，加上我阅读它的可能性高得多，意味着我最终能得到更好的输出。在 Opus 4.7 的 100 万上下文窗口下，增加的 token 用量在上下文窗口中几乎察觉不到。

那你现在什么时候还用 Markdown？

老实说，我现在几乎完全不再用 Markdown 了，不过我可能属于 HTML 最大化使用的那一类人。

这就是你替代规划的方式吗？

我发现，与其制定一个单一的规划，我更倾向于为规划的不同部分/阶段准备几个不同的 HTML 文件。例如，我可能会用 HTML 做一个实现计划，然后另建一个文件用于探索用户界面，最后再做一个 HTML 组件来列出所有设计方案。我通常会保留这些文件，作为将来参考以及验证时使用。

与 Claude 保持同步

以上所有内容都是为了说明，我使用 HTML 而非 Markdown 的真正原因，在于它能让我感觉与 Claude 的联系更加紧密。随着 Claude 承担的任务越来越多，我注意到自己阅读计划时不如以前仔细了，而我想要一种方式，能够持续参与它的决策过程，而不是简单地把任务交出去。HTML 恰好满足了这一需求。现在，我感觉自己比以往任何时候都更融入其中。

开始使用 Claude Code。

本文由技术团队成员 Thariq Shihipar 撰写，表达了他个人对在 Claude Code 中使用 HTML 文件的看法与偏好。

借助 Claude 改变您组织的运作方式。