告别 CSS!一个工具让 AI 帮你搞定所有排版

之前写了一篇介绍 OpenDesign 的文章之后，很多读者问：设计师用 AI 生成设计稿，程序员怎么快速把内容变成可交付的 HTML？

今天介绍的工具叫html-anything，来自同一个团队（他们的 open-design 项目 GitHub 40k Star）。核心理念很直接：

Markdown 是写作者的中间态，HTML 才是面向读者的最终产物。

你只需要提供内容，选一个模板，本地 AI 编码代理会自动生成可直接交付的单文件 HTML。

为什么值得看

1. 零 API 成本，复用你已有的 AI 工具

启动时会自动扫描本地环境，识别你已安装的 AI 编码 CLI：

• Claude Code
• Cursor Agent
• Gemini CLI
• GitHub Copilot CLI
• Qwen Coder
• Aider

直接复用你已有的登录态，不需要额外配置 API Key，不需要支付任何费用。

2. 75 个预置技能模板，覆盖 9 种交付场景

每个技能都是独立文件夹，自带示例预览，无需配置：

所有技能内置反 AI 垃圾内容硬约束：CJK 优先字体栈、8px 基线网格、色彩对比度 ≥4.5、禁止占位文本。生成质量有保障。

3. 实时流式渲染，可中途打断

生成过程类似看 AI 实时打字，效果不满意随时按停，不用等完整生成。

4. 一键导出多平台

生成完成直接导出，格式自动适配：

• 微信公众号
  ：CSS 内联，粘贴到公众号编辑器格式完全保留
• X/Twitter、微博、小红书
  ：2 倍高 DPI PNG，截图直接粘贴发布
• 知乎
  ：LaTeX 公式自动转图片占位符
• 通用
  ：下载单文件 HTML（所有资源内联，浏览器直接打开）

怎么用

前置准备

本地提前安装好你使用的 AI 编码 CLI，并完成登录（Claude Code 执行claude login）。

启动命令

git clone https://github.com/nexu-io/html-anythingcd html-anythingpnpm installpnpm -F @html-anything/next dev

启动后打开 http://localhost:3000 即可使用。

使用流程

1. 顶部栏自动识别本地已登录的 AI 代理，随时切换
2. 左侧编辑器粘贴你的内容（支持 Markdown、CSV、JSON、纯文本）
3. 中间面板选择技能模板，可搜索、按场景筛选
4. 按⌘+Enter启动生成，预览窗口实时显示效果
5. 点击导出按钮，选择目标格式

技术细节

项目采用 pnpm workspace 管理，技术栈：

• 前端：Next.js 16 + React 19 + Tailwind v4
• 状态管理：zustand
• 导出：juice（CSS 内联）、modern-screenshot（PNG 导出）
• 安全：iframe 沙箱隔离，dompurify XSS 防护

项目已获得3.1k Star，核心功能稳定可用，后续会持续迭代。

*如果有以下报错提示，删除掉pnpm-workspace.yaml即可：

The local project doesn't define a 'packageManager' field.

适合谁用

• 程序员/开发者
  ：快速生成技术文档、产品介绍
• 自媒体创作者
  ：一键导出适配多平台
• 设计师
  ：用 AI 生成 HTML 原型，节省手写代码时间
• 上班族
  ：周报、月报、数据报告快速生成

最后

写完 Markdown 直接出 HTML，不用再折腾 CSS 和排版。本地运行，数据安全无泄露风险。

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

感兴趣的去试试，有问题可以在评论区聊聊。