使用 Claude Code：HTML 那令人难以置信的高效
Claude Code 团队成员为何以及如何使用 HTML 而非 Markdown 来生成更丰富、更易读且便于分享的输出。
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 标签的代码片段
- 使用 javascript + CSS 的 HTML 元素交互
- 使用 SVG 和 HTML 的工作流
- 使用绝对定位和画布的空间数据
- 使用 image 标签的图像
在我看来，几乎不存在 Claude 能读取但你无法用 HTML 高效表示的信息集合。这使得它成为模型向你传达深入信息以及你对其进行审查的高效方式。
我发现，在无法做到这一点的情况下，模型可能会在 Markdown 中做更多低效的事情，比如 ASCII 图表，或者我最喜欢的——用 unicode 字符来估算颜色。
视觉清晰度与易读性
随着 Claude 能够处理更复杂的工作，它也能编写越来越庞大的规格说明和计划。我发现我实际上不会阅读超过一百行的 Markdown 文件，而且我肯定也无法让组织中的其他人去阅读它。
但 HTML 文档要容易阅读得多，因为 Claude 可以直观地组织结构，通过标签页、插图和链接实现理想的导航。它甚至可以做到移动端响应式，让你可以根据设备形态以不同的方式阅读。
易于分享
Markdown 文件相当难以分享，因为大多数浏览器无法原生良好地渲染它们。你通常必须将它们作为附件添加到电子邮件或消息中。
只要你上传了 HTML 文件，你就可以 轻松分享链接。你的同事可以在任何他们希望的地方打开它，并轻松引用它。
如果规格说明、报告或 PR 描述是 HTML 格式，别人真正阅读它的可能性会高得多。
双向交互
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 头脑风暴并创建一些不同选项的探索。然后我会要求它更深入地研究其中一个，也许制作一些界面类型的模型或示例。最后，当我感觉不错时，我会要求它编写一个实施计划。当我对计划满意后，我会创建一个新会话，并将所有这些文件传递给它来实施。
在验证时，我也会要求验证代理读取这些文件，这样它就能对需要什么有更广泛的上下文。
示例提示词：
- 我不确定引导屏幕应该朝哪个方向发展。生成 6 种截然不同的方法——在布局、语气和信息密度上各有不同——并将它们以网格形式排列在单个 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 文件，每个工单作为一张可拖拽的卡片，分布在 Now / Next / Later / Cut 四列中。请根据你的最佳推测预先排序。添加一个“复制为 Markdown”按钮，导出最终排序，并为每个分组附上一行理由。
- 这是我们的功能开关配置。为它构建一个基于表单的编辑器，按区域对开关进行分组，显示它们之间的依赖关系，如果我启用的开关其前置条件是关闭的，请向我发出警告。添加一个“复制差异”按钮，只给我变更的键。
- 我正在调整这个系统提示。制作一个并排编辑器：左侧是可编辑的提示，变量槽位高亮显示；右侧是三个示例输入，实时重新渲染填充后的模板。添加一个字符/词元计数器和一个复制按钮。
适用于：
- 重新排序、分类或分桶任何内容（工单、测试用例、反馈）
- 编辑结构化配置（功能开关、环境变量、带约束的 JSON/YAML）
- 调整提示、模板或文案并实时预览
- 整理数据集——批准/拒绝行、标记示例、导出所选内容
- 标注文档、转录稿或差异并导出标注结果
- 选择难以用文字表达的值：颜色、缓动曲线、裁剪区域、cron 计划、正则表达式
常见问题
这些是我最常被问到的关于在 Claude Code 中使用 HTML 的问题，以及我总结出的实用日常习惯：
这样不是效率更低吗？
虽然 Markdown 通常使用的词元更少，但我发现 HTML 增加的表现力以及我更有可能去阅读它，意味着我总体上能得到更好的输出。在 Opus 4.7 的 100 万词元上下文窗口中，增加的词元使用量在上下文窗口中并不明显。
那你现在什么时候还用 Markdown？
说实话，我几乎对所有事情都完全停止使用 Markdown 了，但我在 HTML 极端派这一边可能走得比较远。
这就是你取代规划的方式吗？
我发现，我不再制定单一的计划，而是倾向于为计划的不同部分/阶段准备几个不同的 HTML 文件。例如，我可能会用 HTML 制定一个实施计划，然后另做一个文件来探索界面，最后再制作一个列出所有设计的 HTML 组件。我倾向于保留这些文件作为未来的参考，也用于验证。
与 Claude 保持同步
以上所有内容归根结底是想说，我使用 HTML 而非 Markdown 的真正原因是，它让我感觉与 Claude 的同步感强得多。随着 Claude 承担更多工作，我注意到自己阅读计划不再那么仔细，而我想要一种方式来参与它的选择，而不是仅仅把任务交出去。HTML 恰好就是那样。我现在比以往任何时候都更有参与感。
开始使用 Claude Code。
本文由技术团队成员 Thariq Shihipar 撰写，表达了他个人对在 Claude Code 中使用 HTML 文件的看法——以及偏爱。