html-anything 开源：75 套 Skill 模板 + 零 API Key，Agent 帮你把任何内容变成专业 HTML
标签: 开源项目 / HTML 编辑器 / AI Agent / 模板工具
原文: 微信公众号「开源星探」https://mp.weixin.qq.com/s/PdnzdlANDDDrMrTMYhahvw
核心亮点
html-anything 是 nexu-io 团队开源的 HTML 编辑器，专为 Agent 时代打造。内置 75 套专业 Skill 模板，覆盖杂志文章、Keynote 演示、简历、海报、小红书卡片等 9 种交付形态。自动识别 18 种 Code Agent CLI（Claude Code、Codex、OpenClaw 等），复用已登录会话，零 API Key、零边际成本。一键导出到微信公众号、X、小红书、知乎等平台。
起源：Claude Code 团队宣布弃用 Markdown
Anthropic 的 Claude Code 团队近期在 X 上宣布：内部文档不再写 Markdown，直接写 HTML。
理由很简单：Markdown 是写给写作者看的，HTML 才是给读者看的。
这个观点引发了广泛共鸣。内容创作者的痛点很明确：
- 写了 Markdown → 发公众号要重新排版
- 截图发微博 → 丑
- 做小红书卡片 → 要重新设计
明明内容一样，却要在不同平台重复劳动。
html-anything 是什么
html-anything 让你不用写代码，也能得到专业级的 HTML。你本地的 AI Agent 帮你把任何内容都转换成世界级设计水准的 HTML。
- 开源 3 天，代码量达 15000 行
- 同团队此前作品 open-design Star 超 40K
- GitHub：https://github.com/nexu-io/html-anything
核心特性
1. 75 套 Skill 模板，覆盖 9 种交付形态
每套模板都有真实的 example.html 可直接打开看效果：
| 交付形态 | 说明 |
|---|---|
| 杂志文章 | 暖色调羊皮纸风格，类似 tw93/kami 阅读体验 |
| Keynote 演示 | 瑞士国际主义、贵藏编辑等 20 种专业模板 |
| 简历 | 专业级简历设计 |
| 海报 | 报纸风格大幅海报 |
| 小红书卡片 | 专为小红书设计的竖版卡片 |
| 推文卡片 | 适合发 X/Twitter 的卡片设计 |
| Web 原型 | SaaS 落地页、仪表盘、数据报告 |
| 数据报告 | 专业数据分析报告 |
| Hyperframes 视频 | 可直接用于 Remotion 或 HeyGen 渲染的视频分镜 |
设计约束严格：CJK 优先字体栈、8px 基线网格、对比度 ≥ 4.5、必须使用真实数据。
2. 自动识别 18 种 Code Agent
自动扫描 PATH 上的所有 Code Agent CLI：
- Claude Code / Cursor Agent / OpenAI Codex / Gemini CLI
- GitHub Copilot CLI / OpenCode / Qwen Coder / Aider 等
零配置：直接复用已通过 claude login、cursor login、gemini auth 等登录的会话。现有订阅即可工作，边际成本 $0。
3. 一键发布到多平台
| 目标平台 | 导出方式 |
|---|---|
| 微信公众号 | CSS 全部内联，粘贴直接用 |
| X/微博/小红书 | 自动渲染为 2× 高 DPI PNG |
| 知乎 | LaTeX 公式自动处理成图片占位符 |
| 本地保存 | 单文件 HTML 或高 DPI PNG |
4. 支持多种文件格式上传
.md、.txt、.csv、.tsv、.xlsx、.json、.sql、.yaml、.html、.png、.jpg —— 共 11 种格式。
5. SSE 流式渲染 + 沙箱化预览
- 使用 Server-Sent Events 实时渲染 Agent 输出
- 用户生成的 HTML 运行在隔离的 iframe 沙箱中
快速上手
# 克隆项目
git clone https://github.com/nexu-io/html-anything
# 进入目录
cd html-anything
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev
打开浏览器访问 http://localhost:3000 即可开始使用。
前提：电脑上已安装并登录至少一个 Code Agent CLI（如 Claude Code）。
推荐的 8 个热门 Skill
| 排名 | Skill 名称 | 风格 |
|---|---|---|
| 1 | deck-guizang-editorial | 贵藏编辑风格，杂志 × 电子墨水 |
| 2 | deck-swiss-international | 瑞士国际主义，16 列网格 |
| 3 | doc-kami-parchment | 暖羊皮纸编辑文档，适合长文阅读 |
| 4 | magazine-poster | 报纸风格海报，超大衬线标题 |
| 5 | video-hyperframes | Hyperframes 分镜脚本，可渲染视频 |
| 6 | frame-glitch-title | 故障艺术标题帧，赛博朋克 |
| 7 | vfx-text-cursor | 文字光标特效，电影级开场 |
| 8 | frame-logo-outro | Logo 片尾帧，品牌影片 |
项目信息
| 属性 | 详情 |
|---|---|
| 项目名 | html-anything |
| GitHub | https://github.com/nexu-io/html-anything |
| 团队 | nexu-io（前作 open-design 40K+ Star） |
| 开源天数 | 3 天 |
| 代码量 | 15000 行 |
| Skill 模板 | 75 套 |
| 交付形态 | 9 种 |
| Agent 识别 | 18 种 CLI |
| 文件格式 | 11 种 |
| 技术栈 | pnpm + SSE + iframe sandbox |
| 安装 | pnpm install && pnpm dev |
核心理念
你的 Agent 写代码，你专注内容。
html-anything 把 Markdown 从最终输出降格为写作过程的中间状态，让 HTML 回归它本该有的位置——给人类阅读的最终形态。75 套专业模板、零配置、一键多平台发布，让内容创作的最后一公里变得丝滑。
本文整理自微信公众号「开源星探」，原文链接：https://mp.weixin.qq.com/s/PdnzdlANDDDrMrTMYhahvw