写完一篇文章，排版比写正文还花时间。调字体、调行距、调配色、截长图、发现知乎公式渲染不了、微信粘贴后格式全乱了……如果你经历过这些，那 html-anything 就是为你准备的。它做的事情很简单：你只管写内容，AI 帮你生成排版好的 HTML 网页，一键发到任何平台。
不需要懂 CSS，不需要打开 Figma，不需要注册新账号。你用 Claude Code、Cursor、Codex 或者其他什么 AI 编码工具，它直接复用你现有的登录状态。免费。
html-anything 解决的正是这个问题
先说清楚 html-anything 是什么：
一个开源的 AI HTML 编辑器。你给它内容（Markdown、CSV、JSON、SQL 都行），它调用你本地已安装的 AI 编码代理，生成一份排版精美的单文件 HTML，然后一键导出到微信、X、知乎等平台。
项目地址：github.com/nexu-io/html-anything
它背后是 nexu-io 团队——和 open-design（GitHub 40,000+ stars） 同一个团队。项目 2026 年 5 月 15 日上线，Apache-2.0 开源协议。
核心理念来自 Anthropic Claude Code 团队的一个判断：Markdown 是草稿，HTML 才是给人类阅读的最终格式。html-anything 把这个理念做成了产品。
准备工作：你需要什么
上手 html-anything 只需要两样东西：
1. Node.js 环境
需要 Node.js 18+ 和 pnpm。如果你已经有 Node.js，装 pnpm 只需一条命令：
npm install -g pnpm2. 一个 AI 编码代理
html-thing 不自带 AI 模型，而是复用你电脑上已经安装的编码工具。它支持 8 种：
| 编码代理 | 你需要已安装的命令 |
|---|---|
| Claude Code | claude |
| OpenAI Codex | codex |
| Cursor Agent | cursor-agent |
| Gemini CLI | gemini |
| GitHub Copilot CLI | copilot |
| OpenCode | opencode 或 opencode-cli |
| Qwen Coder | qwen |
| Aider | aider |
只要你有以上任意一个并且已经登录，就能用 html-anything。 不需要额外付费，不需要注册新账号，不需要申请 API Key。
5 分钟上手指南
第 1 步：克隆仓库
git clone https://github.com/nexu-io/html-anything
cd html-anything第 2 步：安装依赖
pnpm install第 3 步：启动服务
pnpm -F @html-anything/next dev打开浏览器访问 http://localhost:3000。
第 4 步：选择模板、粘贴内容、生成
界面分四块区域：
- 顶部：显示你电脑上检测到的 AI 编码代理，可以切换
- 左侧：内容编辑区，粘贴你的 Markdown、CSV 或 JSON
- 中间：模板选择器，75 种模板按类型分类
- 右侧：实时预览窗口
操作流程就是三步：选模板 → 粘贴内容 → 按 Ctrl+Enter（Mac 是 ⌘+Enter）。
AI 会开始实时生成 HTML，你能看到页面从上到下一点一点渲染出来。不满意？随时中断、改提示词、重新生成。
第 5 步：导出
生成满意后，点击导出按钮，选择目标平台：
- 微信公众号：直接粘贴，格式不丢失
- X / 微博 / 小红书：自动生成高清图片到剪贴板，粘贴即发
- 知乎：公式自动转换，上传后正常渲染
- 下载 HTML：单文件，浏览器打开即可
- 下载 PNG：高分辨率截图
75 种模板怎么选：按场景推荐
html-anything 的 75 种模板覆盖 9 种内容形式。以下是按使用场景的推荐：
你要写公众号文章 / 技术博客
article-magazine：长篇杂志风格，适合深度文章blog-post：博客排版，简洁大方doc-kami-parchment：暖色羊皮纸风格，阅读体验舒适，灵感来自 tw93/kami
你要做 PPT / 演示文稿
deck-swiss-international：瑞士国际主义风格，16 列网格，Klein Blue 强调色，一看就是"设计师做的"deck-guizang-editorial：杂志墨韵风格，灵感来自 op7418/guizang-ppt-skilldeck-xhs-pastel：小红书柔和色调风格deck-tech-sharing：技术分享专用
你要发小红书 / 推特
card-xiaohongshu：小红书图文卡片social-x-post-card：X/Twitter 引用卡片（1600×900）social-spotify-card：Spotify Wrapped 风格卡片social-carousel：三图轮播卡片（1080×1080）
你要做产品原型 / 落地页
saas-landing：SaaS 产品落地页dashboard：管理后台仪表盘mobile-app：手机 App 原型（带 iPhone 15 Pro 外壳）wireframe-sketch：手绘风格线框图
你要做简历 / 海报
resume-modern：简约现代简历（A4 尺寸）magazine-poster：杂志风格海报（1080×1920）poster-hero：营销海报
你要做数据报告
data-report：把 CSV/Excel 自动转成可视化数据报告finance-report：财务摘要报告live-dashboard：实时数据仪表盘
你要做短视频素材
video-hyperframes：Hyperframes 视频帧脚本，可直接交给 Remotion 渲染成 mp4frame-glitch-title：赛博朋克故障风格标题帧vfx-text-cursor：打字机光标特效
你要做办公文档
pm-spec：产品需求文档eng-runbook：工程师故障处理手册kanban-board：看板快照invoice：发票meeting-notes：会议纪要weekly-update：周报team-okrs：OKR 评分表
导出篇：怎么发到微信、小红书、知乎
不同平台的导出方式各有不同，但操作都是一键完成的：
发微信公众号
html-anything 用了一个叫 juice 的库，把所有 CSS 样式内联到 HTML 标签里。你在 html-anything 里点"导出到微信"，然后把内容粘贴到微信公众号编辑器，格式完全保留，不需要二次调整。
原理：微信公众号编辑器会丢弃 <style> 标签里的样式，但不影响写在 style="" 属性里的内联样式。juice 就是做这个转换的。
发 X / 微博 / 小红书
这三个平台发图片最方便。html-anything 用 modern-screenshot 把预览区截图成 2 倍分辨率的高清 PNG，然后存到系统剪贴板。你在 X 或微博的发布框里直接 Ctrl+V 粘贴就行。
发知乎
知乎和微信类似，但多了一步：数学公式处理。知乎不支持 KaTeX 实时渲染，所以 html-anything 会自动把 <mjx-container> 格式的公式替换成 data-eeimg 图片占位符，上传后知乎会自动渲染。
下载独立 HTML 文件
导出的 HTML 是单文件，所有样式和资源都内联在里面。用浏览器打开就能看，发给别人也能直接看。不依赖网络，不依赖任何服务器。
常见问题
需要付费吗？
不需要。 html-anything 本身是开源免费的（Apache-2.0）。它不自带 AI，而是复用你已经安装的编码代理。你用 Claude Code 就是 Claude Code 的费用，用 Cursor 就是 Cursor 的费用，没有额外开销。
支持哪些 AI 工具？
8 种：Claude Code、OpenAI Codex、Cursor Agent、Gemini CLI、GitHub Copilot CLI、OpenCode、Qwen Coder、Aider。启动时自动扫描你电脑上的 PATH，找到哪个就用哪个。
中文排版好不好？
好。 每个模板都内置了 CJK 优先的字体栈：中文用 Noto Sans/Serif SC，英文用 Inter/Manrope。行距、字号都按照 8px 基线网格对齐，对比度不低于 4.5:1。
和 Claude Design 比怎么样？
核心区别：html-anything 是本地运行、开源、免费的，不绑定任何特定 AI 服务商。Claude Design 是 Anthropic 的付费产品，$20/月的 Pro 计划有独立的使用配额。
有 PCWorld 记者报道，在 Pro 计划下大约 25 分钟就用掉了 80% 的周配额。
html-anything 没有这个限制——你的 AI 编码工具能用多少，它就能用多少。
但 html-anything 项目上线时间很短（2026 年 5 月 15 日），成熟度和开箱即用体验不如 Claude Design。如果你追求稳定、不差钱，Claude Design 是更省心的选择。如果你愿意折腾、想要免费和灵活性，html-anything 值得试。
数据安全吗？
html-thing 完全在本地运行。你的内容不会被上传到 html-anything 的服务器（因为它没有服务器）。内容会发送给你选择的 AI 编码代理——如果你用 Claude Code，就受 Anthropic 的数据政策约束；如果你用 Codex，就受 OpenAI 的数据政策约束。
能部署到服务器上吗？
可以。Web 前端可以一键部署到 Vercel，但 AI 编码代理始终在你本地运行。这意味着你需要本地开着服务，远程通过 Vercel 的 Web 界面来操作。
适合你吗？
适合这些人：
- 经常写公众号文章、技术博客，厌倦了手动排版的人
- 需要快速生成 PPT、海报、小红书卡片的内容创作者
- 想要 AI 帮忙做产品原型、数据报告的产品经理
- 已经在用 Claude Code / Cursor / Codex 等编码工具，想顺便用来做内容的设计师
可能不太适合：
- 完全不想碰命令行的人（需要
git clone+pnpm install） - 追求开箱即用、不想折腾的人（项目太新，偶尔会遇到 bug）
- 不需要中文排版、不需要导出到中国社交平台的人（部分模板优势在海外平台体现不明显）
参考资料：
项目地址：github.com/nexu-io/html-anything
Discord 社区：discord.gg/keeVPMrueT
