Wayne 研究室 · 2026.05

HTML 出奇地好用

Anthropic 工程师 Thariq 的一篇 X 文章，3 天 350 万阅读
揭示了 AI 时代输出格式的下一个范式

解读来源：《The Unreasonable Effectiveness of HTML》· @trq212

背景

这篇文章从哪里来？

350万

3 天阅读量

7100

点赞数

1500

转发数

468

评论数

作者

Thariq（@trq212）
Anthropic 工程师
Claude Code 核心成员

发表平台 · 时间

X（Twitter）文章
2026 年 5 月
无依赖热点，自然爆发

核心主张

HTML 应取代 Markdown
成为 AI 与人沟通的
首选输出格式

Wayne 的感受

「我也曾隐约有过同样的感受，
只是从没人这样系统地表达出来。」

核心观点 01

Markdown 已触及天花板

「随着 AI 处理的任务越来越复杂，我越来越难读完超过 100 行的 Markdown 文件。更别说让我团队里的其他人去读了。」

— Thariq，Anthropic 工程师

✗

为人类手动编辑而生

现在是 Claude 在写 Markdown，# 和 * 的优势已经消失

✗

表达能力严重受限

无法表达颜色、流程图、交互控件、文档结构

✗

没人真正读完

240 行的 payments-spec.md 发给同事，八成回复：「还没来得及看」

✗

分享门槛极高

浏览器无法直接渲染，技术团队外的人基本放弃

核心观点 02

HTML 能装下 8 种信息

📊

Tables

真正的行列数据

🎨

Design

颜色、字体、间距

🖼

Illustrations

SVG 内联图示

💻

Code

语法高亮代码片段

🎛

Interaction

滑条、开关、按钮

🔀

Workflows

SVG 流程框

📍

Spatial

绝对定位 + canvas

🖼

Images

直接 img 标签嵌入

「几乎找不到 Claude 能读懂的信息，是没办法用 HTML 高效表达的。这使它成为模型向你传递深度信息的最优格式。」

— Thariq

核心观点 03

可读性：被真正读完的概率

MD

Markdown 版

240 行纯文本，无导航，无视觉层级
阅读完成率：极低

payments-spec.md → 同事回复：「还没来得及看」

↗

HTML 版

导航标签 + 折叠章节 + 大字高亮
阅读完成率：高很多

同等内容的 HTML → 移动端打开如精心排版的网页

✓

导航与结构

章节标签页、目录锚点、折叠区块

✓

视觉层级

关键数字大字展示、颜色区分优先级

✓

移动端友好

响应式布局，手机打开毫无障碍

核心观点 04

分享：点击即打开

一个文档被读完的概率，有一半取决于打开它有多方便。你发一个「.md 文件」和发一个「点击即可打开的链接」，对方真的去看的概率差了很多。

— Wayne，Wayne研究室

🔗

静态托管

上传到 S3 / Vercel，一个链接发出去

📱

零门槛打开

任何设备的任何浏览器，无需额外工具

👥

跨越职能边界

PM、设计师、老板无需安装任何东西

每个 PR

Thariq 现在都附上一个 HTML 版代码说明，评审者打开链接即可理解复杂改动

核心观点 05

双向交互：调音台，而非打字机

有点像音乐混音师坐在调音台前，推拉推拉，而不是用文字告诉另一个人「把低频稍微加一点点」。

— Wayne，Wayne研究室

🎛

实体旋钮面板

滑条控制 duration / scale / shadow blur，浏览器里实时拖动感受效果

📋

Copy as Prompt

找到满意参数后点按钮，直接复制成提示词粘贴回 Claude Code

👁

眼见即所得

不再对着黑框框打字猜效果，用手感受、用眼睛看

🔄

闭环工作流

HTML 生成调试界面 → 人工调参 → 参数回流 Claude Code 执行

核心观点 06

Claude Code：上下文决定 HTML 的价值

📁

读取本地代码库

遍历整个目录，读取任意文件

🔌

MCP 数据接入

拉取 Slack、Linear 等工具的实时数据

📜

Git 历史记录

理解代码演进脉络和决策上下文

🌐

浏览器内容

调用浏览器中的页面数据

「读取我的代码文件夹，找出所有我生成过的 HTML 文件，按类型分组分类，然后做一个 HTML 索引页，把每一类的典型示例可视化展示出来。」

— Thariq 的提示词（网页版 Claude 做不到）

核心观点 07

代码审查：从行号到可视化叙事

传统 GitHub Diff

😵

行号 + 红绿色块，评审意见塞在小框框里，上下文稍多就看不过来

HTML PR 说明

🚀

行内注释 + 颜色区分严重度 + 数据流图，10 分钟读懂复杂改动

🔴 blocking — 红色 ⚪ nit — 灰色 🟢 nice — 绿色

「帮我做一个 HTML 文件来描述这个 PR。我对 streaming/backpressure 这块的逻辑不太熟，请重点讲解这部分。渲染真实的 diff，在行内做边注说明，用颜色区分发现问题的严重性。」

— Thariq 建议直接照搬的提示词

核心观点 08

一次性定制工具：设计系统 & 配置编辑器

🎨 设计系统展示页

📐

提取 Design Tokens

Claude Code 读取代码库，提取颜色变量、字体规范、间距系统

🔄

保持一致性

把这个 HTML 文件传给下一个 Claude 会话，自动对齐设计系统

⚙️ 功能开关配置编辑器

🗂

可视化 Feature Flags

复杂 YAML 配置 → 分组展示、标注依赖关系

📋

Copy Diff 回流

改完只复制变更项，粘贴回 Claude Code 执行

💡 核心洞见：给你「一次性定制」了一个只为这份数据存在的编辑工具——用完即弃，但在那一刻，它比任何通用工具都好用

核心观点 09

研究报告：5 分钟 vs 两小时

代码库 Slack 历史 git log 网络搜索

→

一个 HTML 报告页，一次读完

📊

SVG 请求流程图

限流器工作原理可视化，顶部首屏展示

📝

关键代码 + 注释

旁边附带行内说明，不用翻三个文件

⚠️

三大常见坑

红色边框标注，底部注意事项

⏱

5 分钟 vs 2 小时

以前读代码 + 问同事，现在 Claude Code 生成完整可视化报告

总结

格式是表达的容器

①

Markdown 的时代正在过去

AI 写 Markdown 的优势比人手写时更小，而劣势更加突出

②

HTML = 信息密度的上限

8 种信息类型，单文件装下，比 10 个 Markdown 文件更完整

③

可读性 = 被读完的概率

分享便捷 + 视觉层级 + 导航 → 文档才能发挥价值

④

双向交互改变人机协作

调音台 vs 打字机：用手感受，而不是用文字猜效果

「这一切背后真正的原因，是 HTML 让我对 Claude 的工作更有参与感……我比以前更了解情况了。」

— Thariq · 来源：@trq212，X，2026 年 5 月 · 原始文章：x.com/trq212/status/2052809885763747935

Wayne 研究室 · wwei.ai · 2026.05