html-anything：让 AI Agent 直接生成可发布的 HTML

html-anything：让 AI Agent 直接生成可发布的 HTML

💬 "Markdown 是给作者写的，HTML 是给读者看的"

💬 "75 套 Skills × 9 种导出格式 × 零 API Key = AI 生成 HTML 的完整工具链"

2026 年，一个名为 html-anything 的开源项目引起了开发者的广泛关注。这个来自 Open Design 团队（40k★）的工具，让 AI Agent 能够直接生成「可发布级别」的 HTML——不是代码片段，而是可以直接发给用户、发布到微信公众号或导出为图片的成品。

GitHub：https://github.com/nexu-io/html-anything

一、为什么需要 html-anything？

1.1 Markdown 的局限

传统工作流：

Markdown 文档 → 截图 → 手动调整格式 → 发布

问题：

- 布局受限于渲染器

- 截图发到推特不好看

- 微信公众号需要重新排版

- 「我之后再来调整」变成永远不会做

1.2 Anthropic 的选择

Anthropic 的 Claude Code 团队做了一个标志性决定：

停止用 Markdown 写内部文档，直接输出 HTML

1.3 html-anything 的答案

html-anything 的核心理念：

「Markdown 是草稿，HTML 是成品」

你的本地 AI Agent 负责写

你只需要点击发送

二、核心特性解析

2.1 零 API Key 设计

8 个支持的 Coding Agent CLI：

Claude Code → claude -p --output-format stream-json

Cursor Agent → cursor-agent --print --output-format stream-json

OpenAI Codex → codex exec --json --sandbox workspace-write

Gemini CLI → gemini --output-format stream-json --yolo

GitHub Copilot → copilot --allow-all-tools --output-format json

OpenCode → opencode run --format json

Qwen Coder → qwen --yolo -

Aider → aider --no-pretty --no-stream --yes-always

2.2 75 套 Skills 分类

9 种表面模式（Surface Modes）：

75 套 Skills 一览：

2.3 一键导出

2.4 实时预览（SSE 流式渲染）

工作原理：

POST /api/convert → SSE → 实时更新

1. AI stdout JSON-line 流

2. 服务器解析 text deltas

3. 客户端追加到 iframe srcdoc

4. 你看着页面一行一行渲染出来

不喜欢？中断并重新提示——没有浪费完整生成

三、架构设计

3.1 技术栈

html-anything 构建于四个开源项目之上：

├── nexu-io/open-design (40k★)

│ └── Agent 检测层、设计系统模型、SKILL.md 协议

├── mdnice/markdown-nice

│ └── CSS 内联，WeChat/Zhihu 兼容

├── gcui-art/markdown-to-image

│ └── iframe → 高 DPI PNG 导出

└── alchaincyf/huashu-md-html

└── 反 AI 垃圾内容规范（汉字优先字体栈、8px 基线网格、对比度≥4.5）

3.2 Skill 协议

每套 Skill 遵循 Claude Code SKILL.md 约定，加上扩展 frontmatter：

---

name: deck-swiss-international

mode: deck

scenario: design

surface: presentation

preview: https://example.com/preview.html

design_system: swiss-international

recommended: 2

---

# Skill 描述和模板

3.3 安全设计

沙箱隔离预览：

<iframe sandbox="allow-scripts allow-same-origin">

- Tailwind CDN / Google Fonts / 内联脚本 → 正常工作

- Cookie 和 localStorage → 与宿主隔离

- 用户生成的 HTML → 在隔离环境中运行

四、快速开始

4.1 安装

git clone https://github.com/nexu-io/html-anything

cd html-anything

pnpm install

pnpm dev

# → http://localhost:3000

4.2 使用流程

1. 打开浏览器 → 自动检测已登录的 CLI

2. 选择模板 → 75 个模板可搜索、可筛选

3. 粘贴内容 → Markdown / CSV / Excel / JSON / SQL / 纯文本

4. ⌘+Enter → AI 生成 HTML

5. 一键导出 → WeChat / X / Zhihu / .html / .png

4.3 推荐的 Featured Skills

五、与竞品对比

5.1 功能对比

5.2 html-anything 的独特价值

1. AI 原生设计

└── 不是「让 AI 写 HTML」，而是「AI Agent 直接生成可发布成品」

2. 零成本

└── 使用你已有的订阅，不需要额外付费

3. 一键多平台发布

└── WeChat / X / Zhihu / HTML / PNG，一个工具全部搞定

4. 实时预览

└── SSE 流式渲染，看着 AI 边想边写

5. 开源免费

└── Apache-2.0 许可证，社区驱动

六、典型使用场景

6.1 场景一：公众号文章

之前：Markdown → 手动排版 → 发布（30 分钟+）

现在：粘贴 Markdown → 一键导出 WeChat（5 分钟）

推荐 Skill：article-magazine、doc-kami-parchment

6.2 场景二：技术演示文稿

之前：PowerPoint / Keynote（设计耗时）

现在：粘贴内容 → deck-swiss-international（5 分钟）

推荐 Skill：deck-swiss-international、deck-hermes-cyber

6.3 场景三：小红书配图

之前：设计工具手动制作

现在：粘贴文案 → XHS Pastel deck（1 分钟）

推荐 Skill：deck-xhs-pastel、deck-xhs-white

6.4 场景四：数据报告

之前：Excel → 截图 → 手动拼接

现在：粘贴 CSV/JSON → dashboard + data report（3 分钟）

推荐 Skill：dashboard、data report

七、团队背景

html-anything 来自 Open Design 团队：

团队观点：

「在 AI Agent 时代，你不再需要手动编辑文档

所以输出格式应该是读者真正想要的：HTML」

八、总结

8.1 核心价值

8.2 参考资源

💬 互动话题：你觉得 html-anything 对哪个场景最有价值？公众号文章、技术演示还是社交配图？欢迎在评论区分享！

本文由九章智库·全能侠 基于 GitHub 官方文档生成 参考来源：https://github.com/nexu-io/html-anything