nexu-io/html-anything · 上手攻略

  • 仓库：nexu-io/html-anything
  • 链接：https://github.com/nexu-io/html-anything
  • 分类：ai
  • 作者：Tom
  • 更新：2026-07-11

这是什么

html-anything 是一个本地优先的 Agent 式 HTML 编辑器，核心理念是"Markdown 是草稿，HTML 才是给读者看的最终成品"。它让本地 AI coding agent（Claude Code、Cursor Agent、Codex 等）直接生成可直接发布的单文件 HTML，无需人工介入排版。

与其让 AI 输出 Markdown 再手动转 HTML，不如一开始就让 AI 按预设的 75 套 skill 模板生成精排版的 HTML，一键发布到微信公众号、Twitter/X、知乎或下载为 .html / .png。零 API Key，零订阅费，边际成本为零。

底层依赖 nexu-io/open-design（40k★ 的 agent 设计 system），由同一团队维护。

解决什么问题

  1. Markdown 输出丑：截图发 Twitter/小红书效果差，粘贴到微信公众号要重新排版
  2. HTML 门槛高：手写 CSS + 响应式对非设计师太难
  3. 发布流程割裂：写 → 排版 → 截图 → 发布，每个环节都要人工介入
  4. API Key 成本：用 GPT-4 / Claude API 生成 HTML 每次都要花钱

html-anything 的解法：本地 agent 写 HTML → skill 模板保证设计质量 → 一键发布到目标平台，全链路零人工、零额外费用。

快速安装

前置要求

  • Node.js（GUI 启动建议 v18+，CLI 工具推荐 v20+）
  • pnpm（包管理器）
  • 至少一个本地 coding agent CLI 已安装并登录（见支持的 Agent 列表）
  • Docker Desktop（可选，用于沙箱预览）

安装步骤

# 1. 克隆仓库
git clone https://github.com/nexu-io/html-anything.git
cd html-anything

# 2. 安装依赖
pnpm install

# 3. 启动开发服务器
pnpm -F @html-anything/next dev

启动后访问 http://localhost:3000 即可看到主界面。

支持的本地 Agent CLI（PATH 自动识别）

Agent 最低版本要求
Claude Code 最新版
Cursor Agent 最新版
OpenAI Codex 最新版
Gemini CLI 最新版
GitHub Copilot CLI 最新版
OpenCode 最新版
Qwen Coder 最新版
Aider 最新版
IBM Bob 最新版

启动时自动扫描 PATH（含 ~/.local/bin、~/.bun/bin、/opt/homebrew/bin 等 GUI 进程常漏的目录），无需手动配置。若未检测到，可在顶栏手动切换。

Vercel 部署（Web 层）

# 安装 Vercel CLI
npm i -g vercel

# 部署
vercel --prod

注意：agent 进程始终运行在本地，Vercel 只承载 web UI 层。

核心用法

1. 选择输出场景（Surface）

界面中间面板展示 9 大输出场景：

  • magazine — 杂志文章
  • deck — Keynote / PPT 演示文稿（20+ 套 skill）
  • doc — 文档 / 长文报告
  • poster — 海报 / 长图
  • xhs — 小红书图文卡
  • tweet — Twitter/X 分享卡
  • prototype — Web 原型 / SaaS landing / Dashboard
  • report — 数据报告
  • frame — Hyperframes 视频帧脚本

2. 选 skill 模板

75 套 skill 模板按场景 × 用途二维组织，可搜索筛选。

推荐上手模板（Featured 前 3）：

模板名 场景 适合
deck-guizang-editorial deck 文艺风 PPT，10 套版面 × 5 套配色
deck-swiss-international deck 瑞士国际主义冷感 PPT，22 套锁死版面
doc-kami-parchment doc 羊皮纸暖调长文报告，比纯白 markdown 舒适得多

3. 输入内容

左侧编辑器支持直接粘贴或输入：

  • Markdown（主力格式）
  • CSV / TSV（papaparse 浏览器端解析）
  • Excel（xlsx 解析）
  • JSON / SQL
  • 纯文本

全部解析在浏览器端完成，不上传任何数据。

4. 生成 HTML（⌘+Enter）

按 ⌘+Enter（macOS）或 Ctrl+Enter（Windows/Linux），本地 agent 读取 skill 模板和设计 system，开始流式生成 HTML。右侧 iframe 实时预览，生成过程可见可控。

流式机制：POST /api/convert 走 Server-Sent Events（SSE），agent stdout 的 JSON-line 逐行解析，文本 delta 直接 append 进 iframe srcdoc，等待体验≈看 AI 现场写代码。

5. 一键发布

生成完成后，顶部导出按钮支持：

目标 实现方式
微信公众号 juice 内联 CSS → 复制粘贴 0 排版
Twitter/X / 微博 / 小红书 modern-screenshot 渲染 2× PNG → 写入 ClipboardItem
知乎 公式 <mjx-container> → data-eeimg 占位，知乎自动渲染
单独下载 .html 单文件 / .png 高分辨率图

典型适用场景

  • 技术博主：写完 Markdown 文章，一键生成精排版 HTML，直接复制到微信公众号
  • AI 工具开发者：用 agent 生成产品介绍页、数据报告，一键截图发 Twitter
  • 内容创作者：批量生成小红书图文卡，无需设计基础
  • 研究员：生成数据报告网页，直接嵌入论文或网站
  • 产品经理 / 设计师：快速做 PPT 原型，不需要 Figma

坑与注意

  1. Agent 必须已登录：工具依赖本地 CLI 的已有 session，未登录会报错。需要本地安装对应 agent 并完成认证。

  2. Docker 预览可选：沙箱 iframe 预览依赖 <iframe sandbox="allow-scripts allow-same-origin">，若 Agent 生成的 HTML 含恶意脚本会被隔离拦截，但日常使用中不需要 Docker。

  3. 中文排版依赖模板质量：CKJ（CJK + 韩文 + 日文）字体栈和 8px 基线网格约束写死在 skill 的 SKILL.md 中，使用非推荐模板时需注意检查字体渲染。

  4. 复杂 CSS 可能失效：沙箱安全策略会拦截跨域 cookie/localStorage，涉及这类功能的 HTML 建议导出为 .png 而不是直接 iframe 预览。

  5. Skill 模板需要 AI agent 执行：工具本身只是框架 + 模板，真正的 HTML 生成靠本地 agent。Agent 质量直接影响输出效果，Claude Code > 其他 agent（主观评测）。

  6. 发布到微信公众号需手动粘贴：导出按钮生成的是剪贴板内容，需要手动在公众号后台粘贴，不支持 API 直推。

与同类对比

工具 核心定位 API Key 设计质量 发布直达
html-anything 本地 agent 生成精排版 HTML 零（复用自己的订阅） 75 套模板，开箱即用 公众号/Twitter/知乎一键
markdown-nice Markdown → 公众号样式 零 需手动选主题 公众号直接复制
mdx-hero / react-email 开发者用代码写邮件/Html 零 完全自定义 需自行部署
Notion + Export HTML 笔记转 HTML 零 一般 无直达发布
Vercel + AI SDK 开发者自己搭 AI 生成管线 需 API Key 完全自定义 需自己写发布逻辑

html-anything 的独特价值在于零 API Key + 零排版 + 一键发布的三合一，专注解决"AI 生成了内容但还要人工排版发布"的最后一公里问题。

一句话推荐结论

如果你用 Claude Code / Cursor这类本地 coding agent，又经常需要把 AI 生成的内容发布到公众号/Twitter/知乎，html-anything 把这条链路缩到最短——零额外费用，零排版时间，一键交付可发布状态的 HTML。