⸻ 人机交互的下一个范式 ⸻

The Unreasonable Effectiveness
of HTML

Karpathy 一句话推翻了所有人的工作流：
「别等更强的模型了。在 query 末尾加一句 'structure your response as HTML'，效果立刻翻 10 倍。」

10×
阅读理解深度
⅓
大脑皮层用于视觉
2×
Token成本 → 10× 收益
起源

"Markdown has become the dominant file format used by agents to communicate with us. It's simple, portable, has some rich text capability and is easy for you to edit."

— Thariq (@trq212), Claude Code @ Anthropic

"Markdown is the format for AI-to-AI communication. HTML is the format for AI-to-Human communication. Don't confuse the two."

— Karpathy 核心观点
通信带宽对比

人机沟通的四种带宽

同样一段信息，不同格式的「信息密度」天差地别

📄 纯文本
10%
📝 Markdown
25%
🎨 HTML 🎯
65%
🎬 交互式视觉
90%
信息密度 = 人脑单位时间可吸收的信息量（相对值）
神经科学基础

为什么视觉输出效率高 10 倍

不是玄学，是人脑的生理结构决定的

⅓
大脑皮层
👁️ 视觉皮层
👂 听觉皮层

人脑天生是为视觉打造的

大脑皮层中 超过三分之一 的神经元专门用于视觉信息处理。而用于处理听觉/语言的部分占比极小。

这意味着：文字是输入给 AI 的最优格式，但绝对不是 AI 输出给人类的最优格式。

~55% 🧠 视觉处理 | ~3% 👂 听觉处理
核心洞察

人类 I/O 的天然不对称

输入和输出偏好完全不一样，我们却用同一条通道跑

📤 输入（给 AI） 🎤 音频 — 说话比打字快 4× 最佳方式：语音 → 自然、省力、连续思维 📥 输出（来自 AI） 👁️ 视觉 — 大脑 ⅓ 用于视觉处理 最佳方式：HTML/图像 → 高带宽、快速吸收 ❌ 我们现在在做的：用文本双向跑流量（单车道的土路） 输入用文本（慢、累、打断思维流）→ 输出也用文本（低信息密度、低阅读效率） ✅ 最优方案：输入用语音 / 输出用 HTML（10 车道高速） 说话给 AI → AI 输出 HTML 页面 → 人眼高速扫描吸收
架构分层

信息消费的 3 层架构

不是所有格式都该出现在所有层

层 1 · AI ↔ AI
JSON / Markdown
轻量、无风格、结构化数据。机器对机器，不需要人看。
↓ 经过处理
层 2 · AI → 人（中间态）
HTML 🎯 最优层
带颜色、布局、交互。视觉全带宽，人一眼就能理解。
↓ 可选转成
层 3 · 人 ↔ 人（消费端）
图像 / 视频 / 交互页面
最终交付物。如果时间无限，这就是终极形态。
立体认知

Karpathy 的三个扎心洞察

悬停查看每张卡片的深度解读

#1
🧠

瓶颈不是模型，是格式

大家都在等更强的模型、更大的上下文窗口。但真正的瓶颈，是 AI 输出内容的通信格式本身。你拥有 100 车道的大脑，AI 只给你开了一条小道。

#2
💰

Token 便宜，人贵

我们被省 token 的思维绑架了。多花 2 倍 token，换来 10 倍的人类阅读速度和理解深度。人类的时间才是真正的稀缺资源，不是 API 额度。

#3
🔀

格式分家：AI vs 人的媒介

AI 之间用 Markdown/JSON 没问题。所有最终给人类消费的东西，都应该用 HTML。这是最优分工，不是风格选择。

交互对比

同一段信息，两种格式

左右滑动看 Markdown vs HTML 的天壤之别

📝

Markdown

  • 纯黑白文字
  • 需要脑补结构
  • 无颜色/无强调
  • 阅读被动费力
  • 信息密度极低
🎨

HTML

  • 彩色标注 + 品牌色
  • 结构一目了然
  • 渐变/阴影/动画
  • 眼睛自动扫描
  • 10× 信息密度
📝 Markdown — 单车道的土路 🎨 HTML — 10 车道视觉高速
演进路线

从文本到神经视频

Karpathy 画了一条清晰的人机交互进化路径

阶段 1 · 原始
纯文本
AI 输出就是一堵文字墙。信息密度极低，阅读效率约 200 字/分钟。单向道。
1
阶段 2 · 当前主流
Markdown
有点排版了：标题、列表、粗斜体。仍然是低带宽通道，适合 AI 之间沟通。
2
阶段 3 · 现在就能用 🎯
HTML
彩色标注、多栏表格、交互式滑块、折叠面板。视觉语言的全带宽通道。
3
阶段 4 · 未来
交互式神经视频
实时生成的、可交互的、沉浸式的视觉体验。脑机接口级别的带宽。
4
现在 · 你的选择
加一行字，立即升级
在任何 query 末尾加 "structure your response as HTML"，立即跳转到阶段 3。
→
工作流重构

从此以后的工作流

输入用语音，内部用 Markdown，输出用 HTML

👤 你说
语音/文字
→
🤖 AI 理解
Markdown/JSON
→
🎨 AI 生成 HTML
视觉全带宽
→
👁️ 你吸收
10× 效率
关键转变： AI 不再「告诉你答案」，而是直接「给你造一个视觉空间让你自己吸收」
详细对比

Markdown vs HTML 完整对比

📝
Markdown
  • ✗纯黑白文字，无颜色
  • ✗多栏布局需手写表格
  • ✗不可交互
  • ✗无动画 / 过渡
  • ✗无法精确控制视觉
  • ✓轻量，低 token 成本
  • ✓AI 解析友好
🎨
HTML
  • ✓彩色标注 + 品牌色
  • ✓CSS Grid / Flexbox 任意布局
  • ✓可交互（滑块/标签/折叠）
  • ✓动画 / 过渡 / hover 效果
  • ✓精确到像素的控制
  • ✗Token 成本约 2×
  • ✓人的阅读效率 10×
实战对比

同一段分析，两种格式

让 AI 分析"Kopi Agent 市场定位"

📝 Markdown 版
# Kopi Agent 市场定位 ## 优势 - 同时懂技术和商业 - 149+ 预装技能 - 在 Telegram 里直接干活 ## 目标客户 新加坡 SME 老板 ## 痛点解决 - 不用学技术 - 不用部署 - 不用招人
🎨 HTML 版（你在看的这个页面）
<section> <h1>🎯 Kopi Agent 市场定位</h1> <div style=" background:linear-gradient(135deg, rgba(200,168,110,0.1),transparent); padding:1rem;border-radius:12px"> <h3>✨ 核心优势</h3> <p>✓ 技术+商业 双重稀缺</p> <p>✓ 149+ 预装技能</p> ... </div> </section>

今天就能用

在任何 query 末尾加这一行，你的 AI 立刻换一种方式跟你沟通：

"structure your response as HTML"

不需要等 Neuralink。不需要等更强的模型。
这就是 当下能摘到的最大最甜的低垂果实 🍒