上周五刷 Twitter 的时候，看到有人说一个项目刚开源就引爆了。我的第一反应是：又一个蹭热度的。

点进去看了五分钟，我把它加进了每天必开的 pnpm dev 列表。

这个项目叫 html-anything，来自 nexu-io 团队——就是那个把 open-design 做到 4 万 Star 的团队。历时 3 天、1.5 万行代码，开源 四天 就冲破 1700+ Star，Twitter 上到处都是"杀手级神器"、"世界级设计 HTML"。

我不太爱堆溢美之词。但这次，我觉得夸得有点道理。

---

一、它在解决一个真实的问题

先说说这个项目的核心判断，我觉得这比功能列表更重要。

项目 README 第一句话是这样写的：

Markdown is the draft. HTML is what humans read. Your local agent writes it.

翻译过来就是：Markdown 是草稿，HTML 才是人类真正阅读的格式，而写 HTML 的活，应该交给你的 AI Agent。

这个判断在 Agentic 时代成立吗？我觉得非常成立。

想想你现在的内容生产流程：在 Obsidian 或者 Notion 里写 Markdown → 导出 → 复制到公众号编辑器 → 手动调格式 → 发小红书还要截图 → 发知乎又要重排版……

每一步都在做人肉格式转换，这件事本身毫无创造力可言。

html-anything 的思路是：既然 AI Agent 已经能写代码，为什么不直接让它输出发布级的 HTML？ 你粘贴内容，按下 ⌘+Enter，Agent 生成的就是可以直接发布的东西——不是"我回头再改改"的草稿，是直接能用的成品。

---

二、75 套 Skills，9 种交付物

功能层面，这个工具的核心是 75 套 Skills 模板 × 9 种交付物格式。

9 种格式覆盖了日常内容生产的绝大多数场景：

格式	适用场景
Magazine Article	公众号长文、博客
Keynote Deck	演示 PPT、汇报
Poster	宣传海报、活动物料
XHS Card	小红书图文卡片
Tweet Card	Twitter/X 推文配图
Résumé	个人简历
Web Prototype	网页原型、落地页
Data Report	数据分析报告
Hyperframes	类视频 HTML 动态展示

75 套 Skills 模板是真正的差异化所在。每个 Skill 背后都有一套 SKILL.md 硬约束——CJK 优先字体栈、8px 基准格栅、对比度 ≥ 4.5、必须使用真实数据……这些约束让 AI 生成的 HTML 不是随机的"AI 审美"，而是有设计规范约束的可用成品。

用作者的话说："Ship-ready is the bar."——生成完就是能发布的，不是"还需要打磨一下"的状态。

---

三、零 API Key，这个设计很聪明

很多 AI 工具的使用门槛就卡在"需要 API Key"这一步。

html-anything 的方案是：直接复用你已经登录的 CLI Session，不需要额外申请任何密钥。

它支持 8 种 AI 编码 CLI，自动检测 PATH 里有什么：

• Claude Code

• Cursor Agent

• Codex

• Gemini CLI

• GitHub Copilot CLI

• OpenCode

• Qwen Coder

• Aider

只要你已经 claude login 或者 cursor login，启动 html-anything 打开浏览器，顶栏就会自动显示你有哪些 Agent 可以用。选一个，开干。

这个设计逻辑很务实：大多数开发者本来就订阅了 Claude 或者 Cursor，与其让他们再折腾一个新的 API Key，不如直接把这些已有的 session 接上来。省事，也降低了心理门槛。

---

四、上手流程，5 分钟跑起来

本地跑起来非常简单：

git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm dev
# → http://localhost:3000

打开 localhost:3000，流程就是：

1. 顶栏自动检测你已登录的 AI CLI（比如 Claude Code）

2. 左侧选择一个 Skill 模板（比如"杂志文章"）

3. 粘贴你的 Markdown、CSV、JSON、Excel，甚至一段随手写的笔记

4. ⌘+Enter，Agent 开始流式生成 HTML

5. 右侧沙盒预览实时渲染，Tailwind CDN 和 Google Fonts 都能用

6. 一键导出到你要的平台

导出这块做得挺扎实：

• 微信公众号：用 juice 把 CSS 全部内联，复制粘贴进编辑器格式不乱

• Twitter/X：modern-screenshot 渲染成 2× 高清 PNG，直接拖进推文

• 知乎：自动把公式替换成 data-eeimg 占位符，知乎公式能正确渲染

• 本地保存：下载 .html 单文件或 .png 截图

---

五、沙盒化预览，安全有保障

这个细节值得单独说一下。

生成的 HTML 在一个隔离的 srcdoc iframe 里运行——独立的 origin，与主应用完全隔离。Tailwind CDN、Google Fonts、内联 <script> 都能用，但 cookies 和 localStorage 被隔离掉了，不会污染宿主应用的状态。

这意味着你可以在模板里写相对复杂的交互逻辑，同时不担心安全问题。加上 DOMPurify 做了 XSS 防护，整体安全模型设计得比较完整。

---

六、它站在哪些巨人肩上

项目 README 里有一段我很喜欢的致敬声明，列了 4 个有明确贡献的开源项目：

• nexu-io/open-design：Agent 检测层和 SKILL.md 协议的来源

• mdnice/markdown-nice：proof that juice-inlined CSS 复制进微信/知乎不需要手动修复

• gcui-art/markdown-to-image：iframe → 高 DPI PNG 导出路径

• alchaincyf/huashu-md-html：反 AI 风格约束（CJK 字体栈、8px 格栅、对比度要求）

这种透明度在开源社区很少见。不是"感谢所有开源项目"的泛泛之词，是具体说了哪个项目贡献了哪一层能力。

---

七、我的真实看法

说一些不那么全是好话的部分。

项目刚开源 4 天，README 里自己也写了"Early but real"——是早期阶段，有些功能还在每天迭代。我跑起来的时候，某些 Skill 模板生成结果不够稳定，偶尔需要重跑一次。

但核心的闭环——检测 Agent → 选 Skill → SSE 流式生成 → 沙盒预览 → 一键导出——是完整跑通的，而且对 8 种 CLI 都测试过。

更重要的是，这个方向判断我觉得很准：在 Agentic 时代，内容生产的瓶颈正在从"怎么写"转移到"怎么呈现"。Markdown 够用了，但 HTML 才是读者看到的样子。现在 AI 已经能写出好 HTML，工具链终于跟上了这个判断。

html-anything 不是一个 demo，是一个认真做过架构设计、有完整技术栈的产品（Next.js 16 + React 19 + Turbopack + zustand，child_process.spawn 接入各 Agent CLI）。后续迭代速度应该会很快——毕竟 open-design 40k Star 的团队在后面。

┌─────────────────────── Browser (Next.js 16) ──────────────────────┐
│  Editor / 上传 · 顶栏 agent picker · 模板 picker · iframe 预览       │
└─────────────┬──────────────────────────────────┬──────────────────┘
              │ ⌘+Enter                            │
              ▼                                    ▼
     ┌─────────────────────┐            ┌──────────────────────┐
     │  GET /api/agents    │            │  POST /api/convert   │
     │  扫 PATH 检测 CLI    │            │  SSE 流式调用 agent   │
     └─────────────────────┘            └──────────┬───────────┘
                                                   │ spawn + stdin pipe
                                                   ▼
                                ┌────────────────────────────────────┐
                                │  你本地的 code agent                │
                                │  claude / codex / cursor-agent /   │
                                │  gemini / copilot / opencode /     │
                                │  qwen / aider                      │
                                │  → 复用你已登录的 session           │
                                └────────────────────────────────────┘
                                                   │
                                                   ▼
                                stdout JSON-line ──► SSE event
                                                   │
                                                   ▼
                              iframe srcdoc append（实时刷新）
                                                   │
                              ⌘+C 复制 → ClipboardItem
                              ⌘+S 下载 → .html / .png

---

最后

如果你每周都在重复"写内容 → 格式转换 → 平台适配"这个循环，html-anything 值得花 5 分钟跑一下试试。

开源地址：https://github.com/nexu-io/html-anything

Apache-2.0 协议，免费使用，欢迎 PR。

---

你现在的内容生产流程里，格式转换这步占了多少时间？评论区聊聊。

我是顾北，关注我，获取更多好玩有趣的开源仓库！

谢谢你阅读我的文章~

我们下期再见！