HTML Anything – nexu-io 团队开源的 HTML 编辑器

1. HTML Anything 是什么

HTML Anything 是由 nexu-io 团队开源的 Agent 时代 HTML 编辑器，内置 75 套 Skill 模板覆盖杂志、演示、海报、小红书卡片等 9 种交付形态，可自动识别本地 18 种 Code Agent CLI 并复用已登录会话，无需 API Key 即可将任意内容转换为专业级 HTML，并一键发布至微信、X、知乎等主流平台。该工具以“本地优先 + Agent 复用”为核心架构，彻底改变了传统 HTML 编辑器需要手动编码或依赖云端服务的模式，将内容生产与排版效率提升至全新高度。

技术定位与领域： HTML Anything 属于前端内容生成与排版自动化工具，聚焦于“Agent 驱动的内容交付”细分赛道。它并非传统所见即所得编辑器，而是一个通过本地 AI Agent 调用，将用户输入（Markdown、CSV、JSON 等）自动转化为符合专业出版规范的 HTML 输出的智能编排系统。其独特定位在于“零 API 成本”与“多平台一键适配”，填补了个人创作者与专业设计师之间的工具空白。

研发背景： nexu-io 团队长期关注前端工具链与 AI 结合的效率提升。团队成员来自开源社区，曾参与多项前端框架与 CLI 工具的维护。开发 HTML Anything 的动机源于对现有排版工具的痛点观察：Markdown 转 HTML 工具（如 Marp、reveal.js）缺乏 AI 能力，需手动编写；云端编辑器又依赖 API Key 且隐私风险高。团队希望打造一个完全本地运行、零边际成本、能复用已有 Agent 生态的“万能 HTML 工厂”。

核心价值： HTML Anything 解决了三个核心问题：第一，消除 API 成本——通过复用本地已登录的 Code Agent 会话，用户无需额外购买 API Key 或云服务，即可享受 AI 驱动的排版能力；第二，降低排版门槛——75 套设计系统约束的模板确保输出达到专业出版级品质，非设计师也能产出高质量内容；第三，跨平台发布效率——一键适配微信、X、小红书、知乎等平台的格式要求，省去人工调整的繁琐劳动。

技术特点： 采用 SSE（Server-Sent Events）流式传输协议，实现边生成边预览的实时体验；内置 iframe 沙箱隔离机制，保障预览安全；通过扫描系统 PATH 自动检测 18 种 Code Agent CLI（Claude Code、Cursor、Codex、Gemini 等），无需手动配置；每个 Skill 模板内置 CJK 优先字体栈、8px 基线网格、对比度 ≥4.5 等严格排版约束，确保视觉一致性。

2. 主要功能

• 75 套 Skill 模板覆盖 9 种交付形态： 内置 75 套可组合的 Skill 模板，涵盖杂志文章、Keynote 演示、简历、海报、小红书卡片、推文卡片、Web 原型、数据报告、Hyperframes 视频等 9 种专业交付形态。每套模板均配备完整的设计系统约束（如 CJK 优先字体栈、8px 基线网格、对比度 ≥4.5），确保输出达到专业出版级视觉品质，用户无需任何设计背景即可生成精美排版。

• 18 种本地 Code Agent 自动识别： 系统自动扫描本地 PATH 环境变量，识别已安装的 18 种 Code Agent CLI 工具（包括 Claude Code、Cursor、Codex、Gemini CLI 等），并直接复用用户已在终端中登录的会话。这意味着用户无需为 HTML Anything 单独购买 API Key 或配置云服务，实现真正的零边际成本调用，极大降低了使用门槛。

• 11 种主流文件格式上传支持： 支持上传 Markdown、TXT、CSV、Excel、JSON、SQL、YAML、HTML、PNG、JPG 等 11 种文件格式作为内容输入源。用户可以直接将数据报告（CSV/Excel）、技术文档（Markdown）、数据库结构（SQL）等原始素材拖入编辑器，由 Agent 自动解析并生成对应排版，无需手动转换格式。

• SSE 流式实时渲染： 采用 Server-Sent Events（SSE）协议建立浏览器与本地 Agent 之间的持久单向连接。Agent 生成的 HTML 代码被实时推送到预览区，实现“边生成边预览”的流式体验。相比传统等待完整生成后再渲染的方式，SSE 流式渲染显著提升了交互反馈速度，用户可在生成过程中即时发现问题并调整指令。

• iframe 沙箱安全预览： 用户生成的 HTML 在独立的 iframe 沙箱中运行，与主应用进程完全隔离。沙箱环境禁用了脚本执行、网络请求等潜在危险操作，即使 Agent 生成的 HTML 包含恶意代码，也无法影响本地系统安全。这一机制使得用户可以放心预览来自不可信来源的生成内容。

• 一键多平台导出发布： 提供针对不同平台的专用导出选项：微信公众号 CSS 内联粘贴（自动处理微信富文本兼容性）、X/微博/小红书 2× DPI PNG 图片导出（适配高清社交图）、知乎 LaTeX 公式处理（自动转换数学格式）、单文件 HTML 下载（适用于独立部署或归档）。用户只需点击一次即可完成跨平台发布，彻底省去重复排版的劳动。

3. 如何使用

1. 环境准备： 确保本地已安装 Node.js（推荐 v18 或更高版本）和 pnpm（可通过 npm install -g pnpm 安装）。同时需要提前安装至少一个支持的 Code Agent CLI（如 Claude Code、Cursor CLI 或 Gemini CLI），并在终端中完成登录认证（例如 claude login 或 cursor auth）。系统将通过扫描 PATH 自动检测这些工具。

2. 克隆项目： 打开终端，执行以下命令将项目源码下载到本地：
   git clone （链接待官方发布后更新） 若网络受限，可使用 GitCode 镜像仓库（需自行确认镜像地址）。克隆完成后进入项目目录：cd html-anything`。

3. 安装依赖： 运行 pnpm install 完成所有依赖包的安装。由于项目使用 pnpm 作为包管理器，请勿使用 npm 或 yarn 替代，否则可能导致依赖冲突。安装过程可能需要 1-3 分钟，取决于网络速度。

4. 启动服务： 执行 pnpm dev 启动本地开发服务器。默认监听端口为 3000，启动成功后浏览器自动打开 （链接待官方发布后更新） 进入编辑器主界面。若端口被占用，可在 .env文件中修改PORT` 变量。

5. 选择 Agent： 在界面顶部下拉菜单中选择系统已自动检测到的本地 Code Agent 工具（如 Claude Code）。如果未检测到任何 Agent，请检查 PATH 中是否包含对应 CLI 的可执行路径，并确保已登录。

6. 创建任务： 点击 “New task” 按钮，上传文件（支持拖拽）或直接在输入框中粘贴文本内容。然后从右侧面板中选择对应的 Skill 模板类型（如杂志文章、小红书卡片等）。模板决定了输出 HTML 的排版风格和结构。

7. 生成预览： 点击生成按钮后，Agent 开始处理输入内容并流式生成 HTML。右侧沙箱预览区会实时更新排版效果，用户可以即时查看生成进度。若对结果不满意，可随时停止并修改输入内容或切换模板。

8. 导出发布： 生成完成后，点击 “Export/Copy” 按钮，根据目标平台选择导出方式：微信（CSS 内联）、X/微博/小红书（PNG 图片）、知乎（LaTeX 处理）或下载单文件 HTML。导出内容可直接粘贴或上传至对应平台。

注意事项： 首次使用需确保 Agent CLI 已完成登录，否则生成会失败；建议在生成前预览模板效果，避免重复生成；对于长文档，SSE 流式渲染可能需要较长时间，请耐心等待。

4. 优缺点分析

5. 同类工具对比

选型建议： 对于追求“零代码、多形态、跨平台发布”的内容创作者（如自媒体运营者、市场营销人员），HTML Anything 是目前最合适的选择。其 Agent 驱动模式极大降低了排版门槛，75 套模板覆盖了从社交卡片到数据报告的常见场景，且无需支付 API 费用。对于只需要制作演示幻灯片且熟悉 Markdown 的用户，Marp 更为轻量高效；而需要高度自定义演示交互效果的开发者，reveal.js 提供了更大的灵活性。学术或技术文档排版场景下，Typst 凭借其强大的排版引擎和数学公式支持，在 PDF 输出质量上优于 HTML Anything，但缺乏 AI 辅助和平台发布适配。综合来看，HTML Anything 在“AI 自动化 + 多平台适配”维度上具有显著优势，但在深度定制和纯文档排版方面仍需借助专业工具。

6. 编辑点评

HTML Anything 在技术创新上展现了清晰的思路：通过“本地优先 + Agent 复用”架构，将大型语言模型的能力无缝嵌入内容生产流程，同时彻底规避了 API 成本和隐私风险。其 75 套 Skill 模板并非简单的 CSS 样式集合，而是内置了完整的设计系统约束（CJK 字体栈、基线网格、对比度标准），这在国内开源工具中极为罕见，体现了对中文排版质量的深度理解。SSE 流式渲染与 iframe 沙箱的结合，在用户体验与安全性之间找到了良好平衡。

实用价值方面，HTML Anything 直接击中了内容创作者的核心痛点：跨平台排版耗时、设计能力不足、工具链碎片化。它让一个不懂 HTML 和 CSS 的用户，也能在几分钟内生成适配微信、小红书、知乎等平台的专业级内容。对于需要频繁发布图文的自媒体运营者、市场人员、数据分析师，这无疑是一个效率利器。其零边际成本的特性更使其成为个人和小团队的理想选择。

适用人群定位清晰：主要面向非技术背景的内容生产者，以及希望加速内容交付的开发者（作为辅助工具）。技术能力较强的用户也可通过修改模板源码或自定义 Agent 指令来扩展功能。未来发展潜力在于：模板生态的社区化（允许用户贡献和分享新模板）、支持更多 Code Agent（如通义灵码、CodeGeeX 等国产工具）、以及平台适配的持续扩展（抖音、B站等）。若团队能开放模板设计系统的自定义接口，将进一步增强工具的灵活性和竞争力。

7. 应用场景

• 自媒体内容排版： 自媒体运营者可将 Markdown 草稿（或直接粘贴文本）上传至 HTML Anything，选择“小红书卡片”或“推文卡片”模板，由 Agent 自动生成适配平台风格的 HTML 或 PNG 图片。一键导出后直接粘贴至微信公众号编辑器、小红书笔记或 X 推文，省去手动调整格式的时间，显著提升内容发布效率。

• 商业演示制作： 职场人士需要快速制作 Keynote 风格的演示文稿时，可选择“Keynote 演示”模板，上传 CSV 数据或 Markdown 大纲，Agent 自动生成带有瑞士国际主义风格的 HTML 演示页面。支持导出为单文件 HTML 或 2× DPI PNG，可直接用于线上会议分享或打印。

• 数据报告可视化： 数据分析师将 CSV 或 Excel 数据文件拖入编辑器，选择“数据报告”模板，Agent 自动解析数据并生成包含图表、表格和排版的交互式 HTML 报告。用户可在预览中调整数据展示方式，最终导出为可部署的静态 HTML 文件，用于内部汇报或客户交付。

• 视频分镜脚本： 视频创作者通过 Hyperframes 模板，将文字脚本或故事板描述输入编辑器，Agent 生成可直接用于 Remotion 或 HeyGen 渲染的视频分镜 HTML 文件。该模板内置时间轴和帧布局，方便创作者在预览中调整镜头顺序和视觉风格，极大简化了视频预可视化流程。

8. 常见问题 FAQ

Q：HTML Anything 是否需要 API Key？
A：不需要。HTML Anything 通过自动扫描本地 PATH 识别已安装的 Code Agent CLI（如 Claude Code、Cursor），并直接复用这些工具已在终端中登录的会话。用户无需为 HTML Anything 单独购买任何 API Key 或云服务，所有 AI 调用均通过本地 Agent 完成，实现零边际成本。

Q：支持哪些 Code Agent？
A：目前支持自动检测 18 种常见的 Code Agent CLI，包括但不限于：Claude Code、Cursor CLI、Codex CLI、Gemini CLI、GitHub Copilot CLI、OpenAI Codex、Replit Code Agent 等。系统会在启动时扫描 PATH，并在界面下拉菜单中列出所有检测到的可用 Agent。若未检测到，请确认对应 CLI 已安装且登录。

Q：能否自定义模板或修改设计系统的参数？
A：当前版本不支持在 UI 界面中直接修改模板的设计系统参数（如字体、间距、颜色）。用户只能通过切换不同的 Skill 模板来改变排版风格。不过，由于项目完全开源，开发者可以 Fork 仓库后修改模板源码（位于 src/templates 目录），重新编译后即可实现自定义。团队计划在未来版本开放模板参数配置界面。

Q：如何导出到微信公众号？
A：生成完成后，点击 “Export/Copy” 按钮，选择 “微信公众号” 选项。系统会自动将生成的 HTML 转换为 CSS 内联样式，并复制到剪贴板。然后打开微信公众号编辑器，直接粘贴即可。注意：微信编辑器对部分 CSS 属性（如 flex、grid）支持有限，模板已做了兼容处理，但复杂布局仍需手动检查。

Q：是否支持中文内容？
A：完全支持。75 套模板均内置 CJK（中日韩）优先字体栈，包括宋体、黑体、思源系列等常用中文字体，并针对中文排版优化了行高、字间距、标点挤压等参数。输入内容可以是中文 Markdown、TXT 或 Excel 文件，Agent 生成的 HTML 会自动应用中文排版规范。

Q：生成的 HTML 能否用于商业用途？
A：可以。HTML Anything 采用 Apache 2.0 开源许可证，代码和模板均允许商业使用。用户生成的 HTML 文档（包含输出的内容）版权归用户所有，可自由用于商业发布、内部报告、客户交付等场景。但请注意，所使用的 Code Agent CLI 可能受其自身许可证约束，建议用户自行核查。

9. 项目地址

• GitHub 仓库：https://github.com/nexu-io/html-anything
• 官方组织主页：https://github.com/nexu-io