弃 Markdown、用 HTML 做视频-Anthropic、HeyGen 为什么突然都在用 HTML？

上一篇文章聊了代码视频——当时我就觉得奇怪，批量做视频为什么要用代码？

后来我发现，不止视频，小红书卡片、简历、数据图表、甚至公众号里的动画——全都可以用 HTML 做。

这篇文章里有我实测的案例、75 个 HTML 模板的开源地址、还有一段可以直接复制的 SVG 动画提示词。

事情是这样的。今年 4 月 17 号，HeyGen 开源了一个叫 Hyperframes 的工具，用 HTML 写视频的每一帧。然后 5 月 8 号，Anthropic 的工程师 Thariq Shihipar 发了篇文章说，团队内部已经不再用 Markdown 了，全面转向 HTML。做计划用 HTML，写代码评审用 HTML，设计系统用 HTML，写报告也用 HTML。

两件事撞到一起，我就开始认真想一个问题：

为什么是现在？为什么这些公司突然都在推 HTML？

1

想明白了——因为写 HTML 的不再是人，是 AI

以前 HTML 是程序员手写的——你想做一张好看的网页或卡片，得自己写代码、调间距、改颜色。光听这些词我就头大。

但现在呢？AI 来写。

我只需要说"帮我把这 5 个要点做成小红书轮播卡片"，AI 直接输出一套 HTML——5 页卡片一次全出来。做完发现第三页有个错别字？改一下数据，卡片自动更新。用 AI 生图的话，改一个字就得重新跑一遍。而且生图模型偶尔还会写错字、漏字——HTML 不会，你写什么它就显示什么。

所以不是 HTML 变了，是谁来写它变了。

Markdown 对人很友好——打几个井号就是标题，打个星号就是加粗。但 Thariq 说了一句很到位的话："Markdown 超过 100 行就崩了。"表格对不齐，嵌套列表出 bug，想加个颜色？做不到。

HTML 对人不友好，但对 AI 来说，它不是"难的格式"——它是最自由的格式。颜色、布局、字体、间距、动画，什么都能做。而且 AI 写 HTML 不比写 Markdown 慢多少，Thariq 算过，一个完整的 HTML 文件大概 5480 个 token，只占 Claude 上下文窗口的 0.55%。

所以 Anthropic 的逻辑很清楚：既然 AI 是主要的内容生产者，那就应该用 AI 最能发挥的格式。

Thariq 的原文发在 Lenny's Newsletter，标题叫《HTML is the new Markdown》。他还做了一个配套网站，放了 75 个用 Claude 生成的 HTML 文件，每个都是一个真实用例。48 小时内在 X 上拿了 75 万浏览、1.4 万点赞。

原文：lennysnewsletter.com 75 个 demo（演示版）：thariqs.github.io/html-effectiveness HTML Anything（开源项目）：github.com/nexu-io/html-anything

2

我自己的体感——不懂代码，拿 HTML 能做什么

看到那 75 个 demo 的时候，我手痒，挑了 20 多个出来实际跑了一遍。

不跑不知道，跑完以后我才真正理解了一件事：HTML 的核心优势是"可编程"。

什么意思？举个例子。你想做一张数据图表——

用 AI 生图的流程是这样的：你先整理好数据，写一段提示词描述你想要什么样的图，AI 画出来一张图，你一看数字不对，改提示词重来，AI 又画出来，这次柱状图的比例不对，再改，再来……循环三四轮，可能还是不满意。

用 HTML 呢？你把数据丢进去，图表就自动画出来了。数字准确，比例准确，配色准确。想改数据？改一个数字，图表自动更新。

这是本质区别——AI 生图是"描述 → 猜测 → 修正"，HTML 是"数据进去 → 结果出来"。

我挑了四个最让我印象深刻的案例：

小红书卡片。粉彩配色的轮播卡片，改改标题和要点就能直接发小红书。以前我做小红书图要在 Canva 里拖半天，现在给 AI 一段 JSON 数据，出来就是成品。

小红书卡片封面

小红书卡片内容

小红书卡片总结

羊皮卷。这是我最喜欢的。旧纸张的质感、衬线字体、古典装饰符号、红色印章——全是 HTML+CSS 做的，没有一张图片。打开浏览器那一刻我觉得自己在看一封中世纪的信。

羊皮卷变体

羊皮卷变体

简历。我之前真不知道代码能写简历。以前没有 AI 的时候，我做简历是花钱找人设计的。有了 AI 生图以后，用 gpt-image2 之类的工具也能做，但你得自己先想好内容怎么排、重点写什么，然后写提示词让它画。HTML 方式完全反过来——你把作品、经历、知识库一股脑丢给 AI，它帮你分析、组织、挑重点，直接生成一份适合你的简历。不是你告诉它"画成什么样"，是它帮你想"应该写什么"。

简历

NYT 风格数据图表。柱状图从底部长上来，折线一笔一笔画出来，数据点依次亮起。这种效果以前要专业的数据可视化工程师才能做，现在 AI 用 HTML 写一个文件就搞定了。

NYT数据图表

3

甚至动画也行——SVG 在微信里能动

聊到动画，我又多好奇了一步。

微信公众号是出了名的"什么都不支持"——CSS 动画？全部剥掉。JavaScript？不存在。iframe？想都别想。

但我发现了一个漏网之鱼：SVG SMIL 动画。

SVG 是一种矢量图格式，SMIL 是它自带的动画标签。微信没有剥掉它——可能是因为它是图片的一部分，不是"代码"。

我测了 9 种动画类型，全部在微信公众号里跑通了：

呼吸脉冲

旋转

颜色渐变

路径描绘

平移

♥

缩放

透明度闪烁

路径跟随

形状变形

▲ 以上 9 种 SVG SMIL 动画全部在微信公众号实测通过

其中有两种（平移和路径跟随）第一次没动，我让 AI 自己想办法，它换了个写法就通了。我完全不懂这些技术细节，但 AI 知道怎么绕过微信的限制。

我现在在自己的公众号文章结尾加了一个 SVG 动画——点赞、关注、留言的三个图标会轻轻跳动。

为什么要折腾这个？我在想，读者刷到文章结尾的时候，如果最后一屏有点不一样的东西，可能会多停留一下。完读率对公众号来说挺重要的。动画能不能真的提高完读率我不确定，但我觉得值得试试。

你可能会说，很多公众号编辑器也有动画模板啊，选一个插进去不就行了？问题是那些模板是别人设计好的——你得从几百个里面翻，找一个勉强合适的，但配色风格大概率跟你的公众号不搭。我的号有固定的莫兰迪绿灰和橘棕配色，编辑器模板里不可能刚好有这个组合。

但 AI 不一样。我告诉它"用我的主题色做一个结尾引导动画"，它直接给我生成一个配色一致、风格统一的 SVG 动画。不是"从别人做好的里面挑"，是"按我的要求定制"。

你也可以试试，把这段话发给任何一个 AI：

"帮我做一个公众号文章结尾引导动画，SVG SMIL 格式，包含点赞、关注、留言三个图标，配色用 [你的主题色]，风格要和我的公众号统一。"

把 [你的主题色] 换成你自己的颜色就行。记住一定要写"SVG SMIL 格式"——微信会把 CSS 动画全部剥掉，只有 SVG SMIL 能保留。

4

不是谁在推它，是时代走到这了

回到最开始的问题：为什么这些公司突然都在用 HTML？

HeyGen 做了一个开源工具，让你用 HTML 写视频的每一帧。Anthropic 的工程师说，团队内部已经全面切换到 HTML。

不是它们在"推"HTML。是当 AI 成为默认的内容生产者之后，它自然会选最灵活的输出格式。Markdown 够简单，但不够用。AI 生图够直觉，但不够准。

HTML 恰好站在中间——它足够自由，能表达几乎任何视觉效果；它足够结构化，数据进去结果就出来；它足够轻量，AI 写起来毫不费力。

我不懂代码，但现在我做小红书卡片、做公众号排版、做数据图表、甚至做视频——底层全是 HTML。我不需要懂它怎么写，我只需要告诉 AI 我要什么。

半年前我还不知道 HTML 是什么。现在它是我做所有东西的底层格式。

我没学会它，但我用上了它。

点个赞点关注说两句你的每一次互动，都是我继续写下去的动力— 月鹿造物 —