源码级揭秘!这个让 Agent 疯狂输出的开源神器,把公众号排版干碎了

Markdown 只是给人写的草稿， HTML 才是给人看的终局。

作为一个长期混迹于技术圈的写作者，我每天都在经历一个极其割裂的过程：
先在 Typora 或 Obsidian 里用 Markdown 写好文章，然后复制到公众号后台，接着开始漫长的“排版受苦”——调字号、改行高、处理代码块、修正引用格式……

甚至为了保持排版一致性，我们不得不依赖第三方工具（如 mdnice ），但依然经常遇到样式丢失、代码块渲染失败等玄学问题。

今天介绍的这个项目，直接把这桌子掀了：既然 AI 时代我们已经不再手写 HTML ，为什么不直接让 AI 生成排版好的 HTML ？

nexu-io/html-anything —— 一个让本地 AI 代理（ Agent ）直接接管排版的开源神器。它不仅能生成网页，还能一键导出为微信公众号、知乎、小红书完美适配的格式。

更炸裂的是：它不需要额外的 API Key ，零成本，复用你本地的 Claude/Cursor 账号即可运行。

一、 核心理念：为什么抛弃 Markdown ？

项目作者（也是 Open Design 背后的团队）提出了一个极其犀利的观点：

在 Agentic 时代，你不需要再去手动调整 CSS 。你只需要把数据（ Markdown/CSV/Excel/JSON ）喂给 AI ，它会在几秒钟内吐出一个可以直接交付（ Ship-ready ）的单文件 HTML 。

所谓的"Ship-ready"，意味着生成即发布，不需要任何"我再微调一下"的后处理。

二、 核心架构：它凭什么比 mdnice 强？

这不仅仅是一个简单的模板工具，它的架构设计非常硬核。

1. 零 API Key ：复用你的本地登录

这是我最喜欢的特性。市面上很多 AI 排版工具需要你填入 API Key 按量计费。

html-anything 不这么做。它在启动时会自动扫描你的系统环境变量（PATH），检测你本地已经安装了哪些 Agent 工具：

只要你在终端里跑过 claude login 或者 cursor auth，这个项目就能直接复用那个会话。

边际成本为 $0。你的 AI 订阅费已经交过了，为什么不把它用在排版上？

2. 75 套 Skills ：不是模板，是“设计规范”

普通工具的“模板”往往只是写死的 HTML 片段。而 html-anything 引入了 SKILL.md 协议。

每一个模板（ Skill ）都是一个独立的文件夹，里面不仅有样式，还包含了一套硬约束（ Hard Constraints ），防止 AI“放飞自我”生成丑陋的排版。

比如：
- CJK 字体栈：强制使用 Noto Sans SC / Source Han 确保中文显示优美，而不是回退到系统默认的宋体。
- 8px 基准线网格：所有的间距、行高、字号都是 8 的倍数，视觉节奏感极强。
- 对比度 ≥ 4.5：保证无障碍阅读，严禁纯黑（#000 ）配纯白（#FFF ），采用更高级的深灰/米白搭配。
- 拒绝 Lorem Ipsum：强制要求使用用户的真实数据，不允许生成无意义的占位符。

目前涵盖 9 种交付面：杂志文章、 Keynote 演示文稿、海报、小红书卡片、推特卡片、 Web 原型、数据报告等。

3. 流式渲染：看着 AI 把网页“画”出来

它不是等你等到花儿都谢了才给出一个结果。

通过 SSE （ Server-Sent Events ），代理的输出会被实时推送到浏览器的 iframe 中。你可以看着 HTML 代码一行一行地渲染成页面。如果方向不对，随时打断重来，不用浪费 Token 。

三、 杀手级功能：微信公众号一键发布

这才是重头戏。

对于公众号运营者来说，最头疼的就是代码块和引用样式的兼容性。

html-anything 内置了 juice 库，它能把所有的 CSS 样式内联（ Inline ）到 HTML 标签上。

这意味着什么？

当你点击"Export to WeChat"时，它生成的是类似 <p style="font-size: 16px; line-height: 1.6; ..."> 的富文本。你直接复制这段 HTML ，粘贴到微信公众号后台，样式分毫不差，不需要任何二次调整。

不仅如此，它还能：
- 导出高清 PNG：用于发推特、小红书（通过 modern-screenshot）。
- 知乎数学公式兼容：自动将 LaTeX 渲染为知乎支持的 data-eeimg 占位符。

四、 实操演示： 30 秒生成一份专业报告

让我们跑通全流程。

Step 1: 本地部署

gitclonehttps://github.com/nexu-io/html-anything
cdhtml-anything
pnpminstall
pnpmdev

打开 http://localhost:3000。

Step 2: 选择 Agent 与 技能

在顶部栏，你会看到它自动检测到了我安装的 claude 和 codex。

左侧选择 Data Report 模式，右侧挑选 Finance Report 技能。

Step 3: 喂食数据

把一份乱糟糟的 Markdown 笔记或者 CSV 表格扔进编辑器。按下 Cmd+Enter。

右侧预览窗口开始闪烁， Agent 开始工作。

-营收：$1.2B (同比 +15%)
-净利润：$300M
-核心风险：AI 芯片供应不足
-建议：加大 R&D 投入

Step 4: 见证奇迹

几秒钟后，一份排版精美的财报摘要出现了：
- 标题使用了瑞士国际风格的粗体排版。
- 数据被自动转化为了高亮的图表。
- 风险部分被高亮为警告框。
- 配色完全符合金融行业的严肃调性。

点击 Export > WeChat，复制到微信后台，直接发布。

五、 总结：从“写作者”到“设计总监”

html-anything 的出现，标志着一个趋势：文档的终局是 HTML ，而生产 HTML 的最佳工具是 Agent 。

它把那些只有设计师才懂的“基线网格”、“字体层级”、“色彩对比度”，封装成了一个个 AI 必须遵守的 SKILL.md 。

你不再是那个在公众号后台苦哈哈调字号的排版工，你是设计总监。你只需要告诉 Agent ：“给我生成一份瑞士国际风格的 Keynote"或者“把这份 CSV 变成小红书爆款卡片”。

剩下的，交给它。

🤖 AI 深度洞见 — 前沿 AI ，深度拆解。每天 3 分钟，看透 AI 底层逻辑。

👇 扫码关注，获取每日 AI 深度拆解