ARTICLE · 948414
HTML:AI 时代的万能格式
HTML:AI 时代的万能格式昨天同事问我，「你为什么那么喜欢用 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 写 HTML 这么顺。 光说"好用"没用，得知道怎么跟 AI 说。下面三个场景，提示词可以直接复制。 这是第一步，后面所有东西都从这里长出来。跟 AI 说： AI 会输出一个带 和组件示例的 HTML 文件。打开浏览器看，调整到符合需求。这个文件就是你的样式规范，后面所有产出都引用它。 关键点：用 CSS 变量（--primary-color 这种），不要写死颜色值。这样后面换主题色，改一行变量全站跟着变。 规范定好之后，做原型非常简单。跟 AI 说： AI 会给你一个可点击、可交互的原型。不满意哪里，直接说"把卡片间距改大一点""加个暗色模式切换"，它接着改。 以前用 Figma 画一个能点击的原型，得花大半天。现在从需求到可交互原型，十分钟。 做需求评审、技术分享、项目汇报，直接出 HTML 演示页。跟 AI 说： 浏览器打开，方向键翻页，全屏就是演示模式。不需要 PPT 软件，不需要插件，不需要担心版本兼容。 分享的时候发个链接，对方点开就能看。不需要安装任何东西。 三个场景的共同点：你负责说要什么，AI 负责写代码，浏览器负责渲染。三个环节分工明确，不需要从一种格式转成另一种格式。 试一次你就知道了，像一个标准化车间似的。那种"需求直接变原型"的感觉，回不去了。 
五个原因，一层比一层深。 第一，母语。 互联网是人类最大的公开语料库，网页内容几乎全是 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 是什么？是车间。 我上一篇公众号，讲前端像素级还原的，全套配图，封面、插画、图表、标题图，全是 HTML 写的。写完用 Playwright 批量截图，三倍分辨率，直接发公众号。 HTML 在我手里已经不只是写文档用的。它是图形生产车间。 浏览器负责渲染，Playwright 负责截图取出来。 动画也一样。CSS 动画、Canvas，直接写。写完录屏就是视频素材。在 Word 里「插入动画」这个功能基本不存在，在 HTML 里它是基本功。 更狠的是整条线可以无人值守。 数据进来，套模板，渲染，截图，发到飞书群里。四步全是代码，AI 全会。定时任务半夜跑，早上起来图已经在群里了。我自己的 techwatch 周报就是这么干的。 还有一招。AI 能拿它自查。 渲染完截图，跟目标逐像素比对，不对就改，改完再截。上一篇讲的像素级还原循环，底层靠的就是这个。同一个 HTML 文件在同一个浏览器里渲染一亿次，像素都一样，所以才能截图、才能对比、才能校验。 行业已经给出了答案。Claude 的 Artifacts，v0，bolt，Lovable，AI 生成可交互内容时，默认渲染形态全是 HTML。没有一家选 Word 或者 PPT。 VSCode、Figma 桌面版、Notion 桌面版，底下全是 Electron。HTML 不会过时，它正在成为默认选择。 
写到这里感觉像在吹 HTML。不是。 我每天差不多一半的写作量还是 Markdown。日记、反思、临时记的素材和灵感，全在 Obsidian 里用 Markdown 随手记。 这些东西的读者是未来的自己。要的是快，打开就写，随手就搜。排版？不需要。好看？无所谓。灵感的价值在「记下来了」，不在「排得好看」。 为这种事上 HTML，工具比事情本身还重。 还有一个我亲手踩过的坑。Obsidian 能显示 HTML，但只能看个大概。直接嵌入一个 HTML 文件，样式被丢了，它把文件当内容片段塞进来， 里的 直接扔了。骨架在，灵魂没跟来。 想在 Obsidian 里看完整样式？得自己包一层 iframe，自带一扇门。 所以判断标准就一句话。 还有一条自然的流水线。灵感是 MD 记的原料，哪天被选进一篇文章、一份 PPT，那一刻才转成 HTML。原料进车间。 
回到开头那个问题。 Markdown 为什么以前那么好用？因为它帮人省力气，少打几个尖括号就是少花几秒。以前这个优势值钱，因为字是一个一个用手敲的。 AI 时代，打字成本大幅降低。它最大的优势一夜之间不值钱了。而 HTML 能写的东西多得多，一分没少。 风向变了。 你手上还有什么在用 Word 硬撑的场景？评论区聊聊，说不定换个格式就是一句话的事。 说明：文中提到的工具（Playwright、echarts、mermaid、katex、three.js、gsap）均为开源或免费公开服务。Obsidian 对 HTML 嵌入的样式丢失行为为本人 2026 年 8 月实测，不同版本可能有差异。VSCode、Figma 桌面版、Notion 桌面版基于 Electron 为公开可查事实。「上一篇」指本号前文《最新模型能做到前端像素级还原，是怎么做到的？》。配图流程为本人实际工作流。
一、一条线贯穿：从原型到上线，不用换格式
二、上手：三个场景，拿来就用
场景一：定样式规范
帮我设计一套网页 UI 样式系统，用 CSS 变量定义。要求：
色板：主色、辅助色、背景色、文字色、成功/警告/错误色 字体：标题、正文、代码各用什么字体，字号和行高 圆角：按钮、卡片、输入框的圆角值 间距：8px 为基数的间距体系 组件：按钮、卡片、输入框、导航栏的基础样式 输出一个 HTML 文件，把所有样式变量和组件示例都展示出来，我能直接在浏览器打开看效果。
场景二：做产品原型
参考我的样式规范（下面附上规范文件），帮我做一个「任务管理工具」的 Web 原型。要求：
左侧是项目列表，右侧是任务看板（待办/进行中/已完成三列） 每个任务卡片可以拖拽（用原生 JS 实现） 点击任务弹出详情弹窗，可以编辑标题和状态 顶部有搜索框和新建按钮 输出一个完整的 HTML 文件，样式要和规范一致。
场景三：出演示页
基于我的样式规范，做一个 8 页的演示网页。主题是「Q3 技术规划」，内容如下：
封面：标题 + 日期 + 作者 背景：为什么要做这件事（3 个要点） 目标：量化指标（表格展示） 方案：技术架构图（用 mermaid 生成） 时间线：甘特图（用 CSS 实现） 风险：3 个风险点 + 应对措施 资源：人力和预算需求 总结：一页回顾 每页一个 section，支持键盘左右箭头翻页。
三、AI 写 HTML，为什么这么顺
四、图形车间：写、渲、截、发
所有软件都在变成浏览器。这不是比喻，是字面事实。
五、但 HTML 不是万能的
在浏览器里，HTML 是原住民。在别人的软件里，它是访客。
记给自己的，用 Markdown。做给别人看的，用 HTML。
尾声
Markdown 是便签纸，HTML 是印刷品。