AAnthropic 团队都改用 HTML 写文档了！HTML Anything这个开源项目让 AI gent 一键生成 75 种精美排版——微信/X/知乎一键导出
Anthropic 团队都改用 HTML 写文档了！这个开源项目让 AI Agent 一键生成 75 种精美排版——微信/X/知乎一键导出
💡 Anthropic 的 Claude Code 团队宣布不再用 Markdown 写内部文档——直接发 HTML。理由很简单：Markdown 对写作者友好，HTML 对读者友好。但写 HTML 意味着写 CSS、挑字体、调布局……大多数人不会做。HTML Anything 说：按一下 ⌘+Enter，你的本地 AI Agent 就把任何内容（Markdown/CSV/JSON/SQL/随手笔记）变成可直接发布的单文件 HTML——75 个 Skill 模板、9 种输出形态（杂志文章/Keynote 幻灯片/简历/海报/小红书卡片/推文卡片/Web 原型/数据报告/Hyperframes 视频），8 种 Coding Agent CLI 自动检测（Claude Code/Cursor/Codex/Gemini/Copilot/OpenCode/Qwen/Aider），零 API Key，复用你已登录的会话，微信/X/知乎一键导出。Open Design 团队（40K★）出品，Apache 2.0 开源。
目录
- 1. 项目简介
- 2. 为什么 HTML 而非 Markdown
- 3. 核心能力一览
- 4. 8 种 Coding Agent 自动检测
- 5. 75 个 Skill 模板 × 9 种输出形态
- 6. 8 大精选 Skill 详解
- 7. 一键导出：微信 / X / 知乎 / HTML / PNG
- 8. SSE 流式渲染——实时看 Agent 生成
- 9. 沙箱预览——安全隔离
- 10. 格式自动检测
- 11. 四大开源基石
- 12. 30 秒快速上手
- 13. 适用场景与优缺点
- 14. 总结
📌 1. 项目简介
HTML Anything 是一个本地优先的 AI Agent HTML 编辑器——让 AI Agent 帮你把任何内容变成设计精美的单文件 HTML，一键发布到各个平台。
🎯 一句话定义：本地 AI Agent 驱动的 HTML 编辑器——75 个 Skill × 9 种输出形态，零 API Key，8 种 Coding Agent 自动检测，微信/X/知乎一键导出。Open Design 团队（40K★）出品，Apache 2.0 开源。
- 🔗 GitHub 地址：https://github.com/nexu-io/html-anything
- 🌐 在线体验：open-design.ai/html-anything/
- 📜 开源协议：Apache 2.0
- 👤 作者：nexu-io（Open Design 团队，40K★ · 200+ 贡献者）
- 💰 价格：免费，零 API Key
- 🛠️ 技术栈：Next.js + React + TypeScript + pnpm workspace
- 💬 Discord：discord.gg/keeVPMrueT
🤔 2. 为什么 HTML 而非 Markdown
Anthropic 的 Claude Code 团队已经不再用 Markdown 写内部文档——直接发 HTML。
| 维度 | Markdown | HTML |
|---|---|---|
| 面向谁 | 写作者 | 读者 |
| 布局 | 受限于渲染器 | 布局完全自主 |
| 截图发推 | 丑 | 已是设计好的图片 |
| 跨平台发布 | 每个平台要重新排版 | 一键格式转换 |
核心理念：
HTML 是给人类看的最终形态。Markdown 只是写作过程中的中间状态。
但"写 HTML"意味着写 CSS、挑字体、调布局、做响应式——大多数人不会做、设计师嫌麻烦、写作者没耐心。HTML Anything 的解法：让 AI Agent 来写 HTML，你只管提供内容。
✅ 3. 核心能力一览
| 能力 | 说明 |
|---|---|
| 🤖8 种 Agent CLI | Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider |
| 🎨75 个 Skill 模板 | 覆盖杂志/幻灯片/海报/小红书/推文/原型/报告/视频等 |
| 📐9 种输出形态 | 杂志文章 / Keynote / 简历 / 海报 / 小红书卡片 / 推文卡片 / Web 原型 / 数据报告 / Hyperframes 视频 |
| 📤一键导出 | 微信 / X / 知乎 / HTML 文件 / 高清 PNG |
| 🔑零 API Key | 复用已登录的 CLI 会话，边际成本 $0 |
| ⚡SSE 流式渲染 | 实时看 Agent 生成 HTML |
| 🔒沙箱预览 | iframe 隔离，安全运行用户 HTML |
| 📊格式自动检测 | Markdown / CSV / TSV / JSON / SQL / 纯文本 |
| 🚀30 秒上手 | clone + pnpm install + dev → 打开浏览器 |
🤖 4. 8 种 Coding Agent 自动检测
HTML Anything 启动时自动扫描PATH（包括~/.local/bin、~/.bun/bin、/opt/homebrew/bin、~/.npm-global/bin——GUI 启动的 Node 进程通常找不到的目录），识别已安装的 CLI：
| Agent | 检测命令 | 调用方式 |
|---|---|---|
| Claude Code | claude | claude -p --output-format stream-json |
| OpenAI Codex | codex | codex exec --json --sandbox workspace-write |
| Cursor Agent | cursor-agent | cursor-agent --print --output-format stream-json --force --trust |
| Gemini CLI | gemini | gemini --output-format stream-json --yolo |
| GitHub Copilot CLI | copilot | copilot --allow-all-tools --output-format json |
| OpenCode | opencode-cli/opencode | opencode run --format json --dangerously-skip-permissions - |
| Qwen Coder | qwen | qwen --yolo - |
| Aider | aider | aider --no-pretty --no-stream --yes-always --message-file - |
关键：如果你已经在终端里claude login/cursor login/gemini auth，HTML Anything 直接复用那个会话。不需要第二个 API Key，边际成本 $0。
顶部栏显示检测到的 Agent，一键切换。
🎨 5. 75 个 Skill 模板 × 9 种输出形态
按模式（mode）分类
| 模式 | 数量 | 说明 |
|---|---|---|
| prototype | 多种 | Web 页面 / SaaS Landing / Dashboard / 数据报告 / 简历 / 文档 |
| deck | 20 | 水平滑动演示文稿（Swiss International / Guizang Editorial / XHS Pastel / Hermes Cyber / Replit / Magazine Web…） |
| frame | 10 | Hyperframes 视频帧（liquid hero / NYT 数据图 / 便签流程图 / glitch 标题 / 电影光效 / macOS 通知 / Logo 片尾…） |
| social | 4 | 社交卡片（X / 小红书 / Spotify / Reddit） |
| office | 多种 | 办公文档（PM 需求文档 / 工程手册 / 财务报告 / HR 入职 / 发票 / OKR / 周报 / 会议纪要 / 看板） |
| doc | 1 | Kami 暖羊皮纸文档 |
| mockup | 1 | 3D 设备模型 |
| vfx | 1 | 文字光标特效 |
按场景（scenario）分类
- design— 设计相关
- marketing— 营销相关
- engineering— 工程相关
- product— 产品相关
- personal— 个人相关
9 种输出形态
| 形态 | 说明 |
|---|---|
| 📖杂志文章 | 精美排版的长文 |
| 🎬Keynote 幻灯片 | 20 种演示风格 |
| 📄简历 | 专业简历模板 |
| 🖼️海报 | 报纸风格/杂志风格海报 |
| 📱小红书卡片 | 小红书风格图文 |
| 🐦推文卡片 | X/Twitter 风格 |
| 🛠️Web 原型 | SaaS Landing / Dashboard |
| 📊数据报告 | NYT 风格数据可视化 |
| 🎞️Hyperframes 视频 | Remotion 兼容视频帧 |
🌟 6. 8 大精选 Skill 详解
#1 deck-guizang-editorial — 杂志风 e-ink 演示
- 推荐排名：1
- 模式：deck
- 灵感来源：op7418/guizang-ppt-skill
- 特色：10 种锁定布局 × 5 套色板（墨黑 / 靛蓝瓷 / 森林墨 / 牛皮纸 / 沙丘）
- 风格：读起来像印刷艺术杂志，不像幻灯片
#2 deck-swiss-international — 瑞士国际主义演示
- 推荐排名：2
- 模式：deck
- 特色：16 列网格 + 一个饱和强调色（克莱因蓝 / 柠檬 / 薄荷 / 安全橙）× 22 种锁定布局
- 风格：冷静、理性、制度感——打开那一刻就知道"设计师做的"
#3 doc-kami-parchment — 暖羊皮纸文档
- 推荐排名：3
- 模式：doc
- 灵感来源：tw93/kami
- 特色：
#f5f4ed底色 + 墨蓝强调 + 单一衬线字体 - 风格：比纯白 Markdown 明显更平静的阅读体验
#4 magazine-poster — 报纸风格海报
- 推荐排名：4
- 模式：poster
- 特色：超大衬线标题 + 双栏正文 + 六个编号章节 + 点阵奶油底色
- 风格：读起来像印刷版宽幅报纸，不像网页
#5 video-hyperframes — 视频分镜帧
- 推荐排名：5
- 模式：frame / video
- 特色：6-10 帧 1920×1080 序列 + 隐藏时长/转场标记 + 自动播放脚本
- 兼容：直接交给 heygen-com/hyperframes 或 Remotion 渲染
.mp4
#6 frame-glitch-title — 故障风标题帧
- 推荐排名：6
- 模式：frame
- 特色：青/品红色差偏移 + CRT 扫描线 + 损坏数据字幕 + 角落 ASCII 噪点
- 风格：赛博朋克英雄卡/视频转场
#7 vfx-text-cursor — 文字光标特效
- 推荐排名：7
- 模式：vfx
- 特色：光标"打字"穿越画布 + 每个字符伴随粉红×青色色差拖尾 + 方向性光效
- 风格：丢进一句引言，得到电影级开场帧
#8 frame-logo-outro — Logo 片尾帧
- 推荐排名：8
- 模式：frame
- 特色：Logo 逐片组装 + 发光辉光 + Slogan 上升 + CTA 出现
- 风格：产品发布或品牌影片的收尾卡
📤 7. 一键导出：微信 / X / 知乎 / HTML / PNG
| 导出目标 | 技术方案 | 效果 |
|---|---|---|
| 微信公众号 | juice内联 CSS → 直接粘贴，零二次排版 | 微信编辑器完美识别 |
| X / 微博 / 小红书 | modern-screenshot→ 2× 高清 PNG →ClipboardItem→ 粘贴到推文编辑器 | 直接粘贴即发 |
| 知乎 | <mjx-container>→data-eeimg占位符 → 知乎自动渲染公式 | LaTeX 公式完美显示 |
| HTML 文件 | 单文件 HTML 下载 | 独立运行，无依赖 |
| PNG 图片 | 高清 DPI 渲染下载 | 可用于任何场景 |
关键：生成完毕即发布就绪（ship-ready）——不需要"我之后再调一下"的二次加工。
⚡ 8. SSE 流式渲染——实时看 Agent 生成
HTML Anything 用 SSE（Server-Sent Events）实现流式渲染：
POST /api/convert发送请求- Agent 的 stdout JSON-line 流被解析为文本增量
- 通过 SSE 推送到前端
- 前端追加到 iframe
srcdoc - 页面实时更新
💡 等待 AI 生成就像看它实时打字——不满意？随时打断重新提示，不用浪费一次完整生成。
🔒 9. 沙箱预览——安全隔离
所有用户生成的 HTML 在沙箱 iframe 中预览：
<iframesandbox="allow-scripts allow-same-origin">| 能力 | 说明 |
|---|---|
| ✅ Tailwind CDN | 可用 |
| ✅ Google Fonts | 可用 |
| ✅ 内联脚本 | 可用 |
| ❌ Cookies | 与宿主隔离 |
| ❌ localStorage | 与宿主隔离 |
用户生成的 HTML 在隔离源中运行——功能正常，但安全边界清晰。
📊 10. 格式自动检测
编辑器接受多种输入格式，自动识别：
| 输入格式 | 解析方式 |
|---|---|
| Markdown | 原生支持 |
| CSV / TSV | papaparse浏览器端解析 |
| Excel | xlsx浏览器端解析 |
| JSON | 原生解析 |
| SQL | 格式化显示 |
| 纯文本 | 直接使用 |
关键：所有解析在浏览器端完成——不上传任何数据。
🏗️ 11. 四大开源基石
HTML Anything 站在四个开源项目的肩膀上：
| 项目 | 贡献 |
|---|---|
| nexu-io/open-design | Agent 检测层、设计系统模型、SKILL.md协议 |
| mdnice/markdown-nice | juice内联 CSS → 微信/知乎粘贴零排版 |
| gcui-art/markdown-to-image | iframe → 高清 PNG 导出路径 |
| alchaincyf/huashu-md-html | Anti-AI-Slop 纪律：CJK 优先字体栈、8px 基线网格、对比度 ≥ 4.5、必须使用真实数据 |
Anti-AI-Slop 约束（来自华数 md-html）写入每个SKILL.md：
- CJK 优先字体栈（中文排版不翻车）
- 8px 基线网格（排版有节奏）
- 对比度 ≥ 4.5（可读性保障）
- 必须使用真实数据（杜绝 AI 假数据填充）
🚀 12. 30 秒快速上手
gitclone https://github.com/nexu-io/html-anythingcdhtml-anythingpnpminstallpnpm-F@html-anything/next dev# → http://localhost:3000打开浏览器 → 顶部栏自动检测已登录的 Agent CLI → 选择模板 → 粘贴内容 → ⌘+Enter。
无需 API Key。复用你已登录的 Claude / Cursor / Codex / Gemini / Copilot 订阅。
开发命令
pnpmexectsx scripts/guard.ts# CI 守卫pnpm-F@html-anything/next dev# 开发服务器pnpm-F@html-anything/next typecheck# 类型检查pnpm-F@html-anything/nexttest# 单元测试pnpm-F@html-anything/next build# 构建pnpm-F@html-anything/e2etest# E2E 测试⚖️ 13. 适用场景与优缺点
✅ 适合你，如果……
- 你写微信公众号文章，想要精美排版
- 你发 X/小红书，想要好看的内容卡片
- 你做 Keynote/演示文稿，想要设计感
- 你写技术文档/数据报告，想要专业排版
- 你用 Claude Code / Cursor / Codex 等 AI Agent
- 你不想为排版工具付费
- 你想要零 API Key、本地优先
❌ 可能不适合，如果……
- 你不需要精美排版（纯文本够用）
- 你不用任何 Coding Agent CLI
- 你需要 Figma 级别的像素级设计控制
- 你需要多人协作编辑
优缺点
| 维度 | 评分 | 说明 |
|---|---|---|
| 🎨 排版质量 | ⭐⭐⭐⭐⭐ | 75 个专业 Skill，Anti-AI-Slop 纪律保障 |
| 🤖 Agent 兼容 | ⭐⭐⭐⭐⭐ | 8 种 CLI 自动检测，零配置 |
| 📤 导出便捷 | ⭐⭐⭐⭐⭐ | 微信/X/知乎/HTML/PNG 一键导出 |
| 🔑 使用门槛 | ⭐⭐⭐⭐⭐ | 零 API Key，复用已有登录 |
| 📐 输出形态 | ⭐⭐⭐⭐⭐ | 9 种形态覆盖绝大多数场景 |
| 🏗️ 架构设计 | ⭐⭐⭐⭐⭐ | 本地优先、沙箱隔离、流式渲染 |
| 📦 安装体验 | ⭐⭐⭐⭐ | pnpm workspace，3 步启动 |
| 🧪 成熟度 | ⭐⭐⭐ | 仍在快速迭代，可能有 bug |
| 🎓 学习曲线 | ⭐⭐⭐ | Skill 体系丰富但需要探索 |
📚 14. 总结
HTML Anything是目前最全面的 AI Agent HTML 编辑器——75 个 Skill 覆盖几乎所有内容输出场景：
| 核心优势 | 说明 |
|---|---|
| 🎨75 个专业 Skill | 杂志/幻灯片/海报/小红书/推文/原型/报告/视频全覆盖 |
| 🤖8 种 Agent | Claude/Cursor/Codex/Gemini/Copilot/OpenCode/Qwen/Aider 自动检测 |
| 🔑零 API Key | 复用已登录会话，边际成本 $0 |
| 📤一键导出 | 微信/X/知乎/HTML/PNG |
| ⚡流式渲染 | 实时看 Agent 生成，不满意随时打断 |
| 🔒沙箱隔离 | 安全预览用户生成的 HTML |
| 📊格式自动检测 | Markdown/CSV/JSON/SQL 全支持 |
| 🚀30 秒上手 | clone + install + dev |
| 🏗️四大开源基石 | open-design + markdown-nice + markdown-to-image + huashu-md-html |
| 🛡️Anti-AI-Slop | CJK 优先、8px 基线、对比度 ≥ 4.5、真实数据 |
🌟推荐指数：⭐⭐⭐⭐⭐（5/5）
- 适合：需要精美内容排版的所有人——公众号写手、产品经理、独立开发者、设计师
- 亮点：75 Skill × 9 形态 × 8 Agent × 零 API Key × 一键导出
- 核心理念：Markdown 是草稿，HTML 是最终形态。让 AI Agent 来写 HTML，你只管提供内容。
一句话总结：Anthropic 团队都改用 HTML 写文档了——HTML Anything 让你的 AI Agent 一键生成 75 种精美排版：杂志/幻灯片/海报/小红书/推文/原型/报告/视频帧全覆盖，8 种 Agent CLI 自动检测零配置，微信/X/知乎一键导出，零 API Key 复用已有订阅，Anti-AI-Slop 纪律保障排版不翻车。Open Design 40K★ 团队出品，Apache 2.0 开源。
📢 项目链接：https://github.com/nexu-io/html-anything
🌐 在线体验：open-design.ai/html-anything/
💬 Discord：discord.gg/keeVPMrueT
🐦 X：@nexudotio
🏗️ 姐妹项目：nexu-io/open-design（40K★）
标签：#HTML #AI Agent #Claude Code #Cursor #排版 #微信公众号 #小红书 #Open Design