html-anything 调研：75 套 Skill 模板 + 8 个 Agent CLI 自动识别，让 AI 直接输出可发布 HTML

这不是又一个“Markdown 转 HTML”工具，而是把内容创作、演示、社交卡片、数据报告、视频分镜全部封装成可执行 Skill，让本地 AI Agent 直接写出可以发给读者、粘贴到公众号 / 小红书 / 知乎的成品 HTML。

写在前面

过去 AI 生成内容的工作流是：Markdown → 截图 → 手动调格式 → 多平台重新排版。每一步都在损耗信息，而且“我之后再调整”往往永远不会发生。

Anthropic 的 Claude Code 团队做了一个标志性选择：停用 Markdown 写内部文档，直接输出 HTML。理由是：Markdown 是给作者写的，HTML 才是给读者看的。

html-anything 把这个理念落地成了一个开源产品：你只管给内容，本地 AI Agent 负责把内容变成设计级的 HTML，然后一键发到微信、X、知乎，或导出 PNG。

一、它解决什么问题

一句话卖点：把 AI Agent 变成你的专属排版师，输入原始内容，输出可直接发布的 HTML，零 API Key 成本。

二、能力全景：9 种交付面 × 75 个 Skill 模板

项目把输出分成 9 大表面，每个表面下有多个 Skill 模板：

每个 Skill 都是一个独立文件夹，包含：
–
SKILL.md：遵循 Claude Code Skill 规范，带扩展 frontmatter（mode / scenario / surface / preview / design_system）
–
example.html：可直接打开查看效果，无需登录或配置

三、核心卖点

1. 8 个 Agent CLI 自动识别，零 API Key

启动时扫描 PATH，自动检测已安装的 AI 编码 Agent：
Claude Code / Cursor Agent / Codex / Gemini CLI / GitHub Copilot CLI / OpenCode / Qwen Coder / Aider。

复用你已经在终端登录的会话（claude login / cursor login / gemini auth），无需额外配置 API Key，边际成本为 $0。

2. 75 个 Skill 模板，覆盖 9 大场景

不是“一个万能模板”，而是按场景精选：
–
文档类：羊皮纸风格文档、杂志文章、数字指南
–
演示类：瑞士国际风格 PPT、编辑类 PPT、产品发布会 PPT、小红书粉彩 deck 等 20 种
–
视频类：Hyperframes 视频分镜、故障风标题帧、电影光漏效果、3D 设备框
–
社交类：小红书卡片、X/Twitter 引用卡、Spotify 风格卡片
–
办公类：PM 需求文档、团队 OKR、会议纪要、财务报表、简历、发票
–
原型类：SaaS 落地页、仪表盘、移动应用原型、线框图
–
数据类：NYT 风格数据图表、报表
–
特效类：光标打字 VFX、Logo outro、故障风标题

3. 一键导出 9 种格式

• 微信公众号：juice 内联 CSS，粘贴即用，无需二次排版
• X / 微博 / 小红书：modern-screenshot 渲染 2x PNG，直接复制到剪贴板
• 知乎：LaTeX 公式自动转图片占位，粘贴后知乎渲染器自动处理
• HTML / PNG 下载：standalone 文件，可本地打开或部署

4. 实时流式渲染

Agent 输出通过 SSE 实时注入 iframe srcdoc，你看着页面逐行渲染，不喜欢可以随时中断重来，不会浪费一次完整生成。

5. 沙箱预览

<iframe sandbox> 隔离用户生成的 HTML，Tailwind CDN / Google Fonts / inline scripts 都能跑，但 cookies 和 localStorage 与主机隔离。

6. 多格式输入自动识别

支持 Markdown / CSV / TSV / JSON / SQL / 纯文本，papaparse + xlsx 在浏览器端解析表格数据，不上传服务器。

四、同类对比：HTML 生成工具里的位置

结论：html-anything 不是又一个静态站点生成器，也不是又一个 Markdown 渲染器，而是 把“内容到 HTML”的最后一公里彻底封装成了可复用的 Skill 模板，让任何本地 AI Agent 都能写出设计级的 HTML。

五、实战：30 秒跑起来

Step 1：克隆仓库

git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install

Step 2：启动开发服务器

pnpm -F @html-anything/next dev
# → http://localhost:3000

Step 3：选模板，生成内容

1. 打开浏览器，顶部栏自动显示已安装的 Agent CLI
2. 左侧编辑器粘贴内容（Markdown / CSV / JSON / 纯文本）
3. 中间选择 Skill 模板（如 deck-swiss-international、article-magazine）
4. 按 ⌘+Enter，Agent 自动生成 HTML，右侧实时预览
5. 不满意随时中断重来

Step 4：导出发布

• 微信公众号：点击 WeChat 导出，juice 内联 CSS，粘贴到公众号编辑器
• X / 小红书：点击导出 PNG，2x 高清图直接复制到剪贴板
• 知乎：点击导出，LaTeX 公式自动处理
• 本地：下载 standalone .html 或 .png

六、风险与坑

1. 本地 Agent 依赖：核心能力依赖本地已安装的 Claude Code / Cursor Agent 等 CLI，没有这些 Agent 就无法运行生成能力
2. Next.js + pnpm 生态：技术栈是 Next.js + Tailwind，需要 Node.js 18+ 和 pnpm，不是纯静态页面
3. 模板设计约束严格：75 个 Skill 模板内置了严格的设计规范（CJK 字体、8px 基线栅格、对比度 ≥4.5、禁止占位文本），AI 生成自由度受限但质量更高
4. 社区规模尚浅：虽然背靠 open-design 40k+ stars 团队，但 html-anything 本身刚开源 1 个月，issues 53 个，生态还在早期
5. 平台适配有限：主要优化了微信公众号、X、知乎三家，其他平台需要手动调整
6. 15 MB 仓库：包含大量模板和截图，克隆和安装较慢

七、总结

html-anything 最值得关注的三個理由：

1. 把 HTML 生成变成了 Skill 模板市场：75 个模板覆盖文章、PPT、海报、简历、社交卡、视频分镜，不是“一个工具”，是一个可组合的 HTML 工厂
2. 零 API Key，复用本地 Agent 会话：不额外收费，用你已经在用的 Claude Code / Cursor / Codex 等订阅
3. 一键导出到主流平台：微信公众号 / X / 小红书 / 知乎 / PNG，解决“生成后还要手动排版”的最后一公里问题

一句话：如果你已经在用 AI Agent 写内容，html-anything 是目前最值得试的“AI 代排 HTML”方案——它不改变你的写作习惯，但把输出从 Markdown 草稿升级成了可直接发布的成品页面。

参考

• nexu-io/html-anything
• open-design（同团队前作，40k+ stars）
• 腾讯云：html-anything 开源！让你感受 Claude Code 作者提到的 HTML 效果
• 腾讯云：html-anything: 让 AI Agent 直接生成可发布的 HTML
• CSDN：html-anything 仓库全面介绍