HTML Anything

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

在这个智能时代，内容创作的边界正在被不断拓展。Nexu-io 团队倾力打造的 HTML Anything，正是这一趋势下的革新之作，它并非简单的 HTML 编辑器，而是一款面向 Agent 时代的智能排版利器。

HTML Anything：Agent 时代的智能排版革新

HTML Anything 是一款由 nexu-io 团队开源的、专为 Agent 时代设计的 HTML 编辑器。它内置了多达 75 套精心设计的 Skill 模板，这些模板覆盖了杂志文章、演示文稿、海报设计、小红书吸睛卡片等 9 种截然不同的内容呈现形态。更令人惊叹的是，它能够自动识别本地已安装的 18 种 Code Agent CLI 工具，并无缝复用您已登录的会话，这意味着您无需担心 API 密钥的配置，也无需支付额外的云服务费用。

核心功能亮点解析

• 海量模板，覆盖多元化交付需求：拥有 75 套可灵活组合的 Skill 模板，能够轻松应对从深度杂志报道、精美 Keynote 演示，到个人简历、创意海报、社交媒体卡片（如小红书、推文），乃至 Web 原型、数据分析报告，甚至是 Hyperframes 视频脚本等 9 大类专业内容输出。
• 智能 Agent 识别，零配置接入：能够自动扫描您系统的 PATH 环境变量，精准识别 Claude Code、Cursor、Codex、Gemini 等 18 种主流 Code Agent CLI 工具。通过直接复用您已建立的登录会话，彻底省去了繁琐的 API 密钥配置环节。
• 多格式输入，内容源无忧：支持 Markdown、TXT、CSV、Excel、JSON、SQL、YAML、HTML、PNG、JPG 等多达 11 种常见文件格式作为内容输入源，极大地拓宽了内容导入的灵活性。
• SSE 流式渲染，实时预览体验：采用 Server-Sent Events (SSE) 协议，将 Agent 生成的 HTML 代码实时、逐段地推送到浏览器端，实现边生成边预览的流畅交互体验，所见即所得。
• 沙箱隔离，安全预览无忧：用户生成的内容将在一个的 iframe 沙箱环境中进行预览，与主应用程序进程完全隔离，确保了预览过程的安全性和稳定性，有效避免了潜在的恶意脚本风险。
• 一键发布，多平台无缝对接：提供便捷的一键导出功能，能够直接生成适用于微信公众号的内联 CSS 代码、X/微博/小红书的 2× DPI PNG 图片，以及经过知乎 LaTeX 处理的内容，或是直接下载单文件 HTML，实现跨平台的内容高效分发。

技术架构与设计理念

• 本地优先，Agent 深度融合：其核心优势在于“本地优先”的架构设计。通过扫描本地安装的 Code Agent CLI，并复用用户已有的登录会话，实现了零边际成本的内容生成，摆脱了对云端服务的依赖，也无需额外投入 API 费用。
• SSE 流式传输，实时反馈机制：前端利用 SSE 协议建立了稳定、高效的单向数据流，确保 Agent 生成的 HTML 代码能够以流式方式实时传输至浏览器，从而实现增量渲染和即时预览，极大提升了用户体验。
• 严谨的设计约束系统：每一款 Skill 模板都内置了一套完整的排版规范，包括对中文文本友好的字体栈、8 像素的基线网格系统，以及不低于 4.5 的对比度要求等。这些设计约束确保了最终输出内容的专业级视觉品质。
• 沙箱隔离，保障本地数据安全：生成的 HTML 内容在的 iframe 沙箱中运行，与主应用进程做到完全隔离。这一安全机制有效防止了恶意代码的执行，从而充分保障了用户本地数据的隐私和系统安全。

便捷的使用流程

• 环境准备：确保您的本地环境已安装 Node.js 和 pnpm。同时，请提前安装并成功登录至少一个 Code Agent CLI 工具，例如 Claude Code。
• 获取项目：通过命令 git clone https://github.com/nexu-io/html-anything 将项目源码克隆至本地。
• 安装依赖：进入项目目录，执行 pnpm install 命令，完成所有必要的依赖包安装。
• 启动服务：运行 pnpm dev 启动本地开发服务器。随后，在浏览器中访问 http://localhost:3000 即可进入编辑器界面。
• 选择 Agent：在编辑器顶部的下拉菜单中，选择您已自动识别并登录的本地 Code Agent（例如 Claude Code）。
• 创建任务：点击“New task”按钮，您可以选择上传文件或直接输入内容，并指定所需的 Skill 模板类型。
• 生成与预览：Agent 将自动处理您的输入内容，并以流式方式生成 HTML 代码，您可以在右侧的沙箱预览区域实时查看排版效果。
• 导出与发布：完成内容创作后，点击“Export/Copy”按钮，选择目标平台（微信、X、小红书、知乎）或下载 HTML/PNG 格式，即可轻松完成发布。

HTML Anything 的独特优势

• 零成本运行，经济高效：通过复用本地已登录的 Agent CLI 会话，无需任何额外的 API 密钥或云服务费用，实现了真正意义上的零边际成本运行。
• 专业级视觉品质，设计驱动：内置的 75 套模板均遵循严格的设计系统约束，包括字体、网格和对比度等，确保每一件输出作品都具备专业出版级别的视觉效果。
• 跨平台一键发布，效率倍增：一键式适配微信、X、小红书、知乎等主流平台，彻底消除了跨平台内容重复排版的繁琐工作。
• 本地优先，隐私安全保障：所有内容处理均在本地完成，不涉及任何数据上传云端。结合安全的沙箱预览机制，最大限度地保障了用户数据的隐私和安全。

HTML Anything 的应用场景拓展

• 自媒体内容优化：对于自媒体创作者而言，可以将 Markdown 格式的草稿内容，快速转换为适配微信公众号、小红书、Twitter 等平台的精美排版文章，显著提升内容吸引力。
• 高效商业演示制作：职场人士可以利用“瑞士国际主义”、“贵藏编辑”等风格独特的模板，快速生成专业、高端的商业演示文稿，提升沟通效率。
• 数据报告可视化呈现：数据分析师可以将 CSV 或 Excel 等格式的数据，转化为包含专业图表和精美排版的交互式 HTML 数据报告，使数据洞察更直观。
• 视频分镜脚本生成：视频创作者可以通过 Hyperframes 模板，生成可以直接用于 Remotion 或 HeyGen 等工具渲染的视频分镜脚本，简化制作流程。