夜雨聆风
【��实践】AI网页编辑器!本地Agent写HTML
一、引言：当「所见即所得」遇上AI Agent时代
最近有个特别有意思的项目，叫 html-anything。
一句话概括：在浏览器里跑一个本地AI Agent，让它帮你写HTML——不是让你手写代码，是让AI帮你写，你只管预览效果。
传统的HTML编辑器（比如Dreamweaver）是给人用的，你要懂HTML/CSS才能干活。
html-anything的思路完全不一样：Markdown是草稿，HTML才是人类阅读的格式，你的本地Agent直接写它。
2.7k星，登顶GitHub Trending —— 我赶紧实测了一下。
二、核心能力：75个Skill模板，覆盖9大场景
这个工具最让我惊喜的是它的Skill体系。
什么叫Skill？就是你告诉它「帮我写一篇公众号文章」，它会调对应的Skill模板，自动生成带排版的HTML。
支持的输出场景（9个）：
-
📄 杂志风文章（magazine articles） -
🎬 Keynotestyle演示（keynote decks） -
📋 简历（résumés） -
🖼️ 海报（posters） -
📱 小红书卡片（Xiaohongshu cards） -
🐦 Twitter卡片（tweet cards） -
💻 Web原型（web prototypes） -
📊 数据报告（data reports） -
🎥 Hyperframes视频（Hyperframes videos）
每个场景下有多个Skill模板，加起来一共75个。
支持的AI Coding Agent（8个）：Claude Code、Cursor Agent、Codex、Claude CLI、GitHub Copilot CLI、OpenCode、Qwen Coder、Aider —— 只要你本地装了任何一个，它自动检测到，直接用。
三、实测：3行命令跑起来
我的实测环境：Mac mini M4，Node.js已装。
Step 1：克隆项目
git clone https://github.com/nexu-io/html-anything.git cd html-anything
Step 2：安装依赖
pnpm install --frozen-lockfile
耗时约10秒，无报错。
Step 3：启动开发服务器
pnpm -F @html-anything/next dev
输出：
▲ Next.js 16.2.6 (Turbopack)
✓ Local: http://localhost:3000
✓ Ready in 396ms
Step 4：打开浏览器体验
访问 https://open-design.ai/html-anything/ 可以直接看在线演示。
页面展示了几种Skill的效果：杂志风排版、Swiss International演示风格、海报模板……不需要登录、不需要API Key，浏览器打开就能体验。
四、导出能力：微信/X/知乎一键搞定
html-anything内置了一键导出功能：
- WeChat
— 直接导出微信兼容的HTML - X（Twitter）
— 导出卡片格式 - Zhihu
— 知乎文章格式 - PNG
— 图片导出 - HTML文件
— 下载源文件
这对于要同时运营多个平台的自媒体人来说特别实用 —— 写一份内容，多平台分发。
五、为什么值得一试？
传统工作流：写Markdown → 手动转HTML → 调样式 → 上传平台
html-anything的工作流：告诉Agent你想要什么 → AI写HTML → 一键导出
核心差异：前者是人指挥工具，后者是AI理解你的意图后干活。
我测试下来，印象最深的两点：
- 本地优先
—— 不需要API Key，Agent在本地跑，数据不出本机 - Skill模板丰富
—— 75个模板覆盖主流场景，不用每次从头设计
六、使用场景举例
场景1：写公众号文章
告诉它：「帮我写一篇关于AI工具推荐的文章，用杂志风排版」→ 它调对应Skill → 生成带紫色标题胶囊的HTML → 一键复制到微信后台
场景2：生成小红书卡片
告诉它：「生成一张推广AI课程的卡片」→ 它调小红书Skill → 生成竖版图文卡片 → 下载PNG
场景3：快速做PPT原型
告诉它：「做一个产品介绍PPT，5页」→ 它调演示Skill → 生成HTML版PPT → 浏览器预览效果
七、总结
html-anything解决的是一个真实痛点：当你有一个能写代码的AI Agent时，它的输出应该直接是可交付的格式，而不只是代码片段。
它把Skill体系和导出能力打包在一起，让AI的输出「所见即所得」——你告诉它要什么，它给你完整的、可以直接用的HTML。
如果你已经在用Claude Code、Cursor Agent这类工具，强烈建议试试这个组合。
项目地址：https://github.com/nexu-io/html-anything
最简单方法：你将这一篇文章链接发给你的AI就行！