Markdown 已经成为代理agents与我们沟通时使用的主要文件格式。它简单、可移植具有一定的富文本能力并且易于你编辑。Claude 甚至在 Markdown 文件中用 ASCII 制作图表方面也变得出奇地擅长。但随着代理变得越来越强大我感觉到 Markdown 已经成为一种限制性的格式。我发现阅读超过一百行的 Markdown 文件很困难。我想要更丰富的可视化、颜色和图表并且希望能够轻松分享它们。我也越来越不自己编辑这些文件而是将它们用作规格说明、参考文件、头脑风暴输出等。当我确实进行编辑时通常是提示 Claude 来编辑它们这就消除了 Markdown 最大的优势之一。我已经开始更喜欢将 HTML 作为输出格式而不是 Markdown并且越来越多地看到 Claude Code 团队的其他人在使用这种方式这就是原因。如果你想从一些例子开始可以在这里看到很多请务必回来继续原因。1、为什么是 HTML1.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 时我反而感觉比以往任何时候都更有在场感。我希望你也是如此。原文链接Claude团队HTML输出更好 - 汇智网
Claude团队：HTML输出更好
Markdown 已经成为代理agents与我们沟通时使用的主要文件格式。它简单、可移植具有一定的富文本能力并且易于你编辑。Claude 甚至在 Markdown 文件中用 ASCII 制作图表方面也变得出奇地擅长。但随着代理变得越来越强大我感觉到 Markdown 已经成为一种限制性的格式。我发现阅读超过一百行的 Markdown 文件很困难。我想要更丰富的可视化、颜色和图表并且希望能够轻松分享它们。我也越来越不自己编辑这些文件而是将它们用作规格说明、参考文件、头脑风暴输出等。当我确实进行编辑时通常是提示 Claude 来编辑它们这就消除了 Markdown 最大的优势之一。我已经开始更喜欢将 HTML 作为输出格式而不是 Markdown并且越来越多地看到 Claude Code 团队的其他人在使用这种方式这就是原因。如果你想从一些例子开始可以在这里看到很多请务必回来继续原因。1、为什么是 HTML1.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 时我反而感觉比以往任何时候都更有在场感。我希望你也是如此。原文链接Claude团队HTML输出更好 - 汇智网
