昨天同事问我，「你为什么那么喜欢用 HTML？现在不都用 Markdown 吗？」我想了想，还真是。Word、Excel 这些，我已经很久没碰了。写文件、公众号、做表格、原型、设计稿、原型、图片、视频全是HTML。越挖掘越是惊喜，本篇文档的介绍觉得超过你对HTML的印象。而且我还感觉远远不止于此，随着AI在3D和真实世界场景的进化HTML会越来越强，说不定是将来的大一统格式。
一、一条线贯穿：从原型到上线，不用换格式
之前写文档都是Markdown，遇到复杂公式和对格式要求特别高的时候还会上Latex之类的。但真正用 AI 之后才发现，HTML 的好用程度远超预期。之前让 AI 帮我出设计稿再转Figma，后来一想，为什么不直接让它出 HTML？做需求：从原型开始，让 AI 直接用 HTML 出一个可点击的页面。样式是现成的，组件是现成的，生成出来就是能交互的原型，只是暂时没加细节。然后把细节补上，加交互逻辑、加数据绑定，它就从原型变成了设计图，打开浏览器就能看到最终效果的完整预览。确认过再把这份 HTML 给 AI，让它基于它编码实现，做成真正能跑的应用。小技巧：设计稿里的图片等素材让AI用base64的形式插入HTML代码里。后面确认完原型图开始编码的时候再让AI提取出来。整套流程下来，HTML 从头到尾没换过格式。设计师和开发之间不用来回翻译，"还原度"极高——从原型到设计到代码，一直是同一款代码。后面还方便接自动化。Playwright 截图、自动部署、定时生成报告，HTML 和自动化工具的结合度非常高，因为底层都是文本操作。写文档：需求文档、技术方案、项目汇报，直接用 HTML 写。让 AI 生成之后，浏览器打开就能看效果，排版样式所见即所得。确认没问题，直接转 Word、PPT、Excel，转出来基本不用再调。以前写 PPT 得打开专门的软件，排版、调字体、对齐，对格式。现在 用AI把HTML 写好，浏览器预览，一键转格式。打开专门软件这一步直接省了。很特别方便部署。做完让AI在服务器上部署生成一个链接，发给谁都能看。不用装软件，不用管对方是什么系统。对方得装 Office 或者 WPS？版本还老对不上。几乎所有设备都预装了浏览器，打开就能看。做视频：现在越来做多的视频在用HTML生成和剪辑，没想到吧！刚开始我知道的时候也很意外，感觉 HTML 是静态的，为什么可以直接生成视频或者直接做视频剪辑呢？后面一想，其实视频不就是处理各个层级还有各个帧吗？这恰好是 HTML 擅长的。而且对于 AI 来说，对比剪辑软件他更擅长处理代码而且效果真的不错，感兴趣可以搜下“AI HTML 视频 剪辑”等关键字，看完像打开新世界的大门。Markdown 的所有语法都能映射到 HTML，Markdown 文件里甚至可以直接写 HTML 标签。Markdown 渲染到 Web 端，最后也是转成 HTML 才显示的。两者的区别是简写和完整表达的关系。而且浏览器原生支持 HTML，不需要额外解析层。二、上手：三个场景，拿来就用
光说"好用"没用，得知道怎么跟 AI 说。下面三个场景，提示词可以直接复制。场景一：定样式规范
这是第一步，后面所有东西都从这里长出来。跟 AI 说：帮我设计一套网页 UI 样式系统，用 CSS 变量定义。要求：
- 色板：主色、辅助色、背景色、文字色、成功/警告/错误色
输出一个 HTML 文件，把所有样式变量和组件示例都展示出来，我能直接在浏览器打开看效果。
AI 会输出一个带 和组件示例的 HTML 文件。打开浏览器看，调整到符合需求。这个文件就是你的样式规范，后面所有产出都引用它。关键点：用 CSS 变量（--primary-color 这种），不要写死颜色值。这样后面换主题色，改一行变量全站跟着变。场景二：做产品原型
参考我的样式规范（下面附上规范文件），帮我做一个「任务管理工具」的 Web 原型。要求：
- 左侧是项目列表，右侧是任务看板（待办/进行中/已完成三列）
输出一个完整的 HTML 文件，样式要和规范一致。
AI 会给你一个可点击、可交互的原型。不满意哪里，直接说"把卡片间距改大一点""加个暗色模式切换"，它接着改。以前用 Figma 画一个能点击的原型，得花大半天。现在从需求到可交互原型，十分钟。场景三：出演示页
做需求评审、技术分享、项目汇报，直接出 HTML 演示页。跟 AI 说：基于我的样式规范，做一个 8 页的演示网页。主题是「Q3 技术规划」，内容如下：
每页一个 section，支持键盘左右箭头翻页。
浏览器打开，方向键翻页，全屏就是演示模式。不需要 PPT 软件，不需要插件，不需要担心版本兼容。分享的时候发个链接，对方点开就能看。不需要安装任何东西。三个场景的共同点：你负责说要什么，AI 负责写代码，浏览器负责渲染。三个环节分工明确，不需要从一种格式转成另一种格式。试一次你就知道了，像一个标准化车间似的。那种"需求直接变原型"的感觉，回不去了。
三、AI 写 HTML，为什么这么顺
互联网是人类最大的公开语料库，网页内容几乎全是 HTML 写的。模型泡在 HTML 里长大，这是它的母语，练得最多、出错最少。Word 和 Notion 里让 AI 画流程图？体验很差。那些工具的编辑器是给手设计的，菜单、拖拽、画布，人用着顺，AI 用着能力受限。AI 要操作，只能隔着它们开放的接口，遥控一个为鼠标设计的编辑器。能力还只是界面功能的零头。Word 里画流程图基本是灾难，画完还是张死图，改个框的名字要重新导出重新插。HTML 没有这个问题。因为 HTML 没有编辑器。文件本身就是编辑面，而文本恰好是 AI 最擅长处理的东西。流程图用 mermaid 几行文字描述就渲出来了，图和文档是同一种东西，都是文本。改两行字图就跟着变，能 diff，能回滚。这是本质区别。图表 echarts，流程图 mermaid，公式 katex，3D three.js，动效 gsap。CDN 一行拉进来，即插即用，而且基于你同一套样式变量，色板字体圆角自动统一。排版更不用说，CSS 声明式地描述你想要什么，浏览器负责实现——人类打磨了三十年、测得最充分的排版引擎，免费内置。浏览器还从不拒绝渲染，AI 生成的 HTML 存在语法错误照样能看，对比一下 LaTeX 错一个符号全盘崩，批量生成内容时这个特性非常关键。四、图形车间：写、渲、截、发
我上一篇公众号，讲前端像素级还原的，全套配图，封面、插画、图表、标题图，全是 HTML 写的。写完用 Playwright 批量截图，三倍分辨率，直接发公众号。HTML 在我手里已经不只是写文档用的。它是图形生产车间。浏览器负责渲染，Playwright 负责截图取出来。动画也一样。CSS 动画、Canvas，直接写。写完录屏就是视频素材。在 Word 里「插入动画」这个功能基本不存在，在 HTML 里它是基本功。数据进来，套模板，渲染，截图，发到飞书群里。四步全是代码，AI 全会。定时任务半夜跑，早上起来图已经在群里了。我自己的 techwatch 周报就是这么干的。渲染完截图，跟目标逐像素比对，不对就改，改完再截。上一篇讲的像素级还原循环，底层靠的就是这个。同一个 HTML 文件在同一个浏览器里渲染一亿次，像素都一样，所以才能截图、才能对比、才能校验。行业已经给出了答案。Claude 的 Artifacts，v0，bolt，Lovable，AI 生成可交互内容时，默认渲染形态全是 HTML。没有一家选 Word 或者 PPT。所有软件都在变成浏览器。这不是比喻，是字面事实。
VSCode、Figma 桌面版、Notion 桌面版，底下全是 Electron。HTML 不会过时，它正在成为默认选择。
五、但 HTML 不是万能的
我每天差不多一半的写作量还是 Markdown。日记、反思、临时记的素材和灵感，全在 Obsidian 里用 Markdown 随手记。这些东西的读者是未来的自己。要的是快，打开就写，随手就搜。排版？不需要。好看？无所谓。灵感的价值在「记下来了」，不在「排得好看」。还有一个我亲手踩过的坑。Obsidian 能显示 HTML，但只能看个大概。直接嵌入一个 HTML 文件，样式被丢了，它把文件当内容片段塞进来， 里的 直接扔了。骨架在，灵魂没跟来。在浏览器里，HTML 是原住民。在别人的软件里，它是访客。
想在 Obsidian 里看完整样式？得自己包一层 iframe，自带一扇门。记给自己的，用 Markdown。做给别人看的，用 HTML。
还有一条自然的流水线。灵感是 MD 记的原料，哪天被选进一篇文章、一份 PPT，那一刻才转成 HTML。原料进车间。
尾声
Markdown 为什么以前那么好用？因为它帮人省力气，少打几个尖括号就是少花几秒。以前这个优势值钱，因为字是一个一个用手敲的。AI 时代，打字成本大幅降低。它最大的优势一夜之间不值钱了。而 HTML 能写的东西多得多，一分没少。Markdown 是便签纸，HTML 是印刷品。
你手上还有什么在用 Word 硬撑的场景？评论区聊聊，说不定换个格式就是一句话的事。说明：文中提到的工具（Playwright、echarts、mermaid、katex、three.js、gsap）均为开源或免费公开服务。Obsidian 对 HTML 嵌入的样式丢失行为为本人 2026 年 8 月实测，不同版本可能有差异。VSCode、Figma 桌面版、Notion 桌面版基于 Electron 为公开可查事实。「上一篇」指本号前文《最新模型能做到前端像素级还原，是怎么做到的？》。配图流程为本人实际工作流。
夜雨聆风
