58
81
让 AI 把 Markdown 一键变成公众号、小红书、知乎成品排版
2026-07-04 20:11:53
2点赞
20收藏
0评论
一句话定位：Markdown 是草稿，HTML 才是成品。 html-anything 复用你本机已登录的 AI 编程助手，把写完的内容直接变成可发布、可截图、可展示的专业页面。
核心观点
AI 已经能帮你写稿，但「多平台排版交付」往往还是纯体力活
html-anything 把 Agent 能力延伸到「视觉排版执行」，而不是只停在写作环节
它不自动发帖，只负责生成各平台可直接使用的素材（HTML / PNG）
适合已有 Claude Code、Cursor、Codex 等 CLI 环境的内容创作者和技术用户
一、先说结论：它能帮你省掉什么
写文章最怕什么？不是没东西写，而是写完了才发现，排版才是真正的体力活。
平台 常见痛点 公众号 字体、间距、配色来回调，一复制样式就崩 小红书 要另外做卡片、切图、控制尺寸 知乎 公式、代码块、表格得单独处理 多平台分发 同一篇内容几乎等于重排好几遍
html-anything 想解决的，正是这个最后一步：把 Markdown、CSV、JSON、表格甚至纯文本，快速变成能直接发布、能截图、能展示的专业成品页面。
项目信息 说明 项目地址 github.com/nexu-io/html-anything 在线预览 open-design.ai/html-anything/ 开源协议 Apache-2.0 GitHub Stars 7500+（截至 2026-07-03） 开发团队 nexu-io（同团队还有 Open Design 等项目）
二、它到底是什么
截屏2026-07-04 19.32.59.png官方定位是 Agentic HTML 编辑器。说人话就是：
你把内容粘进左侧编辑器
选一个输出场景和 Skill 模板
本机 AI Agent 按模板规则生成 HTML
右侧实时预览，满意后一键导出
它不是「让 AI 随便写一段 HTML」，而是用 75 套 Skill 模板 约束输出风格——字体、间距、层级、配色都有硬规则，尽量避免「一眼 AI、配色辣眼、移动端塌掉」的半成品。
9 类输出场景
截屏2026-07-04 19.34.24.png场景 典型用途 杂志风文章 长文、深度教程、公众号正文 Keynote 演示文稿 周报、方案、分享 PPT 简历 求职、作品集 海报 活动介绍、营销长图 小红书卡片 图文笔记、清单卡片 X（Twitter）卡片 推文配图、观点卡片 Web 原型 产品页、SaaS Landing 数据报告 竞品分析、运营复盘 Hyperframes 视频帧 视频脚本、片头片尾素材
8 种本地 Agent 支持
自动扫描 PATH，复用你已登录的 CLI session，不需要额外申请 API Key：
Claude Code
Cursor Agent
OpenAI Codex
Gemini CLI
GitHub Copilot CLI
OpenCode
Qwen Coder
Aider
说明：「零 API Key」指的是零额外配置成本，实际调用仍走你原本账号的订阅额度，并不是所有 Agent 都免费。
一键导出能力
平台 实现方式 效果 微信公众号 juice 内联 CSS 复制粘贴，样式基本不崩 知乎 内联 CSS + 公式转图占位 公式、代码块更易落地 推特 / 微博 / 小红书 iframe 渲染 2× PNG 直接粘图或拖入编辑器 通用 下载 .html / .png 网页、报告、素材库归档
三、工作流程变了什么
以前的内容交付链路：
写文章 → 手动排版 → 手动截图 → 手动适配各平台
用了 html-anything 之后：
内容输入 → 选模板 → Agent 生成成品 → 多平台导出
flowchart LR
A[Markdown / CSV / JSON] --> B[选 Skill 模板]
B --> C[本机 Agent 生成 HTML]
C --> D[沙箱 iframe 实时预览]
D --> E{满意?}
E -->|否| B
E -->|是| F[导出]
F --> G[公众号 HTML]
F --> H[小红书 PNG]
F --> I[知乎 HTML]
F --> J[独立 HTML / PNG]
几个让我觉得实用的设计点：
流式预览：按
⌘ + Enter后，右侧会一步步渲染 HTML，不满意可以中途打断重来沙箱隔离：生成内容在 iframe 沙箱里运行，不污染宿主页面
格式自动识别：Markdown、CSV、TSV、JSON、SQL、纯文本都能直接粘
反 AI-slop 约束：中文优先字体栈、8px 基线网格、对比度 ≥ 4.5、禁止 lorem ipsum
四、30 秒上手
环境要求
Node.js
pnpm
至少一种已登录的 coding-agent CLI（如
claude login、cursor login）
安装与启动
git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm -F @html-anything/next dev
浏览器打开 http://localhost:3000，操作流程如下：
顶栏选择本机可用的 Agent
左侧粘贴内容
中间挑选 Skill 模板
按
⌘ + Enter（Mac）或Ctrl + Enter（Windows）开始生成预览满意后，复制到公众号 / 知乎，或导出 PNG / HTML
对经常跟命令行打交道的用户，这个流程很轻；完全没碰过终端的小白，第一次配环境还是要花点时间。
五、哪些人用起来最划算
内容创作者：经常发公众号、小红书、知乎、掘金，文章里常有表格、代码、数据、层级结构
运营 / 产品经理：周报、方案、竞品分析、活动介绍，需要「看起来专业」但不想开 Figma
技术博主：代码块、表格、公式转成更适合传播的 HTML 或卡片图
AI 工作流玩家：上游接写作和数据处理，下游直接出各平台素材，整条链路更顺
六、结尾
过去我们总觉得，AI 能写就行了，排版是人的事。
html-anything 这类项目正在打破这个界限：Markdown 是草稿，HTML 才是成品。 它想做、并且已经在做的，就是让 AI 帮你走完从草稿到交付的最后一步。
如果你也经常卡在多平台排版这一步，不妨先去看看在线 Demo，再决定要不要本地跑一套。
项目地址：https://github.com/nexu-io/html-anything
项目主页：https://open-design.ai/html-anything/
作者提示含AI生成内容。
