HTML Anything 横空出世：用你已有的 AI Agent，一键生成 75 种风格的 HTML，零 API Key 直接发公众号
HTML Anything 横空出世：用你已有的 AI Agent，一键生成 75 种风格的 HTML，零 API Key 直接发公众号
你有没有发现一个问题：
你用 Claude Code 写代码，用 Cursor 做开发，用 Codex 做自动化，但是每次你想把 AI 生成的内容发到公众号、发到知乎、发到小红书的时候，你还是得手动排版，手动调格式，手动改样式。
Markdown 写的东西，贴到公众号里丑得不行。 贴到知乎里代码块全乱了。 贴到小红书里根本没法看。
你明明有最强的 AI Agent，但是输出格式这一关，还是卡在十年前的水平。
现在，这个问题终于有人解决了。
HTML Anything，来自 nexu-io 团队（就是做 Open Design 的那个团队，40k 星，200+ 贡献者）。
GitHub 地址：https://github.com/nexu-io/html-anything 在线体验：https://open-design.ai/html-anything/
一句话定位：用你已有的 AI Agent，一键生成 75 种风格的 HTML，零 API Key，直接发公众号/知乎/X/小红书。
这个项目的设计哲学太聪明了，我看完整个 README 之后半天没说话。 它没有重新发明轮子，它把已有的轮子全部串了起来，串成了一辆完整的车。
核心理念：Markdown 是草稿，HTML 才是人读的
这个项目的起点是一个非常深刻的洞察。
Anthropic 的 Claude Code 团队公开说过：他们已经不再用 Markdown 写内部文档了，他们直接写 HTML。
为什么？因为：
| Markdown | HTML |
|---|---|
| 对写的人友好 | 对读的人友好 |
| 布局受限于渲染器 | 布局完全由你掌控 |
| 截图发推特里很丑 | 生成的就是一张设计好的图片 |
| 每个平台都要重新排版 | 一键格式转换 |
HTML 才是人类阅读的最终形态。Markdown 只是写作过程中的中间状态。
但是"写 HTML"意味着你要写 CSS、选字体、做栅格、搞响应式——大多数人不会做，设计师懒得做，写作者没耐心做。
HTML Anything 做的事情就是：你按下 ⌘+Enter，你本地的 AI Agent 就把任何输入（Markdown/CSV/Excel/JSON/SQL/纯文本）变成一个可以直接发布的单文件 HTML。然后一键发到公众号、X、知乎、或者下载 HTML/PNG。
"可以直接发布"是它的标准——生成完了，就是你的读者最终看到的样子。不需要"我再调调"的第二轮。
最聪明的设计：不自带 Agent，复用你的
这是整个项目最聪明的地方。
绝大多数 AI 编辑器产品，都要你自己配 API Key，自己管模型，自己付 token 费用。
但是 HTML Anything 完全不这么干。 它不自带任何 Agent。 它检测你机器上已经安装的编码 Agent CLI，直接复用你已经登录的会话。
启动时它会扫描你的 PATH，自动检测以下 9 种 CLI：
| Agent | 检测命令 | 调用方式 |
|---|---|---|
| Claude Code | claude |
claude -p --output-format stream-json |
| OpenAI Codex | codex |
codex exec --json --sandbox workspace-write |
| Cursor Agent | cursor-agent |
cursor-agent --print --output-format stream-json |
| Gemini CLI | gemini |
gemini --output-format stream-json --yolo |
| GitHub Copilot CLI | copilot |
copilot --allow-all-tools --output-format json |
| OpenCode | opencode |
opencode run --format json |
| Qwen Coder | qwen |
qwen --yolo |
| Aider | aider |
aider --no-pretty --yes-always |
| IBM Bob | bob |
bob --output-format stream-json |
你已经用 claude login 登录了？好，直接用。
你已经用 cursor login 登录了？好，直接用。
你已经用 gemini auth 登录了？好，直接用。
零 API Key，零额外费用，零配置。 你的订阅费已经在付了，这个工具只是让你的订阅费发挥更大的价值。
这个设计太聪明了。它不和你竞争，它站在你的工具链上面。
75 种技能模板，9 种内容形态
这是这个项目最核心的资产。
75 个技能模板，覆盖了 9 种内容形态：
1. 网页原型（21 个模板）
SaaS 落地页、定价页、仪表盘、文档页、博客文章、移动端原型、杂志海报、简历、营销邮件、线框图…… 基本上你想要的任何网页形态，都有对应的模板。
2. PPT 演示文稿（20 个模板）
Swiss International（瑞士国际主义风格）、Guizang Editorial（杂志墨色风）、Magazine Web（杂志网页风）、Hermes Cyber（赛博朋克霓虹风）、Replit 风格、小红书粉彩风、产品发布风、投资人 Pitch、技术分享风、蓝图路线图……
每一个都不是换个颜色那么简单，每一个都有完全不同的布局逻辑、字体选择、间距系统、配色方案。
3. 视频帧和 VFX（12 个模板）
液态背景 Hero、NYT 数据图表、便利贴流程图、故障风标题卡、电影光泄漏、macOS 通知、品牌 Logo 结尾、文字光标 VFX、3D 设备模型……
这些帧脚本符合 Hyperframes 规范，可以直接交给 Remotion 渲染成 MP4 视频。
4. 社交媒体卡片（8 个模板）
X/Twitter 引用卡、Spotify Wrapped 风格卡、Reddit 帖子卡、三图轮播卡、小红书图文卡、Twitter 金句卡……
5. 办公文档（14 个模板）
PM 需求文档、团队 OKR、会议纪要、周报、看板、工程 Runbook、财务报告、发票、HR 入职计划、数据报告、实时仪表盘……
每一个模板都是一个独立的文件夹，遵循 Claude Code 的 SKILL.md 规范。 想加新的？复制一个文件夹，改一下 SKILL.md，重启就生效。
六个核心设计理念
README 里总结了六个"承重墙"级别的理念，每一个都非常值得深思。
理念 1：我们不造 Agent，你的够用了
不绑定任何特定模型，不收 API 费用，不维护模型服务。 你的 Agent 是什么，就用什么。 你的订阅费已经付了，这个工具让它发挥更大的价值。
理念 2：技能是文件夹，不是插件
遵循 Claude Code 的 SKILL.md 规范：一个文件夹里放 SKILL.md + assets + references + example.html。 拖进 skills 目录，重启，就能用。 不需要注册，不需要打包，不需要发布到应用商店。
理念 3：硬约束阻止模型自由发挥
每个模板都内置了严格的硬约束：
- CJK 优先字体栈（Noto Sans/Serif SC）
- 8px 基线网格（所有间距都是 8 的倍数）
- 圆角 + 软阴影 + 不用纯黑纯白
- 色彩对比度 ≥ 4.5
- 必须使用用户的真实数据，不用占位文本
这些约束写在 prompt 里面，从源头防止 AI 生成那种千篇一律的"AI 味"页面。
理念 4：流式渲染 = 看 AI 画画
SSE 流式传输，Agent 的 stdout 实时解析成文本增量，追加到 iframe 的 srcdoc 里面。 你看着 HTML 一行一行地渲染出来，就像看 AI 在终端里打字一样。 不喜欢方向？随时中断，重新提示。不用等一整次生成完了才发现跑偏了。
理念 5：一键导出 = 零二次排版
- 微信公众号：juice 内联 CSS，粘贴进编辑器，样式端到端保留
- X/微博/小红书：渲染成 2x PNG，直接粘贴到发布器
- 知乎：LaTeX 公式自动转成图片占位符，上传后自动渲染
- 下载 HTML/PNG：单文件，任何地方都能用
这才是真正的端到端。从内容输入到最终发布，全程零二次排版。
理念 6：沙箱 iframe = 安全隔离
用户生成的 HTML 始终在 <iframe sandbox> 里面渲染。
第三方脚本（Tailwind CDN、Google Fonts）能跑，但是 cookies 和 localStorage 被隔离在 iframe 自己的 origin 里面，不会污染宿主页面。
它的技术栈，非常现代
| 层 | 技术栈 |
|---|---|
| 前端 | Next.js 16 + React 19 + Tailwind v4 + zustand |
| 服务端 | GET /api/agents（检测）+ POST /api/convert（SSE 流式生成） |
| Agent 传输 | child_process.spawn，每个 CLI 一个适配器 |
| 浏览器端处理 | juice（CSS 内联）+ modern-screenshot（PNG 导出）+ xlsx/papaparse（表格解析）+ DOMPurify（XSS 防御） |
| 预览沙箱 | iframe[sandbox] + srcdoc |
| 部署 | 本地 pnpm dev + Vercel 一键部署（Agent 始终在本地） |
整个技术栈非常干净，没有乱七八糟的依赖。 前端是最新版的 Next.js 16 + React 19，后端就是标准的 Node.js API 路由。 Agent 的调用是通过 child_process.spawn 直接启动 CLI 进程，stdin/stdout 通信。
怎么用？30 秒上手
git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm -F @html-anything/next dev
# -> http://localhost:3000打开浏览器，顶栏自动检测你已经登录的编码 Agent CLI，选一个模板，粘贴内容，⌘+Enter。
不需要 API Key。 你已经登录的 Claude/Cursor/Codex/Gemini/Copilot 订阅全都直接用。
就这么简单。
这个项目真正的意义
HTML Anything 的出现，我认为标志着 AI 内容创作工具进入了一个新阶段。
第一阶段：AI 生成 Markdown
你用 ChatGPT 生成一段 Markdown，然后手动复制粘贴到各种平台，手动调格式。 这是 2023-2024 年的主流方式。问题很明显：输出质量取决于你的提示词，排版还是要手动做。
第二阶段：AI 生成设计好的 HTML
你用 Hallmark 这样的工具，让 AI 生成设计好的 HTML 页面。 质量上去了，但是还是孤立的工具，和你的发布流程没有打通。
第三阶段：Agent 原生的内容创作管线
HTML Anything 代表的就是这个阶段。 它不造 Agent，复用你的。 它不造模板格式，复用 Claude Code 的 SKILL.md 规范。 它不造发布平台，直接对接公众号/知乎/X/小红书。
它做的事情就是把这些已有的东西串起来，串成一条完整的管线： 内容输入 → Agent 生成 HTML → 流式预览 → 一键发布
每个环节都不是它发明的，但是把它们串起来的这件事，是它做的。
这才是真正的工程思维： 不重复发明轮子，而是把已有的轮子组装成一辆车。
写在最后
如果你经常需要把 AI 生成的内容发布到各种平台——写公众号、发知乎、发小红书、做 PPT、做海报——那么 HTML Anything 就是为你的工作流量身定做的工具。
75 个模板，9 种内容形态，9 种编码 Agent CLI，一键导出到所有主流平台。 零 API Key，本地优先，开源免费。
这就是 AI 内容创作工具应该有的样子。
非常推荐所有人去 clone 下来试一试。 你会感受到那种"从内容到发布，全程零摩擦"的爽快感。
作者: itech001 来源: 公众号：AI人工智能时代 网站: https://www.theaiera.cn/ 每日分享最前沿的AI新闻资讯和技术研究。
本文首发于 AI人工智能时代，转载请注明出处。
