Claude团队：HTML输出更好

微信 ezpoda免费咨询：AI编程 | AI模型微调| AI私有化部署
AI模型价格对比 | AI工具导航 | ONNX模型库 | Tripo 3D | Meshy AI | ElevenLabs | KlingAI | ArtSpace | Phot.AI | InVideo

Markdown 已经成为代理（agents）与我们沟通时使用的主要文件格式。它简单、可移植，具有一定的富文本能力，并且易于你编辑。Claude 甚至在 Markdown 文件中用 ASCII 制作图表方面也变得出奇地擅长。

但随着代理变得越来越强大，我感觉到 Markdown 已经成为一种限制性的格式。我发现阅读超过一百行的 Markdown 文件很困难。我想要更丰富的可视化、颜色和图表，并且希望能够轻松分享它们。

我也越来越不自己编辑这些文件，而是将它们用作规格说明、参考文件、头脑风暴输出等。当我确实进行编辑时，通常是提示 Claude 来编辑它们，这就消除了 Markdown 最大的优势之一。

我已经开始更喜欢将 HTML 作为输出格式，而不是 Markdown，并且越来越多地看到 Claude Code 团队的其他人在使用这种方式，这就是原因。如果你想从一些例子开始，可以在这里看到很多，请务必回来继续阅读更多原因。

1、为什么是 HTML？

1.1 信息密度

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

• 使用表格表示表格数据
• 使用 CSS 表示设计数据
• 使用 SVG 表示插图
• 使用 script 标签表示代码片段
• 使用 HTML 元素 + JavaScript + CSS 实现交互
• 使用 SVG 和 HTML 表示工作流程
• 使用绝对定位和画布表示空间数据
• 使用 image 标签表示图像

我甚至可以说，几乎没有 Claude 能读取的信息集是你无法用 HTML 相当高效地表示的。这使得它成为模型向你传达深入信息以及你查看信息的极高效方式。

我发现，如果无法做到这一点，模型可能会在 Markdown 中做一些低效的事情，比如 ASCII 图表，或者我最喜欢的，用 Unicode 字符估算颜色，就像 Claude Code 这张截图中那样。

1.2 视觉清晰度和易读性

随着 Claude 能够完成更复杂的工作，它也在编写越来越大的规格和计划。在实践中，我发现我往往不会真正阅读超过 100 行的 Markdown 文件，当然也无法让组织里的其他人阅读它。

但 HTML 文档要容易阅读得多，Claude 可以将结构在视觉上组织成最理想的导航方式，包括标签、插图、链接等。它甚至可以是移动端响应的，这样你就可以根据你的设备形式因素以不同方式阅读它。

1.3 易于分享

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

使用 HTML，只要你上传文件（例如上传到 S3），就可以轻松分享链接。你的同事可以在任何他们想要的地方打开它，并轻松引用它。

如果你的规格、报告或 PR 说明是 HTML 格式，那么别人实际阅读它的机会要高得多。

1.4 双向交互

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

阅读我关于 playgrounds 的帖子，可以看到这种双向交互的例子。

1.5 数据摄入

为什么使用 Claude Code 来制作 HTML 文件，而不是 ClaudeAI 或 Claude Design 之类的？最大的原因之一是 Claude Code 可以摄入的所有上下文。

例如，在写这篇文章时，我让 Claude Code 阅读我的代码文件夹，找到我生成的所有 HTML 文件，将它们分组和分类，然后制作一个 HTML 文件，其中包含代表每种类型的所有图表。你在这篇文章中看到的图表就是这样直接产生的。

除了文件系统，Claude Code 还可以使用你的 MCPs（比如 Slack、Linear 等）、你的网页浏览器（使用 Chrome 中的 Claude）、你的 git 历史等找到额外的上下文。

1.6 它令人愉悦

用 Claude 制作 HTML 文档只是更有趣，让我感觉更有参与感和投入感，这本身就足够了。

2、如何开始

我有点担心人们读完这篇文章后会把它变成一个 /html skill 之类的。虽然这可能有一些价值，但我想要强调的是，你不需要做太多就能让 Claude 做到这一点。你可以直接问它“制作一个 HTML 文件”或“制作一个 HTML artifact”。

诀窍在于知道你希望这个 artifact 做什么，以及你可能会如何使用它。随着时间推移，你可能会制作一个 skill，但现在我建议从头开始提示，以便掌握如何在不同情况下使用它。

3、用例

，为了让这一点更具体，我已经为不同的用例制作了许多不同的 HTML 文件。你可以在这里查看所有这些，但下面是一个概述。

3.1 规格、规划与探索

HTML 是 Claude 深入研究问题的丰富画布。当我开始处理一个问题时，我不是做一个简单的 Markdown 计划，而是期望制作一个 HTML 文件网络。例如，我可能会先让 Claude Code 头脑风暴并创建不同选项的一些探索。然后我让它扩展其中一个，也许制作模型或代码片段。最后，当我觉得不错时，我会让它写一个实施计划。当我对计划满意时，我会创建一个新会话，并传入所有这些文件让它实施。

在验证时，我也会让验证代理读取这些文件，它将拥有关于所需内容的更广泛上下文。

示例提示：

• “我不确定 onboarding 屏幕该走哪个方向。生成 6 种截然不同的方法——改变布局、语气和密度——并将它们布局在一个 HTML 文件的网格中，以便我可以并排比较它们。用它所做的权衡来标记每个。**
• 创建一个 HTML 文件中的详细实施计划，一定要制作一些模型，展示数据流，并添加我可能想要审查的重要代码片段。让它易于阅读和消化。

用例：

• 探索在代码中实现某事的其他方式
• 探索多种视觉设计

3.2 代码审查与理解

代码在 Markdown 文件中很难阅读。但使用 HTML，我们可以渲染差异、注释、流程图、模块等。使用这个来理解代理编写的代码、获取代码审查，或向审查你代码的人解释 PR。我发现这通常比默认的 Github diff 视图更好，现在我每次提交 PR 都会附上一个 HTML 代码解释器。

示例提示：

“帮我审查这个 PR，创建一个描述它的 HTML artifact。我不太熟悉 streaming/backpressure 逻辑，所以重点关注那个。用内联边距注释渲染实际的 diff，按严重程度对发现进行颜色编码，以及任何其他可能需要传达概念的内容。”

用例：

• 创建 PR
• 审查 PR
• 理解代码中的一个主题

4.3 设计与原型

Claude Design 是基于 HTML 的，因为 HTML 在设计上极具表现力，即使你的最终表面不是 HTML。Claude 可以用 HTML 勾勒出一个设计，然后用你选择的语言编写它，无论是 React、Swift 等。

你还可以原型交互，例如动画、动作等。考虑让 Claude 制作滑块、旋钮等，来精确调整你正在寻找的内容。

示例提示：

“我想原型一个新的结账按钮，点击时它会播放动画，然后快速变成紫色。创建一个 HTML 文件，带有几个滑块和选项让我尝试这个动画的不同选项，给我一个复制按钮来复制效果好的参数。”

用于：

• 创建设计系统 artifact
• 调整组件
• 可视化组件库
• 原型愉悦的动画

4.4 报告、研究与学习

Claude Code 非常擅长跨多个数据源合成信息并将其转换为易读的报告。你可以提示 Claude 搜索你的 Slack、代码库、git 历史、互联网等，并用它为自己、领导层、团队等生成极易读的报告。

你可以将它组装成一个长的 HTML 文档、交互式解释器，甚至是幻灯片/演示文稿。让 Claude 使用 SVG 来制作图表以帮助可视化。

例如，对于我关于 prompt caching 的帖子，我让 Claude 在阅读 git 历史后，为我准备一个关于我们所有 prompt caching 更改的深入研究 HTML 文件供我阅读。

示例提示：

“我不理解我们的 rate limiter 实际上是如何工作的。阅读相关代码并生成一个单一的 HTML 解释页面：token-bucket 流程的图表、3-4 个带注释的关键代码片段，以及底部的一个“gotchas”部分。为只读一次的人优化它。”

用于：

• 总结功能如何工作
• 向我解释一个概念
• 给老板的周报
• 给领导的事故报告
• SVG 插图、流程图、技术图表等

5、自定义编辑界面

有时很难仅仅在文本框中描述你想要什么。在这种情况下，我会让 Claude 为我正在处理的精确事物构建一个一次性编辑器。不是一个产品或可重用工具，而是一个单一的 HTML 文件，专为这一块数据而构建。

诀窍始终是以导出结束：一个“复制为 JSON”或“复制为 prompt”的按钮，将我在 UI 中做的任何事情转换回我可以粘贴到 Claude Code 的内容。

示例提示：

• “我需要重新安排这 30 个 Linear ticket。给我一个 HTML 文件，每个 ticket 作为一个可拖动的卡片，分布在 Now / Next / Later / Cut 列中。根据你的最佳猜测预先排序。添加一个“复制为 markdown”的按钮，导出最终排序，每个 bucket 带有一行理由。”
• “这是我们的 feature flag 配置。为它构建一个基于表单的编辑器，按区域分组 flag，显示它们之间的依赖关系，如果我启用一个前提条件关闭的 flag 就警告我。添加一个“复制 diff”按钮，只给我更改的键。”
• “我正在调整这个 system prompt。制作一个并排编辑器：左侧是可编辑的 prompt，突出显示变量槽，右侧是三个样本输入，实时重新渲染填充的模板。添加字符/ token 计数器和一个复制按钮。”

用于：

• 重新排序、分类或分桶任何东西（ticket、测试用例、反馈）
• 编辑结构化配置（feature flags、env vars、带约束的 JSON/YAML）
• 使用实时预览调整 prompt、模板或文案
• 整理数据集、批准/拒绝行、标记示例、导出选择
• 注释文档、转录或 diff 并导出注释
• 挑选难以用文本表达的值：颜色、缓动曲线、裁剪区域、cron 调度、正则表达式。

6、常见问题解答

我已经告诉很多人我如何切换到 HTML，并且看到了一些重复的问题。

它不是更不 token 高效吗？

虽然 Markdown 通常使用更少的 token，但我发现 HTML 增加的表现力以及我阅读它的可能性高得多，意味着我整体得到更好的输出。有了 Opus 4.7 中的 1MM 上下文窗口，增加的 token 使用在上下文窗口中并不明显。

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

我老实说几乎已经完全停止使用 Markdown 了，但我可能处于 HTML 极端主义者的一端。

我如何查看 HTML 文件？

我通常只是本地在浏览器中打开它（你可以让 Claude 打开它），或者如果你想要可分享链接就上传到 S3。

这不是生成起来比 Markdown 花更长时间吗？

确实要花更长时间！HTML 可能比 Markdown 花 2-4 倍的时间，但我发现结果是值得的。

版本控制怎么办？

这老实说是 HTML 最大的缺点之一，HTML diff 很吵闹，比 Markdown 难审查。

我如何让 Claude 匹配我的品味 / 不让它变丑？

前端设计插件帮助 Claude 制作好的 HTML 文件。但要匹配你自己公司的风格，你可以让 Claude 指向你的代码库来创建一个单一的设计系统 HTML 文件。然后你可以将那个设计系统文件作为其他 HTML 文件的参考。

7、结束语

以上所有都是为了说明，我认为我使用 HTML 的真正原因是，我感觉与 Claude 保持了更多的联系。我曾经开始担心，因为我不再深入阅读计划，我将不得不让 Claude 自己做选择。

但我很高兴地说，使用 HTML 时，我反而感觉比以往任何时候都更有在场感。我希望你也是如此。

原文链接：Using Claude Code: The Unreasonable Effectiveness of HTML

汇智网翻译整理，转载请标明出处