The Unreasonable Effectiveness of HTML

Thariq 文章深度解读 · 论点拆解 × 边界分析 × 工作流落地

2026-05-11 analysis html claude-code workflow

原文作者 Thariq (@trq212) 是 Anthropic Claude Code 团队成员。本文对其核心论点逐一拆解,区分"洞见"与"偏见",并评估在 Andy 工作流中的实际落地价值。

📌 一句话判断

Thariq 发现了一个真问题(Markdown 表达力不够),给了一个对的方向(HTML),但把个人最佳实践包装成了普适结论。HTML 的真正价值是交互性和可分享性,不是"更好的 Markdown"。对你来说,值得在特定场景采纳,但不值得全面切换。

一、六大核心论点逐一评分

论点 1:信息密度 基本同意

Thariq 说:HTML 能表达表格、CSS 设计、SVG 插图、JS 交互、空间布局、图片——"几乎没有什么信息是 HTML 不能高效表达的"。

他举了一个例子:Claude Code 试图在 Markdown 里用 Unicode 字符来"显示颜色"。这确实很荒谬,也说明 Markdown 在视觉表达上的局限是真实的。

我的判断:表达力上他说的完全对。但"能表达"和"应该用 HTML 表达"是两回事。一个内部技术笔记写成 HTML 就像用 InDesign 排购物清单——能做,但何必?

💡 关键区分:信息密度的提升只在接收端需要丰富呈现时才有意义。如果读者是你自己、在 IDE 里读、且不需要图表,Markdown 的"低密度"反而是优点——噪音少,改起来快。

论点 2:视觉清晰度 部分同意

Thariq 说:"超过 100 行的 Markdown 我就不看了",HTML 的视觉组织(标签页、插图、链接导航)让长文档变得可读。

我的判断:这里有个归因错误。他把"Markdown 长文不好读"归因于格式,但真正的问题往往是内容组织。一个结构混乱的 HTML 文档照样没人读。

不过他有一个隐含的好观点:HTML 能做非线性导航(标签页、锚点跳转、折叠区域),这是 Markdown 做不到的。对于超过 500 行的参考文档,这确实有价值。

💡 真正的变量:决定可读性的是信息架构,不是文件格式。但 HTML 确实提供了更多的信息架构工具(标签页、折叠、锚点),在长文档场景下这个优势是真实的。

论点 3:易于分享 完全同意

Thariq 说:Markdown 浏览器不直接渲染,只能当附件发;HTML 上传 S3 就能分享链接,别人打开就能看。

我的判断:这是他最无可辩驳的论点。"别人愿不愿意点开"是文档价值的决定性因素。一个链接 vs 一个附件,点击率差 5-10 倍不夸张。

而且他说的"让别人真的读你的 spec"这个痛点非常真实——在团队协作中,文档写了没人看是最大的浪费。HTML 的低摩擦分享确实能改善这个问题。

论点 4:双向交互 最有价值的论点

Thariq 说:HTML 可以加滑块、旋钮让你调参,然后把调好的参数通过"copy as prompt"按钮喂回给 Claude Code。

我的判断:这才是 HTML 相对于 Markdown 真正的维度跃迁,不是量变是质变。

Markdown 是单向的:AI → 人。HTML 可以是双向的:AI → 人 → 调整 → AI。这把文档从"输出物"变成了"中间件"。

💡 核心洞见:交互性是 HTML 唯一不可替代的优势。其他优势(排版好看、信息密度高)都有替代方案(飞书文档、Notion、渲染过的 Markdown),但"在文档里调参然后把结果喂回 Agent"这个能力,只有 HTML 能做。

论点 5:数据接入能力 偷换概念

Thariq 说:Claude Code 能读文件系统、MCP、浏览器、Git 历史等,所以用 Claude Code 生成 HTML 比用 Claude.ai 更好。

我的判断:这个论点成立,但跟"HTML vs Markdown"没关系。Claude Code 的数据接入能力生成 Markdown 也一样强。他在这里偷偷把"Claude Code 的优势"包装成了"HTML 的优势"。

论点 6:愉悦感 因人而异

Thariq 说:"Making HTML documents with Claude is just more fun",这本身就够了。

我的判断:说实话这不是论据,是感受。但他敢这么写也说明他的目标读者是 Claude Code 的高频用户——这群人确实会因为"看到漂亮的输出"而感到愉悦。

不过反过来想,如果你需要快速记录、快速迭代、快速搜索,Markdown 的"素颜"反而让你更专注。愉悦感是双向的。

二、他回避或轻描淡写的四个问题

🔴 版本控制噩梦

他自己承认"HTML diffs are noisy and hard to review",然后一句话带过。但对任何需要迭代的文档(spec、设计方案),diff 可读性直接决定了协作效率。Markdown 的 diff 是人类可读的,HTML 的 diff 基本是噪音。

严重程度:高 · 他的回应:承认但无解

🟡 2-4x 生成时间

他说"results are worth it",但这是建立在他用最新 Opus、1M 上下文窗口、公司付费的前提下。对于 token 敏感的用户,每次输出多花 2-4 倍 token 不是小数目。而且生成时间长意味着迭代次数减少。

严重程度:中 · 他的回应:轻描淡写

🟡 可编辑性丧失

他说"I'm also increasingly not editing these files myself"来合理化这个问题。但这恰恰暴露了一个假设:你永远有 AI 帮你编辑。如果你需要在高铁上快速改几行 spec,Markdown 用任何文本编辑器都行,HTML 呢?

严重程度:中 · 他的回应:合理化

🟠 样本偏差

作为 Claude Code 团队成员,他是世界上最早、最深度使用这个工具的人之一。他的工作流(高频 Agent 交互、复杂技术探索、团队 spec 分享)恰好是 HTML 的最佳场景。但他的文章标题用的是"Unreasonable Effectiveness"——暗示普适性,实际上是幸存者偏差。

严重程度:中 · 他的回应:未意识到

三、什么时候用 HTML?一个决策框架

与其争论"HTML 好还是 Markdown 好",不如问对问题:这个输出需要什么?

📝 低交互 × 内部使用

→ Markdown

  • Daily log / 会议笔记
  • 内部技术备忘
  • TODO / 任务清单
  • Git commit message

📝 低交互 × 需要分享

→ HTML(简单型)

  • 周报 / 项目状态报告
  • 代码审查说明
  • 竞品分析对比
  • 团队知识文档

🔧 高交互 × 内部使用

→ HTML(工具型)

  • 调参面板 / 配置编辑器
  • 数据探索工具
  • Prompt 调试器
  • 方案对比决策器

🔧 高交互 × 需要分享

→ HTML(全功能型)⭐

  • 深度调研报告
  • 交互式技术方案
  • 设计原型 / UI 探索
  • 数据仪表盘

右上角是 HTML 的甜区——既要交互又要分享。左上角是 Markdown 的地盘。中间两个象限按需选择。

四、Thariq 的六类用例深度拆解

用例 HTML 提升倍数 是否有替代方案 Andy 场景适配
Spec / 方案规划 3-5x 飞书文档(部分替代) ✅ 高价值 — 技术方案、架构设计
代码审查 5-10x GitHub PR(部分替代) ✅ 高价值 — 尤其跨仓库审查
设计 / 原型 10x+ Figma / Claude Design ⚠️ 中等 — 你不常做 UI 设计
报告 / 调研 3-5x 飞书文档 + 知识库 ✅ 高价值 — 调研报告可视化
自定义编辑器 (不可替代) ✅ 高价值 — Prompt 调试、配置编辑
探索 / 头脑风暴 2-3x 白板工具 / Markdown ⚠️ 低 — 快速探索时 Markdown 更快

五、两个元层面的观察

1. 这篇文章本身就是一个反例

Thariq 写了一篇鼓吹 HTML 的文章,但文章本身是用纯文本(推文格式)发布的。他的示例页面 thariqs.github.io/html-effectiveness 才是 HTML。这说明什么?

在"快速表达想法、让尽可能多的人看到"这件事上,低摩擦的文本格式仍然是最优解。HTML 适合"精加工的输出物",不适合"快速传播的想法"。

2. 他真正在说的是"Agent 输出物的进化"

把 HTML 换成别的词——比如"可交互文档"或"富媒体输出"——这篇文章的核心论点依然成立。他真正发现的不是"HTML 好",而是:

💡 底层洞见:随着 Agent 能力增强,Agent 的输出物正在从"文本文件"进化为"可交互的应用"。HTML 只是当前最唯一能做到这一点的、零依赖的、浏览器原生的格式。如果明天出现一种更好的格式,Thariq 的论点会无缝迁移过去。

六、落地到你的工作流

基于以上分析,你刚搭建的 HTML Artifacts 平台应该优先服务这些场景(按 ROI 排序):

  1. 调研报告(存中出品的深度调研)— 交互式图表 + 可分享链接,比飞书文档更适合展示复杂数据关系
  2. 自定义工具(一次性编辑器/调参面板)— 这是 HTML 独占的场景,没有替代品
  3. 技术方案文档(给团队看的 spec)— 标签页导航 + 交互式流程图 + 一键分享
  4. 代码审查可视化(怀贤的 PR 说明)— 比 GitHub diff 更清晰,尤其适合复杂重构

不建议用 HTML 的场景: