HTML智能编辑助手
AI Skill Hub 强烈推荐：HTML智能编辑助手 是一款优质的AI工具。已获得 3.1k 颗 GitHub Star，AI 综合评分 8.2 分，在同类工具中表现稳健。如果你正在寻找可靠的AI工具解决方案，这是一个值得深入了解的选择。
📚 深度解析
**为什么要使用开源工具而非商业 SaaS？**
对于个人开发者和有隐私需求的用户，本地部署的开源工具意味着数据不离本机，不受第三方服务商的数据政策约束。同时，开源工具通常没有使用次数限制和月度费用，一次安装即可长期使用，对于高频使用场景的总拥有成本（TCO）远低于订阅制商业工具。
**安装与环境准备**
HTML智能编辑助手 依赖 HTML 运行环境。建议通过 pyenv（Python）或 nvm（Node.js）管理 HTML 版本，避免全局环境污染。对于新手用户，推荐先创建虚拟环境（python -m venv venv && source venv/bin/activate），再安装依赖，这样即使出现问题也可以随时删除虚拟环境重新开始，不影响系统稳定性。
**社区与维护**
GitHub Issue 和 Discussion 是获取帮助的最快渠道。在提问前建议先检查 Closed Issues（已关闭的问题），大多数常见问题都已有解答。遇到 Bug 时，提供 pip list 的输出、完整错误堆栈和最小可复现示例，能显著提高开发者响应速度。AI Skill Hub 将持续追踪 HTML智能编辑助手 的版本更新，及时通知重要功能变化。
📋 工具概览
基于Claude的开源AI代理工具，可自动生成和编辑HTML代码。适合Web开发者、设计师和非技术用户快速构建网页原型。支持本地部署，AI代理自动化处理HTML编写工作，显著提高开发效率。
HTML智能编辑助手 是一款基于 HTML 开发的开源工具，专注于 Claude技能、AI代理、HTML生成 等核心功能。作为 GitHub 开源项目，它拥有活跃的社区支持和持续的版本迭代，代码完全透明可审计，支持本地部署以保护数据隐私。无论是个人使用还是集成到企业工作流，都能提供稳定可靠的解决方案。
📖 中文文档
基于Claude的开源AI代理工具，可自动生成和编辑HTML代码。适合Web开发者、设计师和非技术用户快速构建网页原型。支持本地部署，AI代理自动化处理HTML编写工作，显著提高开发效率。
HTML智能编辑助手 是一款基于 HTML 开发的开源工具，专注于 Claude技能、AI代理、HTML生成 等核心功能。作为 GitHub 开源项目，它拥有活跃的社区支持和持续的版本迭代，代码完全透明可审计，支持本地部署以保护数据隐私。无论是个人使用还是集成到企业工作流，都能提供稳定可靠的解决方案。
- 开源免费，支持本地部署，数据完全自主可控
- 活跃的 GitHub 开源社区，持续迭代更新
- 提供详细文档和使用示例，新手友好
- 支持自定义配置，灵活适配不同使用环境
- 可作为基础组件集成进现有技术栈或进行二次开发
- 本地部署运行，保护数据隐私，满足合规要求
- 自定义集成到现有系统，扩展技术栈能力
- 作为开源基础组件进行商业化二次开发
# 克隆仓库 git clone https://github.com/nexu-io/html-anything cd html-anything # 查看安装说明 cat README.md # 按 README 完成环境依赖安装后即可使用
- 访问 GitHub 仓库页面
- 按照 README 文档完成依赖安装
- 根据系统环境完成初始化配置
- 参考官方示例或文档开始使用
- 遇到问题可在 GitHub Issues 中查找解答
# 查看帮助 html-anything --help # 基本运行 html-anything [options] <input> # 详细使用说明请查阅文档 # https://github.com/nexu-io/html-anything
# html-anything 配置说明 # 查看配置选项 html-anything --config-example > config.yml # 常见配置项 # output_dir: ./output # log_level: info # workers: 4 # 环境变量（覆盖配置文件） export HTML_ANYTHING_CONFIG="/path/to/config.yml"
HTML Anything
<p align="center"><sub>From the team behind <a href="https://github.com/nexu-io/open-design"><b>Open Design</b></a> — <b>40k★ · 200+ contributors</b>, production-grade and iterating faster. html-anything is the focused agent-era HTML editor; if it clicks for you, <a href="https://github.com/nexu-io/open-design">Open Design</a> is where the same team ships at scale.</sub></p>
<p align="center"><b>Live page:</b> <a href="https://open-design.ai/html-anything/"><b>open-design.ai/html-anything/</b></a> — overview, surface modes, and showcase before you clone.</p>
Markdown is the draft. HTML is what humans read. Your local agent writes it. The agentic HTML editor — in the agentic era, you don't hand-edit docs anymore, so the output format should be what the reader actually wants: HTML. Local-first, zero API key, reuses the CLI session you already have logged in — 8 coding-agent CLIs auto-detected on yourPATH(Claude Code · Cursor Agent · Codex · Gemini CLI · GitHub Copilot CLI · OpenCode · Qwen Coder · Aider), driven by 75 composable skill templates across 9 deliverable surfaces (magazine articles · keynote decks · résumés · posters · Xiaohongshu cards · tweet cards · web prototypes · data reports · Hyperframes videos). One-click export to WeChat / X / Zhihu, or download.html/.png.
<p align="center"> <img src="docs/assets/banner.png" alt="HTML Anything — the agentic HTML editor, on your laptop" width="100%" /> </p>
<p align="center"> <a href="LICENSE"><img alt="License" src="https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square" /></a> <a href="#supported-coding-agents"><img alt="Agents" src="https://img.shields.io/badge/agents-8%20CLIs-black?style=flat-square" /></a> <a href="#skills"><img alt="Skills" src="https://img.shields.io/badge/skills-75-orange?style=flat-square" /></a> <a href="#export-targets"><img alt="Export" src="https://img.shields.io/badge/export-WeChat%20%C2%B7%20X%20%C2%B7%20Zhihu%20%C2%B7%20PNG-9b59b6?style=flat-square" /></a> <a href="#quickstart"><img alt="Quickstart" src="https://img.shields.io/badge/quickstart-30%20seconds-green?style=flat-square" /></a> <a href="#architecture"><img alt="No API key" src="https://img.shields.io/badge/no-API%20key%20required-ff6b35?style=flat-square" /></a> </p>
<p align="center"> <a href="https://discord.gg/keeVPMrueT"><img alt="Discord (html-anything)" src="https://img.shields.io/badge/discord-html--anything-5865f2?style=flat-square&logo=discord&logoColor=white" /></a> <a href="https://x.com/nexudotio"><img alt="Follow @nexudotio on X" src="https://img.shields.io/badge/follow-%40nexudotio-000000?style=flat-square&logo=x&logoColor=white" /></a> <a href="https://github.com/nexu-io/open-design/releases/latest"><img alt="open-design release" src="https://img.shields.io/github/v/release/nexu-io/open-design?style=flat-square&label=release&color=8e44ad" /></a> <a href="https://github.com/nexu-io/open-design/graphs/commit-activity"><img alt="open-design commits / month" src="https://img.shields.io/github/commit-activity/m/nexu-io/open-design?style=flat-square&label=commits%2Fmonth&color=f39c12" /></a> <a href="#showcase"><img alt="Design systems" src="https://img.shields.io/badge/design%20systems-9-1abc9c?style=flat-square" /></a> <a href="https://github.com/nexu-io/open-design"><img alt="Built on open-design" src="https://img.shields.io/badge/built%20on-nexu--io%2Fopen--design-ff7043?style=flat-square&logo=github&logoColor=white" /></a> </p>
<p align="center"><b>English</b> · <a href="README.zh-CN.md">简体中文</a></p>
---
Quickstart
```bash git clone https://github.com/nexu-io/html-anything cd html-anything pnpm install pnpm -F @html-anything/next dev
Showcase
The eight skills that surface at the top of the picker's Featured / 推荐 group — sorted by their recommended: rank in SKILL.md frontmatter (lower = higher). Each ships a real example.html you can open straight from the repo, no auth, no setup.
 deck-guizang-editorial · deck · recommended: 1Magazine × e-ink editorial deck, inspired by op7418/guizang-ppt-skill — 10 locked layouts × 5 palettes (Ink / Indigo Porcelain / Forest Ink / Kraft / Dune). Reads like a printed art-zine, not a slide deck.
|
 deck-swiss-international · deck · recommended: 2Swiss International deck — 16-column grid + one saturated accent (Klein Blue / Lemon / Mint / Safety Orange) across 22 locked layouts. Cold, rational, institutional. The deck that reads "a designer made this" the moment it opens. |
 doc-kami-parchment · doc · recommended: 3Warm-parchment editorial document, inspired by tw93/kami. #f5f4ed ground + ink-blue accent + single serif voice — a noticeably calmer reading surface than plain-white markdown for long essays, reports, and one-pagers.
|
 magazine-poster · poster · recommended: 4Newsprint Sunday-paper poster — oversized serif headline, two-column body, six numbered sections, dot-pattern cream ground. Reads like a printed broadsheet, not a webpage. |
 video-hyperframes · frame / video · recommended: 5Hyperframes / Remotion-compatible storyboard — 6–10 sequential 1920×1080 frames with hidden duration + transition markers and an auto-play script. Hand straight to heygen-com/hyperframes or Remotion to render .mp4.
|
 frame-glitch-title · frame · recommended: 6Glitch title frame — cyan/magenta chromatic offset, CRT scanlines, corrupted-data subtitle, ASCII noise in the corners. Cyberpunk hero card or video transition. |
 vfx-text-cursor · vfx · recommended: 7VFX text-cursor opener — a cursor "types" across the canvas, each character revealed with a hot-pink × cyan chromatic trail and directional light leaks. Drop in a quote, get a film-grade opening frame. |
 frame-logo-outro · frame · recommended: 8Logo outro frame — logo assembles piece-by-piece with glow bloom, tagline rises, CTA appears. The closing card for a product reveal or brand film. |
The full skill catalog (organized by mode) is in Skills below.
Demo
 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.
|
References & lineage
Every external project this repo borrows from — what we take from each, and where it lands in the tree.
| Project | Role here |
|---|---|
[**nexu-io/open-design**](https://github.com/nexu-io/open-design) | The agent-detection layer, the DESIGN.md design-system schema, and the SKILL.md skill protocol. [next/src/lib/agents/argv.ts](next/src/lib/agents/argv.ts) and [next/src/lib/templates/skills/](next/src/lib/templates/skills/) mirror this architecture verbatim. |
[**multica-ai/multica**](https://github.com/multica-ai/multica) | Daemon-and-runtime architecture: one privileged process spawns CLIs, JSON-line is the wire protocol, every CLI gets a thin per-adapter shape. |
[**alchaincyf/huashu-design**](https://github.com/alchaincyf/huashu-design) | Anti-AI-slop discipline — Junior-Designer mode, 5-step brand-asset protocol, contrast-≥-4.5 / 8 px baseline-grid / must-use-real-data rules. Hard-coded into every [SKILL.md](next/src/lib/templates/skills/) frontmatter. |
[alchaincyf/huashu-md-html](https://github.com/alchaincyf/huashu-md-html) | Proof that end-to-end WeChat / Zhihu paste-compatibility is solvable. Reference for [next/src/lib/export/wechat.ts](next/src/lib/export/wechat.ts). |
[mdnice/markdown-nice](https://github.com/mdnice/markdown-nice) | juice-inlined-CSS pipeline → WeChat / Zhihu paste with zero re-formatting. Drives [next/src/lib/export/wechat.ts](next/src/lib/export/wechat.ts). |
[mdnice/markdown-resume](https://github.com/mdnice/markdown-resume) | A4-formatted résumé inspiration → [resume-modern](next/src/lib/templates/skills/resume-modern/). |
[gcui-art/markdown-to-image](https://github.com/gcui-art/markdown-to-image) | iframe → high-DPI PNG export, replicated with modern-screenshot in [next/src/lib/export/image.ts](next/src/lib/export/image.ts). |
[**op7418/guizang-ppt-skill**](https://github.com/op7418/guizang-ppt-skill) | Magazine-ink editorial deck integrated verbatim as [deck-guizang-editorial](next/src/lib/templates/skills/deck-guizang-editorial/) and the Swiss variant [deck-swiss-international](next/src/lib/templates/skills/deck-swiss-international/). Original LICENSE + authorship preserved. |
[**tw93/kami**](https://github.com/tw93/kami) | Warm-parchment monochrome editorial document system → [doc-kami-parchment](next/src/lib/templates/skills/doc-kami-parchment/). |
[**1weiho/open-slide**](https://github.com/1weiho/open-slide) | 1920×1080 agent-native canvas convention → [deck-open-slide-canvas](next/src/lib/templates/skills/deck-open-slide-canvas/). |
[heygen-com/hyperframes](https://github.com/heygen-com/hyperframes) | Frame-script schema for the entire frame-* / vfx-* / mockup-* / social-* family. Output hands straight off to Remotion to render .mp4. |
[remotion-dev/remotion](https://github.com/remotion-dev/remotion) | Target renderer for Hyperframes frame scripts. |
[jimliu/baoyu-skills](https://github.com/jimliu/baoyu-skills) | Practical skills collection — reference catalog for picker categorization. |
Each bundled upstream skill retains its original LICENSE and authorship inside its own next/src/lib/templates/skills/<skill>/ folder.
2 · Skills are folders, not plugins.
Following Claude Code's SKILL.md convention — SKILL.md + assets/ + references/ + example.html. Drop a folder into next/src/lib/templates/skills/, restart pnpm -F @html-anything/next dev, the picker shows it. deck-guizang-editorial is vendored directly from op7418/guizang-ppt-skill with original LICENSE and authorship preserved.
优秀的AI代理应用，创新性强。融合代码生成与可视化编辑，降低Web开发门槛，社区活跃度高，值得关注。
- 构建多智能体协作系统的 Agent 开发者
- 跨境业务、多语言内容运营团队
- Agent 任务先做 dry-run 验证工具调用链，再开启自主执行
- API key 直接提交到 git 仓库（请用 .env 并加入 .gitignore）
- CLI：直接 npm install -g / pip install，命令行调用
- 云端托管：可放在 Vercel / Railway / Fly.io 等 PaaS 平台
⚡ 核心功能
- 开源免费，支持本地部署，数据完全自主可控
- 活跃的 GitHub 开源社区，持续迭代更新
- 提供详细文档和使用示例，新手友好
- 支持自定义配置，灵活适配不同使用环境
- 可作为基础组件集成进现有技术栈或进行二次开发
- 构建多智能体协作系统的 Agent 开发者
- 跨境业务、多语言内容运营团队
- Agent 任务先做 dry-run 验证工具调用链，再开启自主执行
- API key 直接提交到 git 仓库（请用 .env 并加入 .gitignore）
👥 适合人群
🎯 使用场景
- 本地部署运行，保护数据隐私，满足合规要求
- 自定义集成到现有系统，扩展技术栈能力
- 作为开源基础组件进行商业化二次开发
⚖️ 优点与不足
- +Apache-2.0 协议，可免费商用
- +完全开源免费，无授权费用
- +本地部署，数据完全自主可控
- +开发者社区支持，遇问题可查可问
- −安装和初始配置可能需要一定技术基础
- −功能完整性通常不如成熟商业产品
- −技术支持主要依赖开源社区，响应速度不稳定
AI Skill Hub 为第三方内容聚合平台，本页面信息基于公开数据整理，不对工具功能和质量作任何法律背书。
建议在沙箱或测试环境中充分验证后，再部署至生产环境，并做好必要的安全评估。
✅ Apache 2.0 — 宽松开源协议，可商用，需保留版权声明和 NOTICE 文件，含专利授权条款。
🔗 相关工具推荐
❓ 常见问题 FAQ
总体来看，HTML智能编辑助手 是一款质量优秀的AI工具，在同类工具中具备一定竞争力。AI Skill Hub 将持续追踪其更新动态，建议收藏备用，结合自身场景选择合适时机引入使用。
| 原始名称 | html-anything |
| 原始描述 | 开源Claude技能：✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 🚀。⭐3.1k · HTML |
| Topics | Claude技能AI代理HTML生成Web编辑开源工具 |
| GitHub | https://github.com/nexu-io/html-anything |
| License | Apache-2.0 |
| 语言 | HTML |
收录时间：2026-05-18 · 更新时间：2026-05-19 · License：Apache-2.0 · AI Skill Hub 不对第三方内容的准确性作法律背书。