夜雨聆风如果你经常需要在微信公众号、知乎、X（Twitter）等平台发布排版精美的内容，你一定经历过这样的痛苦：Markdown 写好了，但公众号编辑器不认；想做成图片发社交媒体，还得打开设计工具反复调整；换个平台又得重新排版一遍。HTML Anything 正是为解决这个问题而生——它让你用本地 AI 编程 Agent 直接把文字变成精美的 HTML 页面，一键导出到各大平台，零手动排版。
目录
概述 1.1 项目背景 1.2 核心特性 环境准备与安装 2.1 系统要求 2.2 安装步骤 2.3 安装验证 快速上手 3.1 第一次生成 3.2 工作流时序图 功能操作详解 4.1 主界面概览 4.2 选择模板 4.3 输入内容并生成 4.4 实时流式渲染 4.5 一键导出 配置与定制 5.1 Agent 自动发现 5.2 自定义模板开发 5.3 硬约束设计系统 使用技巧与最佳实践 常见问题与故障排除 实战案例 8.1 案例一：技术博客一键转公众号推文 8.2 案例二：数据报表转精美信息图 8.3 案例三：产品发布 Keynote 生成 总结参考文献
1. 概述
HTML Anything 是一个本地优先的 Agent 驱动 HTML 编辑器。它的核心理念是：Markdown 是为写作者服务的中间格式，HTML 才是读者最终消费的形态。你提供内容（Markdown、CSV、JSON 等），选择一套设计模板，本地 AI 编程 Agent 自动生成完整的单文件 HTML，然后一键导出到微信公众号、知乎、X（Twitter）、微博、小红书等平台。
1.1 项目背景
该项目基于一个观察：Anthropic 的 Claude Code 团队已经停止用 Markdown 写内部文档，改为直接交付 HTML。原因是：
Markdown 的排版受限于渲染器，HTML 的排版完全由你掌控 Markdown 截屏发到社交媒体上不好看，HTML 本身就像设计好的图片 Markdown 发微信公众号、知乎、Newsletter 需要反复重新排版，HTML 一次生成到处适用
HTML Anything 把这个能力带给所有人——不需要你会写 HTML/CSS，只需要你有一个本地 AI 编程 Agent。
1.2 核心特性
支持 8 种本地 AI 编程 Agent：Claude Code、Cursor Agent、OpenAI Codex、Gemini CLI、GitHub Copilot CLI、OpenCode、Qwen Coder、Aider，启动时自动检测已安装的 CLI，零 API Key 配置 内置 75 套可组合的技能模板，覆盖杂志文章、Keynote 演示、简历、海报、小红书卡片、推文卡片、网页原型、数据报告、Hyperframes 视频帧等 9 种交付形态 SSE 流式渲染：实时观看 Agent 生成 HTML 的过程，随时可中断 沙箱隔离预览：使用 iframe sandbox确保生成的内容安全隔离格式自动检测：支持 Markdown、CSV、TSV、JSON、SQL、纯文本输入 一键导出：微信公众号（CSS 内联）、知乎（LaTeX 公式兼容）、X/微博/小红书（高清 PNG 剪贴板）、独立 HTML 文件、高清 PNG 图片 本地部署或 Vercel 部署，Agent 始终在你本地运行 版本 0.1.0，Apache-2.0 开源协议
2. 环境准备与安装
2.1 系统要求
Node.js 18+（推荐 20 LTS） pnpm 包管理器 至少一个受支持的本地 AI 编程 Agent CLI（详见下文） 操作系统：macOS / Linux / Windows（WSL）
受支持的 Agent CLI 及检测方式：
claude | claude login | |
cursor-agent | cursor login | |
codex | codex login | |
gemini | gemini auth | |
copilot | ||
opencode-cliopencode | ||
qwen | ||
aider |
至少需要安装其中一种 Agent，HTML Anything 会在启动时自动扫描系统 PATH 发现可用 Agent。
2.2 安装步骤
# 1. 克隆仓库git clone https://github.com/nexu-io/html-anythingcd html-anything# 2. 安装依赖pnpm install# 3. 启动开发服务器pnpm dev# → 浏览器访问 http://localhost:3000
适用于 v0.1.0（2026年5月测试）。项目使用 Next.js 16 App Router + Turbopack 构建，首次启动时需要编译，后续热更新即时生效。
2.3 安装验证
打开浏览器访问 http://localhost:3000，如果看到以下界面则安装成功：
顶部栏显示检测到的 Agent 名称（如 "Claude Code"） 左侧为内容编辑区 中间为模板选择器 右侧为 HTML 预览区（iframe 沙箱）
如果顶部栏未显示 Agent，请确认你的 Agent CLI 在系统 PATH 中可被找到。
3. 快速上手
3.1 第一次生成
以下用 Claude Code 为例，5 分钟生成第一份 HTML 文档：
打开 http://localhost:3000，顶部栏应显示检测到的 Agent（如 Claude Code）在模板选择器中点击「杂志文章」(Magazine Article) 模板 在左侧编辑区粘贴你的 Markdown 内容（或直接输入文字） 按 Cmd+Enter（macOS）或Ctrl+Enter（Windows）触发生成观察右侧预览区实时渲染 HTML 输出 满意后点击导出按钮，选择目标平台
生成过程中你可以随时按 Escape 中断流式输出。
3.2 工作流时序图
流程执行说明：
步骤 1：浏览器加载页面时自动调用 /api/agents，服务端扫描 PATH 返回可用 Agent 列表步骤 2-3：用户粘贴内容、选择模板、按 Cmd+Enter 触发生成 步骤 4-6：服务端启动 Agent CLI 进程，通过 stdin 发送完整的提示词（包含内容、模板约束、设计规则） 步骤 7-10：Agent 逐行输出 HTML，每一行 JSON 被解析为文本增量，通过 SSE 推送到浏览器，实时追加到 iframe 的 srcdoc属性中步骤 11：用户满意后，选择导出目标，浏览器端完成 CSS 内联或截图处理
4. 功能操作详解
4.1 主界面概览
HTML Anything 的主界面采用三栏布局：
顶部栏：Agent 选择器（自动检测）、当前模板名称、导出按钮 左侧面板：内容编辑区，支持粘贴 Markdown/CSV/JSON 等格式 中间面板：模板选择器，按模式和场景分类，支持搜索和筛选 右侧面板：沙箱 iframe 预览区，实时显示生成的 HTML
4.2 选择模板
HTML Anything 提供 75 套模板，按两个维度组织：
模式（mode）：决定了最终交付物的形态
场景（scenario）：决定了设计风格和配色
design：设计感强的呈现 marketing：营销转化导向 engineering：技术文档和图表 product：产品展示 finance：财务数据呈现 hr：人力资源相关 personal：个人用途
操作步骤：
在模板选择器顶部搜索框输入关键词（如 "deck" 搜索所有演示模板） 使用模式下拉菜单筛选（如选择 "deck"） 点击卡片预览模板效果 点击选中模板，开始生成
4.3 输入内容并生成
HTML Anything 支持多种输入格式，会自动检测并转换：
Markdown：最常用格式，支持标准 Markdown 语法 CSV / TSV：表格数据，自动转为数据表格 JSON：结构化数据，适合生成数据报告 SQL：SQL 查询结果，可转为可视化表格 纯文本：自动分段和排版
操作步骤：
在左侧编辑区粘贴或输入内容 确认顶部栏选中的 Agent 和模板 按 Cmd+Enter触发生成观察右侧预览区实时渲染
4.4 实时流式渲染
HTML Anything 的核心体验之一是 SSE 流式渲染：Agent 每生成一行 HTML，就会实时显示在预览区中。
关键特性：
实时可见：不像传统 AI 生成需要等待完整结果，每一步都可见 可中断：按 Escape 键随时停止生成，已生成的部分保留 JSON-line 协议：Agent 输出的每一行都是独立的 JSON，包含增量文本 渐进增强：先渲染骨架结构，再逐步填充细节
4.5 一键导出
生成满意的 HTML 后，点击导出按钮，选择目标平台：
5. 配置与定制
5.1 Agent 自动发现
HTML Anything 不在代码中内置任何 Agent，而是启动时自动扫描系统 PATH。扫描路径包括：
标准 PATH 目录 ~/.local/bin~/.bun/bin/opt/homebrew/bin~/.npm-global/bin
每个 Agent 在 src/lib/agents/argv.ts 中定义检测逻辑、启动参数、stdin/stdout 协议和流解析器。如需添加新的 Agent，只需在该文件中增加一条配置。
5.2 自定义模板开发
模板（Skill）是一个文件夹，放在 src/lib/templates/skills/ 目录下，包含：
my-custom-skill/├── SKILL.md # 模板定义（必填）├── example.html # 示例输出（必填）├── assets/ # 样式资源（可选）└── references/ # 参考文档（可选）
SKILL.md 的 frontmatter 定义模板元数据：
---mode:deck# 模式：prototype/deck/frame/social/office/doc/vfx/mockupscenario:marketing# 场景：design/marketing/engineering/product/finance/hr/personalsurface:keynote# 交付形态preview:/path/to/preview.pngdesign_system:swiss# 设计系统---
添加后重启 pnpm dev，新模板自动出现在选择器中。
5.3 硬约束设计系统
每个模板的 SKILL.md 中内置了硬约束，防止 AI 生成低质量的"AI slop"：
中文字体优先栈： Noto Sans/Serif SC作为首选字体8px 基线网格：所有间距必须是 8 的倍数 禁用纯黑纯白：所有颜色使用柔和色调，无 #000或#fff色彩对比度 ≥ 4.5：确保可访问性 强制 :focus状态：所有可交互元素必须有焦点样式禁止 Lorem Ipsum：生成内容必须使用真实文本
这些约束在生成 HTML 时由 Agent 遵守，确保输出品质一致。
6. 使用技巧与最佳实践
内容分块输入：对于长文章，建议按章节分段生成，每次 500-1000 字效果最佳。一次性输入过长内容可能导致 Agent 生成超时 多模板对比：用同一个内容尝试 2-3 个不同模板，选择视觉效果最好的。同一个 Markdown 用 Magazine 模式和 Poster 模式会产生完全不同的视觉效果 Deck 模式技巧：生成 Keynote 演示时，用 ---分隔每一页幻灯片的内容。Agent 会自动将每个分隔段渲染为一张幻灯片先行测试 Agent 连通性：在终端中运行 claude -p "hello"（或你的 Agent 对应命令）确认 CLI 正常工作后再启动 HTML Anything利用格式自动检测：直接把 CSV 数据粘贴到编辑器，Agent 会自动渲染为数据表格或图表 导出前微调：生成完成后，可以手动在编辑区修改文本内容，重新生成局部 HTML 片段，避免从头生成 模板即文档：每个 SKILL.md 本身是很好的设计参考，阅读它们可以了解专业排版的设计原则 本地优先的安全优势：所有处理在你本地完成。内容不经过任何外部服务器，适合处理敏感文档
7. 常见问题与故障排除
问题：顶部栏未显示 Agent
确认你的 Agent CLI 已安装并在 PATH 中：在终端运行 which claude（或对应命令）检查重启开发服务器：Agent 检测只在服务启动时执行一次 检查 src/lib/agents/argv.ts确认你的 Agent CLI 的检测二进制名称是否正确问题：生成失败或超时
减少输入内容长度，尝试分段生成 检查 Agent CLI 本身是否正常工作：在终端直接运行测试命令 查看浏览器开发者工具的 Network 标签，检查 SSE 连接状态 问题：导出的 HTML 在微信公众号中样式错乱
确认使用的是「微信公众号」导出选项（不是直接下载 HTML） 微信公众号只支持内联样式，直接下载的 HTML 文件包含外部样式表，粘贴后会丢失 复杂的 CSS Grid/Flexbox 布局在微信中可能不完全支持，建议选择 magazine 或 article 类模板 问题：PNG 导出分辨率不够
PNG 导出默认使用 2x DPI，如需更高分辨率可修改 modern-screenshot的 scale 参数对于需要打印的场景，建议导出 HTML 后用浏览器打印功能生成 PDF 问题：iframe 预览空白
检查生成是否已开始（编辑器下方应有进度指示） 查看浏览器控制台是否有 JavaScript 错误 确认 Agent 实际输出了内容：在终端中手动运行 Agent 测试提示词 问题：端口 3000 被占用
修改 package.json中dev脚本，添加-p 3001参数指定其他端口
8. 实战案例
8.1 案例一：技术博客一键转公众号推文
场景：你写好了一篇 3000 字的技术博客（Markdown 格式），需要发布到微信公众号。
操作流程：
启动 HTML Anything： pnpm dev，打开http://localhost:3000在模板选择器中选择 article-magazine（杂志文章）模板将整篇 Markdown 博客粘贴到左侧编辑区 按 Cmd+Enter触发生成，等待约 30-60 秒完成在预览区检查排版效果，必要时在编辑区微调文字后重新生成局部 点击导出 → 选择「微信公众号」 打开微信公众号后台编辑器， Cmd+V粘贴，直接发布
效果：代码块带语法高亮、标题层级清晰、引用块有左边框、表格自适应宽度，无需任何额外排版。
8.2 案例二：数据报表转精美信息图
场景：你有一份 CSV 格式的季度销售数据，想生成一张精美信息图发社交媒体。
操作流程：
选择 data-report（数据报告）模板将 CSV 数据粘贴到编辑区：
季度,销售额,增长率,客户数Q1,1200000,15%,230Q2,1380000,18%,256Q3,1628400,12%,289Q4,1823808,10%,312
按 Cmd+Enter生成 HTML 数据报告预览满意后，导出 → 选择「X / Weibo / Xiaohongshu」 高清 PNG 自动复制到剪贴板，直接在社交媒体发帖框粘贴
效果：数据自动可视化为图表和卡片，配色和谐，可直接作为信息图使用。
8.3 案例三：产品发布 Keynote 生成
场景：你有一个产品发布的内容大纲，想快速生成一套精美的 Keynote 风格演示。
操作流程：
选择 deck-product-launch（产品发布演示）模板用 ---分隔每一页幻灯片的内容，粘贴到编辑区：
# 产品发布：Nexu AI Editor## 重新定义内容创作---## 市场痛点-内容创作者80%时间花在排版上-跨平台发布需要多次重新排版-现有工具学习曲线陡峭---## 我们的解决方案-本地AIAgent驱动-75+专业设计模板-一键发布到所有平台---## 立即体验nexu.io
按 Cmd+Enter生成使用键盘左右方向键切换幻灯片预览 导出为 PNG 或 HTML 用于演示
9. 总结
HTML Anything 将本地 AI 编程 Agent 的能力与专业设计模板结合，解决了「从文字到精美 HTML 的最后一公里」问题。它的核心价值在于：
你只需要一个本地 AI Agent（Claude Code、Cursor 等任意一种）和你的内容，就能生成专业排版的 HTML 75 套模板覆盖了从技术文章到社交媒体卡片的几乎所有内容发布场景 一键导出到微信公众号、知乎、X、微博、小红书，彻底消除重复排版工作 全部本地处理，内容不离开你的电脑，安全和隐私有保障 开源、可扩展，你可以创建自己的模板或接入新的 Agent
适合所有需要频繁跨平台发布内容的创作者，尤其是技术博主、产品经理、市场运营人员和独立开发者。如果你的工作流程中还在 Markdown 编辑器和平台编辑器之间反复复制粘贴调整格式，HTML Anything 值得一试。
不适合的场景：需要团队实时协作编辑的场景（当前版本为单用户本地工具）、纯代码文档生成（更适合用文档生成工具）。
参考文献
[1] HTML Anything GitHub 仓库：https://github.com/nexu-io/html-anything
[2] Nexu Open Design：https://github.com/nexu-io/open-design
[3] Multica 运行架构：https://github.com/multica-ai/multica
[4] 花叔Design 反AI Slop规范：https://github.com/alchaincyf/huashu-design
[5] Markdown Nice 微信排版引擎：https://github.com/mdnice/markdown-nice
[6] Guizang PPT Skill：https://github.com/op7418/guizang-ppt-skill
[7] Kami 暖羊皮纸文档系统：https://github.com/tw93/kami
[8] Open Slide Canvas：https://github.com/1weiho/open-slide
[9] Hyperframes 视频帧协议：https://github.com/heygen-com/hyperframes
[10] Remotion 视频渲染：https://github.com/remotion-dev/remotion
