✨ The agentic HTML 编辑器 — your local AI a——深度解析

# 深度解析 html-anything：✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 🚀 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) 🛡️ Sandboxed preview · 📤 1-click to WeChat / X / Zhihu / HTML / PNG 🔑 Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider  > 📅 2026年05月19日 · 📦 开源分享 · ⭐ 3668 Stars · 🔧 HTML --- ## 一、项目背景 在开发领域，✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 🚀 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) 🛡️ Sandboxed preview · 📤 1-click to WeChat / X / Zhihu / HTML / PNG 🔑 Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider一直是个刚需场景。市面上有不少方案，但要么太重，要么功能不全。 [nexu-io/html-anything](https://github.com/nexu-io/html-anything) 的出现，给出了一个**优雅且高性能**的解法——用 HTML 从零构建，无历史包袱，API 设计简洁直觉。 ## 二、技术架构 html-anything 采用 HTML 编写，核心技术栈： | 技术维度 | 选型 | |---------|------| | 相关技术 | `agent-skills` | | 相关技术 | `agentic` | | 相关技术 | `ai-agents` | | 相关技术 | `ai-design` | | 相关技术 | `ai-editor` | 整体架构遵循**模块化设计**，核心模块职责清晰： ``` html-anything/ ├── cmd/ # 命令行入口 ├── internal/ # 核心业务逻辑 ├── pkg/ # 公共包 ├── api/ # API 定义 ├── config/ # 配置文件模板 └── docs/ # 文档 ``` > 关键设计决策：采用接口抽象 + 依赖注入，方便扩展和测试。 ## 三、安装部署 ```bash git clone https://github.com/nexu-io/html-anything cd html-anything pnpm install pnpm -F @html-anything/next dev ## 四、快速上手

Entry view — the top bar shows your installed CLIs, the left pane is the editor, the middle is the template + design-system picker, the right is a live iframe preview. The same surface produces magazines, decks, posters, web prototypes, and Hyperframes frame scripts.	75 templates, searchable and filterable — pick by mode (prototype / deck / frame / social / office / doc) × scenario (design / marketing / engineering / product / personal). Every skill ships an example.html you can open straight from the repo to see what the agent will produce.
SSE streaming — agent stdout JSON-line is parsed for text deltas, appended into the iframe srcdoc in real time. You watch the page render line by line. Don't like where it's going? Interrupt and re-prompt — no wasted full generation.	One-click export — WeChat (juice-inlined CSS) · X / Weibo / Xiaohongshu (modern-screenshot → 2× PNG → ClipboardItem) · Zhihu (LaTeX image placeholders) · download .html · download .png. Paste straight in, no second pass of manual formatting.
Deck mode — 20 keynote skills, including Swiss International (Helvetica grid maximalism), Guizang Editorial (magazine ink), Open Slide Canvas (1920×1080 agent-native), Magazine Web, XHS Pastel, Hermes Cyber, Replit Style. ←/→ to navigate slides, presenter notes, PDF export.	Hyperframes frames — 10 motion frame scripts (liquid hero, NYT data chart, sticky-note flowchart, glitch title, cinema light-leak, macOS notification, brand logo outro, text-cursor VFX, 3D device mockup, …) conforming to heygen-com/hyperframes; hand off straight to Remotion to render .mp4.

## 五、核心代码解读 让我们深入看看 html-anything 的关键实现： ### 代码片段 1 ```bash git clone https://github.com/nexu-io/html-anything cd html-anything pnpm install pnpm -F @html-anything/next dev # → http://localhost:3000 ``` ### 代码片段 2 ```bash pnpm exec tsx scripts/guard.ts pnpm -F @html-anything/next dev pnpm -F @html-anything/next typecheck pnpm -F @html-anything/next test pnpm -F @html-anything/next build pnpm -F @html-anything/e2e typecheck pnpm -F @html-anything/e2e test ``` ### 代码片段 3 ``` ┌─────────────────────── Browser (Next.js 16) ──────────────────────┐ │ Editor / upload · top-bar agent picker · template picker · iframe │ └─────────────┬──────────────────────────────────┬──────────────────┘ │ ⌘+Enter │ ▼ ▼ ┌─────────────────────┐ ┌──────────────────────┐ │ GET /api/agents │ │ POST /api/convert │ │ scan PATH, list │ │ SSE — spawn CLI │ │ installed CLIs │ │ pipe stdin / stdout │ └─────────────────────┘ └──────────┬───────────┘ │ spawn + stdin pipe ▼ ┌────────────────────────────────────┐ │ Your local coding-agent CLI │ │ claude / codex / cursor-agent / │ │ gemini / copilot / opencode / │ │ qwen / aider │ │ → reuses your existing session │ └────────────────────────────────────┘ │ ▼ stdout JSON-line ──► SSE event │ ▼ iframe srcdoc append (live) │ ⌘+C copy → ClipboardItem ⌘+S download → .html / .png ``` ## 六、配置说明 配置项请参考项目[官方文档](https://github.com/nexu-io/html-anything)，一般支持配置文件和环境变量两种方式。 ## 七、使用示例 以下是一些常见使用场景： ```bash # 查看帮助 html-anything --help # 查看版本 html-anything --version ``` > 更多 API 和用法请参考项目[官方文档](https://github.com/nexu-io/html-anything)。 ## 八、进阶技巧 ### 源码探索 建议直接克隆项目阅读源码，了解核心实现细节： ```bash git clone https://github.com/nexu-io/html-anything.git cd html-anything # 浏览核心模块 ``` ### 关注更新 ```bash # 使用 GitHub CLI 关注 Release gh repo watch nexu-io/html-anything ``` ## 十、同类工具对比 | 维度 | html-anything | 传统方案 | |------|--------|----------| | 性能 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | | 部署难度 | 一行命令 | 依赖复杂 | | 扩展性 | 插件化 | 耦合重 | | 社区活跃 | ⭐ 3668 | 参差不齐 | --- ## 写在最后 html-anything 的代码质量很高，HTML 生态的工程化实践贯穿其中。无论是作为生产工具，还是学习HTML项目架构的参考，都值得一试。 **相关链接：** - 项目地址：[nexu-io/html-anything](https://github.com/nexu-io/html-anything) - Star 数：3668 - 技术栈：HTML - 标签：`agent-skills`, `agentic`, `ai-agents`, `ai-design`, `ai-editor` --- *本文由 AI 辅助生成，基于项目源码和 README 深度分析。技术细节请以官方文档为准。* *每日分享开源好物，关注「摸鱼干货栈」不迷路 🔔*