一键把Markdown、Excel、纯文本等转为漂亮的网页

前段时间，一条推文在 AI 开发圈悄悄传开。

发推的是 Claude Code 团队的一位成员。内容不长，大意是：他们已经全面放弃用 Markdown 写文档，全部切换成 HTML 了。

评论区里有人困惑，有人赞同，也有人直接问：用什么工具？

这个工具，现在有了。

Markdown 到底哪里不够好

在回答"什么是 html-anything"之前，值得先想清楚这个问题。

Markdown 诞生的年代，写文档的人和读文档的人基本都是开发者。大家对着同一个 README.md 的渲染结果，几乎不在乎排版好不好看，能把意思讲清楚就行。

但现在的情况不一样了。

一份 AI 生成的调研报告，可能要发给不懂技术的产品经理；一篇公众号文章，需要在手机、平板上都好看；一个数据分析结果，截图出来发到推特上，结果因为排版太丑没人愿意转发。

Markdown 的问题，从来不是它写起来麻烦，而是它的最终产物不是给读者看的，是给作者自己看的。渲染成什么样，完全取决于平台的主题；截图发出去，文字就变成一堆普通图片；发到公众号，格式八成要重排一遍。

HTML 才是真正的最终态。它可以精确控制字体、颜色、间距、网格，生成的东西就是读者实际看到的东西，不依赖任何平台主题。

问题是，大多数人不会写 CSS。

这就是 html-anything 试图解决的事情。

它是什么

html-anything 是一个运行在本地的 Agent 时代 HTML 编辑器，来自 Open Design 团队（之前介绍过：）。

核心思路很简单：你把任何格式的内容丢进去——Markdown、CSV、Excel、JSON、SQL、纯文本草稿——选一个模板，按下 ⌘+Enter，让本地的 AI 编程智能体（Claude Code、Codex、OpenCode、Gemini CLI 等）直接生成一份可交付的 HTML，然后一键发布到公众号、推特、知乎，或者下载成 .html 和 .png。

重点在"可交付"这三个字：生成完就是读者看到的样子，不需要再调。

零 API Key，复用你已经在终端登录好的 Claude/Cursor/Codex 等 session，从订阅维度看边际成本是 0。

30 秒装好，马上能用

克隆、装依赖、启动，三步搞定：

git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm dev
# -> http://localhost:3000

打开浏览器之后，顶栏会自动扫描你电脑上已经安装并登录的本地编码代理 CLI。它不只扫 $PATH 里的标准路径，还会额外检查 ~/.local/bin、~/.bun/bin、/opt/homebrew/bin、~/.npm-global/bin——这几个路径在 GUI 启动的终端里经常被忽略。检测到什么就显示什么，没有的不显示，不需要你手动配置。

主界面长什么样

左侧是内容输入区，粘 Markdown、CSV、JSON 都行，浏览器端直接解析，内容不上传到任何服务器。中间是模板选择区。右侧是 iframe 实时预览，agent 写一行 HTML，右边就刷新一行——那种体验，有点像坐在旁边看人现场写代码。

75 套模板，覆盖 9 种场景

这是这个项目里含金量最高的部分。

75 套 Skill 模板按两个维度组织：模式（mode） 和 场景（scenario）。

模式分六类：

• prototype：Web 产品原型、SaaS Landing Page、Dashboard、数据报告、简历、技术文档

• deck：20 套 PPT 风格模板，涵盖各种设计语言

• frame：10 套 Hyperframes 视频帧脚本

• social：X / 小红书 / Spotify / Reddit 分享卡

• office：PM 规格书、工程 Runbook、财务报告、HR Onboarding、OKR、周报、会议纪要

• doc：长报告、读书笔记、one-pager

每套模板都是一个文件夹，包含 SKILL.md（带硬约束的系统提示词）、example.html（不启服务直接双击就能看效果）、以及可选的参考资产。想自己加模板？直接 fork 一个文件夹改 frontmatter，重启 dev server 就出现在 picker 里。

几套值得重点看的模板

deck-guizang-editorial（编辑墨水 PPT）

这套模板来自 op7418 的 guizang-ppt-skill，10 套版面 × 5 套调色板（墨水、靛蓝瓷、森林墨、牛皮纸、沙丘），打开来像一本印刷好的电子杂志，不是 PPT。

deck-swiss-international（瑞士国际主义）

16 列网格 + 单一饱和 Accent（Klein Blue / Lemon / Mint / Safety Orange），22 套锁死版面。开会发出去，对面会觉得"这一定是设计师做的"。

magazine-poster（报纸风长图海报）

巨字 Serif Headline + 双栏正文 + Cream 纸感底色，打开来像一份印好的 Sunday paper。特别适合做小红书封面或者微信图文配图。

doc-kami-parchment（暖羊皮纸文档）

灵感来自 tw93/kami，#f5f4ed 底色 + 单一衬线字体，读书笔记、研究报告、简历套上去都好看，比纯白 Markdown 高了一个档次。

流式渲染：看着 AI 现场画

这是使用过程里最直观的体验差异。

按下 ⌘+Enter 之后，server 通过 SSE 连接把 agent 的 stdout JSON-line 流式抽出文本，实时推到浏览器，append 进 iframe 的 srcdoc 里。右侧预览是一段一段刷新的，不是等全部生成完再显示。

这意味着：如果方向跑偏了，中途打断、换个措辞重发，不需要等一整次生成浪费掉。对于用 Claude Code 订阅的人来说，这个交互细节还挺重要。

Deck 模式：AI 驱动的 PPT

20 套 PPT Skill，用左右方向键翻页，支持演讲者备注和打印 PDF。不需要 PowerPoint，不需要 Keynote，生成的就是可以直接放映的 HTML。

对于经常要做汇报的人来说，这个场景的体验提升是最明显的：在终端贴一段会议纪要，指定一套设计风格，出来就是一份格式统一的 Deck，不用对着模板一页一页填。

Hyperframes：视频脚本一步到位

这个功能相对小众，但对做视频内容的人来说很有用。

html-anything 提供了 10 套 Hyperframes 帧脚本模板（液态背景 Hero、NYT 数据图表、像素故障标题、电影漏光、macOS 通知弹窗、品牌 Logo 片尾等），生成的 HTML 符合 heygen-com/hyperframes 规范，可以直接交给 Remotion 渲染成 .mp4。

换句话说，输入文案，出来就是可以直接渲染的视频脚本帧序列。

一键发布，0 二次排版

发布是这个工具真正省时间的地方。

目标平台	实现方式	粘贴效果
微信公众号	`juice` 内联 CSS + `data-tool` 标记	直接粘进编辑器，样式不丢
知乎	同上 + LaTeX 公式转图占位	公式自动渲染
推特 / 微博 / 小红书	`modern-screenshot` 渲染 2× PNG -> ClipboardItem	直接粘到发布框
下载 `.html`	单文件自包含	双击打开，任意分享
下载 `.png`	高 DPI 截图	直接上传图床

微信公众号那个特别值得说一下。通常把带 CSS 的 HTML 粘进公众号编辑器，样式会全部丢失，因为公众号不支持 <style> 块，只认 inline style。html-anything 在导出时会用 juice 把所有 CSS 展开内联进每一个元素，粘贴进去之后格式是完整保留的。

技术架构简图

如果你想知道这东西底层是怎么跑的，架构很清晰：

浏览器（Next.js 16）
    |
    +-- GET /api/agents   -> 扫 PATH，检测可用 CLI
    |
    +-- POST /api/convert -> SSE 流式，spawn 本地 agent
                                |
                                v
                    你本地的 claude / codex / cursor-agent /
                    gemini / copilot / opencode / qwen / aider
                    （复用你已登录的 session）
                                |
                    stdout JSON-line -> SSE event
                                |
                    iframe srcdoc append（实时刷新）

8 个 CLI 各有一个轻量 adapter，统一在 src/lib/agents/argv.ts 里维护。识别层和执行层分开，server route 统一管 spawn，业务代码不直接触碰子进程。

技术栈：Next.js 16 + React 19 + Tailwind v4 + zustand，preview 走 iframe[sandbox="allow-scripts allow-same-origin"] 隔离，用户生成的 HTML 不会污染宿主页面。

模板里的反 AI 设计约束

这个细节值得单独拿出来说，因为它解释了为什么这里生成的 HTML 看起来"不那么 AI"。

每个 SKILL.md 里都硬编码了一批设计约束：

• 中文优先字体栈：Noto Sans/Serif SC / 思源黑体，英文用 Inter / Manrope

• 8px 基线网格：所有间距、行高、字号必须是 8 的倍数

• 不用纯黑纯白，圆角和投影有明确规范

• 颜色对比度 ≥ 4.5，重要交互必须有 :focus 态

• 禁止 lorem ipsum，必须使用用户提供的真实数据

这些约束不是建议，是 prompt 的一部分，AI 在生成时必须遵守。出来的结果不是"AI 风格"，是设计师会有的那种克制感。

当前状态和路线图

项目目前处于"早期但能用"的阶段。核心闭环——识别 agent -> 选 Skill -> SSE 流式渲染 -> sandboxed iframe 预览 -> 一键导出——已经稳定跑通，8 个 CLI 全部支持。

进行中的功能：
- 多模板对比预览（同一份内容生成 4 张候选，选最好的）
- Hyperframes -> .mp4，一键交给 Remotion 渲染视频

计划中的：
- 浏览器扩展（选中网页内容 -> 一键转模板）
- 历史记录 / 版本对比 / IndexedDB 存档
- Skill 市场（社区贡献模板，install <github-repo> 安装）
- 更多平台：微信视频号、抖音字幕、Notion、Telegraph

项目地址：https://github.com/nexu-io/html-anything