Markdown 是草稿, HTML 才是给人读的成品 —— 让本地 agent 直接写 HTML。

Agent 时代的 HTML 编辑器 —— 既然你已经不亲手改文档、全都让 Claude 改了, 那 agent 的输出就该是读者真正想看的 HTML, 而不是中间态的 markdown。

Claude Code 团队工程师 Thariq Shihipar 最近写了篇文章《The Unreasonable Effectiveness of HTML》，用自己亲身实践宣布：

他已经几乎不再用 Markdown 写文档，转而让 Claude 直接输出 HTML。

理由很简单也很扎心：

Markdown 是给写作者看的，HTML 才是给读者看的。

当文档越来越长、信息越来越复杂，而“写”这件事又被 AI 接管之后，格式从“写作工具”变成了“阅读产品”。

一、从一条推文说起：Claude Code 团队“倒戈”HTML

事情要从 Simon Willison 的一条博文说起。这位 Python 圈老牌博主，从 GPT‑4 时代就习惯让 AI 用 Markdown 回复——理由很务实：上下文窗口只有 8192 token，Markdown 比 HTML 省 token，更划算。

但最近，他改口了。

原因是他看到了 Claude Code 团队工程师 Thariq Shihipar 的文章《Using Claude Code: The Unreasonable Effectiveness of HTML》。文章核心观点一句话概括：

让 AI 用 HTML 而不是 Markdown 回答你，你会发现信息可读性突然上了一个台阶。

为什么？

HTML 可以嵌入 SVG 矢量图、交互组件、页内导航、滚动驱动动画；

Markdown 只能输出纯文本加一些格式符号，本质上是“线性文档”。

Simon 自己动手试了一把：让 GPT‑5.5 用 HTML 解释一个 Linux 安全漏洞，结果页面上有高亮注释、分类标签、结构化拆解、颜色编码——

他承认：这比任何 Markdown 解释都要好得多。

这不是“排版好看一点”的问题，而是：

同样的信息，从“一段文字”变成了“一个可以探索的空间”。

二、Markdown 为何在 AI 时代“显老”？

1. Markdown 的初心：给作者减负，而不是给读者加戏

Markdown 诞生于 2004 年，目标是：让写作者用最少的标记语法，得到最基本的格式——标题、加粗、列表、链接。

在那个年代，这已经足够惊艳：写作者不用碰 HTML 标签，专心写内容；纯文本即可，版本管理友好；GitHub、各种博客平台、笔记工具都原生支持。但 AI 时代的信息需求，早就超出了“标题+列表+加粗”的范畴。

2. Markdown 的三大硬伤：线性、单薄、难以直达读者

Thariq 和后续很多文章，都把 Markdown 的局限归结为三点：

线性表达，压扁了复杂结构，代码审查本来需要 diff、风险点、调用关系并排展示；设计讨论需要色板、组件状态、尺寸对比；报告复盘需要时间线、图表、结论、行动项同屏出现。

一旦压成 Markdown，就只剩“一段接一段的文字”，读者要在脑子里重建结构。

信息密度低，难以承载“界面级”内容，表格一复杂就拥挤；颜色和强调不够直观；图表往往只能外链或截图，无法和正文深度交织。分享和阅读依赖平台，打开率靠运气

Markdown 不是浏览器原生语言，要么发文件，要么靠 GitHub / Notion / 编辑器二次渲染；

非技术人员打开都费劲，阅读意愿大打折扣。

更关键的是：AI 输出的内容越来越长，也越来越结构化。

当文档动辄几百行，读者面对的是“文字墙”，而不是“可浏览的系统”。

Markdown 很适合写作过程，但越来越不适合作为“交付物”。

三、HTML：从“网页语言”变成“AI 时代的阅读容器”

1. HTML 的“逆袭”：不是复古，而是需求升级

很多人对 HTML 的印象还停留在“写网页的老古董”，但在 AI 时代，它反而焕发第二春：

浏览器原生支持：手机、电脑、任何设备，点开即看，无需额外软件；

结构化表达：标题、段落、卡片、图表、导航可以同屏出现；

交互能力：按钮、滑块、选项卡、折叠面板，让信息从“被阅读”变成“可操作”；

设计潜力：CSS + SVG + 少量 JS，就可以做出杂志级、PPT 级、海报级效果。

用 Thariq 的话说：

当输出目标从“写一段文字”变成“让人直接看懂、比较、试用、复用”，HTML 就会比 Markdown 更像一种终态格式。

2. 一个例子：同一份内容，Markdown vs HTML

想象你让 AI 帮你做一份项目方案：

Markdown 版：

大段文字 + 若干二级标题 + 几个列表 + 一张截图链接。

读者要自己“脑补”结构，在滚动中寻找重点。

HTML 版：

左侧目录导航，一键跳到“风险”“时间线”“资源”;

关键风险用红色卡片高亮；

时间线画成横向轴，每个节点可展开详情；

资源表做成可筛选的表格。

这不是“好看一点”，而是：

读者从“看说明书”变成“用产品”。

四、Claude 的“弃 Markdown”：背后是 Agent 时代的格式重排

1. 从“人写 AI 看”到“AI 写 人看”

过去，我们默认 AI 输出文字，因为文字最便宜、最通用，也最容易塞进聊天框。

但现在，很多任务已经变了：

用户真正需要的，不是“模型说了什么”，而是“有没有直接给出一个可用的结果”。

当 AI 写文档、做方案、写报告，读者不再是 AI，而是人——

格式就该从“方便模型输出”，转向“方便人类消费”。

2. Token 成本不再是问题，HTML 的“贵”被稀释

早期 GPT‑4 时代，HTML 比 Markdown 多 ~80% 的 token，在 8k 窗口下确实不划算。

但今天：

Claude / GPT‑5 的上下文窗口已经到几十万 token；

Token 成本急剧下降，HTML 的“费钱”劣势基本消失。

反过来，HTML 带来的阅读体验提升，却是指数级的。

3. Claude Code 的实践：让 HTML 成为 Agent 的默认输出

Thariq 在文章里展示了大量用 Claude Code 生成的 HTML 文档：

代码审查：diff、风险标注、严重级别颜色编码；

设计系统：色板、组件变体、状态切换；

报告与研究：结论、证据、过程、风险、下一步分层展示；

他的结论是：

当 AI 的输出从“文本任务”变成“界面任务”，HTML 就不再是可选项，而是默认选项。

五、问题来了：谁会去写 HTML？

到这里，你会发现一个现实问题：HTML 是好，但谁会写？普通用户不会写 CSS、调字号、对齐网格；设计师不想从零手写 HTML；作者更没耐心排版，只想专注内容。过去，这的确是 HTML 的门槛。但 Agent 时代，这个门槛正在被彻底拆掉。

六、html-anything：让本地 Agent 直接写 HTML，你只管发布

就在 Claude 团队“倒戈 HTML”的同一时间，一个叫 html-anything 的开源项目悄悄火了起来。

它的定位非常直接：

Agent 时代的 HTML 编辑器 —— 让本地 AI Agent 直接写 HTML，你直接发布。

简单来说，html-anything 是一款面向 AI Agent 时代的开源、本地化“智能 HTML 编辑器”。

它的核心逻辑非常暴力且优雅：你输入任何东西（Markdown、CSV、Excel、JSON、SQL 甚至无序的草稿），它直接驱动你本地的 AI Agent 输出完美的、像素级对齐的、可即时交付的 HTML 页面或视觉图片。

在传统工作流中，我们的路径是：

想法 → 撰写 Markdown → 使用排版工具转换 → 各种微调 → 导出发布

而在 html-anything 的世界里，路径被极度缩短为：

碎片化素材（草稿/数据）→ 喂给本地 AI Agent → 实时预览并一键分发（微信/小红书/知乎/X）

它之所以能在短时间内疯狂吸星，并被视为 Markdown 的终结者，关键在于它踩中了 2026 年最核心的技术红利——AI 智能体（Agentic）的崛起，让“把排版和设计完全交给 AI”成为可能。

1. 核心定位：不是 Markdown→HTML，而是“草稿→成品”

html-anything 官方 README 里有句很关键的话：

Markdown 是草稿，HTML 才是给人读的成品 —— 让本地 Agent 直接写 HTML。

它要做的事情，不是“Markdown 转 HTML 的渲染器”，而是：

把你随便写的 Markdown / CSV / JSON / SQL / 纯文本；

扔给本地已经装好的 AI Agent（Claude Code、Cursor、Codex 等）；

让 Agent 按照专业设计规范，直接生成可发布的 HTML。

2. 它到底做了什么？——一条完整工作流

关键点拆一下：

自动识别本地 8 个 Agent CLI，零 API Key

html-anything 启动时扫描你的 PATH，自动识别已安装的 8 个 CLI：

Claude Code、Cursor Agent、OpenAI Codex、Gemini CLI、GitHub Copilot CLI、OpenCode、Qwen Coder、Aider。

你已经在终端 claude login、cursor login 过？好，直接复用；

不需要再填各种 API Key，边际成本为 0。

75 套 Skill 模板，覆盖 9 类可交付场景

75 套 Skill 模板，按 mode（prototype / deck / frame / social / office / doc / mockup / vfx / video）和 scenario（design / marketing / engineering / product / finance …）组织；

9 类典型输出：杂志文章、Keynote PPT、简历、海报、小红书图文卡、推特卡、Web 原型、数据报告、Hyperframes 视频帧；

每个模板都附 example.html，双击即可看效果。

强设计约束：反 AI-slop，把“排版丑”写进规则

模板里硬编码了：

CJK 优先字体栈（Noto Sans/Serif SC、思源黑体）；

8px 基线网格，所有间距、行高、字号对齐 8 的倍数；

圆角 / 投影 / 不用纯黑纯白；

颜色对比度 ≥ 4.5；

必须使用真实数据，禁止占位文本。

这些约束来自项目 huashu-design 的“Junior-Designer 模式 + 反 AI-slop 清单”，本质上是：

把设计决策写进规则，而不是留给 AI 自由发挥。

流式渲染 + 沙箱预览：看着 AI 现场画

点击生成后，Agent 的输出通过 SSE 流式渲染到 iframe 中，你可以看着 HTML 一行行“被画出来”；

不满意随时中断，不用浪费整次生成；

所有 HTML 在沙箱 iframe 中运行，隔离 cookie / localStorage，避免污染宿主页面。

一键多平台导出：0 二次排版

微信公众号：CSS 内联，粘贴进去直接用；

知乎：LaTeX 公式自动转成图片占位；

X / 微博 / 小红书：渲染成 2× PNG，直接粘图；

下载 .html 或 .png，任意分享。

一句话总结：

你只负责“想清楚要什么”，排版、导出、适配，交给 html-thingy + 本地 Agent。

七、回到 Claude：从“写 Markdown”到“生成 HTML”的工作流变化

结合 Thariq 的建议和 html-anything 的实践，我们可以把新工作流总结成三步：

步骤 1：把“帮我写一篇 Markdown”改成“帮我生成一份 HTML”

在 prompt 里，把输出格式从 Markdown 改成 HTML，并加上一点结构要求：

“请用 HTML 输出，包含导航/卡片/表格，方便阅读”；

“请用 SVG 画一张流程图 / 架构图”；

“请做成可交互的选项卡，方便对比方案 A / B / C”。

这一个小改动，就能解锁 HTML 的全部表达力。

步骤 2：用 html-anything 之类的工具，把“写 HTML”变成“选模板 + 点生成”

左边：粘你的内容（Markdown / CSV / 文案）；

中间：选一个 Skill（小红书卡片 / PPT / 数据报告 / 海报）；

右边：看 Agent 实时渲染，不满意就改提示词；

最后：一键导出到你想要的平台。

你不需要会写 CSS，只要会“选模板”。

步骤 3：发布前，把 HTML 当“产品”审视，而不是“草稿”

读者是否一眼能看到重点？

结构是否清晰，而非文字墙？

是否有导航、折叠、标签，帮助读者跳转？

是否在手机上也能舒适阅读？

当你习惯用“读者视角”审视 HTML，你会发现：

很多 Markdown 文档，其实根本没写完。

实战：如何用 html-anything 爆改你的自媒体工作流？

让我们来看看一个标准的自媒体人，如何利用这套全新的技术组合拳，将日常发布和多平台分发效率提升 10 倍。

场景一：微信公众号与知乎的“一键完美排版”

过去，你在 Notion 里写完，复制到各种排版网站，调色、调字号、调间距，最后小心翼翼地同步到微信后台。如果带有数学公式（LaTeX），知乎和微信更是日常崩坏。

现在，html-anything 提供了底层级的一键发布平台优化：

• 微信公众号

  ：通过内置的 juice 技术，系统会自动将所有 CSS 样式内联化（Inline CSS）并附带 data-tool 标记。你只需要在右侧预览区一键复制，直接粘贴进微信公众号后台，样式 0 错位、0 调整，完美还原。

• 知乎公式自动渲染

  ：针对知乎不支持 KaTeX 直渲的顽疾，系统将 <mjx-container> 转换为 data-eeimg LaTeX 图片占位符，粘贴过去公式直接完美渲染，再也不用手动截图公式。

场景二：推特、微博与小红书的“高 DPI 视觉卡片”

做小红书或推特干货图最痛苦的就是去作图软件里对齐像素。 在 html-anything 中：

1. 你把写好的运营干货或无序草稿丢入左侧编辑器。

2. 选择小红书或海报模板（如 magazine-poster 纸感报纸风格）。

3. AI 自动将内容模块化，加上优雅的网格和渐变色。

4. 点击导出，它会调用内置的 modern-screenshot 截图路径，将 iframe 页面直接渲染成 2× 高 DPI 的高清无损 PNG 图片。

5. 甚至直接写进你的剪贴板（ClipboardItem），你到推特或小红书后台直接 ⌘+V 就能粘贴图片发送，全程不用下载文件。

更多transformer，VIT，swin tranformer
参考头条号：人工智能研究所
v号：人工智能研究Suo, 启示AI科技

 动画详解transformer  在线视频教程