AI 让 HTML 日常化,工具进化三件套推荐

📄 2800 字 │ ⏱ 9分钟阅读 │

AI 的能力扩散到哪里，哪里的工具就要重新排座次。其中有一个变化不太显眼，那就是 HTML 正在变得日常。不只是对开发者，而是对所有在用 AI 生成内容的人。

原因并不复杂：Markdown 适合记录，PDF 适合定稿，Word 适合编辑，JSON 适合传数据。但能把内容、样式和可执行性放在一起的反而是 HTML。写完打开浏览器就能看，不需要安装任何东西。

HTML 还有一个特殊的优势。AI 生成的文字天然适合用 HTML 来"兑现"。让 AI 直接生成 PDF 或者 PPT，等于让它去操作一个二进制格式，出错概率高、可控性差。

在内容分发场景里，HTML 的优势会更加明显。微信公众号、知乎、小红书等平台的编辑器底层接受的都是富文本，而富文本本质上就是 HTML 的子集。所以 HTML 可以直接粘贴（前提是 CSS 做了内联处理），其他格式很难替代。

所以，HTML 之所以越来越值得重视，其实有两层逻辑：工程层面上，它简单、通用、可检查，且浏览器原生支持；AI 工具层面上，它又是内容生成到可用成品之间摩擦最小的桥梁。

今天要介绍的就是三个基于 HTML 生成的项目：

📄

Note Slides

轻量排版

⚡

HTML-Anything

AI 编辑器

✏️

html-slide-mender

可视化编辑

Note Slides

GitHub： https://github.com/gainubi/note-slides

Note Slides 的核心功能是把长文、公众号文章、访谈逐字稿、播客、PDF、课程稿等转化为可横向翻阅的精美 HTML Slides。它是一个简洁的SKILL。

我推荐它，主要有两个原因。

还原

它和一些"一键生成"的工具思路不太一样。先尽量还原材料，再去提炼结构。每一页都必须有来源锚点，比如原问题、原判断、数字、概念原词和句子张力，不能凭空总结，也不能随意打乱原始顺序。

轻便

足够轻量简便。不追求特别复杂的表达效果，就是一个非常顺手的内容排版工具。可以要求它生成微信兼容版，直接复制粘贴到公众号草稿箱。

实际用下来，特别适合复盘讲解、课程稿整理、访谈整理这类任务，这类内容本身就很重视推进脉络，而 Note Slides 恰好保留了这种脉络感。

输出：

上下滚动查看更多

当然也可以生成横版PPT的风格：

HTML-Anything

HTML Anything 是一款 Agentic HTML 编辑器，来自 OpenDesign 团队的开源项目。它比 Note Slides 复杂一些，但功能也更强。

GitHub： https://github.com/nexu-io/html-anything

你粘贴 Markdown、CSV、笔记文本，它会调用你电脑上已有的 agent 生成可直接交付的 HTML，一键发布到公众号、知乎等平台。

核心要点：它调用的是你本地已经在跑的 CLI。

适用场景：内容创作者需要快速产出专业排版文章、演示稿、社交卡片或原型时。

上下滚动查看更多

目前支持的 CLI（常用）

OpenClawHermesClaude CodeCodexCursor AgentGemini CLIGitHub Copilot CLIOpenCodeQwen CoderAiderKimi CLI

等18个（其余可见上图滑动可查）装了哪个用哪个，它自己会检测。

1安装

将 GitHub 链接交给 Claude Code、OpenCode、Codex 或 Workbuddy，它会帮你自动配置环境。

使用它需要本地已安装终端 CLI。

因为它是通过驱动本地 agent来完成任务，只是有自己的Web界面方面用户操作。

2启动

开一个 PowerShell 窗口（保持打开）：cd D:\OpenCode文章\html-anythingpnpm -F @html-anything/next dev另开浏览器访问 http://localhost:3000

3用起来什么感觉

界面不复杂：左边粘贴输入内容，中间选模板，右边看结果。

"输入"支持 Markdown、CSV、TSV、JSON、SQL、Excel、纯文本等，表格数据在浏览器本地解析，不上传服务器。

选完模板后，你本地的 CLI 就开始跑，输出通过 SSE 实时流进预览框。

475 个模板，9 种输出形态

模板是这个项目最有价值的地方。75 个按输出类型可以分成 9 种：

输出类型	适合什么场景
杂志长文	首字下沉和引用块的长文章
Keynote 幻灯片	全屏排版，Swiss grid 风格
简历	一页纸，打印友好
海报	一个大想法，视觉优先
小红书卡片	3:4 竖版，为 feed 优化
推文卡片	2× PNG，X / Reddit比例
网页原型	落地页或产品页草稿
数据报表	表格 → 带注释的可视化
分镜脚本	可接视频渲染帧 Hyperframe

对写公众号的人来说，最直接有用的是微信，导出的 HTML 用 juice 做了 CSS 内联，粘贴进公众号编辑器基本不需要再调。

75 个模板我没全部测过，里面质量可能会参差不齐。如果你想用其他类型的 Skill 也可以从 GitHub 下载安装。

html-slide-mender

Clawhub：https://clawhub.ai/wuhaoyupku/html-slide-mender

AI 生成的 HTML，你没法直接改它。想改一个标题、换一张图、把某个块往左移几像素，如果靠跟 AI 对话来描述这些改动，反而比手动改更慢。而直接去动源码，又需要会写代码。

于是我找到了一个在 Clawhub 的SKILL：html-slide-mender，它是一个编辑工具。你把本地的 HTML 文件交给它，它往里注入一个编辑器，打开浏览器之后你就能直接在页面上改文字、换图片、拖位置。改完点"下载 HTML"，拿到的是干净的成品文件。

html-slide-mender 的处理方式是始终以原始源 HTML 为基准，把你做的改动（文字、图片、位置）作为补丁。

安装很简单，直接把网址丢给你的 agent。

安装好后，把之前生成的 html 文件也丢给它，它会生成可编辑的 html 文件。

⚠️有一个限制要说清楚

这个 skill 只能用于本地保存的 HTML 文件，不支持在线页面。编辑过程中不要刷新页面，改动不会自动保存——用完记得点"下载 HTML"，关掉页面之前没下载的内容就没了。

💡 总结

如果你本来就在用 Claude Code 或 Codex、OpenCode、Hermes、OpenClaw 等 Agent，有现成的 CLI 环境，那装起来几乎没有额外成本，值得试一下，交给你的 agent 来配置就可以了。

这三个项目基本上能够覆盖 HTML 内容生成和编辑的完整链路，从结构生成、样式排版，到后期修改和微调，都已经可以在本地完成闭环。

GitHub：https://github.com/gainubi/note-slides

GitHub：https://github.com/nexu-io/html-anything

Clawhub：https://clawhub.ai/wuhaoyupku/html-slide-mender

关注公众号，菜单栏获取开源资料

AI肖睿团队

「AI肖睿团队」由北京大学肖睿老师（北大PH.D博士）作为发起人、领头人。输出技术正确、有独立洞察、有落地价值的内容，用开源模式免费传播。

✅不定期分享北京大学内部研讨资料

✅不定期分享产业级落地方案

✅ 深度解析行业趋势

✅ 随时解答你的AI疑惑

关注我们，和10W+AI从业者一起进阶！