HTML Anything：让本地 AI Agent 直接生成可发布 HTML

一句话定位

HTML Anything 是一个本地优先的 Agentic HTML 编辑器：把 Markdown、表格、草稿、数据等输入交给你本机已登录的 AI coding agent，生成可以直接发布的单文件 HTML 或 PNG。

项目地址：https://github.com/nexu-io/html-anything
官网演示：https://open-design.ai/html-anything/

基础信息卡片

解决什么问题

Markdown 很适合写草稿，但不一定适合直接给读者看。

尤其是当内容要发到公众号、知乎、X、小红书，或者要变成数据报告、长图、PPT、海报时，Markdown 往往只是第一步。后面还要处理排版、字体、间距、截图、平台粘贴兼容等问题。

HTML Anything 的判断很直接：如果最终给人看的形态是 HTML 或图片，那就让 AI agent 直接生成最终成品，而不是让用户继续手工调样式。

它把原来的流程：

写 Markdown → 手工排版 → 调 CSS → 截图 / 粘贴平台 → 反复修格式

变成：

输入内容 → 选择模板 → 本地 agent 生成 HTML → 预览 → 复制或导出

核心功能

1. 自动识别本地 AI Agent

HTML Anything 不要求你再配置一个新的 API Key。它会扫描本机 PATH，识别已经安装并登录过的 coding-agent CLI。

支持的工具包括 Claude Code、Cursor Agent、OpenAI Codex、Gemini CLI、GitHub Copilot CLI、OpenCode、Qwen Coder 和 Aider。

只要你已经在终端里登录过这些工具，HTML Anything 就可以复用已有 session，把本地 agent 当成生成 HTML 的执行引擎。

2. 用 Skill 模板控制输出质量

项目内置了 75 套 Skill 模板，覆盖文档、PPT、海报、社交卡片、Web 原型、数据报告、Hyperframes 视频帧等场景。

这些 Skill 不是简单的主题皮肤，而是带有明确设计约束的模板。比如字体栈、8px 基线网格、颜色对比、圆角、阴影、真实数据使用等规则都会写进模板约束里，减少 AI 随意发挥带来的粗糙感。

3. 支持多种内容形态

除了普通文章，HTML Anything 更像一个“内容成品生成器”。它可以把输入转成不同交付形态：

• 杂志风文章
• Keynote / PPT
• 简历
• 海报
• 小红书卡片
• X / Tweet 卡片
• Web 原型
• 数据报告
• Hyperframes / Remotion 视频帧

这类模板的价值在于：同一份内容不再只是一段 Markdown，而是可以根据发布场景变成不同的视觉成品。

4. 流式生成和沙箱预览

它的生成流程走 SSE 流式返回。agent 输出的 HTML 会不断追加到前端 iframe 里，用户可以实时看到页面长出来。

整体结构可以理解为：

  flowchart TD
    A[用户输入 Markdown / CSV / Excel / JSON / 草稿] --> B[选择本地 Agent]
    B --> C[选择 Skill 模板]
    C --> D[POST /api/convert]
    D --> E[本地 CLI Agent 生成 HTML]
    E --> F[SSE 流式返回]
    F --> G[Sandbox iframe 实时预览]
    G --> H[复制到平台或导出 HTML / PNG]

预览放在 sandbox iframe 中，既能隔离生成内容，又能让用户在浏览器里直接确认最终效果。

5. 一键导出到发布平台

生成后的 HTML 可以继续导出或复制到不同平台：

• 微信公众号：内联 CSS 后粘贴，减少样式丢失
• 知乎：适配富文本和公式场景
• X / 微博 / 小红书：把预览区域导出成高 DPI PNG
• 本地文件：下载单文件 .html 或 .png

这一步让它不只是“生成页面”，而是更接近一个面向发布的工作台。

适合谁

HTML Anything 比较适合这些人：

• 经常把 Markdown 文章发到公众号、知乎、社交平台的人
• 希望快速生成长图、海报、PPT、数据报告的内容创作者
• 已经在使用 Claude Code、Cursor、Codex 等本地 AI coding agent 的开发者
• 想把内容生产从“写完再排版”变成“直接生成可交付成品”的团队
• 想研究 agentic editor、AI design workflow、Skill 模板机制的开发者

快速上手

git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm -F @html-anything/next dev

启动后打开：

http://localhost:3000

基本使用流程：

1. 顶栏选择本机识别到的 AI agent
2. 选择一个 Skill 模板
3. 粘贴 Markdown、表格、JSON、SQL 或草稿
4. 按 ⌘ + Enter
5. 在 iframe 中预览生成结果
6. 复制到平台，或导出 .html / .png

结论

HTML Anything 的重点不是“又一个 HTML 编辑器”，而是把本地 AI agent、设计模板和平台导出串成了一条内容交付链路。

它适合解决一个很具体的问题：内容已经有了，但不想再花时间手工排版、截图、适配平台。

如果你本来就在用 Claude Code、Cursor、Codex 这类工具，HTML Anything 提供了一个很自然的延伸：让 agent 不只写代码，也直接生成读者最终看到的内容成品。