> ## Content Index > Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt > Use this file to discover other available public pages before exploring further. # Claude团队：HTML输出更好 - URL: https://www.hubwiz.com/blog/claude-team-html-output-is-better/ - Published: 2026-05-12T03:48:10.000Z - Updated: 2026-05-12T03:48:10.000Z - Description: 我已经开始更喜欢将 HTML 作为输出格式，而不是 Markdown，并且越来越多地看到 Claude Code 团队的其他人在使用这种方式。 - Author: admin - Tags: AGENT, CLAUDE CODE, #Import 2026-10-14 14:41 Markdown 已经成为代理（agents）与我们沟通时使用的主要文件格式。它简单、可移植，具有一定的富文本能力，并且易于你编辑。Claude 甚至在 Markdown 文件中用 ASCII 制作图表方面也变得出奇地擅长。 但随着代理变得越来越强大，我感觉到 Markdown 已经成为一种限制性的格式。我发现阅读超过一百行的 Markdown 文件很困难。我想要更丰富的可视化、颜色和图表，并且希望能够轻松分享它们。 我也越来越不自己编辑这些文件，而是将它们用作规格说明、参考文件、头脑风暴输出等。当我确实进行编辑时，通常是提示 Claude 来编辑它们，这就消除了 Markdown 最大的优势之一。 我已经开始更喜欢将 HTML 作为输出格式，而不是 Markdown，并且越来越多地看到 Claude Code 团队的其他人在使用这种方式，这就是原因。如果你想从一些例子开始，可以在[这里](https://thariqs.github.io/html-effectiveness?ref=hubwiz.com)看到很多，请务必回来继续阅读更多原因。 ## 1、为什么是 HTML？ ### 1.1 信息密度 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-166.png) HTML 可以传达比 Markdown 丰富得多的信息。它当然可以实现简单的文档结构，如标题和格式，但它也可以表示各种其他信息，例如： - 使用表格表示表格数据 - 使用 CSS 表示设计数据 - 使用 SVG 表示插图 - 使用 script 标签表示代码片段 - 使用 HTML 元素 + JavaScript + CSS 实现交互 - 使用 SVG 和 HTML 表示工作流程 - 使用绝对定位和画布表示空间数据 - 使用 image 标签表示图像 我甚至可以说，几乎没有 Claude 能读取的信息集是你无法用 HTML 相当高效地表示的。这使得它成为模型向你传达深入信息以及你查看信息的极高效方式。 我发现，如果无法做到这一点，模型可能会在 Markdown 中做一些低效的事情，比如 ASCII 图表，或者我最喜欢的，用 Unicode 字符估算颜色，就像 Claude Code 这张截图中那样。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-167.png) ### 1.2 视觉清晰度和易读性 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-168.png) 随着 Claude 能够完成更复杂的工作，它也在编写越来越大的规格和计划。在实践中，我发现我往往不会真正阅读超过 100 行的 Markdown 文件，当然也无法让组织里的其他人阅读它。 但 HTML 文档要容易阅读得多，Claude 可以将结构在视觉上组织成最理想的导航方式，包括标签、插图、链接等。它甚至可以是移动端响应的，这样你就可以根据你的设备形式因素以不同方式阅读它。 ### 1.3 易于分享 Markdown 文件相当难以分享，因为大多数浏览器无法原生很好地渲染它们。你通常必须将它们作为附件添加到邮件或消息中。 使用 HTML，只要你上传文件（例如上传到 S3），就可以轻松分享链接。你的同事可以在任何他们想要的地方打开它，并轻松引用它。 如果你的规格、报告或 PR 说明是 HTML 格式，那么别人实际阅读它的机会要高得多。 ### 1.4 双向交互 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-169.png) HTML 可以让你与文档进行交互，例如你可能希望添加滑块或旋钮来调整设计，或者允许你调整算法中的不同选项来看看会发生什么。你还可以让它允许你将这些更改复制成提示，再粘贴回 Claude Code。 阅读我[关于 playgrounds 的帖子](https://x.com/trq212/status/2017024445244924382?ref=hubwiz.com)，可以看到这种双向交互的例子。 ### 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 文件。你可以在[这里](https://thariqs.github.io/html-effectiveness/?ref=hubwiz.com)查看所有这些，但下面是一个概述。 ### 3.1 规格、规划与探索 HTML 是 Claude 深入研究问题的丰富画布。当我开始处理一个问题时，我不是做一个简单的 Markdown 计划，而是期望制作一个 HTML 文件网络。例如，我可能会先让 Claude Code 头脑风暴并创建不同选项的一些探索。然后我让它扩展其中一个，也许制作模型或代码片段。最后，当我觉得不错时，我会让它写一个实施计划。当我对计划满意时，我会创建一个新会话，并传入所有这些文件让它实施。 在验证时，我也会让验证代理读取这些文件，它将拥有关于所需内容的更广泛上下文。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-170.png) **示例提示：** - “我不确定 onboarding 屏幕该走哪个方向。生成 6 种截然不同的方法——改变布局、语气和密度——并将它们布局在一个 HTML 文件的网格中，以便我可以并排比较它们。用它所做的权衡来标记每个。\*\* - 创建一个 HTML 文件中的详细实施计划，一定要制作一些模型，展示数据流，并添加我可能想要审查的重要代码片段。让它易于阅读和消化。 **用例：** - 探索在代码中实现某事的其他方式 - 探索多种视觉设计 ### 3.2 代码审查与理解 代码在 Markdown 文件中很难阅读。但使用 HTML，我们可以渲染差异、注释、流程图、模块等。使用这个来理解代理编写的代码、获取代码审查，或向审查你代码的人解释 PR。我发现这通常比默认的 Github diff 视图更好，现在我每次提交 PR 都会附上一个 HTML 代码解释器。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-171.png) **示例提示：** “帮我审查这个 PR，创建一个描述它的 HTML artifact。我不太熟悉 streaming/backpressure 逻辑，所以重点关注那个。用内联边距注释渲染实际的 diff，按严重程度对发现进行颜色编码，以及任何其他可能需要传达概念的内容。” **用例：** - 创建 PR - 审查 PR - 理解代码中的一个主题 ### 4.3 设计与原型 Claude Design 是基于 HTML 的，因为 HTML 在设计上极具表现力，即使你的最终表面不是 HTML。Claude 可以用 HTML 勾勒出一个设计，然后用你选择的语言编写它，无论是 React、Swift 等。 你还可以原型交互，例如动画、动作等。考虑让 Claude 制作滑块、旋钮等，来精确调整你正在寻找的内容。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-172.png) **示例提示：** “我想原型一个新的结账按钮，点击时它会播放动画，然后快速变成紫色。创建一个 HTML 文件，带有几个滑块和选项让我尝试这个动画的不同选项，给我一个复制按钮来复制效果好的参数。” **用于：** - 创建设计系统 artifact - 调整组件 - 可视化组件库 - 原型愉悦的动画 ### 4.4 报告、研究与学习 Claude Code 非常擅长跨多个数据源合成信息并将其转换为易读的报告。你可以提示 Claude 搜索你的 Slack、代码库、git 历史、互联网等，并用它为自己、领导层、团队等生成极易读的报告。 你可以将它组装成一个长的 HTML 文档、交互式解释器，甚至是幻灯片/演示文稿。让 Claude 使用 SVG 来制作图表以帮助可视化。 例如，对于我关于 prompt caching 的帖子，我让 Claude 在阅读 git 历史后，为我准备一个关于我们所有 prompt caching 更改的深入研究 HTML 文件供我阅读。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-173.png) **示例提示：** “我不理解我们的 rate limiter 实际上是如何工作的。阅读相关代码并生成一个单一的 HTML 解释页面：token-bucket 流程的图表、3-4 个带注释的关键代码片段，以及底部的一个“gotchas”部分。为只读一次的人优化它。” **用于：** - 总结功能如何工作 - 向我解释一个概念 - 给老板的周报 - 给领导的事故报告 - SVG 插图、流程图、技术图表等 ## 5、自定义编辑界面 有时很难仅仅在文本框中描述你想要什么。在这种情况下，我会让 Claude 为我正在处理的精确事物构建一个一次性编辑器。不是一个产品或可重用工具，而是一个单一的 HTML 文件，专为这一块数据而构建。 诀窍始终是以导出结束：一个“复制为 JSON”或“复制为 prompt”的按钮，将我在 UI 中做的任何事情转换回我可以粘贴到 Claude Code 的内容。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-174.png) **示例提示：** - “我需要重新安排这 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](https://x.com/trq212/status/2052809885763747935?ref=hubwiz.com) 汇智网翻译整理，转载请标明出处