乐于分享
好东西不私藏

这个开源工具让你的 AI 直接输出漂亮网页,不再只是黑白 Markdown

这个开源工具让你的 AI 直接输出漂亮网页,不再只是黑白 Markdown

喜欢就关注我哦~

75 套模板 + 9 种导出格式,30 秒安装,支持所有主流编程 Agent


你遇到过这种事吗?

用 AI 写了一篇很好的内容,想分享到公众号或者朋友圈。结果 AI 输出的是 Markdown——白底黑字,没有任何排版,截图发出去就像一份草稿。

改格式、调排版、加样式,折腾半天。本来是 AI 帮你省时间,结果又花在了"让内容好看一点"上。

更尴尬的是发给别人看,对方一看就是"AI 生成的那种界面"。

前几天,一个叫 html-anything 的开源项目火了。它解决的问题很简单:让你的 AI 直接输出漂亮网页,而不是丑陋的 Markdown。


为什么需要 html-anything?

Claude Code 的团队之前公开说过,他们内部已经不写 Markdown 了,全改成 HTML。逻辑很简单:

Markdown
HTML
对写的人友好
对看的人友好
排版受限于渲染器
排版完全由你控制
截图发出去像草稿
截图发出去像设计稿
不同平台要重新排版
一键切换格式

说白了,Markdown 是给机器看的中间格式,HTML 才是给人看的最终格式。

html-anything 就是让你用 AI 写一次,直接出 HTML。它内置了 75 套设计模板,覆盖了你日常需要的几乎所有内容类型——杂志文章、幻灯片、简历、海报、小红书卡片、推特长图、数据报告,甚至视频分镜。

html-anything 概览

怎么装?

安装 30 秒搞定。前提是你已经有 Claude Code 或者其他编程 Agent(Cursor、Codex、Gemini CLI 等都支持)。

  • 1
  • 2
  • 3
git clone https://github.com/nexu-io/html-anythingcd html-anythingnpm install

装完之后,在你的 Agent 里告诉它"用 html-anything 帮我生成一个 XX",它会自动检测到已安装的模板。

不需要 API Key,不需要注册账号,本地直接跑。


能做什么?

75 套模板,按场景分类。挑几个最实用的说一下:

做幻灯片:

  • 瑞士国际主义风格:16 列网格 + 克莱因蓝,22 种预设版式。打开就让人觉得"这是设计师做的"
瑞士风格幻灯片
  • 杂志风格:10 种锁定版式 + 宣纸底 + 墨蓝文字,读起来像印刷品

写文章:

  • 和纸暖色风格:米白底色 + 墨蓝标题 + 衬线字体,比纯白 Markdown 舒服很多
和纸暖色文档
  • 新闻海报风格:超大标题 + 双栏正文 + 点阵底色,读起来像印刷报纸

做内容分发:

  • 小红书卡片:一键生成 3:4 竖版卡片
  • 推特卡片:自动适配推特长图尺寸
  • 微信公众号:直接导出可粘贴的格式

做视频:

  • Hyperframes 视频分镜:生成 1920x1080 帧,带时长和转场标记,可以直接扔进 Remotion 渲染 MP4
视频分镜模板
  • 故障艺术标题帧:赛博朋克风格的片头动画

做网页原型:

  • 带交互的网页原型
  • 数据可视化报告

实测体验

我拿手头的一些内容试了一下。

第一次是写一篇技术文章。之前用 Markdown 写完就发,排版全靠公众号编辑器。这次用了和纸暖色模板,效果差距明显——同样的内容,换了 HTML 模板之后看起来像专业发布的内容,不再是"AI 写的草稿"。

第二次是做一张分享到朋友圈的卡片。用的是杂志海报模板,输出了一个带标题、导语、关键词的竖版卡片。以前要用 Canva 手动做,现在一句话生成。

第三次试了瑞士风格的幻灯片。把我的想法写成一个简短的提示词,让 Claude Code 用 deck-swiss-international 模板生成。出来的效果确实有设计感——16 列网格、克莱因蓝点缀、严格的排版层级。发给设计朋友看了一眼,他说"不像 AI 做的"。

第四次试了视频分镜模板。给了一段产品发布文案,选了 video-hyperframes 模板。它给我生成了 8 帧 1920x1080 的画面,每帧标注了转场类型和时长,直接导出扔进 Remotion 就能渲染成 MP4。虽然还需要手动微调,但骨架已经有了,比从零开始快太多。

好的地方:

  • 模板质量确实高。不是随便写写的那种 CSS,是真正有设计系统的模板。瑞士风格那套有 22 种预定义版式,每套都有配色方案
  • 支持 8 种 Agent 自动检测,你用什么它都能认
  • 导出方便。微信公众号、推特、知乎,一键切换格式。还能导出 PNG 和 HTML 文件
  • 本地跑,没有 API Key 要求
  • 三天开发完成、一万五千行代码这个背景故事很有传播力

不够好的地方:

  • 要有编程 Agent(Claude Code 等)才能用,纯网页版用户用不了
  • 部分模板的加载速度稍慢,特别是带复杂动画的
  • 文档目前是英文为主,中文翻译还不够完整

踩过的坑:

  • 第一次用的时候没装好 npm 依赖,生成报错。重新 npm install 就好了
  • 部分模板在移动端显示需要手动调整视口

跟其他方案的区别

方案
设计质量
模板数量
需Agent
免费
html-anything
专业级
75
是
开源免费
Canva
专业级
海量
否
有水印
手动写 HTML
看个人
无
否
免费
Markdown
基础
无
否
免费

如果你是 AI 编程 Agent 的用户,经常需要把内容输出为好看的形式,html-anything 值得装。


适合谁

  • 用 Claude Code / Cursor / Codex 写内容的技术博主
  • 需要频繁做内容卡片的新媒体运营
  • 想做演示文稿但不想打开 PowerPoint 的人
  • 任何想让 AI 输出好看一点的人

不适合谁

  • 没用过编程 Agent,只想打开网页就能用的人
  • 对设计完全没有要求,纯文字就能满足的人

GitHub 仓库:https://github.com/nexu-io/html-anything

如果你有编程 Agent 但还在让它写 Markdown,试试这个。下次直接输出 HTML 文档,跳掉排版那一步。


以上,既然看到这里了,如果觉得不错,随手点个赞、转发吧,如果想第一时间收到推送,也可以加个关注~谢谢你看我的文章,我们,下次再见。

交个朋友

相关学习资料