上周五刷 Twitter 的时候看到有人说一个项目刚开源就引爆了。我的第一反应是又一个蹭热度的。点进去看了五分钟我把它加进了每天必开的pnpm dev列表。这个项目叫html-anything来自 nexu-io 团队——就是那个把 open-design 做到 4 万 Star 的团队。历时 3 天、1.5 万行代码开源 四天 就冲破 1700 StarTwitter 上到处都是杀手级神器、世界级设计 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你粘贴内容按下 ⌘EnterAgent 生成的就是可以直接发布的东西——不是我回头再改改的草稿是直接能用的成品。二、75 套 Skills9 种交付物功能层面这个工具的核心是75 套 Skills 模板 × 9 种交付物格式。9 种格式覆盖了日常内容生产的绝大多数场景格式适用场景Magazine Article公众号长文、博客Keynote Deck演示 PPT、汇报Poster宣传海报、活动物料XHS Card小红书图文卡片Tweet CardTwitter/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 CodeCursor AgentCodexGemini CLIGitHub Copilot CLIOpenCodeQwen CoderAider只要你已经claude login或者cursor login启动 html-anything 打开浏览器顶栏就会自动显示你有哪些 Agent 可以用。选一个开干。这个设计逻辑很务实大多数开发者本来就订阅了 Claude 或者 Cursor与其让他们再折腾一个新的 API Key不如直接把这些已有的 session 接上来。省事也降低了心理门槛。四、上手流程5 分钟跑起来本地跑起来非常简单gitclonehttps://github.com/nexu-io/html-anythingcdhtml-anything pnpm install pnpm dev# → http://localhost:3000打开localhost:3000流程就是顶栏自动检测你已登录的 AI CLI比如 Claude Code左侧选择一个 Skill 模板比如杂志文章粘贴你的 Markdown、CSV、JSON、Excel甚至一段随手写的笔记⌘EnterAgent 开始流式生成 HTML右侧沙盒预览实时渲染Tailwind CDN 和 Google Fonts 都能用一键导出到你要的平台导出这块做得挺扎实微信公众号用juice把 CSS 全部内联复制粘贴进编辑器格式不乱Twitter/Xmodern-screenshot渲染成 2× 高清 PNG直接拖进推文知乎自动把公式替换成data-eeimg占位符知乎公式能正确渲染本地保存下载.html单文件或.png截图五、沙盒化预览安全有保障这个细节值得单独说一下。生成的 HTML 在一个隔离的srcdociframe 里运行——独立的 origin与主应用完全隔离。Tailwind CDN、Google Fonts、内联script都能用但 cookies 和 localStorage 被隔离掉了不会污染宿主应用的状态。这意味着你可以在模板里写相对复杂的交互逻辑同时不担心安全问题。加上DOMPurify做了 XSS 防护整体安全模型设计得比较完整。六、它站在哪些巨人肩上项目 README 里有一段我很喜欢的致敬声明列了 4 个有明确贡献的开源项目nexu-io/open-designAgent 检测层和 SKILL.md 协议的来源mdnice/markdown-niceproof that juice-inlined CSS 复制进微信/知乎不需要手动修复gcui-art/markdown-to-imageiframe → 高 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 zustandchild_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-anythingApache-2.0 协议免费使用欢迎 PR。你现在的内容生产流程里格式转换这步占了多少时间评论区聊聊。我是顾北关注我获取更多好玩有趣的开源仓库谢谢你阅读我的文章~我们下期再见