别让它输出一堵 Markdown 墙：要 HTML

译者说明：原文是 Anthropic Claude Code 团队的 Thariq Shihipar 做的一个示例集， 由 Simon Willison 在 2026-05-08 的博客 上推荐。 页面本身就是一个 HTML 文件，收录了 20 个 agent 生成的 .html 示例。本文翻译其说明文字，并补一段研究咨询场景的用法。

二十个自包含的 .html 文件——这是 agent 在「一堵 Markdown 墙」之外可以给你的东西。

每一个都把「你会略过的文档」换成了「你真的会读的文档」——任何一个都可以直接在浏览器里打开。下面按它们所替代的工作类型分组。

Simon Willison 的评价说明了原因：

「让 Claude 用 HTML 给解释，意味着它可以放进 SVG 图示、交互组件、页内导航，以及各种让信息更好浏览的巧妙方式。」

他还补了一句自己的转变：他过去偏好 Markdown 是因为 GPT-4 时代 8K 上下文下的 token 效率。那个理由现在已经不成立了。

九类用途

01 探索与规划

当你还不确定自己想要什么的时候。 让 agent 在几个方向上铺开，把它们并排摆出来让你去指——而不是读三段顺序排列的文字墙，然后试图在脑子里同时记住它们。选定之后，再把这个选择变成执行者真能读懂的计划。

• 三种方案对比：同一个问题的三种解法并排放，取舍就地标注
• 视觉方向：几种版式和配色实时渲染出来，让你可以反应，而不是想象
• 实施计划：时间线上的里程碑、数据流图、内嵌样稿、有风险的部分和一张风险表——这是可以交出去的那种计划

02 评审与理解

差异和调用关系是空间信息，Markdown 把它压平了。让 agent 把变更渲染成带批注的对照、把模块画成方框和箭头——让结构一眼可见。

• 带批注的对照：正文两侧带边注、严重程度标签和跳转链接
• 给评审者的说明：动机、前后对比、逐份材料的巡览（附「为什么」）、以及该重点看哪里

03 设计

HTML 就是设计系统交付时所用的媒介，所以它是讨论设计系统最自然的格式。色板变成可点的色块，组件变成一张接触印相，而且这个产物可以直接喂回下一个提示词。

04 原型

动效和交互无法被描述，只能被感受。 一个用完即弃的页面，带上真实的缓动曲线或真实的点击流程，五秒钟就能告诉你一整段文字永远说不清的事。

05 插图与图示

内嵌 SVG 给了 agent 一支真正的笔。 让它画一篇文章需要的配图、或者一个流程的流程图，你会得到可以手工微调、或者直接粘进最终文档的矢量图。

• SVG 图集：一篇文章的所有图示内嵌画出，可以逐个调整、逐个拷出
• 可点的流程图：点任一步骤，看它跑了什么、耗时多少、失败路径在哪

06 幻灯片

几个 <section> 标签加二十行 JS 就是一份幻灯片。 把 agent 指向一段聊天记录或一份设计文档，你会得到一份可以在会上用方向键翻的东西——不用 Keynote，不用导出。

07 研究与学习

一份带可折叠章节、标签页式代码示例和边栏术语表的说明，读起来和同样的文字线性堆出来完全不同。Agent 能搭出那套让新话题变得可导航的脚手架。

两个示例提示词：

Explain rate limiting in this repo
（解释这个项目里的限流是怎么做的）

Show consistent hashing with a live ring you can add/remove nodes from
（用一个可以增删节点的实时环形图来讲一致性哈希）

08 报告

周期性文档——状态更新、复盘——从一点结构和颜色中受益最大。 一张小图和一条着色的时间线，能把人们本来会略过的东西变成他们真的会读的东西。

• 周报：交付了什么、什么延期了，加一张小图——为周一早上的快速浏览而排版
• 事故时间线：分钟级时间线、日志摘录和后续检查清单

09 定制的编辑界面

有时候你很难在一个文本框里描述你想要什么。那就要一个用完即弃的编辑器，专门针对你手头这件事——并且永远以一个「导出」按钮收尾，把你在界面上做的一切变回可以粘给 agent 或者存进版本库的东西。

• 优先级看板：把三十个条目拖到「现在 / 下一个 / 以后 / 砍掉」四栏，然后把最终排序拷成 Markdown
• 开关编辑器：按区域分组的开关，前置条件没开时给出依赖警告，还有一个「拷贝差异」按钮只导出改动的部分
• 提示词调参器：左边是可编辑的模板，变量槽高亮；右边三组示例输入随你输入实时重新渲染

关键的那一条：导出按钮让你留在环里，而这个环变得更紧。

译后附记：这一行最该改成 HTML 的四件事

原文的示例偏工程，但九类里有五类可以原样搬到研究咨询：

① 方案并排比较。 「给我三个细分口径」这个需求，用 Markdown 你会拿到三段依次排列的文字，读到第三段已经忘了第一段。要一个 HTML 表格式的并排页，取舍就地标注，选起来快得多。

② 访谈稿的可折叠导读。 二十份访谈的摘要，做成每份一个可折叠块，展开是原话摘录。这是引用功能的天然界面。

③ 内部过会的临时幻灯片。 一个 HTML 文件、方向键翻页、不用等设计。过会用，过完就扔——正式版再走 PPT。

④ 编码表的临时编辑器。 把编码结果拖进不同类别，最后一个按钮导出成表格贴回去。比在对话里一条条说「第 7 条应该归到 B 类」快一个量级。

一句可以直接用的提示词：

把上面的内容做成一个自包含的 HTML 文件，我要能直接在浏览器里打开。
要求：
- 不引用任何外部资源（不要 CDN、不要外部字体、不要外链图片），所有样式和脚本内联
- 结构上要能扫读：重点先出，细节放进可折叠区块
- 表格宽的话让它自己横向滚动，页面本身不要出现横向滚动条
- 末尾放一个「导出」按钮，把我在界面上的操作结果拷成 Markdown

一个提醒：HTML 交付物的好处是自包含、随手可开。别让它去引用外部的 CDN 或字体——一旦断网或者对方在内网，页面就散架了。上面那段提示词里的第一条就是为了这个。

出处

本文译自 Thariq Shihipar 的 The unreasonable effectiveness of HTML， 经 Simon Willison 于 2026-05-08 推荐。 译文与译后附记由 HiBridge 撰写。