📚 AI设计 进阶 📦 nexu-io

html-anything

Agentic HTML 编辑器——75 个 Skill × 9 种输出格式（杂志/海报/原型/推文等），本地 AI Agent 写 HTML 一键发布

8.1 /10 ★★★★☆
#开源免费#设计#Skill系统

📊 评分明细

📦 打包完整度
2 2 / 2.5
🎯 实用性
2 2 / 2.5
📖 文档清晰度
1.6 1.6 / 2
👥 社区影响力
1.2 1.2 / 1.5
🔗 集成度
1.2 1.2 / 1.5

🎯 适用场景

开源免费设计Skill系统

这是什么？

html-anything 是 nexu-io 团队开发的 Agentic HTML 编辑器。它的核心理念是：你的本地 AI Agent 写 HTML，你负责发布。

内置 75 个 Skill，覆盖 9 种输出格式——杂志、海报、PPT 风格 Deck、原型、数据报告、小红书/推文、Hyperframes 等。沙箱预览、一键导出 HTML/PNG，支持直接分享到微信/知乎/小红书。Apache-2.0 协议开源，7.7k Stars、752 Forks。

最大的亮点是 BYOK（Bring Your Own Key）：不依赖任何云端服务，完全本地运行，零 API Key 也能用。Claude Code、Cursor、Codex、Gemini、Copilot、OpenCode、Qwen、Aider 等主流 Agent 全部支持。

准备工作

  • Claude Code / Codex / Cursor 等 Agent 之一已安装
  • Node.js 18+ 环境
  • 浏览器（用于预览 HTML 输出）

三步快速上手

第一步：安装

git clone https://github.com/nexu-io/html-anything.git
cd html-anything
npm install

第二步：加载 Skill

将 html-anything 的 Skill 文件复制到你的 Agent 技能目录：

cp -r skills/* ~/.claude/skills/

在 Claude Code 中激活：

/skill html-anything

第三步：让 Agent 创作

告诉 Agent 你想要什么：

用 html-anything 做一个产品发布海报，主题是 AI 编程助手，风格简洁现代

Agent 会生成完整 HTML 页面，你可以在沙箱中预览，满意后一键导出 PNG 或分享到社交平台。

常见踩坑

  1. 本地运行：html-anything 完全本地运行，不需要任何 API Key。但 Agent（如 Claude Code）本身需要 API Key。

  2. 输出格式：不同输出格式（杂志 vs 海报 vs 推文）有不同的尺寸和布局模板，选择前先确认目标平台。

  3. 沙箱预览：HTML 在沙箱 iframe 中预览，某些外部资源（如 Google Fonts）可能加载失败，建议使用系统字体。

  4. 中文支持：对中文排版支持良好，但部分 Skill 模板可能偏向英文设计，需要微调。

  5. 版本更新：75 个 Skill 持续更新中，定期 git pull 获取最新 Skill。

FAQ

Q1: 和 Canva/Figma 有什么区别？

A1: html-anything 是 AI Agent 驱动的代码生成器，你描述需求，Agent 写 HTML。Canva/Figma 是手动拖拽设计工具。前者适合快速原型和自动化，后者适合精细设计。

Q2: 需要设计能力吗？

A2: 不需要。你只需要用自然语言描述需求，Agent 会负责设计。但如果你懂设计，可以进一步微调生成的 HTML。

Q3: 支持哪些社交平台？

A3: 微信、知乎、小红书（XHS）、Twitter/X 等。一键导出适配各平台尺寸的图片。

Q4: 开源协议是什么？

A4: Apache-2.0 协议，允许商用。

Q5: 适合什么场景？

A5: 产品海报、社交媒体内容、数据报告可视化、Landing Page 原型、活动宣传物料等。

参考链接

📊 评分与标签

评分说明

总分 8.1/10 · P_优选

📊 可观测社区指标（数据核验日期：2026-07-14）

📦 可安装性 2.3/2.5

  • git clone 即用，Agent 自动识别 SKILL.md，零 API Key 要求，无需注册或付费
  • 纯 HTML/CSS/JS 输出，无需后端服务或数据库，生成结果可直接在浏览器中预览
  • 一键发布到微信/X/知乎/HTML/PNG，输出格式丰富
  • 对比 Anthropic frontend-design：Anthropic 的 frontend-design Skill 需要 Agent 有前端开发能力，html-anything 的 75 个技能模板让 Agent 更易产出高质量设计
  • 对比 Canva：Canva 需要注册账号和在线操作，html-anything 的纯本地 Agent 驱动方式更灵活

🎯 实用性 2.2/2.5

  • 75 个技能覆盖 9 种内容表面，从杂志排版到社交媒体卡片到数据报告，设计场景极其丰富
  • 支持 9 种输出模式（magazine/deck/poster/social/prototype/data report/Hyperframes），满足不同设计需求
  • 生成的 HTML 可能需要手动微调才能达到生产级质量，不适合需要像素级精确的设计
  • 对比 Anthropic frontend-design：frontend-design Skill 聚焦前端界面设计美学方向，html-anything 覆盖的内容格式更广（杂志/海报/社交卡片等非传统网页格式）
  • 对比 Gamma.app：Gamma 提供 AI 驱动的演示文稿和文档生成，html-anything 的输出格式更多样但 Gamma 的成品质量更稳定

📖 文档质量 1.6/2.0

  • README 包含功能说明、安装步骤、支持的模式列表，覆盖核心使用场景
  • 75 个技能各有独立 SKILL.md，Agent 可按需加载特定内容格式的技能
  • 缺少独立文档站点和深度教程，复杂场景（如 Hyperframes）的文档说明不足
  • 对比 Anthropic Skills 文档：Anthropic 官方 Skills 有详细的文档网站，html-anything 的文档以 README 和 SKILL.md 为主
  • 对比 Canva 文档：Canva 有丰富的教程和模板库，html-anything 的文档和学习资源相对薄弱

👥 社区活跃 1.0/1.5

  • 7,738 Stars、752 Forks，在 Agent Skills 中属于中等规模
  • 活跃开发中，持续维护
  • Apache-2.0 协议开源，商业友好
  • 对比 Understand-Anything：Understand-Anything 73k Stars 的社区规模远超 html-anything，但两者定位不同（代码理解 vs 设计输出）
  • 对比 notebooklm-py：notebooklm-py 17.7k Stars 社区规模更大，html-anything 的社区活跃度相对较低但增长潜力大

🔗 兼容性 1.0/1.5

  • 支持 Claude Code、Cursor、Codex、Gemini CLI、Copilot、OpenCode、Qwen、Aider 共 8 个主流 Agent 平台
  • 输出格式多样：HTML/PNG/微信/知乎/X（Twitter），覆盖主流发布渠道
  • Sandbox 预览需要额外配置，非开箱即用的预览体验
  • 对比 Anthropic frontend-design：frontend-design 仅支持 Claude 生态，html-anything 的 8 平台兼容性更广
  • 对比 claude-mem：claude-mem 支持 9 个平台，html-anything 的兼容面略窄但覆盖了主流 Agent

评分依据可追溯至公开来源，每项分数均有明确理由和数据支撑。

🏷️ 标签说明

📋 来源与核验记录

  • ✅ GitHub API 已验证: nexu-io/html-anything — 7,738 Stars, 752 Forks, Apache-2.0 License
  • ⚠️ 未验证: GitHub 页面 页面核验 失败（agent-browser 二进制缺失），已通过 GitHub API 替代验证
  • ⚠️ 间接来源: Anthropic Skills/Canva/Gamma.app 的功能描述 — 基于官方文档和公开信息
  • ❌ 死链: 无