← 返回博客

让 AI 输出 HTML 而不是 Markdown

2026年5月10日 · 约 5 分钟读完 · -- 次阅读 · 学习心得
AIClaude Code效率工具

最近看到一条推文（750 万浏览），来自 Anthropic 的 Thariq——他目前在做 Claude Code。核心观点：用 AI 工作时，让输出 HTML 而不是 Markdown，效果好得离谱。

先说结论

对比项MarkdownHTML
信息密度纯文本，最多加个表格表格、图表、SVG、交互控件，什么都能放
可读性超过 100 行就没人想看标签页、折叠块、高亮，扫一眼就懂
可分享性得用渲染器才能看浏览器直接打开，发个链接就行
交互性没有滑块、按钮、实时预览，调完参数复制回 AI
生成速度快慢 2-4x，但结果值得

为什么 HTML 更好

信息密度
Markdown 只有标题、列表、表格、代码块。HTML 能做对比表格、SVG 图表、代码高亮、交互控件。
你会读 HTML，但不会读 Markdown
超过 100 行的 Markdown 没人读。HTML 有标签页、折叠块、视觉层级——500 行文档两三屏看完。
分享方便
Markdown 需要渲染器。HTML 丢到任何地方，浏览器打开就能看。上传 S3 发链接即可。
交互性
滑块调参数、下拉切换视图、点按钮复制结果。AI → 人调整 → 喂回 AI，人始终在回路里。

Thariq 原话：“没有 HTML 的时候，Claude 会用 Unicode 字符’估算颜色’来画图。“

9 大使用场景

场景具体用法
探索与规划多方案并排对比、交互式原型、实现计划时间线
代码审查带标注的 Diff、PR 说明、模块依赖图
设计活的设计系统、组件变体一览表
原型动画沙盒（滑块调时长和缓动）、可点击页面流
图表与示意图SVG 图解、可交互流程图
演示方向键翻页的幻灯片，一个 HTML 文件搞定
学习与研究功能原理讲解、交互式概念演示
报告周报、事件时间线、事后复盘
自定义编辑器票据排序板、功能开关编辑器、Prompt 调试器

典型工作流

1. AI 生成 HTML
→
2. 人拖滑块调参数
→
3. 点”复制为 Prompt”
→
4. 粘贴回 Claude Code

整个过程人始终保持在回路里，而不是把所有决策丢给 AI。

怎么开始

不需要任何特殊配置，直接跟 AI 说：

帮我做一个 HTML 文件，对比这三种数据库方案的优劣

把这份 PR 的 diff 渲染成一个带标注的 HTML 页面

做一个交互式的 HTML，让我能用滑块调整动画参数

生成的 .html 文件双击浏览器打开。

唯一的缺点

版本控制：HTML 的 Git diff 很难读，比 Markdown 差很多。如果你需要对生成内容做版本控制，Markdown 还是有优势。

我的看法

Thariq 最后说了一句很打动我的话：

“用 HTML 之后，我比以前任何时候都更’在回路里’——与其让 Claude 自己做决定，HTML 让人始终保持参与。”

这和 Vibe Coding 的理念很像。AI 是工具，不是替代品。你需要能看懂它在做什么、能调它做出来的东西、能把它输出的结果继续喂回去。HTML 恰好提供了这种能力。

试试看吧，下次让 AI 输出 HTML。

参考资料：

评论