html-anything 仓库全面介绍
html-anything 作为一款专为Agent时代打造的本地优先型HTML编辑器,打破了“Markdown草稿→手动排版→多平台适配”的传统流程,让本地AI编码Agent成为你的专属排版师,轻松生成精美、规范、可直接发布的HTML作品,覆盖海报、PPT、简历、社交卡片等多种场景。
一、仓库核心定位
html-anything 并非普通的Markdown转HTML工具,而是AI编码Agent的专属工作台与HTML生成容器。其核心理念是:“Markdown是草稿,HTML是人类真正阅读的最终形态”,无需用户手动编写CSS、调整排版,只需输入原始内容,交给本地AI Agent,就能快速生成符合专业设计规范的成品HTML,实现“输入即输出,生成即可用”。
该仓库由 nexu-io 团队开发,基于其开源项目 open-design 构建,拥有40k+星标、200+贡献者的成熟技术底座,专注于Agent驱动的HTML创作,兼顾专业性、易用性与安全性。
二、核心功能亮点
1. 本地Agent无缝集成,零API密钥成本
自动扫描本地已安装的8大AI编码Agent CLI,包括Claude Code、Cursor Agent、OpenAI Codex、Gemini CLI、GitHub Copilot CLI、OpenCode、Qwen Coder、Aider,无需额外配置API密钥,直接复用终端已登录的Agent会话(如claude login、gemini auth),零额外成本即可调用AI能力。
2. 75套专业Skill模板,告别AI乱排版
内置75套可直接使用的Skill模板,按使用场景分为9大类别,覆盖日常创作、工作汇报、营销传播等全场景,每个模板都包含严格的设计约束(CJK优先字体、8px基线栅格、对比度≥4.5、禁止占位文本等),避免AI生成“杂乱无章”的排版,确保每一份输出都符合专业设计规范。
核心模板类别:
文档类:温暖羊皮纸风格文档、杂志文章、数字指南等
演示类:瑞士国际风格PPT、编辑类PPT、产品发布会PPT等20种
视频类:Hyperframes视频分镜、故障风标题帧、电影光漏效果等
社交类:小红书卡片、X/Twitter引用卡、Spotify风格卡片等
办公类:PM需求文档、团队OKR、会议纪要、财务报表、简历等
原型类:SaaS落地页、仪表盘、移动端原型、手绘线框图等
3. 流式实时渲染,可视化创作过程
采用SSE(服务器推送事件)技术,Agent生成HTML的过程实时流式渲染在预览区,用户可直观看到内容逐行生成、排版逐步成型的过程,若不满意可随时中断,避免浪费AI生成资源。
4. 一键多平台导出,零二次排版
生成的HTML支持一键导出适配多平台,无需手动调整格式:
社交平台:微信公众号、知乎、X/微博、小红书(自动适配平台格式,粘贴即可用)
文件导出:独立HTML文件(可直接用浏览器打开)、高清PNG图片(适合分享)
特殊适配:知乎LaTeX公式自动转为图片占位符,确保公式正常渲染
5. 安全沙箱预览,本地运行更安心
所有生成的HTML均在沙箱iframe中预览,隔离本地存储与Cookie,避免恶意代码影响本地环境;项目全程本地运行,内容不上传至任何服务器,保障数据隐私与安全。
6. 多格式输入支持,兼容各类内容源
支持Markdown、CSV、TSV、JSON、SQL、纯文本等多种输入格式,自动识别内容类型(如表格数据自动解析为可视化报表),无需手动转换格式,降低使用门槛。
三、快速使用流程(30秒入门)
前置条件
安装Node.js(≥22版本)与pnpm包管理器
本地安装任意一款支持的AI编码Agent CLI,并完成终端登录
部署启动
# 1. 克隆仓库 git clone https://github.com/nexu-io/html-anything # 2. 进入项目目录 cd html-anything # 3. 安装依赖 pnpm install # 4. 启动项目 pnpm dev # 5. 访问页面(默认地址) http://localhost:3000标准使用步骤
左侧编辑器:输入/粘贴原始内容(文案、笔记、MD、CSV等)
中间模板区:选择所需模板(如小红书卡片、PPT、文档)
快捷键触发:按Cmd+Enter(Mac)/Ctrl+Enter(Windows),调用本地Agent生成HTML
右侧预览区:查看实时生成的成品效果,可随时中断调整
导出使用:一键复制到目标平台,或下载HTML/PNG文件
四、核心优势
Agent优先:不自带AI模型,复用本地已有的Agent,降低使用成本,适配用户现有工作流
设计规范:所有模板内置严格设计约束,避免AI生成“低质排版”,输出即符合专业标准
本地优先:全程本地运行,无网络依赖(除模板加载外),保障数据隐私
易用性高:无需编写Prompt、无需手动排版、无需配置复杂参数,小白可直接上手
高度可扩展:支持自定义添加模板、适配新的AI Agent、新增导出平台,社区可参与贡献
五、技术架构
项目采用前后端分离架构,核心分层清晰,兼顾性能与可维护性:
前端:Next.js 16 App Router + React 19 + Tailwind v4,提供流畅的编辑与预览体验
后端:Node.js 服务,负责Agent检测、进程调度、SSE流式传输
核心能力:Agent适配(多CLI统一接口)、模板管理(SKILL.md协议)、CSS内联(juice)、高清截图(modern-screenshot)
安全层:沙箱iframe隔离、DOMPurify防XSS攻击,保障使用安全
六、适用人群
内容创作者:快速生成排版精美的文章、海报、社交卡片,节省排版时间
职场人士:一键生成PPT、会议纪要、简历、财务报表,提升工作效率
开发者:快速生成网页原型、技术文档,无需手动编写CSS与HTML
AI Agent用户:为本地Agent提供可视化工作台,让AI生成的HTML更具实用性
七、开源信息与社区
仓库地址:https://github.com/nexu-io/html-anything
许可证:Apache-2.0 许可证,可自由使用、修改、分发,商业使用无限制(内置第三方模板需遵循对应开源协议)
八、总结
html-anything 重新定义了Agent时代的文档创作流程,将“AI生成”与“专业排版”深度结合,解决了传统Markdown排版繁琐、AI生成排版杂乱的痛点。无论是小白还是专业人士,都能借助本地AI Agent,快速产出可直接发布的HTML作品,大幅提升创作与工作效率。如果你已拥有本地AI编码Agent,html-anything 无疑是解锁其排版能力的最佳工作台。
